制作サンプルその①　建設業の仮想ホームページ　【デザイン】

サイトの設計で必要な機能、情報をリストアップしたので今回はデザインに入っていきます。全てに触れるととてつもない量になってしまうのでトップページのデザインについてポイントを絞ってお伝えします。

問い合わせにつながるデザイン

今回のサンプルHPの目的は、興味を持ってくれた人が問い合わせというアクションを取ってくれることでした。HP全体をデザインしていくうえでこの目的に沿ったデザイン、レイアウトを心がけます。

ワイヤーフレームの作成

HPの目的、デザインの方向性といった設計を考慮し、どこに何を配置するかを決める枠組みをワイヤーフレームといいます。HP制作ではまず大まかなフレームを作り、要件を満たすような要素の配置をおこないます。

HPで一番目立つ画像をメインビジュアルやヒーローイメージと呼びますが、今回はその画像が画面いっぱいに広がるデザインで、HPを訪れたときのインパクトを出したいと思います。またHPの目的でもある問い合わせがもらえるレイアウト、デザインを意識します。建設会社のHPなので、ごちゃごちゃと装飾はせず、必要な情報がすぐわかるHPを目指します。

テーマカラーの設定

HPのデザインに入る前にクライアントと確認する点の一つとして、どんな色のサイトにするかという点があります。色には与える印象がありますので、業種や顧客の属性を考慮したうえで色のテーマ、方向性を提案します。

今回はコーポーレートサイトなので、白と水色を基調とした落ち着いた雰囲気のHP制作を目指します。あまりに多くの色を使いすぎると視覚的な情報が多くなってしまいますが、色を絞りすぎても殺風景な印象を与えてしまいます。

必要に応じて、強調する部分では濃い緑や青を使い、HP内の文章は見やすく黒で表示していきます。
（#282828と表示されているものはカラーコードと呼ばれ、黒は#000000と表されます。ですがベタの黒を使うと文字が黒すぎて浮いてしまう事があるので今回は少し薄い黒を使っています。）

白や青は「清潔」「知性」のようなイメージを与える色で、会社のHPに使われることが非常に多いです。このように色が与えるポジティブな印象もありますが、反対に「冷酷」「冷たい」という印象を与えてしまうこともありますので注意が必要です。（ビジネスに置き換えるなら「事務的」といった印象でしょうか）

フォントの選定

HPで利用するフォントを選びます。無料で利用できるWebフォントから、有料のものまで膨大な数のフォントがあります。どんなHPを作りたいか、事業のイメージにマッチしそうなフォントを提案しています。今回は少し堅めの印象ですが明朝体を基本とし、誠実さや丁寧さが伝わるようなデザインを目指しShippori Minchoというフォントを採用しました。

メインビジュアル・ヘッダーのデザイン

今回はメインビジュアルを画面いっぱいに広げ、キャッチコピーを配置しインパクトをだしました。画像は熊谷駅前の画像を素材サイトからお借りしました。著作権フリーのものです。実際の制作でもHPにピッタリの画像がない場合はストックフォトサービスからぴったりな画像を探すこともあります。

右上にはHPの目的である問い合わせへ誘導することができるCTAボタンをアクセントカラーをつかって配置しました。問い合わせや資料請求のボタンはページの右上に配置されることが非常に多いため全く違う場所に配置してしまうと閲覧者がそれを問い合わせのボタンと認識できない可能性があります。人はそんなにじっくりHPを見ているわけでは無いからです。

中には他のサイトと違うデザインにしてほしいとご依頼をいただくことがあります。ですが基本的にトレンドのデザインは理にかなったレイアウトになっているため、既存のものから大きく外れるレイアウト、デザインにはオリジナリティーというメリットもありますが、ユーザーの使いやすさを犠牲にしかねないリスクがあります。実際の制作では要素の配置、デザイン等何度も打ち合わせをして確認していきます。