ブログに集客できる画像デザインつくりの部屋

Webレイアウトの基本ZとFの法則からトップページを考える

アバター
WRITER
 
toppage
この記事を書いている人 - WRITER -
アバター
思わずクリックしたくなる画像クリエーターの風茜です。SNSでいいね!まわりしなくても、ブログに集客できる画像作りのアイデアやデザインの作り方をサポートしています。
詳しいプロフィールはこちら

画像クリエーターの茜です。

ブログのトップページは、顔と同じです。

人間でも、お化粧している女子とナチュラル派を称したノーメーク女子…

どちらがパッと見が良いでしょうか?

人は見た目が80%と言われています。

すごい個性の持ち主や、天才的に面白い文才がある人は、レイアウトにこだわる必要はありません。

普通の人は、ひと工夫は必要です。

そんなとき、読んでもらえるwebレイアウトZとFの法則を使うとベストです。

具体的にどんなレイアウトにすればいいのかをお伝えしていきます。

人は見かけじゃないっていうけれど、私は見た目はかなり重要だと思っています。

私のブログもトップページを変えたら、もっとよく読まれるかな?

トップページ


WordPressは、ブログに使うテーマをカスタマイズすることができます。

特にトップページは、人間で言うと顔に当たる部分なので、読まれやすいページにしたいですよね!

ほとんどのテーマは、トップページは記事投稿スタイルとホームページスタイルがあります。

記事投稿スタイル

記事投稿スタイルは、トップページのヘッダーの下に投稿記事が並びます。

多くの女子が無料で利用しているameba blogは、このスタイルです。

ホームページスタイル

ホームページスタイルは、ホームページレイアウトをカスタマイズできます。

WordPressでは、特別な知識がなくても簡単に自分の作りたいトップページを作ることができるんです。

私でもできるのかな?

大丈夫です。
せっかく作るのだから、読んでもらえる効果の高いトップページを作りましょう。
法則を知っておくと良いですよ!

視線の導線を利用しよう

人間の視線は、決まった動きがあります。

その視線を利用しているのが、サイトのトップページの配置です。

Z、Fの法則をご存知ですか?

もし知らなかったら、意識してトップページを作るといいですよ!

私のサイトはまったく考えていなかったなぁ…

Zの法則

Zの法則レイアウト

人の視線は、左上から右下に流れるアルファベットのZの形に似た動きをします。

この動きは、初見の人に多く、あなたのサイトに初めて訪れた人は、トップページをざっとこんな感じで見るのです。

Zの法則を使っているサイトには、yahooのトップページがあります。

あなた自身もYahooのトップページをこんなふうに見ていませんか?

Fの法則

Fの法則レイアウト

同じく、Fの法則というのは、アルファベットのFのように左から右へ、流れる視線です。

じっくり読みたいリピーターは、このようにサイトを見ることが多いです。

Zの法則は、トップページに使われていることが多いですが、Fの法則は記事ページに効果的に利用されています。

補足:Nの法則

Nの法則

サイトデザインにはあまり使用されていませんが、こちらは縦型のチラシによく使われる視覚効果です。

アルファベットのNの形の視線の動きで見られますので、縦型の文字のチラシに使われています。

美術館・博物館の展覧会のチラシには、Nの法則がよく見られますね。

これを踏まえて、次回はトップページをカスタマイズする方法をお伝えしたいと思います。

Zっていうと、水木一郎のマジンガーZを思い出しちゃうの。

は?

私はアニメ好きだから、ゼ〜ット!
知っているよ!

まとめ

サイトのトップページは、Zの法則。(初見の人がざっと見るデザインに)

記事はFの法則。(リピーターの人はじっくり読んでくれる)

検索アップデートで、ブログ流入が3分の一になった私が、
画像デザインを工夫することで、
集客を取り戻した画像デザインのポイントを
無料で配布します。

akane-gazo.com_Ebook

SEO対策をがんばってやっても、検索アップデートに右往左往されていませんか?

ひとつの画像だけで、ブログへの流入を増やす画像をつくる8つの方法やアイデアを
お伝えしていきます。

もうSNSのいいね!まわりしなくても大丈夫。

詳しくは、E-bookへ。

この記事を書いている人 - WRITER -
アバター
思わずクリックしたくなる画像クリエーターの風茜です。SNSでいいね!まわりしなくても、ブログに集客できる画像作りのアイデアやデザインの作り方をサポートしています。
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© 茜画像デザイン研究所のブログ , 2020 All Rights Reserved.