コンテンツは現場にあふれている。会議室で話し合うより職人を呼べ。営業マンと話をさせろ。Web 2.0だ、CGMだ、Ajaxだと騒いでいるのは「インターネット業界」だけ。中小企業の「商売用」ホームページにはそれ以前にもっともっと大切なものがある。企業ホームページの最初の一歩がわからずにボタンを掛け違えているWeb担当者に心得を授ける実践現場主義コラム。
宮脇 睦（有限会社アズモード）
心得其の337
時の流れに身を任せ
リニューアル案件を手がけるたびにノスタルジックな気持ちになります。1年前に公開したサイトでさえ懐かしく、2年も経てば一世代前、5年前なら太古です。運営を手がけているサイトでは常に新しいコンテンツを掲載しているため、もちろん見かけ上は常に新しいのですが、「構造」に時の流れを見つけるのです。
さすがに「フレーム構造」のリニューアルを依頼されることはなくなりましたが、一大ブームとなった某CMSの「タブ風」デザインのテンプレートも、今となっては若干の野暮ったさを否定しきれません。文字サイズを小さめにし、可読性よりも見た目の「お洒落」を優先した時代も懐かしい記憶で、インターネットエクスプローラにアジャストすることが最優先されたことは苦々しい思い出です。
そして今、個人的なオススメは「2カラム」。特別な案件でなければ、リニューアルの多くは2カラムを基本に構築しています。そして欠かせないのが情報の絞り込みです。
主役はコンテンツ
数年前、メインコンテンツの他に2箇所のナビゲート（メニュー・グローバルナビ、以下ナビ）を持つ「3カラム」がブームになりました。左右にナビ、真ん中に本文、あるいは左右のどちらかに2列のナビがあるものもありました。しかし、私の調査では、ナビの増加とクリック率の伸びに相関関係はありません。「広告」や「案内」も同じです。
3カラムでも2カラムでも、クリックされるのは目立つメニューや訪問者が必要と思うコンテンツで、むしろナビに情報を盛り込むことで、「目移りさせているのではないか」と疑われる事例もありました。
目移りは「ブログ」に顕著です。月別のアーカイブ、カテゴリ、最新の投稿などを表示させるためにと3カラムを採用していたのですが、本文を読むときにナビに目が行き、本文に集中できません。もちろん、表示上のデザインで見やすさを担保することもできますが、ブログの来訪者の大半は、検索エンジンで関心のある「キーワード」を入力してやってきます。
今の時代、多くの客はトップページからナビをたどらずに、目的のページ（コンテンツ）に直接やってきます。もちろん、コンテンツを見つけやすいようにナビを整備するのも大切ですが、「月別」や「カテゴリ」はほとんどクリックされず、むしろそれらが「本文」の可読性を阻害するなら改善が必要なのではないでしょうか。
右と左の違い
2カラムではナビを右にするか左にするかは迷いどころです。伝統的に「左ナビ派」が多いようにも感じますが、これはかつての「フレーム構造」の名残なのでしょう。また、日本語コンテンツの大半は横書きで左から右に流れるので、「起点」となることも左メニューが定着した理由ではないでしょうか。Z型からF型へと、視線の流れが変化してきたことも理由でしょう。
一方で「右ナビ派」の主張はこうです。一般的に「右利き」の方が多く、マウスの操作は右から左へ持っていく方がなにかと都合がよいと。
こちらも私の調べですが、左右の違いは見つかりませんでした。この一年、いくつかのサイトで左右を入れ替えてみましたが、特筆するほどの差異は見つからず、どちらかが有利と仮説を立てて検証しても、正反対の結果になることも多々ありました。ただし、ナビ部分に「プルダウンメニュー」を採用しているなら、左ナビに軍配を上げます。
合理的なのはどちらか
本稿での「プルダウンメニュー」とはナビ部分にマウスを重ねると、コンテンツの中央に向けて詳細項目や案内が表示されるものを指すとします。
右ナビでこれを設置すると、画面右から中央に向けて「メニュー」が表示されます。たいていのブラウザはスライダーが右側にあり、これを操作してからナビにマウスを重ねると、プルダウンメニューが肝心のコンテンツを隠してしまうのです。スライダーからの距離が短い右メニューの方が、個人的には合理的で好きなのですが、いちいちプルダウンメニューが表示され、それを消すためにマウスを操作するのは非合理的です。
今、2カラムのデザインをオススメするのは「レスポンシブウェブデザイン」も理由です。
レスポンシブウェブデザインとは、コンテンツはそのままに、CSSなどによって、表示する端末に合わせたデザインを提供するアプローチの総称です。端末の高機能化・高精細化により、タブレットやスマホでも、パソコン向けのサイトをそのまま見ても不自由がなくなりつつあり、何が何でもレスポンシブウェブデザインを推奨する立場には立ちません。しかし、レスポンシブウェブデザインには、取り組むだけの価値があります。
本当に伝えるべきものは？
一度に表示できる情報量が多いと、コンテンツの絞り込みを阻害することがあります。これを最初に実感したのが2カラムと3カラムの比較で、次がレスポンシブウェブデザインに取り組んだときのことです。
あれもこれもと、網羅的にコンテンツ表示させたスマホの画面は窮屈で、よくみれば似たニュアンス、優先順位の低いコンテンツまでナビに入れ込んでいることに気がつきます。スマホやタブレットの小さな画面は「必要なコンテンツ」「伝えたいコンテンツ」を考える好機なのです。いわゆるモバイルファーストの考えですが、実際に情報を整理しようと手を動かすと発見は多いものです。
そして、2カラムのページをスマホ向けにアジャストするなら、ナビの表示場所はコンテンツの上か下に配置するだけ。レスポンシブウェブの専門家、研究家には叱られることでしょうが、画面の小さいスマホやタブレットでできることは限られており、CSSで見かけ上を変えるだけなら大した手間は不用です。もっとも、これも数年後には陳腐化している可能性は否定しきれませんが。
余談レスポンス
あるクライアントのサイトを、リニューアルに際してレスポンシブウェブデザイン化しておきます。構造化してあったので、作業時間は1日と要せずに完成し、すこしドヤ顔気味に納品（アップロード）すると、クライアントの反応はゼロ。スマホもタブレットも持っていなかったことを思い出します。そこでタブレットとスマホを持参して見せた反応は、
ふーん
端末ごとに切り替わる画面を見ても、それは「端末」が自然にやっていることと思ったのです。
街角のレスポンシブウェブデザインの理解はこんなものかもしれません。しかし、それでも時代にキャッチアップしていくのがWeb担当者の仕事です。そうして、すぐにノスタルジーの扉を開くことになるのですが、だからこそおもしろい仕事だと再確認します。
今回のポイント
デバイスに合わせて情報を絞り込む
流行をキャッチアップしていくのもWeb担当者の仕事
- 『完全！ ネット選挙マニュアル』
現場の心得コラムの宮脇氏が執筆した電子書籍がキンドルで2013年6月12日発売！ - 『食べログ化する政治』ネット選挙が盛り上がらなかった理由はここにある（2013年8月1日発売）
宮脇 睦（みやわき あつし）
プログラマーを振り出しにさまざまな社会経験を積んだ後、有限会社アズモードを設立。
制作、営業の双方の現場を知ることからウェブとリアルビジネスの融合を目指した「営業戦略付きホームページ」を提供し、一業種一社、制作案件は足立区内のみという営業施策をとっている。本業の傍らメールマガジン「マスコミでは言えないこと」を発行。好評を博す。著書に『完全！ ネット選挙マニュアル』（Kindle版）、『Web2.0が殺すもの』『楽天市場がなくなる日』（ともに洋泉社）、冷静な視点からのIT業界分析に「週刊ポスト」など、様々な媒体から情報発信を続ける。
- ブログ「みやわきぶろぐ」
- ツイッター「@miyawakiatsushi」
- 有限会社アズモード
- 内容カテゴリ：Web担当者／仕事
- コーナー：企業ホームページ運営の心得
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：リニューアルは情報ダイエットの絶好の機会、必要なコンテンツを絞り込む [企業ホームページ運営の心得] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.