実践! WEBビジュアルデザイン 第8回「優れたデザインに最適化していくワザ（後編）」
実践! WEBビジュアルデザイン 第8回「優れたデザインに最適化していくワザ（後編）」
2011年2月10日
TEXT：文＝田口 亮（（株）フォーデジット）
Webデザインに必要な知識や考え方は、普遍的なものもあれば、案件やクライアントによって変化する部分もある。PCやネットの技術やトレンドの変化によっても変わっていく。そのような知識や考え方、取り組み方を学び、考えるうえで大事なことは、現場で役に立つ、実践的でリアルな知識を得ることだ。
そこで本連載では、Webデザインの現場で役に立つ、実践的なWebビジュアルデザインのトピックや考え方、取り組み方について考えていく。
※本記事は「WEBビジュアルデザインの現場 第7回 優れたデザインに最適化していくワザ（前編）」のつづきになります。前編をお読みでない方は前編からお読みください。
■問題解決をすべき場所はどこ？
デザインを制作する中で、ブラッシュアップしていく方法としてはどんなものがあるだろうか。また、もっとよいデザインに変えていくためにはどのようなアプローチがあるだろうか。前回は課題抽出についてだったが、今回はデザインをブラッシュアップする方法論を考察しよう。
Webデザインを包括的にとらえると、「よくないところ」というのは見た目だけではなく、ユーザビリティや情報設計、インタラクションデザインなどの機能的な部分にも及ぶ。またこれらは第4回「戦略からビジュアルに落とし込む（後編）」で取り上げたように、視覚化の前段階で策定されるものだが、ビジュアルとして表現されたときに初めて問題が明らかになる場合が多い。
まずは、どこにどういった問題点があるのかを理解する必要がある。ビジュアルで解決すべき問題か、それとも前段の設計段階で解決すべき問題なのかなどである。闇雲に見た目だけを変えてもすべてのバランスを壊してしまうことにもなりかねない。そうなると、こっちを取ったらあっちが壊れる、といういわゆるデザイン的な「デグレ」（デグレード。品質が以前より悪くなること）の危険性が伴う。システム開発では一般的な「デグレ」だが、デザイン開発の現場では明確な言葉になっていない。まずは、変えるべきところ、守るべきところ、をきちんと整理して修正作業を明確にしよう。
■デザインの要素
ビジュアルデザインは「レイアウト」「カラースキム」「フォント」「テクスチャ」「エレメント」「写真・動画」に分類され、これらを適切なバランスで落とし込む作業だ。サイトのゴールに少しでも近づけるため、第7回「優れたデザインに最適化していくワザ（前編）」で紹介した「気付き」を解消してブラッシュアップする方法を紹介する。
■レイアウト
レイアウトのバランスが悪いとなるとサイト全体がごちゃごちゃしたり、逆に寂しく見えたり、インパクトに欠けるデザインになっていたりすることがある。全体のレイアウトは初期段階で策定されるのでブラッシュアップのときには、それぞれのマージンが十分に取れているか、または取りすぎていないか、機能や意味合いの整合性が取れているかを詰めていく。細かいマージンを調整したりツラを揃えたりすると、グッと整理されたように見えたり、全体がスッキリすることがある。
【1】各マージンは細部まで詰めておこう
■カラースキム
色もサイトの印象をかなり左右する。一般的にはメインとなる色を決めて補色やアクセントカラーを決めていくことが多い。策定時には、ゴールとなる印象やボタンなどの役割に応じてルールを決めていくが、機能に対して明確なルール付けがなされているか、適切な分配になっているかを確認する。彩度や明度を揃えたりして色味を整理していくのもよい。時にはそもそもの配色を見直すこともある。配色は好みに寄りがちになるので、「Adobe kuler」や「ColorBlender」などで印象にあったカラースキムを参考にするのも手だ。ターゲットによってはCUDへの対応なども検討される。
【2】Adobe kulerなどは特別な知識がなくても扱える
■フォント
文字のルールも見直そう。フォントの種類が増えるとサイトに統一感が欠けてしまうことが多い。Webサイトはユーザーの環境によってデフォルトテキストが違うので、それも考慮しつつシンプルなルールを心がけるとデザインもまとまってくる。また、フォントによってはディスプレイ上できれいに表現されないものもあるので、細かいウェイトをアンチエイリアスで調整するのもブラッシュアップするためのポイントだ。
【3】ロゴの書体が影響することも多い
■エレメント
おざなりなエレメントを使用するとデザインの質が落ちてしまう。エレメントを使用する以上、世界観を演出するためのつくり込みには気を配る必要がある。質感を上げるために、グラデーションの使い方、光源やシャドウの落とし方などは特に注意しよう。素材サイトなどからのスタイルのコピー＆ペーストで“それっぽい”表現がお手軽にできてしまうからこそ、寄せ集め的な世界にならないように調整が必要だ。
【4】積極的な装飾がなくてもボタン類のつくり込みによって差が出る
■写真・動画
写真をブラッシュアップするためには、写真自体のトリミング・補正（色・コントラスト）を調整する。文字を見るよりも写真を見る傾向にあり、視線を運ぶポイントとして写真や動画はかなり大きな役割を果たす。見られるだけでなく情報量が多いので、多くの意味を伝えることができる。写真が有効に機能しているか、よく見えるかどうか、少しでも質を上げれば、最終の仕上がりがよくなるはずだ。
デザインをブラッシュアップする方法は上記がすべてではないが、細部にフォーカスして詰めていく作業はクリエイターであれば必ずやらなければならない手順だ。自分のデザインをよくするための基準をどんどん上げて、そのオペレーションの質やスピードを上げていくことが、デザイナーとして重要になってくる。日々の中では、目の前のデザインを倒すことが目的になってしまうこともあるが、前編と合わせてデザイン作業のプロセスに組み込んで見てほしい。
■デザイン現場の目線で“リアルに語る”実践! WEBビジュアルデザイン バックナンバー
>>> まとめページはこちらから！
第1回「デザインプロセスの落とし穴（前編）」
第2回「デザインプロセスの落とし穴（後編）」
第3回「戦略からビジュアルに落とし込む（前編）」
第4回「戦略からビジュアルに落とし込む（後編）」
第5回「デザインはなぜひっくり返るのか（前編）」
第6回「デザインはなぜひっくり返るのか（後編）」
第7回「優れたデザインに最適化していくワザ（前編）」
FOURDIGIT Inc.
期待以上の結果を継続的にご提供することが FOURDIGIT Inc. のミッションです。数多くのプロジェクトで培った戦略への理解力、デザイン、技術力は多数の企業様に評価をいただいております。
【MdN Design Interactiveからのお知らせ】
MdN Design Interactiveが運営するデザイナーやWebデザイナーなど、クリエイティブ業界に特化した求人サービス【MdNの求人情報】では、2011年3月31日まで「クリエイター向け人材派遣・紹介会社登録者募集キャンペーン」を開催中です。人材派遣・紹介会社限定で、掲載料金が“最大60％OFF”になる、たいへんお得なキャンペーンです。ぜひご利用ください。
→【MdNの求人情報】はこちら!