メディア掲載_Web Designing

Web Designing 2012年4月号

執筆:丸茂朋弘 執筆:丸茂朋弘

SmartphoneLab.2012年4月号

少ないエリアで多くを見せる「隠すレイアウト」

フルブラウザ機能を備えたスマートフォンだが、PCのディスプレイと比べると、その表示領域は圧倒的に狭い。スマートフォンに最適化したサイトでは、重要なコンテンツをなるべく削除しないで閲覧できるようにするかが課題の一つになるだろう。今回は、情報量の多いコンテンツを「わかりやすく隠すレイアウト」を紹介する。

スマートフォンの小さな画面で効率よく情報を見せるには?

PCサイトを元にスマートフォンサイトを制作する場合、デバイスの特徴やユーザーの利用シーンを想定して、移行するコンテンツの選別が必要になってくる。しかし、厳選したつもりでもコンテンツ量が多く、表示領域に困ることがあるかもしれない。PCサイトであれば、カラムを複数に分割したりポップアップを活用したりなど、さまざまな対応方法が考えられるが、スマートフォンではそのような解決策はあまり現実的ではない。

そこで、こうした問題の解決策として挙げられるのが、「隠すレイアウト」だ。タブ切り替えやアコーディオンUI、フリック&スライドなど、本来のコンテンツ量を縮めて表示するレイアウト方法のことである。これにより、スマートフォンの小さなディスプレイという制限を越えて多くのコンテンツを収めることが可能になる。

「隠すレイアウト」の例

「隠すレイアウト」の例

あきゅらいず美養品
http://www.akyrise.jp/
アコーディオンが開くことで、フリック&スライドのエリアが現れるレイアウトが特徴のスマートフォンサイト。フリック&スライドのコンテンツ内をテキストにし、動作が重くならないように工夫されている

「隠すレイアウト」の例

PSFA[パーフェクトスーツファクトリー]
http://www.perfect-s.com/mobile/
フリックに対応した、目を惹く大きなメインイメージと、わかりやすい背景色で分けられたタブに加え、ページ内のアンカーリンクを使い、コンテンツを効果的に見せている

ただし、「隠すレイアウト」を用いる際には、「わかりやすく隠されている」必要がある。たとえば、アコーディオンメニューを設置した際、そこが開閉することがわからないデザインであったり、コンテンツが展開されたことがわかりづらいと、ユーザビリティを損なってしまうことになりかねない。
「隠すレイアウト」が必須のスマートフォンサイトでは、本当に「隠れてしまう」ことは致命的なので気をつけなければならない。

SECTION1 フリック機能付きタブ切り替えの実装

SECTION1 フリック機能付きタブ切り替えの実装

「タブ切り替え」は、PCサイトでは各タブ内のコンテンツをまとまりとして見せる場合に用いることが多い。スマートフォンサイトでもまとまりを表すが、限られた表示領域内でコンテンツを順番に見せる際には特に役立つ。

わかりやすく隠すためのポイント

