少ないエリアで多くを見せる「隠すレイアウト」フルブラウザ機能を備えたスマートフォンだが、PCのディスプレイと比べると、その表示領域は圧倒的に狭い。スマートフォンに最適化したサイトでは、重要なコンテンツをなるべく削除しないで閲覧できるようにするかが課題の一つになるだろう。今回は、情報量の多いコンテンツを「わかりやすく隠すレイアウト」を紹介する。スマートフォンの小さな画面で効率よく情報を見せるには?PCサイトを元にスマートフォンサイトを制作する場合、デバイスの特徴やユーザーの利用シーンを想定して、移行するコンテンツの選別が必要になってくる。厳選したつもりでもコンテンツ量が多く、表示領域に困ることがあるかもしれない。PCサイトであれば、カラムを複数に分割したりポップアップを活用したりなど、さまざまな対応方法が考えられるが、スマートフォンではそのような解決策はあまり現実的ではない。そこで、こうした問題の解決策として挙げられるのが、「隠すレイアウト」だ。タブ切り替えやアコーディオンUI、フリック&スライドなど、本来のコンテンツ量を縮めて表示するレイアウト方法のことである。これにより、スマートフォンの小さなディスプレイという制限を越えて多くのコンテンツを収めることが可能になる。「隠すレイアウト」の例あきゅらいず美養品http://www.akyrise.jp/アコーディオンが開くことで、フリック&スライドのエリアが現れるレイアウトが特徴のスマートフォンサイト。フリック&スライドのコンテンツ内をテキストにし、動作が重くならないように工夫されているPSFA[パーフェクトスーツファクトリー]http://www.perfect-s.com/mobile/フリックに対応した、目を惹く大きなメインイメージと、わかりやすい背景色で分けられたタブに加え、ページ内のアンカーリンクを使い、コンテンツを効果的に見せているただし、「隠すレイアウト」を用いる際には、「わかりやすく隠されている」必要がある。アコーディオンメニューを設置した際、そこが開閉することがわからないデザインであったり、コンテンツが展開されたことがわかりづらいと、ユーザビリティを損なってしまうことになりかねない。「隠すレイアウト」が必須のスマートフォンサイトでは、本当に「隠れてしまう」ことは致命的なので気をつけなければならない。「タブ切り替え」は、PCサイトでは各タブ内のコンテンツをまとまりとして見せる場合に用いることが多い。スマートフォンサイトでもまとまりを表すが、限られた表示領域内でコンテンツを順番に見せる際には特に役立つ。わかりやすく隠すためのポイントタブ切り替えを設置する際、見落としてしまいがちなのがタブの幅と数である。タブの見出しに長い単語が入ったり、タブの数自体が多かったりする場合、サイト幅に収まらないことがある。した場合に対処するため、タブ切り替えにフリック機能を付けておこう。toolkithttp://www.winktoolkit.org/jQueryなどと同じJavaScriptフレームワークの一種。Toolkitのサンプルを参考に進める。HTMLのhead要素内にCSSファイルとJavaScriptファイルを読み込む。Toolkitフレームワークのコアファイルで、02の「tabcontainer.js」が今回のタブ切り替え用の関数が盛り込まれたプラグインだ。Toolkit標準のテーマを採用しているタブの内容は、body要素内に03のように記述する。後述するJavaScript関数を起動するため、body要素にonloadイベントを追加しておく(03)。タブは04のような構造になっており、idを備えたdiv要素に共通のclassを設け、この中にタブのタイトルと本文をマークアップして格納する。通常、スマートフォンでは8つものタブは表示領域に収まらないが、フリック機能を付加することで実現可能になるJavaScriptの記述JavaScriptはプラグインの読み込み後に、04のように記述する。05は各タブのidと対応させる。06ではデフォルトで表示されるタブを指定する。タイムラインの表示に便利な縦型フリックTwitterのツイートやblogのエントリなど、いわゆる「タイムライン」として見せる縦長のコンテンツは、PCではカラムを分けてレイアウトすることが多い。スマートフォンは画面が小さいため、カラムを分割してのレイアウトは難しい。いったコンテンツをスマートフォンで表示する時に便利なのが「縦型フリック」だ。わかりやすく隠すためのポイント「縦型フリック」とは、親となるボックスを用意し、その中に複数の要素を並べ、フリックで縦に動かすというものだ。これを実装する際に気をつけたいのは、通常のスクロールの邪魔にならないようにすること、つまり、フリックする部分が大きなエリアを占めないようにすることだ。横位置で持ったときは画面が横長になり、コンテンツが拡大されることが多い。すると画面一杯をフリックエリアが広がってしまい、それより下にスクロールできなくなってしまう。そのためには、左右に余白を取っておくか、高さを制限して回避しよう。今回はlagos_on氏の「jQuery.flickable」(01)を使用する。01プラグインのページjQuery.flickablehttp://lagoscript.org/jquery/flickable/横型・縦型のフリックの他にも、縦横にフリックできるサンプルや、フリックON/OFFがスイッチできるサンプルなども公開されているHTML/CSSの記述まずはhead要素内でjQueryとプラグインを読み込む(02)。body要素内は03の通りで、ul要素の外側をdiv要素で囲い、idを付けておく。このidがJavaScript起動の起点になる。コンテンツは、それぞれのli要素内に記述する。六つ目のli要素の中の「class="space"」のdiv要素は、最後のli要素のフリックの挙動をきれいに見せるためのダミー04CSSで縦型スクロールを作成jQuery.flickableはPCでもフリックの動きを確認でき、通常のスクロールとしても使用できる点が非常に優れているJavaScriptの記述JavaScriptは05のようになる。先ほどのdiv要素に付加したidを指定し、flickable関数を呼び出すだけだ。関数内で指定しているのは、どの要素をフリックの対象とするかだ。「li」を指定することで、li要素を基準にスクロールが付いてくるようになる。縦型フリックは、これで実装完了だ。2」の部分で、縦にフリックが可能。Lab.で紹介されている「開閉メニュー」も「隠すレイアウト」の1つと言える。これはFacebookのスマートフォンサイトなどに用いられているレイアウトで、メインコンテンツの裏にナビゲーションなどのメニューを配置し、ボタンタップまたはスワイプでスライド表示させるものだ。下までスクロールしなくてもナビゲーションにアクセスできるため、非常に有用なレイアウトである。Lab.でわかりやすく説明されているので、参照してほしい。一覧表などのリストで各項目における詳細情報を表示したい時や、ローカルナビゲーションなどでよく見られるのがアコーディオンUIだ。スマートフォンサイトでは開閉のアニメーションを省略していることがあるが、画面が突然切り替わったような感覚をユーザーに与えないためにも、開閉のアニメーションは付けておきたいところだ。わかりやすく隠すためのポイントアコーディオンUIでは、「同じ一つの要素が開いたり閉じたりしている」と、ユーザーに認識されるように実装しなければならない。ここでは、同時に複数のコンテンツが展開しているとページ内の移動が煩わしくなるので、開いているのは常に一つという仕様にする。伸縮する中身のコンテンツ量が多いと、画面の大半が一気に大きく変化するため、どこが開いてどこが閉じたのかを見失いかねない。そのような事態を避けるために、開閉のアニメーションも付けておこう。Toolkitフレームワークを使用する。ToolkitのアコーディオンUIは、他のプラグインに比べ、iPhoneでもAndroidでも、安定して滑らかな動作をする。HTMLのhead要素内には01のようにCSSとJavaScriptファイルを読み込み、body要素内は02のようにする。アコーディオンUI部分は、後述するJavaScriptを呼び出すと、「id="output"」の要素に出力される。Toolkitのコアファイルの後にプラグインを読み込ませる02body要素の記述ページの要素を読み込んだ直後にinit関数が動作するように記述しておくJavaScriptの記述body要素内でアコーディオンUI部分のコンテンツを記述しなかったのは、ここに記述するためだ(03)。init関数の中で01のようにアコーディオンUIの各要素を定義する。addSectionメソッドの1つ目の引数にアコーディオンが閉じた状態でも表示されるテキストを記述し、2つ目の引数にアコーディオンが展開した状態で表示されるコンテンツをHTMLで記述する。これで、開閉のアニメーション付きのアコーディオンUIの実装が完了だ(04)。03JavaScriptの記述JavaScript内に、アコーディオンUI部分のコンテンツとなるHTMLを記述する04開閉アニメーション付きアコーディオンの完成コンテンツ内に画像を置いたときでも開閉は滑らかだ。Toolkitのサイトには、他にも多くの「隠すレイアウト」が掲載されている。モーダルウインドウはその1つで、特定の要素をタップすると、そこから半透明のウィンドウが立ち上がってコンテンツが表示されるというものだ。タップする元の要素をモーダルウインドウの起動を期待させるデザインにすることは必須だが、スマートフォンサイトでポップアップやライトボックスのような表現が可能になる、非常に有用なUIと言える。アイコンをタップすると、ズームしながらウインドウが立ち上がる。Reserved.特定商取引法に基づく表示プライバシーポリシーサイトマップ。