2-5
スマートフォン用サイトの主な UI パターンスマートフォン用の Web サイトで利用される、代表的な UI デザインを見ていきましょう。

ヘッダーを機能的に使う
CB2
スマートフォン用サイトのヘッダーは、比較的狭めにレイアウトされたものが多い印象です。画面サイズが小さく、できるだけ多くの情報をファーストビューで見せるために、狭めのヘッダーでレイアウトするからでしょう。メ
ニューや問い合わせなどのユーティリティ的なボタンがヘッダー内に一緒に表示される例もあります。
アプリのデザインではスクロールをしてもヘッダーが固定されているものが多いのに比べ、スマートフォン用サイトではスクロールによって画面から消える場合がほとんどです。これは、スマートフォン OS のブラウザーでは固定配置が難しいものがあることが大きな理由のひとつです。
http://www.cb2.com/

104

Stowe Mountain Resort
かなり狭めのヘッダーでデザインされている Web サイトです。ヘッダーにはサイトの主要メニューではなく、ホーム、検索、問い合わせなどのユーティリティを配置し、主要メニューはメインビジュアルの下にアイコンとして配置されています。

Nothing Interactive
ヘッダーに企業ロゴ、連絡先、検索、ナビゲーションを機能的に配置したサイトです。誤操作が起こらないように、それぞれのボタンのヒットエリアを広めにしています。
http://www.nothing.ch/en

スマートフォンとタブレット用の Web デザイン

2

http://www.stowe.com/

105さまざまなナビゲーション
スマートフォン用サイトでも、ナビゲーションの UI は Web サイトごとに個性的にデザインされています。ナビゲーションの各ボタンは、ヒットエリアを十分に確保することがポイントです。

ボタン／タブ型
iichi
スマートフォンの設定画面などで使われている標準 UI に似たボタンを、ページ上部でナビゲーションとして取り入れています。CSS3 を使った軽量な実装と、アイコンを取り入れることでよりわかりやすいボタンになっています。ページ下部の「作品カテゴリー」の多種類のカテゴリーも、アイコンを効果的に使用しています。

toto 公式サイト
パソコン用サイトでもよく使われる基本的なパターンである、タブ型のナビゲーションを採用しています。このサイトでは、選択エリアの縦幅が広くなることで強調する工夫がほどこされているのに加え、カラーリングでも明確な区別がされています。選択肢が最大でも 5 つ程度の比較的少なめのナビゲーションをデザインする際に検討したいスタイルです。

http://www.iichi.com/mobile/106

http://www.toto-dream.com/

iPhone のラジオボタンの標準UIUNIQLO
アイコンとテキストによるナビゲーションです。このタイプはページの上部に配置することがほとんどです。また、選択されている該当ページは色を変えたり、アンダーラインを入れたりなどの方法で強調します。ページ上部のナビゲーションエリアを効率的に活用し、商品検索の位置やカテゴリーボタンも適切に配置するなど、よく設計されていることがわかります。

2

http://www.uniqlo.com/jp/sp/

アコーディオン型
開されるメニューです。アコーディオンの蛇腹のように閉じたり開いたりするので「アコーディオンメニュー」と呼ばれます。ナビゲーションの項目数が比較的多い Web サイトに適しています。

Roadtrippers
ナビゲーション項目をタップすると下側が開き、そこにサブメニューがリスト状に表示されます。
http://www.roadtrippers.com/

スマートフォンとタブレット用の Web デザイン

リスト状に並んだナビゲーション項目をタップすることで、サブの項目が展

107

リスト型
アコーディオン型に近い印象ですが、あらかじめ読み込まれていたサブメニューをタップによって表示するのに対し、リスト型ではその項目に該当するページに直接遷移する手法がとられます。そのため、上部には上の階層に戻るためのボタンを設置するのが一般的です。

Ithaca College, Ithaca, NY
リスト型メニューを中心に構成した Web サイトです。このサイトのように、比較的規模が大きめで階層の深い Web サイトに適しているといえます。
http://www.ithaca.edu/

ダッシュボード型
トップページにアイコンを並べたスタイルで、一見、スマートフォンのホーム画面に近い印象のナビゲーションです。アイコンとメニュー名で構成する場合が多く、各メニューはグリッド状にレイアウトします。
メニューが多くてもグリッドに沿って整然と並べることができ、ボタンとボタンの距離も離れているので操作性の面でもゆとりがあります。また、アイコンを含む四角形のエリアが印象を決める大きな要素となるため、比較的グラフィカルでデザイン性の高いインターフェイスが実現できます。

http://eurekasoft.com/m.html

108カルーセル型
カルーセルとは「回転木馬（メリーゴーラウンド）」の意味であり、フリックによってコンテンツが次々と入れ替わるため使われている用語

スマートフォンでよく使われる UI に「カルーセル」があります。これは指でコンテンツを左右にフリックするインターフェイスを指し、スムーズな操作感がいかにもスマートフォンらしいといえます。
トップページのメインビジュアルに活用されることが多い UI です。ただし、左右の矢印ボタンや切り替えボタンなど、カルーセル型のUIであることを、まずは視覚的に伝える必要があります。
以下のふたつのサイトは、小さな丸いボタンを表示しています。これにより、何枚の画像があるのか、いま何番目の画像なのかすぐにわかります。
また、左右に配置した矢印ボタンも、切り替えが可能であることを伝える

スマートフォンとタブレット用の Web デザイン

2のに大切な役割を果たしています。

http://www.mesan.no/

http://m.popsicle.com/

109データ制作時の注意
スマートフォン用の Web デザインを行う場合、表示領域がすべて使えるとは考えずに、ステータスバー、アドレスバー、ブラウザー下のツールバーによって、画面内は思ったよりも高さがないことを前提にデザイン作業を進めましょう。

標準パーツのサイズを知る
配布されている UI テンプレートなどを使い、表示領域にはめ込むことができるパターンを用意しておくと便利です。標準的なスマートフォンとして iP-hone を想定するのがシンプルです。Android の UI テンプレートも利用できますが、画面サイズが多岐にわたるため、ターゲットとするデバイスのサイズや解像度を確認しておきましょう。
いずれの場合も、ファーストビューの領域がどの程度かをしっかりと把握しておきます。

ツールバー（40px）

URL（120px）

ブラウザー内の表示画面（iPhone 5：888px、iPhone 4：712px）

ステータスバー（88px）

iPhone の Safari の各 UI パーツサイズ
図中の px 数はデバイスピクセス数で記しているので、実際はその半分に縮小されて表示される

110拡大縮小に強いデザインづくり
スマートフォン用の Web デザインを行う際には、デバイスピクセル比を意識する必要があります。具体的には、Retina ディスプレイを搭載する iP-hone 4/4S/5 で画像を美しく表示させるためには、実際に表示させるサイズの縦横 2 倍のサイズの画像を用意する必要があるということです。

Adobe Photoshop などの画像編集ツールでデザインカンプを作成する場合、ベクターデータをできるだけ活用しましょう。Adobe Illustratorで作成したアイコンやパーツは、スマートオブジェクトやパスとして Photoshop にペーストしておくと、後からの拡大縮小や修正に強いデータになります。
デザインカンプ自体を 2 倍の大きさでデザインする方法もありますが、ほとんどのインターフェイスを CSS3 で装飾する前提であれば、等倍でカンプを作成し、画像化するパーツのみをスマートオブジェクトやパスにしておく方法もあります。

です。SVG はこれまで、サポートされているブラウザーが少なかったため、

2特に注目したいのは SVG（Scalable Vector Graphics）形式のデータの活用あまり使われることがありませんでしたが、現在では多くのブラウザーがという実務が、今後は一般的になるかもしれません。

スマートフォンとタブレット用の Web デザイン

SVG をサポートしています。ベクター形式で画像を制作し、SVG で書き出すSVG（Scalable Vector Graphics）形式は、Adobe Illustrator で作成したアートワークを［別名で保存］で書き出すことができる

111

ワイヤーフレーム／ペーパープロトタイピングの活用
インターフェイスの方向性が決まっていないと、試行錯誤に時間がかかってしまい、スムーズな作業が難しくなってしまいます。企画やアイデア出しの段階では、オンラインのワイヤーフレーム作成サービスやペーパープロトタイピングで全体像を決めていくのもよい方法です。インターフェイスの方向性を決めておくと、データ制作時の大きな指針となり、スムーズな進行につながります。

ペーパープロトタイピング
紙に手書きすることで、インターフェイスやデザイン、インタラクションなどを検 証する手法。もっとも簡単なのはフリーハンドで書くことであるが、デバイスの外観（ワイヤーフレー
ム）を印刷した紙を用意したり、ステンシルを使って書くなど、さまざまな方法がある

代表的なインターフェイスの種類やそれぞれの特徴を把握していると、UI に関する議論を深めることができます。知識だけでなく、経験にもとづいた操作感のイメージも不可欠です。

ペーパープロトタイピングの制作支援ツール pidoco

https://pidoco.com/en/lp/paper-prototyping

モックアップ作成のための支援ツール mockingbird

https://gomockingbird.com/

ペーパープロトタイプを作成するためのステンシル

http://www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

112