Ataeru design

与えるブログTips第5回〜目に優しいブログの書き方

 

こんばんは。

webコーチの木野あさみです。

あなたの与える力を引き出す、をコンセプトに配信する”与えるブログ Tips”。

webをどう使ったらいいかわからない、PCがニガテ;;という起業女子へ。

webのわからなさを1からわかりやすく、お伝えします。

 

 

 

第5回目のテーマは目に優しいブログの書き方です。

これも、実はサイトの設定など難しいことを考えなくても

普段のちょっとした心がけで出来ることがたくさんあります。

 

与えるブログTipsー過去の連載はこちら↓

第一回・ユーザビリティとは?

第2回・自分の投稿に誰かのブログ記事をリンクさせたい時。アメブロver.

第3回・親切なリンクの貼り方とは?

第4回・リンクをHTMLのコードで書けるようになる

 

 

 

見やすくストレスフルな目線誘導を考える

 

まず、web上での目の動きは、

左上から右下です。

皆さんも、ご自分の目線を意図的に追って見てください。

 

 

ameblo-screenshot01

ameblo-screenshot02

 

どこに目線がいきましたか?

 

 

目線の流れとしては、

こんな感じではないかと思います。

 

目線誘導1

 

目線誘導2

 

この、左上から右下

というのを基本的には繰り返して進んでいるパターンが多いと思います。

 

 

だから、このラインに沿ってコンテンツを配置することも

とても効果的で戦略的とも言えます。

(これは私のアメブロのスクリーンショットですが、

ヘッダーでも一番最初の目線の部分に

さりげなくアピールをしていますね!)

 

では、読者目線で目に優しい、見やすいとはどういうことだろう?

 

私はこう考えました。

 

 

1. メインコンテンツは左に置くこと。

これは無料のアメブロなどでも選んで設定できますね。

メインのカラムは左に置いて、

サイドバーなどは右側に置くことで、

自然な流れで最新の情報を目に入れてもらう。

 

 

 

2.できるだけ邪魔なものは置かない。

視線誘導であげた2枚目の写真にヒントがあります。

 

ameblo-screenshot02

 

目線誘導はこう書きましたが。

目線誘導2

 

実際の動きはこうだったかもしれません。

 

目線誘導3

 

目線の動きにプラスして、

写真やバナーなどはやはり目を引くので、

そちらをチラッと目に入れます。

無意識でもそういった目の筋力の動きがあると思います。

 

 

これを利用して意図的に情報を見せることは有効ですが、

例えばここに全然関係のない広告などがある場合。

目線が完全に無駄に動くのかなと思います。

 

なので、読者の為には

見やすくする➡︎サイドバーの整理整頓、です!

不要な情報を排除して

読者の目の動きを節約してあげましょう。

 

※広告も必要に応じて消す、などの配慮があればいいかと思います。

そういえば、アメブロの広告を消すのって、

わかりづらいのですよね!

なのでここに一応URLをつけておきます^^;

アメブロの広告を外すのはこちらのページから

月額1008円をサイバーエージェント社に支払えば、

スッキリ広告を取り払ってくれます〜

私ももちろん回し者じゃないけど(^_^;)

パワーブロガーレベルにもしなったとしたら。。。

広告収入と1008円とどっちがアメブロ的にはいいのかしらん?

ということもちょっと思うこの頃。。。

 

スクロールは減らすべきか?増やすべきか?

長文のコンテンツの場合

スクロール数を減らす、ということもユーザビリティとして言われています。

 

これに関しては私はそのコンテンツの文章の量と内容によると思っていて。

 

そもそも読み込むことがメインの専門的な内容であれば

コンテンツはしっかりまとまっていた方がいいと思います。

 

 

ただ、ネットサーフィンをしているような状態が

ユーザー対象となりうる場合は、

逆にスクロールすることが体感として良い場合もあるかな。

と思います。

 

 

 

そういったユーザーが対象の時は

間を取るといった形で余白を利用すると

読み手が参加しながら読み進める形を表現することもできますし。

 

 

 

例えば、

好きな動物はなんですか?

 

 

 

 

 

 

 

私はうさぎです。

 

 

 

 

このように。ちょっと考える間を意図したい時など。

 

 

スクロールを増やす、というのは

一列の文字数を少なくして改行をしていく、

ということでもあるのですが…

この書き方のメリットは

目線が画面いっぱい左から右へ行く必要がなく、

ストレートに下へ下へと行けるから、

読み手の目の動きが楽になる、とも思います。

 

 

この点において、

スクロール数を減らすことよりも

読みやすいのではないかな?と。

 

 

少なくとも

スクロールを多くするのが向いているのは

Facebook投稿

Twitter、Instagram

アメブロなど

 

は該当するかと思います。

 

 

要するに、次々と流し読むタイプの

SNSですね。

 

 

 

※スクロールを少なくすることと

逆にスクロールを取り入れることに関しては

私もただいま絶賛実験中だったりもします。

 

 

ブログに関しては、先ほどあげた様に

コンテンツの内容と量によりますが、

ここにアメブロを入れたのは、

アメブロ自体がSNSの性質に近いということが言えるからです。

アメブロという媒体でじっくり読むというのは

ファーストインプレッションでは得られにくいので

ざっと目を通した時に内容が目に留まりやすい方に軍配が上がります。

 

 

このサイト自体も

今の時点ではSNS流入が多い為、

SNSの延長として読みやすい様に

改行を多用しています。

(今後様子を見ながら随時変更予定)

 

 

そもそも、メインコンテンツが、

専門的な内容を専門的に!

ではなく。

PCが苦手な方でも

なるべくわかりやすく

するっと読めること。

に重きを置いているということもありますね。

 

 

こんな形で、ユーザーに合わせて決めて行くと良いと思います。

 

ちなみにこの薄いグレーの部分は重要なターンではないので色を薄くして、

読み飛ばしても構いませんよ〜ということを暗に示しています。

 

 

文字の色を優しめに設定する

 

目に優しいブログの書き方といえば、

文字の色

 

です!

 

これはとってもシンプル簡単なので、

ぜひ今日から取り入れてみてください。

 

白地に黒文字というのは最もコントラストが高く、

ずっと見ていると目がチカチカします。

 

 

この黒文字を

少しグレーにしてあげると

グッと優しい印象になります。

 

 

あとは、

背景も白ではなくうっすらと色をつけることでも

コントラストを緩和できます。

ただ、背景に柄などを敷く、

それは逆に読みにくくもなりますので、

基本的には白地にグレーの文字、が失敗ないでしょう。

 

このサイトもコンテンツの部分は

うっすらと背景色を設定していて、

何記事も読み進めても目が疲れにくいようにデザインしています。

 

 

PCなので、ずっと見ていれば疲れるのは仕方がないですが、

その中でもほんの少しの気配りといったところですね(^^)

 

 

まとめ

いかがでしたか?

目線誘導に関しては、

グーテンベルグダイアグラムといって、

webデザインの根拠としても研究されているものもありますので

気になる方はそちらも合わせて勉強してみると面白いですよ♪

 

 

 

forest

緑を見ると癒されます…

2016年10月8日 10:27 PM  カテゴリー: Give/あたえる, ブログ, 与えるブログTips

Now Loading