Loading...
  • 0k
  • 0
ウェブデザイン \ 2016年3月1日

サイト訪問者を虜にする!とびきり美しいホームページを作る4つのコツ

デザインを学んだことがある方なら、構図について聞いたことがあると思います。よく分からないと気後れしてしまう人がいるかもしれません。が、実はそれほど難しいことではないのです。アートとデザインの基本的な法則を使えば、より魅力的で機能的なホームページを作成できます。

構図とはなんでしょうか。それは、アートで最も基本的な要素の一つ。簡単に言えば、絵や写真などの画面の配置のことです。絵画、彫刻、そしてWebサイトであろうと同じこと。今回は構図の重要なポイントと、それを応用したホームページをもっと素敵にするコツをご紹介します。

美しいWebサイトを作るコツアート要素:色彩

ポイント:色使いで魅力アップ

ビビッドな色のポイント使い、あるいは彩度の低い、落ち着いた色使い。色によってWebサイトのイメージが決まります。鮮やかな色は感情を表現し、サイトにパワーを与えます。暗めの色は陰影、調和、リラックスしたムードを醸し出します。サイトのイメージやメッセージに合った色合いを選びましょう。

また、閲覧者の注意を引くために色を上手に使うこともできます。白と黒のように、色のコントラストがあると目立ちます。その原理を使い「いますぐ購入」「お問い合わせ」など、閲覧者にクリックしてもらいたい箇所を目立つ色にしましょう。

どんな色の組み合わせがいいか迷う方は、プロがデザインしたWixのテンプレートをぜひ使ってみてください。カスタマイズも可能です。もしくは、WebpainterKuler (英語サイト)のような無料ツールを試すのもいいかもしれません。変わり種として、本や雑誌の表紙から、サイトに利用できる配色を調べられるColor of Bookのようなサイトもあります。他にも色々便利なツールがありますので、是非、ご自身でも探してみてください。

色彩

アート要素:3Sの法則

ポイント:メイン情報を際立たせる

サイト訪問者の目線を理解したければ、 3Sの法則が役立ちます。まず、Webサイトのスクリーンを、縦横に三分割した図を想像してください。線が交わる点が、閲覧者の目線が自然に行くところ、つまり一番目立つ位置です。ここに、重要な情報、たとえば“購入ボタン”や“メルアドへの登録”などのCTAボタン(Call to Actionの略/行動喚起ボタン)を配置しましょう。

以下の写真は、「訪問者の目線が最初にどこにいくのか」というのをパーセンテージで示したものです。参考にしてください。

3Sの法則

アート要素:空間スペース

ポイント:すっきりしたサイト

子供の頃、ちらかった部屋を片付けるように言われたことがありませんか?実はホームページも同じこと。ついつい文字、画像、アイコンなどで埋め尽くしたくなるもの。ですが、コンテンツに占拠されていない空白スペースの方が、実は効き目があるのです。

サイト訪問者はすっきりとしたWebサイトに好感を持ちます。それに空白スペースによって、もっとも伝えたいメッセージを強調することができます。ですから、サイトのメインメッセージを決め、シンプルなイメージとコンテンツで要点が伝わりやすくしましょう。

 

空白スペース

アート要素:目線の順番

ポイント:閲覧者目線で

サイト閲覧者がどのように画面を見ているか、多くの研究がなされています。結果はこうです。上から下、そして左から右へと目線を移動させています。「F 」または「 Z 」の文字の形に目線が移動していると言えば、わかりやすいかもしれません。

この研究結果を使えば、閲覧者の行動をある程度コントロールできます。さらに、色や陰影、文字のサイズ、画像のサイズなどを工夫すれば、ホームページ上の優先順位を付けることも可能。そうすれば、閲覧者は、重要な情報から順に見てくれます。

目線の順番

サイト訪問者の目線の順番通り——最初に目が行くところ、二番目、三番目・・・これが分かっていれば、重要なコンテンツをどこに配置するか決められます。先述のCall to Actionボタンは、目線が最も届きやすい箇所に目立つ色で設定しましょう。写りがいい商品の写真も、目線の先にくるように配置。そして背景と反対色でさらに目立つようにするのが原則です。

プロ並みのホームページ作成なら、Wix!
あなたも、Wixで訪問者の行動予測に配慮した美しい構図のサイトを作ってみませんか?

無料のホームページを作ろう
今後もWixブログを無料購読して、Wixの最新情報・役立つ情報を受け取りましょう!


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

Wixブログを購読 \  

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい