レスポンシブwebデザイン/サイト構築のカンどころ - AdSense実験室

レスポンシブwebデザイン/サイト構築のカンどころ

2013-10-01

先日、「AdSenseの夏休み」企画に参加する形で、運営サイトのひとつをレスポンシブwebデザインに対応させました。 これまでWordPressのテンプレートを利用する形でのレスポンシブ化を行ったことはありましたが、デザインも含めて自分でイチから構築するのは今回が初めてです。
というわけで、初のレスポンシブ化作業のなかで試行錯誤した点や、新たに学んだことなどをご紹介したいと思います。

画面構成

まずは、最終的に完成したものから。ブラウザで実際のサイトにアクセスするならこちらへ。→ なつレゴ

サイトのブロック構成図

<図1>が全体図。実際はもっとタテに長いんですが、一部省略しています。

<図2>はそのブロック構成図。
ページ先頭にメニュー、続いて幅1カラムのタイトル画像(A)。その下に1/2カラムのブロックが4つ(B~E)。さらにその下に1/3カラムのブロックが6つ(F~K)という構成です。

<図3>はスマホでレスポンシブ表示した場合の画面。スマホの場合はA~Kの各ブロックが図のように等幅でタテに並びます。

レスポンシブwebデザインでの画面設計は、このようにコンテンツをブロック単位に分けてレイアウトすることが基本です。 これらのブロックはブラウザの画面幅に応じて流動的に並べ変わりますので、ブロックが横並びでも縦並びでも、どちらでも不自然にならないよう、変化に応じたデザインを考えなければなりません。 あまり凝ったデザインだとその点で苦労するかもしれませんので、最初はなるべくシンプルなデザインから始めるのがおすすめです。

Pureでレスポンシブ対応させる手順

さて、ここからは具体的なレスポンシブ化の作業についてです。

ある程度スキルのある方ならゼロから全てを自力で構築することも可能でしょうけど、これはなかなか大変な選択肢です。いきなりそんな高いハードルを目指すのではなく、まずは世の中にある便利なツールを使うことで時間と労力を節約する方向で考えたいものです。TwitterのBootstrapみたいに、いまはオープンソースでフリーで使えるレスポンシブフレームワークもたくさん出ていますので。

自分なりにいろいろと合いそうなものを探した結果、私は米Yahoo製の「Pure」というフレームワークを使うことにしました。

Pureに決めたのは、Yahooというメジャーブランド製なので、それなりの完成度は期待できるだろうという安心感があること。YUIライブラリとの親和性も当然高いだろうし。
それから発展途上の新しいフレームワークだという点。バージョンアップも頻繁に行われていたし、最新技術などへの対応も早そうに思えたので。(これはあくまで希望的観測)
そして一番の理由は、シンプルな文法で自由度が高く、自分で好きなようにカスタマイズできそうだったことです。

Pureの使い方

ではさっそくPureでレスポンシブ化を行う手順について見て行きましょう。

まずはHTMLのヘッダ部分に以下の1行を記述します。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">

準備はこれだけでOK。これですぐにPureを使うことができます。

では具体的にこれで最初に見ていただいたような2カラム、3カラム構成のレスポンシブレイアウトを作ろうと思った場合、どうすればよいのかといいますと、

まずは2カラムの場合。

2カラム構成をPureで記述

<div class="pure-g-r">
    <div class="pure-u-1-2">カラムA</div>
    <div class="pure-u-1-2">カラムB</div>
</div>

こんな感じでまず全体を"pure-g-r"のクラス指定をしたDIVタグで包みます。 続いて中の2カラム部分に、"pure-u-1-2"のクラス指定をしたDIVタグを2つ並べる。 こんな感じです。クラス指定の「1-2」の部分は、「1/2」の意味と考えていただけると分かりやすいと思います。

3カラムの場合はこうなります。

3カラム構成をPureで記述 "3カラム構成をPureで記述")

<div class="pure-g-r">
    <div class="pure-u-1-3">カラムA</div>
    <div class="pure-u-1-3">カラムB</div>
    <div class="pure-u-1-3">カラムC</div>
</div>

最初に説明した「ブロック」の構成を、このようにDIVタグに置き換えていくだけです。
簡単でしょ?

それから、外側の"pure-g-r"のクラス指定。この末尾の「r」はレスポンシブを表していて、「r」を取った"pure-g"だけでクラス指定をすると、中のブロックが「レスポンシブ化しない」ブロックとなります。
つまり、画面幅が縮まってもブロックが縦並びにフローティングせず、3カラムなら3カラムを維持したまま、縮小されるわけです。

こうした約束事を把握しておけば、最初に見ていただいたような1~3カラムの複数のブロックが混在するレイアウトでも、決して難しくないことがお分かりいただけるかと思います。

スポンサーリンク

レスポンシブ・レイアウトの注意点

技術的な話はこれくらいにして、次にレスポンシブでレイアウトを考える際の注意点についてお話します。 どちらかというとHTMLのコーディングよりこちらの方が重要かもしれません。

メニューの工夫

まずメニューですが、私はスマホ表示の時にはスクロールに連動せず「画面上部に張り付く」メニューバーを使いました。
情報量の少ないスマホの画面では、サイトに訪れた利用者が、自分がいまどの階層にいるのか分からず迷子になりやすいと感じたためです。

▼こんな感じ。スクロールしてもメニューバーは固定で動きません

スクロールに連動しないメニュー

