今回はWEBデザインについてのお話です。サイトを立ち上げる、あるいはリニューアルするとき、デザインをデザイナーに丸投げしてしまっていませんか？
また、「とにかくオシャレで美しいデザインを作ってもらえればOK」と考えていないでしょうか。 実は、サイトのデザインを作る前に、WEB担当者には必ずやっておくべきことがいくつかあるのです。 それに、WEB通販サイトはただオシャレなだけでは良いサイトとは言えません。 どういうことか、これから例を使ってご説明いたしますね。
実は、サイトのデザインを作る前に、WEB担当者には必ずやっておくべきことがいくつかあるのです。 それに、WEB通販サイトはただオシャレなだけでは良いサイトとは言えません。 どういうことか、これから例を使ってご説明いたしますね。
WEBデザインはブランドの世界観を伝えるもの
たとえば商店街の八百屋さんにお買い物に行ったとします。 お店の人から「いらっしゃいませ。お客様、本日はキャベツが大変お求めやすくなっております」と言われたら、なんだか変だなあと思って居心地が悪くなりませんか？
また、逆にハイブランドの服屋さんで「らっしゃい！ 今日はワンピースが3割引きだよ！」と言われたらおかしいですよね？ 買い物する気がなくなってしまったり、出ていってしまうこともあるでしょう。
ネットショップも実店舗の接客と同じです。 扱う商品やお店の個性とちぐはぐなデザインだと、お客様は混乱してしまいます。
商品のパッケージはブランドのコンセプトを伝える上で非常に重要な役割を負っています。WEBデザインも同様に、「パッケージと違和感なく馴染むもの」かつ「ブランドの世界観を伝えるもの」でなければなりません。
実際のデザインを開始する前に、どんな「ノリ」「雰囲気」にするのか、方向性をあらかじめ決めておきましょう。
たとえば化粧品の場合、デザインの方向性はザックリ大きく分けると「親しみやすいキュート系」か「高級感のあるクール系」になることが多いと思います。 このあたりは商品の価格帯やコンセプトによって変わりますので、ご自分のブランドのポジションをじっくり考えてみましょう。
デザイン前にWEB担当者がやるべき3つの作業
だいたいの方向性が決まって、さあデザイナーに発注…と言いたいところですが、ちょっと待ってください。
デザイン作業に入る前に、やっておくべきことが3つあります。
面倒くさいなあと思うかもしれませんが、そんなに難しい作業ではありません。やっておくとデザイン作業が格段にスムーズに進みますし、クオリティも間違いなくアップしますので、ぜひトライしてみてください。
それでは、その3つの内容をこれから順にご説明しますね。
デザインの細かいイメージを詰め、参考資料を集める
事前に決めたざっくりの方向性をもとに、デザインの細かいイメージを詰めていきます。
たとえば「高級感」「クール」という方向性だけだとざっくりし過ぎてデザイナーも困ってしまいますし、出来上がったものを見て「なんか違うんだよなあ」ということにもなりかねません。
そこで、「こんな感じのデザインにしよう」という具体的なイメージを定め、それをデザイナーに共有する作業が必要になるのです。
イメージを詰めるには、女性向けのファッション雑誌を参考にするのがおすすめです。
化粧品ブランドさんの多くは、ターゲットとなる年齢層を決めていると思います。 ファッション誌も20代向け、40代向けなど細かくターゲットを決めていますので、あなたのブランドのターゲットにあてはまる雑誌の中から、目指したい雰囲気に近いものを選んで参考にしてみましょう。 色使い、言葉遣い、雰囲気など参考になるところが多々あるはずです。
また、「Pinterest」というWEBサービスもおすすめ。 参考にしたい雰囲気のピン（投稿）を選ぶと、似たようなピンがたくさん表示されますので、自分のイメージにぴったりのものを簡単に探すことができます。無料ですし、私もよく使っているおすすめのサービスですよ。
細かい方向性が固まってきたら、目指すデザインに近い雰囲気やデザインの参考資料を集めておきましょう。 デザイナーや社内の関係者へのイメージの共有に使用します。 「雰囲気はこの雑誌のイメージ」「色はこのWEBページ」など、要素ごとにイメージにぴったりの資料を集めておくと、スムーズに共有できますよ。
WEBサイトのカラーを決める
２つ目はWEBサイトのカラーの設定です。 WEBサイトの配色は「ベースカラー」「メインカラー」「アクセントカラー」の３つから成ります。それぞれの役割を簡単にご紹介しますね。
＜ベースカラー＞
WEBサイト余白や背景などに使用する色。メインとアクセントのカラーを引き立てる脇役的な立ち位置。
＜メインカラー＞
その名の通り、サイトのデザインの主役となる色。サイト全体の印象を作る色になります。 化粧品ブランドの場合、ブランドのテーマカラーを採用することが多いです。
＜アクセントカラー＞
使用面積は少ないですが、一番目立つ色になります。全体を引き締める、ユーザーの目を引く役割があり、ボタンなどに使用されることが多いです。
＜各カラーの面積比率＞
厳密に守る必要はありませんが、ベースカラーが70％、メインカラーが30％、アクセントカラーが5％の面積を占めるようにデザインするとバランス良くなると言われています。
なお、必ずしも３つの色しか使ってはいけないということはありません。ですが、使う色数が増えれば増えるほど、デザインのまとまりを出すのが難しくなりますので、極力使う色数は少なめがおすすめですよ。
社内でイメージを事前に共有する
さて、資料を集めてカラーを決めて、さあようやくデザイン…と言いたいところですが、その前に必要に応じてやっておきたいのが、社内の打ち合わせ。 先ほど決めたWEBサイトのカラーとデザインの参考資料を共有しておきましょう。
特にブランドのデザインを決める責任者とのすり合わせは、デザイン作業に入る前に必ずやっておくことを強くおすすめします。デザインしてから全部リテイク…なんてことになったら目も当てられませんからね。
WEBサイトのレイアウトはシンプルに
サイト制作において、デザイン以外にも気をつけておきたいのが、WEBサイトのレイアウト。 オシャレなサイトにするには、レイアウトも斬新で凝ったものがいいと考えがちですが、実はこれ、NGなんです。
ネットショップって「メニューが上もしくは左にあり、カートボタンが右上にある」みたいな共通法則があると思いますが、それに従うのが一番おすすめ。 なぜなら凝ったレイアウトにすると、ユーザーが「どこに何があるのか分からない→買わないで帰ってしまう」という結果に陥りがちだからです。 レイアウトはあくまで「分かりやすい」「見やすい」に徹しましょう。
さてさて。 結構盛りだくさんな内容になりましたが、いかがでしたでしょうか。 きっと皆さんが化粧品の通販サイトを作る上で、ブランドの世界観を伝える要素（ブランディング）と売るための要素（セール感）の両立が課題になってくると思います。
どちらかに偏りすぎてはいけないし、バランスをとるのって本当に難しい。 でも、お客様目線を忘れなければ、きっといい落とし所が見つかると思います。 良いサイトができれば、売上にも必ず反映されます。頑張ってくださいね。