
デザイン案の見方が変わる|「WebデザインプロセスBook」で学ぶ実践ノウハウ
自社のホームページをリニューアルするプロジェクトが始まり、デザイナーから提案されたデザイン案をどのように評価すればよいのか悩んでいました。これまで何となくデザインを見て判断してきたのですが、それでは良い結果に結びつかないのではと感じ、本屋でたまたま見つけたのが「WebデザインプロセスBook」でした。
この本を読んでみて、この本の魅力は、完成されたデザインだけでなく、改善前の状態やどのように修正が加えられたのか、具体的なプロセスが詳細に記されている点です。特に、ワイヤーフレームから実際のデザインへの変遷や、指摘と改善の繰り返しがわかりやすく、非常に参考になりました。これからのホームページ制作に役立つポイントが詰まった一冊です。
1.気になるチェックポイント|細部の改善で差をつける
本書を読みながら、なるほどこういう点に注意して変えていくのか、ということでなるほどと思った変更点やテクニックを例で挙げてみたいと思います。
仕上げていく過程でのチェックは、細かいなと思いながらも、神は細部に宿る、の通りに小さな改善の積み上げが大事なのだと思いました。
本書には、もっといろいろな細かい改善の工夫が書いてあります。
2.デザイン変更例|実例で見る改善の具体策
具体的な変更例について挙げてみました。備忘録的な内容ですが、今検討しているホームページのデザインについても言えることかなと思いながら、列挙してみました。
・テキストがすべて明朝体であるために硬く感じられてしまう。
→ ゴシック体を基本として、強調したい部分だけ明朝体にする。
・重要な点が流し見されてしまいそう
→ 重要な点にはアイキャッチになる数字を追加、重要な点を説明した枠を少しだけずらして段差を設けることで視線誘導の効果をつける。さらに文字だけでは味気ないので写真をアイキャッチ的に配置する。
・ゴールにつながるボタン(お問い合わせなど)に空白が多く、フッター部分にベタ塗りで重く、間延び感がある。
→ 背景を入れることで、ボタンが配置されたセクションを他の部分と差別化して、フッター部分の余白調整をして、間延び感をなくす。
・横組みと横位置の写真を並べたレイアウトが続き単調な印象がある。
→ 背景にあしらいを追加し、横組みの中に、部分的に縦組みを入れることでアクセントをつける。
・上下のコンテンツの縦の配置がずれる、ボタンが一部だけ背景からはみ出ていて、まとまりがない。
→ 揃えることによって、安定感を生み出す。
・曲線と角張ったあしらいが混在していて、ちぐはぐな印象を与える。またカラーが同系色にまとまりすぎている。
→ 背景ああしらいを曲線や丸みのある形に変更して、統一感を演出する。カラーにはアクセントカラーを追加して明るさとリズムを生み出す。
・写真の上に、アイコン+ボタンを用意しているが背景写真のコントラストが強く、本来見せたい部分のノイズになっている。
→ 写真に半透明な黒を乗せることで色味を抑え、視認スピードをアップさせる。さらにアイコンは塗りにすることで、見やすくする。
・ベタ塗りの背景が続き、重く見える。
→ ベタ塗りをやめて、写真をボタンの背景に入れる。
・「よくある質問」の部分が、ワイヤーフレームのままのデザインである。
→ 見出しとコンテンツを横並びにして変化を加えつつ、あしらいのイラストを追加する。
・白い透過をのせた背景画像だと白い文字が読みにくい。
→ 黒の透過を背景画像に乗せることで、背景が引き締まり、文字が読みやすくなる。
・人物がコンテンツの外向きになっている。
→ 話題とは違う方を向いていることとなり、違和感を覚えてしまうことから、内向きになるように画像を調整する。ただし、単純に左右反転させることは要注意。(男女でボタンのかけ方が違うなど)
3.デザインのテクニック|プロの現場で活きるアイデア
変更例ではないのですが、経験から出ていると思われる様々なテクニックも挙げられています。ちょっと紹介します。
・写真やイラストをわざと下のセクションにはみ出したり重ねたりすることで、次のセクションへの視線誘導効果を狙う。
・ボタン内の矢印(>)は大きめの丸で囲むとリンクであることをパッと見て分かりやすい。電話番号も電話番号アイコンをつけると、電話番号であることを認識しやすくなる。
・ボタンのデザインはできるだけ統一する。(ボタンの角あり、角丸、色、影の付け方など)
4.おわりに|本書を活かしてホームページをさらに良いものに
「WebデザインプロセスBook」は、デザイン案をどのように評価し、どこに注意して改善を進めれば良いのかを具体的に学べる実践的な本でした。デザインの細部に宿る改善の積み重ねが、最終的な完成度を大きく左右することを改めて実感しました。
自社のホームページ改善に向けて、この本で得た知識やテクニックを活かしていきたいと思います。デザインに携わる方だけでなく、クライアント側の立場でデザイン案を見る方にもおすすめの一冊だと思います。
惜しみなく、Webデザイン制作での経験を本にまとめてくれた著者には、感謝しています。早速活用させてもらいます。