こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。
この記事は
「Webサイトのデザインから実装までやってみた-要望ヒアリング編-」
「Webサイトのデザインから実装までやってみた-ワイヤーフレームとデザイン、コーディング編-」
の続きです。
「いちばんよくわかるWebデザインの基本」を参考に進めています。
「なぜそのデザインにしたのか」を回答できるか
すべてのデザインは、なぜそのデザインにしたのか適切に回答できなければならない。
というようなことが本書に書かれています。というのも、例えばクライアントから「サイトのヘッダの色を何故赤にしたの？」などと聞かれたときに説明できなければなりません。しっかりとした理由があってこうなりました、なんとなくこの色にしたわけではありません、と言えるくらい作るサイトについて考える必要があります。
デザインの理由をすべて説明できるかどうかが素人とプロの大きな違いなのかな、と思いました。
この本を読むまで、なんとなくこういった色合い、印象がいいだろうという素人の作りをしていました。（※ただしプロが描いてくれたヘッダ画像を除く）
何故このボタンを青くしたのか、何故ヘッダがこの作りなのか、何故この位置なのか、なぜなぜなぜ…
答えられるものもありますが、答えられない、「なんとなくです」の回答になるものがほとんどでした。
サイトは誰に見せるためのものなのか。本サイトでは要望ヒアリングで設定したターゲット
- 同じプログラムを扱う人（20～50代の男女）
- 同業者、開発人員を探している人（20～50代の男女）
- 同じ子育て中の父母（20～30代の主に女性）
に見せたいと思っています。
社内でレビューを受けたときに指摘されるだろうことを想定した質問に回答する。
自問自答ではありますが、書き出してみました。できたデザインを元にレビューをしてみました。
本サイトがこのデザインになった理由
全てではありませんが、質問とその回答の一例を掲載します。
メイン背景（body）要素が薄オレンジの理由
当初は全面白の予定で組んでいたが、そうするとメリハリがなくそれぞれの記事カードや記事の内容がぼやけてしまうため、メリハリをつけるために基本背景は薄いオレンジ系統色とした。
ヘッダ部分が茶色の理由
ヘッダ画像がメインオレンジ、茶色でまとめているため
メインカラー白、本文のアクセントカラーがオレンジ、その他領域アクセントカラーが茶色、ポイントカラー青のため
ノート風の落ち着いた印象にしたいため
グロナビがヘッダ画像の上の理由
記事本文を見るときに邪魔にならないようにした。
サイトを見に来る人はほとんどが記事を読みに訪れるので、それの邪魔になるものは除外したかったが、しかし何もないとどこに移動できるかがわからないためページ上部に設置した。
ヘッダ部分に検索がある理由
玄人以外検索機能はあまり使われないが、サイト内を検索したいときはすぐに使用できるように配置した。
サイドバーはトップページ、問い合わせページなど特定のページにはないため、常時使用できるようにしておくにはヘッダが最適と考えた。
メインが記事カードの理由
「この記事はこれです」というインパクトを出すため。
新着記事は幅100%、以降の記事は3記事ずつ（スマホ版は1記事ずつ、配置が違う）にしてより目立たせるようにした。
カテゴリアイコンがオレンジの理由
文章とは別だと示したかった。
アイコン表示の方が「このテーマで書いているよ」という印象を与えやすいと考えたから。
フッタが茶色の理由
ヘッダと同じ。ヘッダに色を合わせた。
投稿ページの目次色を変えた理由
従来は緑を使用していたが、カラーバリエーションが多くなってしまうこと、定めた色に合わないことから、本文のアクセントカラーをオレンジにあわせた。
SNSボタン配置、大きさ変更の理由
従来は記事上に置いていたが、記事も読まないでシェアしようと思う人はいないだろうと考えたので、記事の下に置くようにした。
従来の大きさは「シェアしてください！」とアピールしすぎていると感じたので、控えめになる大きさとした。
関連記事設置の理由
サイトの回遊率をあげるため、読んだ記事と同じカテゴリの記事を3つ選んで表示するようにした。調べているときに同じ関連があるかもしれない記事が表示されているとその先へ進みやすい。
前の記事、次の記事の表示変更理由
サイト回遊率アップのため。「画像があった方がイメージがわき、クリックされやすい」ことを利用し、こちらもアイキャッチ画像とタイトルを表示する方式に変更した。
サイドバーをカード式にした理由
当初はサイドバー領域の背景を白にし、一柱にしようかと考えていたが、記事カード同様メリハリがなく単一になり見辛い印象を与えたこと、各sectionは同内容の記事ではないので投稿エリアと分けようと考えたので、各sectionごとにカード化表示とした。
固定ページと投稿ページのサイドバーの内容が異なる理由
固定ページは「執筆している人に興味がある」場合にアクセスする内容のものが多いので（プロフィール、料金表）、興味を持ってくれている人向けに順序を変更した。カテゴリ記事や新着記事は固定ページを見ている人にはそれほど重要ではない情報だろうと判断し、最下部配置とした。
それに対し、投稿ページは「記事を見に来ている人」のため、カテゴリ別や新着記事を上に配置した。
固定ページにサイドバーを追加した理由
従来は固定ページにサイドバーを置いていなかったが、固定ページからでもサイト回遊率を上げるため、その他情報としてサイドバーを設置した。
カテゴリー一覧、投稿一覧のデザイン変更理由
従来は1記事幅100%、本文の内容を一部表示するようにしていたが、実際アクセスする場合は本文はほぼ読まれていないだろうこと、トップページの記事カードと見た目を合わせた方がよりなじみやすくなると考えたため、トップページ同様の記事カード方式（1行3枚）にした。
カテゴリー一覧、投稿一覧の表示件数が30件の理由
15件の場合、PC版のサイドバーの長さと不釣り合いになるため、そうならないようにしたかったため、切りよく30件とした。24件だと表示件数のキリが悪く、60件は多すぎる。
また、記事を探しているときにたくさんページをめくる必要がないようにするため、現状のサイト記事数も考慮して決定した。
サイトマップデザイン変更の理由
従来は記事タイトルに枠と背景色があったが、そこまでデコレーションするものでもないし文字が見辛い側面もあったため、投稿記事などと同様、本文領域のメインカラーオレンジの下線を引く程度にとどめるようにした。
お問い合わせ送信ボタン変更の理由
従来は緑だったが、メインカラーとの対比でよりボタンを目立たせるため、補色の青を採用した。
検索画面のボタン変更の理由
従来は緑だったが、お問い合わせ送信ボタン変更理由と同様、ボタンを目立たせるために補色の青を採用した。
ヘッダの検索ボタンは茶色だが、これは特に目立たせる必要もなく、また他のヘッダの要素と争わないようにするためである。
お問い合わせページにサイドバーがない理由
お問い合わせの入力に集中できるよう、その他の情報は排除した。
FAQが設置できるほどに問い合わせが増えたらサイドバーの再検討をする。
リンク色が特別指定されていない場合は茶色系になるようにした理由
本文領域のメインカラーをオレンジとしたため、リンクの場合は下線と茶色系で統一感を持たせた。
まとめ
普段何気なく目にしている物、ウェブサイト以外でも手元にある商品パッケージ、市の広報など、きっと作成したデザイナーは「どうしてこのデザインにしたのか」「なぜこの文字色は青色なのか」等の質問に全て回答できるのでしょう。見やすい物、印象に残るものほど、すべてに納得できる理由をもって回答できるくらい、対象のものを深く考えて作っているはずです。そうでなければ話題のものが作れるはずがないでしょう。
一見感覚で作っている気がしてしまうデザインも、ちゃんと基礎理論はあってそのうえで作られているのだと学びました。
余談：実はプログラムも同じです
また、デザインに限らずプログラムでも同じことはあります。
「どうしてこのロジックにしたのか」
「どうしてこの設計になったのか」
レビューの時によく言われることでしょう。
この視点を忘れずに、今後のサイト改修や他の仕事案件でも生かしていきたいです。
