デザインとレイアウト-アイキャッチ画像|アフィリエイトの水先案内

ホームページを作るうえで避けては通れないものがデザインとレイアウトです。

ただし、サイトのレイアウトに関しては、どうしてもテーマに依存してしまうところがありますので、できる限りあなたの思い描くレイアウトに近いテーマを選ぶとよいでしょう。

また、WordPressにはとても多くの拡張性能があるため、多少のズレがあっても、あなたの思い通りのデザインとレイアウトでホームページを作成することができるでしょう。

この記事で伝えたいこと
  • ホームページを作成する場合、まずはデザインよりもレイアウトを先に決定する
  • デザインはあまり凝りすぎないようにすることも大切

レイアウトから決定しよう

いざ、サイトを作るとなると、多くの人はデザインから考えていくと思うのですが、実際にはまずレイアウトを決めた後にデザインを考えていきます。

サイトに訪れてくれたユーザーに対して、何を伝えたいのか、という優先順位を決定することで、レイアウトが決まってきます。

例えばですが、運営するサイトがニュースサイトの場合を考えてみましょう。

ニュースサイトで重要なことは、とにかくいち早く最新の情報を訪問してくれたユーザーに伝えることですよね。

そのため、一番重要な項目は最新のニュース情報です。そして、2番目以降に重要になってくるのが1週間前のニュースや人気記事となってくるでしょう。

このことから、レイアウトは最新の情報が常にサイトを訪れたらすぐに表示されることが好ましいですね。

具体的なレイアウトは下図のような感じになるのではないでしょうか。

レイアウト見取り図|アフィリエイトの水先案内

目的にあったレイアウトを考えることで、サイトの使いやすさも変わってきます。

あなたのサイトはどのような目的をもったユーザーに訪問してもらいたいのか、そして何を一番強調したいのか、ということをサイトを作成する前に考えてみましょう。

テラステラス

レイアウトを決定すると、サイトの大枠が見えてきます!

レイアウトは法則に則って

実はサイトに訪問してきてくれた読者の方たちは、ある一定の法則に従ってサイトを見ていきます。

これは、人の視線はある程度決まった動きをする、という科学的な理論から導入されたものであり、多くのサイトでも取り入れられているものですので、必ず知っておいたほうがよいでしょう。

Z字の法則

主に新規のユーザーがサイトに訪れた場合に、動きやすい視線といわれています。

ページ全体を見るときは「Z字の法則」に倣って動くことが多いようですので、トップページなどで採用されます。

ユーザーの視線が【左上→右上→左下→右下】と動いていきます。ちょうどZ字を描くような感じですね!
下図はZ字の法則をイメージにしたものです。

Z字の法則|アフィリエイトの水先案内

こちらの画像にあるサイトは、昔作成していたサイトです。当時のサイトからそのまま画像を引っ張ってきました。

F字の法則

主にリピートユーザーがサイトに訪れた場合に、動きやすい視線といわれております。記事を読むときは「F字の法則」に倣って動くことが多いようですので、詳細ページなどで採用されます。

ユーザーの視線が【左上→右上→左に戻って少し下→真ん中→右→また左に戻って下】という具合に動いていきます。ちょうどF字を描くような感じになります。

下図はF字の法則をイメージしたものです。

F字の法則|アフィリエイトの水先案内

F字の法則はユーザビリティ研究の第一人者である「ヤコブ・ニールセン博士」によって明らかにされた法則です。

参考:Webでの読書のF字型パターン(海外の論文記事へとリンクします)

法則で大切なことは

実は今紹介した2つの法則には共通点があります。

お気づきの方もすでにいらっしゃるかとは思いますが、この時に重要となるのが「左上」です。

Z字の法則でもF字の法則でも「左上」は必ずユーザーに閲覧される部分となっております。

つまり、レイアウトを考えていくうえで、大事な情報や飛ばさずに読んでほしい情報などは、目に入りやすい左上に配置するとよいでしょう。

テラステラス

サイトにおける左上は最重要ポイントといえるでしょう

デザインを決定しよう

サイトのレイアウトが決まったら、自分が思い描くレイアウトに近いテーマを選んでいきましょう。

テーマの選び方やおすすめのテーマに関しましては、下記のリンクで詳しく解説しております。

WordPressのテーマとは?子テーマって何?

デザインを考える際に必要なこととは

実は、デザインを考える際に必要なことはたった一つしかありません。

それは、ターゲットに見てもらいやすいかどうか、ということです。

具体的な例を挙げていくと、病院のホームページを想像してみてください。

一般的に「病院のホームページ」であれば、白色を基調としたデザインを採用することで、見ている人にも病院のクリーンなイメージを伝えることができます。

これが、黒色を基調としたデザインの場合、どうでしょうか。

病院のホームページなのに、いかにも怪しそうな雰囲気が漂っています。これでは多くの人には受け入れられないでしょう。(一部の方にはそれはそれで受け入れられるでしょうが)

この時に重要となるのが「どんな人に見てもらいたいのか」ということを考えることです。

上記であげた病院の例で言えば、もちろんターゲットは「患者」ですね。

ですので、患者さんが「この病院に来たい!」と思ってもらえるようなホームページを作成する必要があります。

しかし、このデザインというものは一見すると難しいように見えますが、意外と簡単です。それはなぜかと申しますと「私だったら、自分だったら・・・」と想像することでデザインは固まってきます。

そして、デザインは作り上げた後でも変更することが可能です。

あまりデザインを考えすぎてしまうと、内容(コンテンツ)の部分がおろそかになってしまうことが多々ありますので、まずはホームページを形にすることから初めていきましょう。

ウカブウカブ

デザインを考えすぎるとドツボにはまっていくよ~

まとめ

デザインとレイアウトは本当に重要な項目であり、終わりはありません。

しかし、デザインやレイアウトが決まらないからと言ってホームページの作成を先延ばしにしてしまうことはもっとよくありません。

まずは仮でもいいので作ってみることから始めるとよいでしょう。

それでは今回のまとめです。

今回のまとめ

  • まずはレイアウトを決定することで、サイトの大枠を決めることができる。
  • あなたが想像するレイアウトと一番近いテーマを選ぼう。
  • デザインを決定する際には、どのような人に閲覧してもらいたいのかを考えることで、サイトのデザインが決まってくる。