2016年08月19日

さくらブログのテンプレート・カラム数・ブログデザインを考える

スポンサーリンク


今回は、さくらブログのデザイン設定、テンプレートの話を少し詳しく書きます。

前回、「ブログのデザイン」で好きなデザインを選んでください、と書きました。
さくらブログに用意されているテンプレートを使ったブログは、別デザインのテンプレートに変更しても記事内容は消えません。

いつでも好きな時に、好きなテンプレートへの変更が可能です。
まずは、取りあえずどれかのテンプレートを選び、表示して気に入らなければ変更すれば良いです。

デザイン構成は、1記事書いた後で確認しないと、正確なデザインが表示されないものが多いので注意してください。

こちらの公式ページに、ブログの特徴についての解説があります。

デザインが350種類以上とありますが、ブログのデザインなので、そこまで大きく違いはありません。
さくらブログに限った事ではありませんが、ブログサービス側で用意されているテンプレートは、似たデザインが多いです。

上記公式ページに「テンプレートのデザインサンプル」が幾つか掲載されています。
全てのページデザインは、ログインしないと見れません。

タイトル背景や、ページ全体にイラストや写真が入ったものは、構成が同じで違う絵柄のテンプレートもあります。
季節が限定されたものや、猫の写真が使われたものは、その絵柄に合ったブログ内容じゃないと使えないかな〜って感じです。

サンタのイラストで、技術系のブログ内容では変ですよね。

ブログテーマに合ったテンプレートがあれば良いですが、理想のデザインにするには、ちょっと面倒ですがカスタマイズが必要です。

さくらブログは、カスタマイズ可能な仕組みなので、テンプレートの構成だけを利用して、好きなイラストに差し替えることができます。
テーマに沿った絵柄にしてオリジナル感を出すようにしましょう。

直ぐに始められるという意味でテンプレートは有難いものですが、どうせやるならパッと見で、あなたのブログだと解るようなデザインにした方が良いです。
個性的なブログデザインの方が、覚えられやすいですよ。

モバイル向けテンプレート

PC向けテンプレートを使用すると、自動的に「ケータイ」「スマートフォン」という2種類のモバイル端末向けのデザインが割り当てられます。
この割り当て表示は、自動的に行われるので、対策をしないと回避できません。

PC向けデザインと統一されたデザインなら良いのですが、モバイルテンプレートは種類が少なく、PC向けテンプレートとデザインが全く違います。

ベースカラーも違うので、ブログの印象が変わってしまいます。
モバイル用のテンプレートを使うなら、デザインをPC用テンプレートと合わせるようにカスタマイズした方が良いでしょう。

私は、モバイル端末にもPCデザインが表示されるようレスポンシブ化しています。
レスポンシブ化をすれば、モバイル用テンプレートを表示させないように出来ます。


2カラム、3カラム、どれが良いの?

「カラム」とは、ブログレイアウトで何列表示するかという単位です。

英語で書くと「Column」で、カラムです。
雑誌なんかに良くある「コラム」「囲み記事」と言いますが、同じ綴りです。

さくらブログのテンプレートに用意されているのは、3種類です。
テンプレートのカラム構成
2カラムの場合、メニューが右配置か左配置かという違いがあります。
3カラムの場合は、両サイドにメニューが配置されます。

さくらブログのテンプレートにはありませんが、メニューが無い1カラム構成が使われたサイトもあります。
ブログでは滅多に使いませんが、おしゃれな商用サイトで時々見かけます。

横に4分割された4カラム構成も存在しますが、これもさくらブログのテンプレートにはありません。

ブログで1番多く使われているド定番は、2カラム(右メニュー)です。

人の視線が、左から右へと移動する特性にマッチした配置で、スッキリした印象を与えます。

