 |
トーンを決めよう |
|
トーンとはサイト全体の雰囲気やカラーなどを決めることです。これは一見さんが始めてサイトを訪れたときの、あなたのサイトを見て感じる第一印象に大きく作用してきます。
暗めの色にするのか、明るめの色にするのか、ポップにするのかヘビーな感じにするのか、かわいらしくするのか大人っぽくするのか、そのあたりです。
| イメージがちぐはぐな例
|
| なぜかとってもファンシーな「神々の黄昏」トップページ。血しぶき血まみれ大爆発！ な小説内容とのギャップに驚く人もいるのではないでしょうか。フォントもかわいい丸ゴシック系などを使っているので、このデザインから受ける小説のイメージは「ほんわかSFファンタジー」といったところでしょうか |
 |
ビミョーに和風にしてみたり。「神々の黄昏」は和風ファンタジーではないので、色味やフォントから受ける「和風」の印象は似合わないという結論に達します
|
これはあなたの小説のイメージに合わせた方がいいのではと私は思います。例えば私の作品「神々の黄昏」は、現在連載中の超長編（笑）SFファンタジー小説です。内容は話が続くに連れてどんどんヘビーになってきており、ひと言で言えば「暗い話」。「黄昏」という言葉からイメージできるとおり、「夕焼け」とか「黄金期の終わり」のようなイメージが合うのではと思い、「ヘビーでダーク、でも目に優しい、アクセントにきれいな画像を使う、フォントは毛筆書体系や太ゴシック、半古書体系などを使う」という感じでイメージを作るように心がけています。
このトーンの作業が重要である、というのは、あとでお話する「ユーザーエクスペリエンス」にも大いに関係します。つまりここで意識することは、人間が持っている「言葉に対する印象を裏切ってはいけない」ということです。
例えば「神々の黄昏」のトップページが「ものすごくポップでかわいらしい書き文字風のタイトルがついていて、二頭身キャラのコミカルなアイコンがついているとってもかわゆいページ」だったりすると、本文を読んだときのギャップに驚かれること請け合い（笑）。見た感じ「『神々の黄昏』はギャグテイストの短編小説なのかしら」と思うからですね。あるいは近未来風のサイバーパンクっぽいメカメカしいアイコンやら画像やらが貼ってあり、タイトル画像にメカニカルなフォントが使われていたら、「『神々の黄昏』は超ハードなSFなのね」と思われることでしょう（まぁSFでもあるんですけど）。
これは作者である私、樋渡ゆうぞーの意図した作品のイメージではありません。多少ハッタリをきかせるくらいの心づもりで、小説の世界観をアピールできるトーンにしたほうが絶対いいでしょう。
トーンを決めるということは、作品のイメージを壊さないこと。作品のイメージにあった色や画像を使うということです。前の章でラフを作り必要な素材を集めてきましたが、それが自分の考えているサイトや小説のイメージに合っているかどうか、ここでもう一度吟味する作業に入るわけです。
 |
| フォント選びもトーンを決める重要な要素のひとつ。左図はMacintosh用のフリーソフトで「FontsViewer」という、マシンにインストールされている全フォントの書体を一覧できるもの。ロゴ作りやメニュー作りに役立つので、ぜひこうしたソフトを活用してじっくりフォントを吟味してください |
小説という売り物を持っているサイトは、このトーンの整理がずっと簡単です。逆に企業のサイトなんかを作る場合のほうが難しいんですよ。コーポレートカラーとかを含めたCI（コーポレートアイデンティティー）が決まっていればいいのですけど、作りたいと思っているほう（つまりクライアント側ですね）がなんにもイメージをしていないことが多いので、とても作りにくいです。作る側まかせなんですね(^ ^;;。書籍や雑誌とおんなじことですが、なにが売り物か、なにを中心に魅せたいと思っているのか、それがまとまらないとWebは作りにくいんです。
トーンが決まったら次は具体的な色の選び方です。基本的にここで決めることは背景色と文字色、アクセント色です。
私はテーマカラー＝背景色のつもりで考えるようにしています。もしくはテーマカラー＝アクセント色。このテーマカラーは前にお話ししたトーンを決める作業で決めるようにしています。
私のサイトは「黄昏」という言葉のイメージを中心にして、紫系統、オレンジ系統、茶系統、グリーン系統、ブルー系統などなどをこれまで使ってきました。紫はいうまでもなく黄昏時の空の色、オレンジは太陽の色、茶色は黄昏時の空や大地の色、グリーンは大陸の色、ブルーは海の色、といった具合ですね（参考までに、こちらにこれまでのサイト模様替え遍歴があります）。
決まったら、あとはそれに合わせてテキストやリンクの色、アクセントの色、アクセントに使う画像の色などを決めていきましょう。
Back<< |
トップページへ |
>>Next
|
