ホームページのデザインはどう決まる！？デザイン制作の裏側を公開します！～「米田海産」編～
みなさまどうもはじめまして、webデザイナーのまっさんです！
自らwebデザイナーと名乗るのはなんだか気恥ずかしいですね、カッコつけているみたいで…。
肩書きに釣り合うカッコよさを身につけて、いつかドヤ顔で名乗りたいものです。
さて、カッコよくないwebデザイナーの私ですが、ホームページのデザインはカッコイイものに、そしてそれ以上に、見る人がストレスなく閲覧できるデザインになるよう考えて制作をしています。
ただ、考えていると言われても、具体的に何を考えてデザインを決めているのか？
今回は、米田海産株式会社様のホームページを例にとってご紹介しようと思います。
まずは米田海産様のご紹介を簡単に。
米田海産株式会社
明治40年に創業して以来、広島カキの生産を一筋に励む。
種ガキの採取から出荷まで一貫して行うことで、より新鮮で高品質な広島カキを提供。
平成23年には広島の優れた特産品として「ザ・広島ブランド 味わいの一品」にも認定された。ホームページ：http://yonedakaisan.co.jp/
ちょうどカキが美味しい季節ですね～。
お腹がすいてきました。
制作の前に
目的を決める
さあ、デザインを作るぞ！
とその前に、まずはホームページを作る目的を把握しないことには、進められるものも進められません。
クライアント様がどのような目的で作ろうと思ったのか、まずはヒアリングです。
米田海産様の目的は、主に以下の2つ。
- 米田海産様が作られる広島カキのことを知ってもらう
- リピーターを増やす
お客様の傾向として、贈答品として頂く方が多いということから、情報を提供する場作りと、「また食べたい」と思っていただけることを目的に作ることになりました。
内容を決める
目的は決まりました。
じゃあデザインを…！とはまだいかないんです。
内容が決まらないことにはレイアウトも決められないため、サイトマップを作成し、各ページにどんな情報を載せるのかを考えます。
掲載する内容は、クライアントの要望や、お客様が求めている情報、競合他社がどのような情報を掲載しているか、などをふまえて固めていきます。
以下は米田海産様のサイトマップです。
- トップページ − 簡単な概要、お知らせ
- カキづくりのこだわり − ごあいさつ、5つのこだわり
- 米田のカキができるまで − 生産工程
- 商品案内・お取り寄せ − 商品一覧、お問い合わせとご注文の案内
- 米田のカキを味わえる店 − 取り扱いの店舗紹介
- カキの美味しい食べ方 − 広島カキの美味しさの秘密、カキの下準備、カキレシピ
- 広島ブランド認定の紹介ページ − 広島ブランドの説明、認定証
- 会社概要 − 会社概要、アクセスマップ
- お問い合わせ
- 個人情報の取り扱いについて
- サイトマップ
このように、どのページにどんな内容を掲載するのかあらかじめ決めておくことで方向性がぶれにくくなり、効率よくデザインを進めることができると思います。
デザイン制作
デザインの方向性を決める
目的と内容を決めたところで、ようやく待ちに待ったデザイン！
といきたいところですが、デザインの方向性を決めるために、こちらもヒアリングを行います。
デザインの好みや、参考にしてほしいサイトがあるかなど、聞き出せることはとことん聞き出す。
そうするとデザインの出戻りが少なくなり効率が良いです。
ただ、すべて任せてくださるクライアント様もたまにいらっしゃいます。
米田海産様もデザインを一任してくださったので、以下のポイントを手掛かりにデザインの方向を決めました。
- 競合他社がどのようなデザインにしているのか
- ロゴに合うデザイン
- イケてるサイトを参考に
競合他社がどのようなデザインにしているのか
今回は、カキの生産を行っていて、掲載内容が近いサイトを参考にしました。
和テイストのサイトが多い傾向にあり、また、写真をたくさん使っているサイトが分かりやすく、安心感が湧いたので、その点を取り入れることにしました。
ロゴのテイストに合うデザイン
商品のパッケージに載せているロゴがあったので、ブランド統一のためにそちらを使用することに。
筆文字のロゴだったので、和テイストのデザインにすることを決めました。
イケてるサイトを参考に
以上の2つで大体の方向性は決まったのですが、より見やすいレイアウト、より目を惹くデザインにするために、イケてるサイトを探して良いところを参考にします。
ちなみに主に参考にさせていただくことにしたサイトは以下の3つ。
- うきはの山茶 様
- 本家尾張屋 様
- 辻本珈琲 様
こちらのサイトをご覧いただいてから米田海産様のサイトを見ていただくと、ああなるほど、と思われるのではないでしょうか。
商品イメージが湧く写真を大きく配置、縦書きのタイトルやメニューを使用していても分かりやすく読みやすいレイアウト、信頼感を抱かせるような落ち着いた雰囲気とカッコよさを兼ねたデザイン。
そういったところを取り入れさせていただくことにしました。
デザインを解剖
方向性が決まればあとはデザインを進めていくだけです！
実際に出来上がったデザインを見ながら、どうしてこうなったかを解説します！
①背景・全体のトーン
和の雰囲気を持たせるため、背景にテクスチャをかけています。
全体の色味は海産物を取り扱っているので青ベースにし、信頼感のある落ち着いた雰囲気を持たせるため紺色を多用しています。
②ロゴ
定番の左上に配置。
中央配置も検討しましたが、左右にできてしまう余白がもったいないため、定番配置におさまりました。
ロゴ上の文言は、キャッチとSEO対策です。
③グローバルメニュー
一般的に右上には、お問い合わせの電話番号や、ECサイトであれば注文ボタンなどを配置するのが定番ですが、今回はサイトからお問い合わせを増やす目的はなかったため、グローバルメニューを配置することに。
縦書きのメニューは横書きに比べると分かりにくさはあるものの、それぞれ文字数が多いことや、ロゴとのバランス、和テイストにすることを考慮した結果、縦書きメニューにすることにしました。
縦に文章を書く際は右から左へ書くのがルールですが、webサイトは左から右へ読まれる特性があるため、メニューもそのようにしています。
④アイキャッチ画像
漁場とカキいかだがファーストビュー内で見えるように配置しました。
一目見て、この海でカキの生産を行っていることが伝わることを狙いとしています。
画像をロゴよりも上に置くことも考えましたが、最初に名前が目に飛び込んだ方がお客様にも親切だろうと思いロゴを上にしました。
⑤簡単な概要
トップページに訪問された方が他のページも読むとは限らないため、トップページだけでも伝わるよう簡単な概要を配置。
アイキャッチ画像同様、実際に収穫した広島カキの写真を大きく掲載し、米田海産様のカキに興味を持っていただくことを目的としています。
⑥お知らせ
お知らせは、あまり更新する内容がないということからギリギリまで載せるかどうか検討しましたが、カキはシーズンがあるため、シーズンの開始と終了がわかるように、ということと、SEOをふまえた結果、掲載することになりました。
こちらも見ている人の感心を得られたらいいなと思い、お知らせ内容に合う写真を掲載しています。
⑦バナー
+αになる情報や、お役立ち情報は、グローバルメニューに入れずバナーリンクにしました。
クリックしてもらうことを優先し、目に留まるようなデザインにしています。
⑧フッター
基本情報を配置。
写真は、海の男の背中がかっこよかったので、ほんの少しの遊び心です。
もちろん実際の作業風景をお伝えする意図もあります！
このような意図や考えを持ってトップページのデザインは決まったわけです！
二階層目のページについても、ページタイトルは目印の役割でいいから縦書きに配置にしよう、なんてことを考えながら制作していました。
まとめ
どんなホームページでもデザインの進め方はあまり変わらないと思います。
でも決まるまでには、ホームページ一つ一つに、デザイナーの試行錯誤がきっとあるはず。
そんな試行錯誤を私自身が知りたいなぁと思うことがあるので、ご紹介した次第です。
少しでもデザイン制作の参考になれば幸い！