リニューアルは情報ダイエットの絶好の機会、必要なコンテンツを絞り込む

心得其の337

時の流れに身を任せ

リニューアル案件を手がけるたびにノスタルジックな気持ちになります。1年前に公開したサイトでさえ懐かしく、2年も経てば一世代前、5年前なら太古です。運営を手がけているサイトでは常に新しいコンテンツを掲載しているため、もちろん見かけ上は常に新しいのですが、「構造」に時の流れを見つけるのです。

さすがに「フレーム構造」のリニューアルを依頼されることはなくなりましたが、一大ブームとなった某CMSの「タブ風」デザインのテンプレートも、今となっては若干の野暮ったさを否定しきれません。文字サイズを小さめにし、可読性よりも見た目の「お洒落」を優先した時代も懐かしい記憶で、インターネットエクスプローラにアジャストすることが最優先されたことは苦々しい思い出です。

そして今、個人的なオススメは「2カラム」。特別な案件でなければ、リニューアルの多くは2カラムを基本に構築しています。そして欠かせないのが情報の絞り込みです。

主役はコンテンツ

数年前、メインコンテンツの他に2箇所のナビゲート（メニュー・グローバルナビ、以下ナビ）を持つ「3カラム」がブームになりました。左右にナビ、真ん中に本文、あるいは左右のどちらかに2列のナビがあるものもありました。しかし、私の調査では、ナビの増加とクリック率の伸びに相関関係はありません。「広告」や「案内」も同じです。

3カラムでも2カラムでも、クリックされるのは目立つメニューや訪問者が必要と思うコンテンツで、むしろナビに情報を盛り込むことで、「目移りさせているのではないか」と疑われる事例もありました。

目移りは「ブログ」に顕著です。月別のアーカイブ、カテゴリ、最新の投稿などを表示させるためにと3カラムを採用していたのですが、本文を読むときにナビに目が行き、本文に集中できません。もちろん、表示上のデザインで見やすさを担保することもできますが、ブログの来訪者の大半は、検索エンジンで関心のある「キーワード」を入力してやってきます。

今の時代、多くの客はトップページからナビをたどらずに、目的のページ（コンテンツ）に直接やってきます。もちろん、コンテンツを見つけやすいようにナビを整備するのも大切ですが、「月別」や「カテゴリ」はほとんどクリックされず、むしろそれらが「本文」の可読性を阻害するなら改善が必要なのではないでしょうか。

右と左の違い

2カラムではナビを右にするか左にするかは迷いどころです。伝統的に「左ナビ派」が多いようにも感じますが、これはかつての「フレーム構造」の名残なのでしょう。また、日本語コンテンツの大半は横書きで左から右に流れるので、「起点」となることも左メニューが定着した理由ではないでしょうか。Z型からF型へと、視線の流れが変化してきたことも理由でしょう。

一方で「右ナビ派」の主張はこうです。一般的に「右利き」の方が多く、マウスの操作は右から左へ持っていく方がなにかと都合がよいと。

こちらも私の調べですが、左右の違いは見つかりませんでした。この一年、いくつかのサイトで左右を入れ替えてみましたが、特筆するほどの差異は見つからず、どちらかが有利と仮説を立てて検証しても、正反対の結果になることも多々ありました。ただし、ナビ部分に「プルダウンメニュー」を採用しているなら、左ナビに軍配を上げます。

合理的なのはどちらか

本稿での「プルダウンメニュー」とはナビ部分にマウスを重ねると、コンテンツの中央に向けて詳細項目や案内が表示されるものを指すとします。

右ナビでこれを設置すると、画面右から中央に向けて「メニュー」が表示されます。たいていのブラウザはスライダーが右側にあり、これを操作してからナビにマウスを重ねると、プルダウンメニューが肝心のコンテンツを隠してしまうのです。スライダーからの距離が短い右メニューの方が、個人的には合理的で好きなのですが、いちいちプルダウンメニューが表示され、それを消すためにマウスを操作するのは非合理的です。

今、2カラムのデザインをオススメするのは「レスポンシブウェブデザイン」も理由です。

レスポンシブウェブデザインとは、コンテンツはそのままに、CSSなどによって、表示する端末に合わせたデザインを提供するアプローチの総称です。端末の高機能化・高精細化により、タブレットやスマホでも、パソコン向けのサイトをそのまま見ても不自由がなくなりつつあり、何が何でもレスポンシブウェブデザインを推奨する立場には立ちません。しかし、レスポンシブウェブデザインには、取り組むだけの価値があります。

本当に伝えるべきものは？

一度に表示できる情報量が多いと、コンテンツの絞り込みを阻害することがあります。これを最初に実感したのが2カラムと3カラムの比較で、次がレスポンシブウェブデザインに取り組んだときのことです。

あれもこれもと、網羅的にコンテンツ表示させたスマホの画面は窮屈で、よくみれば似たニュアンス、優先順位の低いコンテンツまでナビに入れ込んでいることに気がつきます。スマホやタブレットの小さな画面は「必要なコンテンツ」「伝えたいコンテンツ」を考える好機なのです。いわゆるモバイルファーストの考えですが、実際に情報を整理しようと手を動かすと発見は多いものです。

そして、2カラムのページをスマホ向けにアジャストするなら、ナビの表示場所はコンテンツの上か下に配置するだけ。レスポンシブウェブの専門家、研究家には叱られることでしょうが、画面の小さいスマホやタブレットでできることは限られており、CSSで見かけ上を変えるだけなら大した手間は不用です。もっとも、これも数年後には陳腐化している可能性は否定しきれませんが。

余談レスポンス

あるクライアントのサイトを、リニューアルに際してレスポンシブウェブデザイン化しておきます。構造化してあったので、作業時間は1日と要せずに完成し、すこしドヤ顔気味に納品（アップロード）すると、クライアントの反応はゼロ。スマホもタブレットも持っていなかったことを思い出します。そこでタブレットとスマホを持参して見せた反応は、

ふーん

端末ごとに切り替わる画面を見ても、それは「端末」が自然にやっていることと思ったのです。

街角のレスポンシブウェブデザインの理解はこんなものかもしれません。しかし、それでも時代にキャッチアップしていくのがWeb担当者の仕事です。そうして、すぐにノスタルジーの扉を開くことになるのですが、だからこそおもしろい仕事だと再確認します。