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