HTMLやデザインの知識が無くとも、ソフトを使うことでWeb技術を個人でも使いこなせるようになってきた。「LiVE For WebLiFE*」もそんなソフトの一つで、筆者も実際にスライド型のWebサイトを作ってみた（参照）が、プロの方とは出来上がりの見た目が異なるのも事実。Webサイトを作った経験のある人はわかるだろうが、Webデザインはとても難しい。時間をかけて取り組んでみたものの、イメージしていたものとはまったく別物に。ムシャクシャしながら途方に暮れてしまう。何が違うのだろうか？

デザインを生業としている方々、つまりプロの方々はこれらを法則として、もしくは体感として理解している。「The Non-Designer's Design Book」の著者Robin Williams氏もそんな一人だ。Webデザインに特化した本ではないが、タイトルそのままに初心者にもわかりやすく大きく４つのデザインの原理を示している。"コントラスト"、"反復"、"整列"、"近接"。抽象的な概念だが、それだけにデザインというものが難しいのだと気付かされる。検索すると様々なデザインの法則が出てくるが、言葉は違えどこのような抽象的な概念を用いることで、個別のケースにあてはまる法則を見出している。同書に限らず、デザインの規則は面白いものだなあと思う次第である。

「LiVE For WebLiFE*」は、プロの方があらかじめ制作したサイトテンプレートを利用できるので、纏まったWebサイト構築の指南役としても有用だ。しかし、突き詰めて使っていくとデザインやレイアウトのカスタマイズがしたくなってくる場合もある。画像や写真をふんだんに使ってWebサイトを作成したけれども、デザインを考えはじめた途端にサイトの仕上がりにまだ満足していない、なんて人も多いだろう。今回はそういった、満足できない原因の何点かをいくつかの法則に則ってピックアップしてみた。

フォントでさらにもう一つレベルの高いサイトを目指す

まず、Webサイトを見て一番目に付くのは、ロゴやフォントなどメッセージが直接文章で伝わる部分。この部分に関しては重要なので念入りにロゴを作成している人も多いはず。しかし、それ以外の見出しや本文のフォントはどうだろうか？Webに限らず、雑誌、新聞などにおいてもデザイン上フォントは重要な要素だ。フォントがWebデザインにどれだけ影響をあたえるのだろうか。

フォントの種類を統一する

フォントはそれ自体が大きなデザイン的要素をもっている。フォントの違いで文章のクオリティや読み安さが変わるのはよく聞く話だ。雑誌や新聞など紙の世界では、自由にデザインされたフォントを使えるが、やはり統一され、洗練された印象を受ける。

Webでは、日本語に限れば明朝体やゴシック体が一般的だが、フォントをバラバラに指定してみるとこの統一の重要性がよくわかる。本文内で阻害しデザイン的な調和が乱れる。図1では、タイトルのフォント、リードのフォント、サイドメニューのフォント、本文の見出しのフォントがバラバラに設定されている。乱雑な印象を受ける。

図1　使用されているフォントがバラバラ

フォントをゴシック体に統一してみたのが図2だ。作例自体の善し悪しはさておいて、全体的に統一感が出てきたのがわかる。ここでは日本語で試してみたが、ロゴやアイキャッチを狙うポイントでは、英文を使うことも多い。英文で試してみても、違った感覚を味わえるだろう。

図2　使用するフォントをゴシック体に統一

タイトルに使うフォントは特に注意！必要ならテキストを画像化してみよう

タイトル文字は、Webサイトの顔といってもいい。雰囲気やメッセージを伝えやすいのもロゴ。それ故にデザインには、こだわりたい。この場合、使用できるフォントや加工に制限のあるWebフォントより、さまざまな種類のフォントを選択できる画像化については十分検討するに値する。自分でいろいろ試してしっくりいかないと思ったら画像作成ソフトなどで加工したものを使用しよう。図3は、ゴシック体のタイトルをCSSなどで工夫してロゴ調にしたものロゴ調にしたもの。

図3　WebフォントとCSSでロゴ化

図4はソフトを利用してタイトルを作り替えたもの。こちらの方がシックリくるように思う。

図4　SiGN Proを使ってタイトルをロゴ化

LiVE For WebLiFE*には、デザイナーのような画像パーツがテンプレートを使って簡単に作り出せる「SiGN Pro」（サインプロ）が同梱されている。ロゴももちろん作ることが可能だ。またフォントが55種類(日本文・欧文)収録されており、エフェクトも充実している。これらのフォントを利用して、ロゴや見出しなどのアイキャッチを作り込むとWebサイトの雰囲気に大きく効果を出せるだろう。