愛子のマーケティングデザイン講座

愛子のマーケティングデザイン講座

TOPページ.2

2. 月商2,000万円への道!

     売れるWebマーケティングデザインメルマガ講座 Vol.10

     TOPページデザイン.2



「売れるWebデザイン」というものは、かなり確立されてきていると感じます。


(もちろん新しいことはどんどん取り入れて進化していかなければいけませんが…。)


「売れる」というのは、「見やすい」「親しみやすい」「分かりやすい」「伝わる」ことで、きちんと設計された上に成り立っています。


前号では、白紙のページにTOPページデザインをしましょう!と課題を出していましたが、いかがだったでしょうか?


どんなものが出来上がったでしょうか?






まず、作るときにどんなことから進めていきましたか?




 何




と、カラーリングからやっていませんか?


それがデザインだと思っていませんか?



イメージカラーが決まっている場合はいいのですが、慣れないうちは、まずは、情報を整理して、レイアウトすることから始めてください。


色を付けながら進めるので、難しいと思ってしまうのです。




まずは白黒で、見やすくレイアウトができる


ことがとても重要なのです。


本来、デザイナーは 紙に鉛筆1本でデザインを数パターン考えていきます。


この作業は、ラフスケッチ・ラフデザイン・エスキースなどと呼ばれています。


どんなに経験を積んだデザイナーでも、いきなりカラーをつけていくのではなく、 鉛筆1本のみです。


ここできちんと情報をまとめたみやすいデザインが出来なければ、どんなにカラフルに色づけしても伝わらないデザインになってしまいます。



Webデザインにおける見やすいレイアウトはある程度パターン化されてきています。


どのパターンが自分にとって見やすいか、を次のレイアウトパターンを参考にされてみてください。






メニューヘッダー直下型

メニューヘッダー直下型は、メニュー以下のスペースが広く使えるので、キレイな写真など 見せるデザインをしたいときは、このパターンがいいと思います。











メニュー左型




メニュー左型は一番オーソドックスで、誰もが使い慣れているレイアウトです。
迷わないナビゲーター
にしたい場合はこのメニュー左型がいいでしょう。










メニュー右型


メニュー右型は、最近増えてきたように思います。左から右に情報を読んでいく横書きのホームページの場合は、メニュー右型のレイアウトが左側の情報が、スッキリと見やすくなります。




この3パターンが一般的で見やすいパターンで、


見やすい



=他のページへ誘導しやすい


=たくさんの情報を読んでもらえる



=興味や共感を持ってもらえる


売れる



ということです。




サイトの規模に合わせて、この基本パターンを組み合わせていくとよいでしょう。






メニューヘッダー直下型+メニュー左型




メニューヘッダー直下型
+メニュー右型




メニューヘッダー直下型
+メニュー左右型




メニューヘッダー直下型
+メニュー左型

+バナー置き場


こんなパターンでもよいでしょう。


注意点と言えば、運営していくうちに新しいメニューを追加したい、ということも出てきますので、永く運営し、ページを充実させてホームページを育てていくために、コンテンツを追加しやすく、またメンテナンスのしやすいレイアウトにしておきましょう。


例えば、メニューヘッダー直下型にすると、新しいコンテンツが追加しにくくなりますので、メニューヘッダー直下型+メニュー左型など組み合わせて柔軟に対応していけるレイアウトにしておきます。


この時点で、サイトを運営してサイトを育てていくことを考えておかなければ、のちのちの修正で大変な時間のロスをしてしまうことになりかねません。



まずは、この見やすい基本パターンを白黒でレイアウトが出来る、そして、その基本パターンが出来てから自分のカラーを出していきます。





3 .もう一度、白黒で見やすいレイアウトをしてみましょう。











「売れるWebデザイン」におけるこのTOPページの役割はとても大きいです。




このTOPページをしっかり練るために、まだまだ続きます。





では、また次号にて・・・。



© Rakuten Group, Inc.
X
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: