サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计


  訪問者の気持ちになって、自分のサイトを訪れた時、見易いサイトであるかどうか、最も重要ではないかと、Googleは主張しています。業界的には、「シンプルで直感的なレイアウト」と言います。

    例えば上の画像は価格.comさんのコンテンツページで、知らない人はいないほどの著名サイトです。確かにシンプルで直感的で、欲しい情報がすぐに見つかります。

  ここで言いたい事について、大手検索サイトやニュースサイト、ショッピングやSNSサイトは除外して下さい。それら特殊サイトは人間の日常的必要性から、常にアクセスランキングトップにいるのは当然です。もはやそれらの大手サイトを追いかけようと頑張る個人運営者もいないでしょう。

  見て欲しいのはビジネスや情報サイト、特にアフィリエイトサイト、そしてトップページよりもコンテンツページを注意してみると、特徴が見えて来ます。

学ぶべき人気サイトの秘密


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

 実はGigazineも特殊なサイトです。最も早い時期に始まったマガジンタイプのブログメディアで、複数人の管理に基づいて、既に膨大な記事のデータベースがあります。ここの記事の書き方は、トピックス的な特性があり、Googleのガイドラインに沿っているわけではありません。コンテンツページを沢山計測しましたが、キーワード出現率は全て3%以下でした。代わりに左サイドバーには40回分の記事タイトルが並んでおり、全てのタイトルは抽象的な表現がなく、コンテンツ内容と一致するキーワードが入っているタイトルとなっています。


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

  ソフトバンクグループに所属するIT media社のサイトでは、IT業界を中心としたニュースを配信しています。時代に見合うコンテンツなので、数百万のアクセスを集めているとの事です。ユーザービリティやSEO対策も当然しているでしょう、そして見た目も「シンプルで直感的」です、左側がコンテンツの2カラム構成です。


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

    ライフハッカーは大きく言えば、日常生活の知恵を掲載しているサイトです。それは実際に使えるものなのかどうかは関係なく、人間社会における生き方に関わる全ての雑学や裏技を含む知恵袋のようなものです。Gigazineと比べて、Googleのガイドラインを大きく離脱しないコンテンツの作り方で、質もかなり評価できるものが多く、やはりPV数は200万を超えています。コンテンツの内容が絞られている分だけ、検索エンジンの評価も高いと思います。


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

  翔泳社が運営するマーケティングを専門としたWEBマガジンです。一言マーケティングと言っても幅が広いので、多くの分野にかかわる情報がある事で、このサイトもPV数が数百万のレベルになっています。一般的なニュースよりも、企業向け、業界専門のニュースを扱っています。このサイトも規模的には個人運営者が見習うようなものではないが、サイトの構成や色など、ユーザービリティは参考になります。


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

  田舎暮らしの生活スタイルの良さを綴る個人のブログですが、なんと数百万のPVがあるそうです。画像でもわかるようにとってもシンプルなブログ構成で、コンテンツページもほぼ見易い白地に黒字、文字の大きさは、視力がどんどん落ちている筆者でも眼鏡無しで楽に読める、これ、大事ですね~PCにばかりかじりついて、視力がやばい事になている人はどのくらいいるでしょう、ちょっと気になったりします。


※ クリックすると新しいタブで開きます。

  上記サイトもPV数が百万単位です。トップページは、コンテンツリストの上に注目記事が不規則なボックスで並べられ、最初はちょっとだけ戸惑いました。しかし、コンテンツページはちゃんと右サイドバーの2カラム構成で、文面は読み易いです。そして、「関連記事」以外にも「合わせて読みたい記事」、apple製品をメインに扱ているのでapple製品記事コーナーがあり、所謂「内部巡回」対策が完璧です。apple製品の記事を見ると、兎に角丁寧に情報を集めています。これも人気の理由ですね。


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

  ニキビケアに絞ったアフィリエイトサイトですが、ニキビに悩む人が多いでしょうか、PV数は200万を超えているサイトです。多分、このサイトはアフィリエイトをしたい人が最も勉強になるではないかと思います。とことんニキビケアに追求し、ニキビの原因から肌別のケア方法まで網羅しています。筆者も気にしなかった大人ニキビまで丁寧に調べて書いており、そしてニキビ用化粧品ランキングも、しっかりコンテンツとして作り込んであります。これがプロレベルのアフィリエイターが作るサイトなんだな~と、勉強になります。


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

  お財布だけに絞ったアフィリエイトサイトです。上記のニキビケアとは違った形で作り込んでいます。一見お財布メーカーの通販サイトにも見えました。ユーザーが目的別でも商品別でも、口コミからも情報を集めて判断できる手段があり、本場の革についても知る事ができます。普段何気なく使っているお財布には、これだけの周辺知識があるのかと、驚かされます。ユーザーが正しく情報を収集した上、自分に合う財布を探せる、購入できるサイトへ誘導される、人気の秘密がわかるような気がします。


サイトのレイアウトを学ぶ, Learn about layout of we bsite, 学会网页设计
※ クリックすると新しいタブで開きます。

 脱毛サロンを実際に行って、体験レポートからサロン予約まで誘導しています。ここも上のニキビケアサイトと似て、脱毛に関するありとあらゆる情報を集めています。サロンに通えない場合の家庭用脱毛器から男性脱毛まで、関係コンテンツを全て網羅しています。ここに来れば脱毛に関する情報が全て得る事ができます。ここまでやってこその人気サイトなんですね。

  赤ちゃんは大人の真似をして成長するように、アフィリエイターはこれらのサイトを勉強して成長して行きます。

デザインセンスが問われます

  PV数百万超えの人気サイトは、いずれもデザインセンスが抜群なサイトばかりです。カラーのバランスにしても、絵にしても、絵が描けないなら一層白地に黒字と言うのも、潔くセンスがいいです。

  話は戻りますが、人気サイトのレイアウトに特徴がある事を気づきましたか。Gigazineのような膨大なデータがあるサイトは、左に最新ニュースのサイドバーがあるけど、その他サイトは殆どが左側にコンテンツがあります。

  コンテンツについては別機会に考察しますが、ちょっと考えて下さい、パソコン画面にある文章はどこから読み始めますか?日本人は教科書を右から左へ読むのに、パソコン画面では、自然と左上から読み始めます。

  その自然な動きで目線の辿るルートが決まり、不自然に目線を動かすことになれば、目の神経から疲れ信号を発します。これは若い人がより顕著に反応を示すものです。

  そして検索エンジンのロボットでも、ページの左上からサイトの内容を巡回します。つまり左上から順番に読み取ったデータでインデックスするかしないかを判断するので、それがもし個人運営のサイトで一番左がコンテンツではなく、広告だったり、プロフィールだったりすると、インデックスに不利だと思いませんか。

SEOに有利なコンテンツ配置

  コンテンツページのタイトルと文章には、人々の欲しい情報に関するキーワードがあります。左側にコンテンツがあると、SEO対策は比較的有効に働きます。

  Gigazineのような大容量なデータがあるサイトは、左サイドバーに最新ニュースのリストがあっても、最新ニュースのタイトルにある最新キーワードがSEO対策に役立ちます。

  問題なのは見た目の並び順よりもHTMLの書き順ですが、一般的には見た目通りのHTML順になっている事が多いので、左側にコンテンツ、右側にサイドバーを設置するスタイルがシンプルで直感的であると同時に、検索エンジンにも読み易いレイアウトになります。

  上下分割型、ブログ型3カラムのコンテンツは、クローラにとって、2カラム構成にはかなわないと言う事になります。

  コンテンツに画像が多く使われる場合もあります。興味深い調査結果があるので、リンク先のページをぜひ読んでみて下さい。そこでの目線の動きを調査した結果でも、ユーザーは情報を左上から流し読みをし、レイアウトの為の画像やジグザグレイアウトは、ユーザーに認知負荷が掛かる事が実際に証明されています。

  当ブログはひょんなことから、SEO対応済みのテンプレートを使わせて頂き、レイアウト問題はクリアできて、実際アクセスも増えつつあります。でも、筆者は複数のブログを持っていて、殆どがSEOを知る前に作ったから全体的に見直すべきもので、気が遠くなります。