Webデザインサンプル集

透明感と清潔感のある配色

☆ターゲット☆
30代～50代女性

☆サイトテーマ☆
【スキンケアにより一層力を入れ始める大人な女性に向けたトータルビューティーコンサルサイト」

メインカラー：肌色（大人、安心、肌、健康的、）
サブカラー：グレー（高級感、大人、上品、おしゃれ）
コンサルタントに対する安心感と、今までの自分からより一層おしゃれで上品な自分に変われることをイメージさせる配色で作りました。

アクセントカラー：ブラック
メインカラー、サブカラーが淡い色で、
キーとなるタイトル、ボタンをブラックに統一し、ユーザーが見やすいシンプルなサイトにしています。ブラックを入れることでメリハリが出て引き締め効果にもなります。

ベースカラー：ホワイト
ホワイトにすることで商品タイトルが際立ち、閲覧者にとってストレストレスなく自分が求める商品を探せるよう設計・デザインしています。

☆サイト導線☆
このサイトに初めて訪れたユーザーがまず最初に知りたいことは
「どんな人？」が「何してくれるの？」です。

トップに「どんな人？」の答えが書かれたプロフィルページに飛ぶ「コンサルタント山田花子」ボタンを配置する。
次の疑問は「何してくれるの？」なので、その答えである＜SERVICE＞を「コンサルタント山田花子」ボタンのすぐ下に配置する。パッと見てどんなサービス項目があるかを簡単に記載しておくとより親切です。ワンクリックでメニュー詳細ページへ飛べるよう、それぞれのメニューの下にボタンを配置する。（商品画像にリンクを貼ってもOK。）
その下に「Blog」ボタンを配置する。ユーザーの不安や疑問が解決できる記事（例えば：実際の体験談など）により申し込む前の不安ンが取り去ることができ、安心感を与えられる。
最後に「お申込み」や「ご相談」ボタンを配置する。

※サイト導線とは：サイトを作る側がユーザーを導く経路のこと。サイト内でユーザーが迷うことなく、求めている情報を短時間で見つけられるよう、サイト設計することが大切です。

ガーリーで甘さのある配色

☆ターゲット☆
20代～30代女性

☆サイトテーマ☆
【可愛らしさの中にも大人の落ち着きを感じさせるナチュラル化粧品オンラインサイト」

メインカラー：ピンク（女性的、美、甘い、やさしい、幸せ）
サブカラー：ベージュ（落ち着き、大人、ナチュラル、オーガニック）
ターゲットである20代～30代女性が好む色合いと、ナチュラルさを出したい商品イメージとの両方を考えてこの配色でイメージを作り出しました。

アクセントカラー：ブラック
全体的にやさしい色を使っているのでやわらかい雰囲気です。
今回は商品の色がブラックのものが多いので、ブラックをアクセントカラーとして選び、アクションボタンも同じブラックにしました。
アクションボタンは、ユーザーにその次のステップとして押してもらいたいボタンになるので、最も目立つ色を選ぶことをおすすめします。

☆サイト導線☆
流行りを気にする20代～30代は、「新商品はどれ？」、「おすすめは何？」です。販売者側も新商品を知ってもらい、使ってもらえたら嬉しいですね。

一番売りたい新商品をトップ画像で宣伝する。画像の下には商品詳細・購入画面に繋がるボタンを配置する。トップ画像は新商品が出るごとに変更することが望ましい。
その下に、おすすめ商品や人気商品をランキング形式にして載せる。
最後に「ご利用について」などのご利用にあたってにルール（購入方法、送料、納期、キャンセル）が記載されたページへ飛ぶボタンを配置する。

とてもシンプルなサイト設計です。トップページにあれもこれもといろんな情報を載せるとユーザーは何を見ていいのか迷ってしまいます。最悪は見るのに疲れてしまい、サイト離脱し違うサイトへ移ってしまうことは少なくありません。載せる情報はキーポイントとなる情報だけに抑えることが、みやすいサイトであり、結果、購入に繋がりやすくなります。