ページの上部に常にメニューが出ていれば、いつでも目的ページに戻ることができるので利用者も安心です。

ちなみに、もしPureを使っているなら、このメニューの実装はとってもカンタン。

<nav id="horizontal-menu" class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
    <a href="/" class="pure-menu-heading"><img src="/static/images/logo7205.png" /></a>
    <ul id="std-menu-items">
        <li><a href="/review">レビュー</a></li>
        <li><a href="/catalog">カタログ</a></li>
        <li><a href="/gallery/1">作品集</a></li>
    </ul>
</nav>

こんな感じで、メニューのクラス定義で"pure-menu-fixed"を指定するだけです。

【2013.10.17 追記】
この「上部に貼り付くメニュー」ですが、Google AdSenseチームの方より、状況によっては誤クリックを招く可能性があるので要注意、とのご指摘をいただきました。
確かに、コンテンツスクロール時に↓のようにメニュー直下に広告が来る場合もありえますよね。

メニューと広告の配置

で、こういう状態だとメニューと広告が近すぎて誤クリックを誘発する危険性があるというわけです。
なるほど、そこまでは考えが回りませんでした。
よいアイデアと思いましたが、ポリシー的にグレーゾーンなことはやりたくないので、現在はこのメニューは実装しておりません。

指での操作を意識する

PCがマウス操作なのに対し、スマホやタブレットは基本、指で操作します。 なので、ナビゲーションに関してはテキストリンクよりアイコンなど、「見て分かりやすく、指で操作しやすい」UIの方がユーザーには親切です。

このサイトでは思い切ってパンくずリストも止め、かわりにクリッカブルなサムネイル・アイコンを並べることにしました。 クリックした先にどんな情報があるのかも分かりやすくなり、まさに一石二鳥です。

サムネイル・アイコン

ファーストビューは必ず目視でチェック

スマホで威力を発揮するサムネイル・アイコンですが、使い方を間違えるとかえって逆効果になることも。そんな失敗事例も紹介しておきます。 私はもともとサムネイル・アイコンをパンくずリストの代わりに考えていたため、最初はそのままページの上部に設置する予定でした。
ところが実際にテスト画面をスマホで見てみたところ、こんな有様に。

サムネイルがいっぱい

画面がアイコンに占領されて肝心のコンテンツが下に追いやられ、かろうじてタイトルだけが見えている状態。まるでサムネイルがメインコンテンツみたいな、なんだかよく分からないページになってしまっています。
これではかえって逆効果と、アイコンナビゲーションを即刻ページ最下部に移動させました。
アイコン中心のナビゲーションというアイデアは悪くなかったのですが、このように設置する場所や使い方を間違えると逆効果になることもあるわけです。

これはコンテンツを構成する上で、とても大事なことだと思います。

どのページでも「そこに何があるのか」がファーストビューで判断できないと、ユーザーは何のページか分からず混乱してしまいます。
こういう問題は「実際にスマホの画面で目視して確かめる」ことを行えば、確実に対処できることです。
頭で考えるだけでなく、実際に見て、使ってみることを強くおすすめします。

コンテンツの構成を再考する

先ほどの「ファーストビューが大事」というお話。せっかくなので、もうひとつ事例を。

このサイト、もともとは下図の(旧)のような構成になっていて、いまとはコンテンツの配置が上下逆になっていました。

コンテンツ構成

しかしこれも先ほどの事例と同じく、スマホの画面で実際に見てみると、最初に「製品レビュー一覧」のリストが延々と続き、いったい何のサイトかよくわからない状態に。
実は、リニューアル前がこのような構成だったため、たいして問題意識を持つことなく以前のスタイルを踏襲する形で作業を進めていたのですが、PCで見ていた時は問題を感じなかったものの、スマホの場合は確実に直帰率が上がってしまいそうな印象でした。
思い切って上下を入れ替えてイメージ画像を先に持ってくることで、「ここが何のサイトなのか」がより分かりやすくなるとともに、画像が先に目に飛び込むことで、レゴらしい明るくて楽しげな雰囲気を演出する効果も得られました。
本来はメインコンテンツだったものを後ろに下げることにはややためらいもあったのですが、結果的には決断して正解だったと思います。

見せ方を工夫する

最後に、コンテンツをより魅力的に見せる「見せ方」について。
アイコンやサムネイルを使うことで誘導がスムーズになるのは既にお話ししたとおりです。
そしてこれには画面をより華やかに演出するというもうひとつのメリットもあることも、1つ前でお話ししました。

ここではさらにもう一歩踏み込んで、積極的な「演出」をすることでコンテンツがより分かりやすく、魅力的に見せられるテクニックをご紹介。

アイコンにアクセントをつける

図の左側はごく一般的なよくある構成ですね。タイトルがあって、概略があって、下にサムネイルが並んでいる。
これをもうひと工夫して右のようにするとどうでしょう。
サムネイルの一つだけを大きくアイキャッチ風にしただけですが、これだけでコンテンツへの注目度がグッと高まったと思いませんか?
レイアウト的にも、おしゃれでカッコイイ感じですよね。
雑誌などでもよく目にする手法ですが、サイズが統一されていることの多いアイコンをただそのまま並べただけでは、均一化してしまってかえってどれも目立ちません。
こんな感じでアクセントをつけることで、メリハリがついてコンテンツへの注目度がより高まるわけです。

このテクニックはスマホに限ったものではありませんが、画面の狭いスマホでは特に目にとまりやすく、有効ではないかと思います。

スポンサーリンク