タブ切り替えを設置する際、見落としてしまいがちなのがタブの幅と数である。タブの見出しに長い単語が入ったり、タブの数自体が多かったりする場合、サイト幅に収まらないことがある。そうした場合に対処するため、タブ切り替えにフリック機能を付けておこう。ここでは、「Wink Toolkit」フレームワークを使ってタブ切り替えを実装する例を紹介する(01

01Wink toolkit公式サイト

01 Wink toolkit公式サイト

Wink toolkit
http://www.winktoolkit.org/
jQueryなどと同じJavaScriptフレームワークの一種。完成度の高いUIのデモが数多く紹介されている

HTML/CSSの記述

Wink Toolkitのサンプルを参考に進める。まずHTMLのhead要素内にCSSファイルとJavaScriptファイルを読み込む。(02)。01の「wink_1.4.1.min.js」がWink Toolkitフレームワークのコアファイルで、02の「tabcontainer.js」が今回のタブ切り替え用の関数が盛り込まれたプラグインだ。

02CSSとJavaScriptの読み込み

02 CSSとJavaScriptの読み込み

今回はloader.cssを読み込み、Wink Toolkit標準のテーマを採用している

タブの内容は、body要素内に03のように記述する。後述するJavaScript関数を起動するため、body要素にonloadイベントを追加しておく(03)。タブは04のような構造になっており、idを備えたdiv要素に共通のclassを設け、この中にタブのタイトルと本文をマークアップして格納する。

03body要素の記述

02 body要素の記述

通常、スマートフォンでは8つものタブは表示領域に収まらないが、フリック機能を付加することで実現可能になる

JavaScriptの記述

JavaScriptはプラグインの読み込み後に、04のように記述する。05は各タブのidと対応させる。また、06ではデフォルトで表示されるタブを指定する。あとは、init関数を呼び出すことで、フリック対応のタブ切り替えが実行される(05

04JavaScriptの記述

04 JavaScript の記述

「firstSelectedTab」で指定するタブの番号は「0」から始まる(1つ目のタブは「0」、2つ目のタブは「1」……となる)ことに注意しよう

05フリック対応タブ切り替えの完成

05 フリック対応タブ切り替えの完成

フリックまたは左右の矢印ボタンでタブの表示エリアを変更できる

SECTION2 タイムラインの表示に便利な縦型フリック

SECTION2 タイムラインの表示に便利な縦型フリック

Twitterのツイートやblogのエントリなど、いわゆる「タイムライン」として見せる縦長のコンテンツは、PCではカラムを分けてレイアウトすることが多い。しかし、スマートフォンは画面が小さいため、カラムを分割してのレイアウトは難しい。こういったコンテンツをスマートフォンで表示する時に便利なのが「縦型フリック」だ。

わかりやすく隠すためのポイント

「縦型フリック」とは、親となるボックスを用意し、その中に複数の要素を並べ、フリックで縦に動かすというものだ。これを実装する際に気をつけたいのは、通常のスクロールの邪魔にならないようにすること、つまり、フリックする部分が大きなエリアを占めないようにすることだ。特に横位置で持ったときは画面が横長になり、コンテンツが拡大されることが多い。すると画面一杯をフリックエリアが広がってしまい、それより下にスクロールできなくなってしまう。
そのためには、左右に余白を取っておくか、高さを制限して回避しよう。今回はlagos_on氏の「jQuery.flickable」(01)を使用する。

01プラグインのページ

01 プラグインのページ

jQuery.flickable
http://lagoscript.org/jquery/flickable/
横型・縦型のフリックの他にも、縦横にフリックできるサンプルや、フリックON/OFFがスイッチできるサンプルなども公開されている

HTML/CSSの記述

まずはhead要素内でjQueryとプラグインを読み込む(02)。
body要素内は03の通りで、ul要素の外側をdiv要素で囲い、idを付けておく。このidがJavaScript起動の起点になる。コンテンツは、それぞれのli要素内に記述する。
あとはCSSで縦型スクロールの状態まで作成しよう(04

02JavaScriptの読み込み

02 JavaScriptの読み込み

jQueryの最新バージョンだと正しく動作しない場合があるので、「jQuery.flickable」を使用する際は、demoページと同じように1.4.2を使用しよう

03body要素の記述

03 body要素の記述

六つ目のli要素の中の「class="space"」のdiv要素は、最後のli要素のフリックの挙動をきれいに見せるためのダミー

04CSSで縦型スクロールを作成

04 CSSで縦型スクロールを作成

jQuery.flickableはPCでもフリックの動きを確認でき、通常のスクロールとしても使用できる点が非常に優れている

JavaScriptの記述

JavaScriptは05のようになる。先ほどのdiv要素に付加したidを指定し、flickable関数を呼び出すだけだ。関数内で指定しているのは、どの要素をフリックの対象とするかだ。たとえば「li」を指定することで、li要素を基準にスクロールが付いてくるようになる。
縦型フリックは、これで実装完了だ。(06

05JavaScriptの記述

05 JavaScriptの記述

たったこれだけの記述でフリックの実装ができてしまうのは非常に便利だ

06縦型フリックの完成

06 縦型フリックの完成

「Content 1」「Content 2」の部分で、縦にフリックが可能。今後、さらに増えていくと思われる「タイムライン型コンテンツ」は、縦型フリックと組み合わせてレイアウトすることで、「タイムライン」という感覚を損なわずに、項目を「隠す」ことができる

他にもある「隠すレイアウト」part1

前号のjQuery Lab.で紹介されている「開閉メニュー」も「隠すレイアウト」の1つと言える。これはFacebookのスマートフォンサイトなどに用いられているレイアウトで、メインコンテンツの裏にナビゲーションなどのメニューを配置し、ボタンタップまたはスワイプでスライド表示させるものだ。
下までスクロールしなくてもナビゲーションにアクセスできるため、非常に有用なレイアウトである。
詳しくは前号のjQuery Lab.でわかりやすく説明されているので、参照してほしい。

他にもある「隠すレイアウト」part1

Swpnavを使うと、Facebookのスマートフォンサイトのようなレイアウトを再現できる

SECTION3 開閉アニメーション付きアコーディオンUIの実装

SECTION3 開閉アニメーション付きアコーディオンUIの実装

一覧表などのリストで各項目における詳細情報を表示したい時や、ローカルナビゲーションなどでよく見られるのがアコーディオンUIだ。スマートフォンサイトでは開閉のアニメーションを省略していることがあるが、画面が突然切り替わったような感覚をユーザーに与えないためにも、開閉のアニメーションは付けておきたいところだ。

わかりやすく隠すためのポイント

アコーディオンUIでは、「同じ一つの要素が開いたり閉じたりしている」と、ユーザーに認識されるように実装しなければならない。ここでは、同時に複数のコンテンツが展開しているとページ内の移動が煩わしくなるので、開いているのは常に一つという仕様にする。
伸縮する中身のコンテンツ量が多いと、画面の大半が一気に大きく変化するため、どこが開いてどこが閉じたのかを見失いかねない。そのような事態を避けるために、開閉のアニメーションも付けておこう。

HTML/CSSの記述

ここでは、再度、Wink Toolkitフレームワークを使用する。Wink ToolkitのアコーディオンUIは、他のプラグインに比べ、iPhoneでもAndroidでも、安定して滑らかな動作をする。
HTMLのhead要素内には01のようにCSSとJavaScriptファイルを読み込み、body要素内は02のようにする。アコーディオンUI部分は、後述するJavaScriptを呼び出すと、「id="output"」の要素に出力される。

01JavaScriptの読み込み

01 JavaScriptの読み込み

SECTION1と同じように、Wink Toolkitのコアファイルの後にプラグインを読み込ませる

02body要素の記述

02 body要素の記述

ページの要素を読み込んだ直後にinit関数が動作するように記述しておく

JavaScriptの記述

body要素内でアコーディオンUI部分のコンテンツを記述しなかったのは、ここに記述するためだ(03)。
init関数の中で01のようにアコーディオンUIの各要素を定義する。addSectionメソッドの1つ目の引数にアコーディオンが閉じた状態でも表示されるテキストを記述し、2つ目の引数にアコーディオンが展開した状態で表示されるコンテンツをHTMLで記述する。
これで、開閉のアニメーション付きのアコーディオンUIの実装が完了だ(04)。

03JavaScriptの記述

03 JavaScriptの記述

JavaScript内に、アコーディオンUI部分のコンテンツとなるHTMLを記述する

04開閉アニメーション付きアコーディオンの完成

04 開閉アニメーション付きアコーディオンの完成

コンテンツ内に画像を置いたときでも開閉は滑らかだ。また、各要素右側の矢印アイコンが開閉時に90度ずつ回転する

他にもある「隠すレイアウト」part2

Wink Toolkitのサイトには、他にも多くの「隠すレイアウト」が掲載されている。
モーダルウインドウはその1つで、特定の要素をタップすると、そこから半透明のウィンドウが立ち上がってコンテンツが表示されるというものだ。タップする元の要素をモーダルウインドウの起動を期待させるデザインにすることは必須だが、スマートフォンサイトでポップアップやライトボックスのような表現が可能になる、非常に有用なUIと言える。

他にもある「隠すレイアウト」part2

アイコンをタップすると、ズームしながらウインドウが立ち上がる。ウインドウ内でのスクロールを可能にする拡張も可能だ

お問い合わせはこちらからどうぞ