スーパーマリオが左から右方向に進むのも、斜体文字が左から右に傾いてるのも、脳の好みらしいです。
ランカスター大学の物理学者Peter Walkerが、何千という画像の動きを見た人の感想を分析して、脳は左から右への動きを好む傾向があると結論付けています。

逆方向の右から左へは、ムーディー勝山氏の好みでしょう。
ちゃらちゃっちゃっちゃらっちゃ〜♪ 懐かしぃ・・・

メニュー内容が非常に多く、ずっと下までスクロールしないと全メニューが見れない場合は、3カラムにするのもアリです。
メニューを左右に分ければスクロール幅が少なくて済みます。

3カラムの場合も、まず左に目が行くという事を考えると、重要なメニュー項目は左のサイドバーに配置した方が良いでしょう。

サイト上での視線の動き

ウェブを見る際の視線の動きは、Z型、F型、グーテンベルクダイヤグラム型の3種類があります。
この視線ライン上に重要な情報を置くと良いとされる、視線動作に関する法則です。
視線の動きパターン
・Zの法則
新聞の折り込み広告などで良く使われる形で、Z型に特売品などの情報や値段などを大きく配置すると、視線移動と同じ場所に情報があるので、売り上げが上がるというものです。

ウェブページでは、多くの商品が掲載されるショッピングサイトに使われています。
商品写真が並び、その下に説明や値段の文章があると、ページ全体を1発でZ型に見るのでは無く、上からZ型を繰り返すような動きで視線が降りていきます。

デザイン業界で、知らない人は居ないZ型ですが、例外もあります。

ある飲料メーカーが、自動販売機でZ型に主力商品を配置していたそうです。
自販機は、軒先など段差がある場所に設置されている事が多く、近づく人は足元に注意しながら自販機に接近します。
本来、Z型で最初に目に入るはずの左上の商品はあまり見られず、目線の高さ(中段)にある商品サンプルと足元の2点で視点が動く事になります。
それに気が付いたメーカーが、主力商品を中段に集めた結果、売り上げアップにつながったとのことです。

有名なZの法則も、使いどころを選ばないと効果を発揮しないという例です。

・Fの法則
広告とは違い、文章が多いサイトでは、F型に視線が動くケースが多くなります。

有名どころでは、アマゾンの商品ページです。
左上に商品画像、その横に商品名や金額、下に詳細といった感じでF型で見て行くレイアウトになっています。

画像が多いページは、Z型に視線を移動させ全体を認識する事が多く、ブログやニュースなど文字が多い場合はFで気になるポイントを探す傾向があります。


・グーテンベルクダイヤグラム
グーテンベルクダイヤグラムは、視点を斜めに移動しながら気になる記事や文字の場所で視点を横スライドして、また斜め方向に戻るを繰り返す読み方です。
ざっくり記事を読む場合に多く使われる視線移動とされています。

英文は、文字が細かく多いために、このような読み方をされる事が多いのでしょう。
グーテンベルクは、1400年代の人なので、かなり古い視点理論です。

グーテンベルクダイヤグラムは、見る人の心理状態によって効果が変化するとか、初見でなければこういう見方はされないとか、色々な要素があります。
現代の日本語ブログ記事で、どれだけこの視点で見られるかは疑問符がつきます。

これら3つの視点の動きが有名ですが、グーテンベルクダイヤグラムは、あまり気にしなくても良さそうです。


2006年に、ニールセンという博士が、面白い実験結果を発表しています。
232人に数千ページのサイトを見てもらう実験をした結果、どんなページデザインでもF型の視点移動が多かったそうな。


研究の結果は・・・
最初の視線は、コンテンツ上部を横に読み進んでFの上横棒を書く。

次に、少し下って2度目の水平方向の動きをして、最初よりも少し短い距離で視線が止まりFの下横棒が書かれる。

最後に視線はコンテンツの左端部分を縦に動く。
ゆっくり上から視線をおろしていく事が多く、アイトラッキング結果を表すヒートマップは隙間のない実線となる。
素早く視線を降ろしていった場合、ヒートマップに斑点が並ぶ。
これがFの縦棒を書く。

Fの軌跡が意味を考えると・・・
閲覧者が、テキストをじっくりと読むことは多くない。
2段落目までに重要な情報を書いた方が良い。
認識しやすい小見出しを付け、段落や箇条書き冒頭で内容が伝わる言葉を使うようにする。
という結果が考えられる。

ポイントを要約すると、こんな感じです。

あなたがサイトを初めて見る時、どう視線が動くか実験してみてください。
ブログタイトル→記事タイトル→記事→見出し→記事・・・という視線が多いはず。

どれだけの時間見るかはマチマチですが、私はFとかEの形に視線が動く事が多く、博士のアイトラッキング実験と同じでした。

ざっと目を通す時にどこに目をやるか、そこに気になるワードや写真などを配置すれば、より認識率が上がり、読んでもらえる確率が上がりそうです。

ブログレイアウトは、この実験結果を元に考えた方が良い気もしますが、記事ページまでこういうの考えてると面倒くさいですよねぇ〜。
なので、私は記憶の片隅に置いてあるだけで、あまり意識していません。
読みづらくなってしまっていたら申し訳ないですが・・・

個人的には、視線の動きに絶対は無いと考えています。
サイトの構成、写真、リンクなどページを構成する要素によって視線の動きは変わってきます。

閲覧目的をどう設定したのか、閲覧環境がどうだったのか、計測時間の間隔はどうだったのかなど、実験詳細が解りません。
実際の閲覧者は情報を欲してサイトを訪れるので、目的によって視線の動きが変わるはずです。

記事の下の方、特に「右下は、見てもらえない可能性が高い」くらいに意識しておけば良いでしょう。

右サイドバーの下の方に配置されたアフィリエイト広告は、クリック率が悪いのが定説です。
この事からも、右下はサイト内のデッドスペースと考えて良さそうです。

カラム数は、好みですが

結局、どのテンプレート型が良いかは好みです。

悩んだら2カラム(右メニュー)にしとけば間違いないです。
初心者向きで、当ブログもこれです。

1番安定してスッキリ見えるのが、2カラム(右メニュー)です。
文章に重きを置いたブログは、文章の折り返しが少なく済む2カラムが多いです。

2カラム(左メニュー)は、オンラインマニュアルなどで良く使われる形です。
まず項目を選んで、次に内容を見る形(辞書や手引書など)の内容に適しています。

3カラムは、記事の幅が狭いので文字の折り返しが多くなり、読みにくいです。
ほとんどのブログは、記事がメインコンテンツなので読みにくさがデメリットになります。

メリットは、左右のサイドバー領域に、多くの広告や商品が掲載できる事です。
商品を羅列しただけのアフィリエイト記事しか無いサイトに、3カラムが多いのはこれが理由です。
広告が多すぎるサイトは、嫌われますけどね・・・

3カラムサイトは、文章量が少ない場合が多く、ゴチャゴチャした印象になります。
読みやすさを犠牲にしても読んでもらえる内容で、読みにくさを吹き飛ばすほど面白いコンテンツであれば良いと思います。
例えば、イラストや4コマ漫画など、絵が多い場合は3カラムでも気になりません。

3カラムは、初心者向けと言えないレイアウトです。
デメリットを補える方なら使いこなせると思いますが、初心者は散らかったページになってしまうパターンが多いでしょう。

さくらブログにログインして、テンプレートデザインを見ると「人気デザイン」一覧が表示されます。
そこに表示される多くが2カラムです。
さくらブログでも、2カラムを使っている人が多いという事でしょう。

敢えて3カラムに挑戦しても良いと思いますが、何がメインのブログか解らないページにならないよう気を付けてください。


スポンサーリンク
posted by ノービス at 16:23 | Comment(0) | さくらブログ 基本設定
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: