スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これはアプリ」「これはWebサイト」という区別はしていません。そのため、一般的なアプリとWebサイトの振る舞いが異なると、ユーザを戸惑わせる原因になりえます。

AppleとGoogleのガイドラインを比較する目的は、両者に共通する部分、いずれかが優れた部分を抜き出し、スマートフォン向けのWebデザインにおけるセオリーを学習するためです。

以下は、主な比較項目をまとめたスライドです。詳細はスライドを見ていただくとして、要点のみをこのエントリーでは記載しておきます。

1. 文字

1-1. 最小サイズ

欧文＝11pt、和文＝13pt

Apple、Googleともに文字の最小サイズに関する具体的な指定があります。双方を判断し、欧文は11pt相当、和文は13pt相当を最小サイズとするのが良いでしょう。

1-2. 見出し

13pt←15pt（基準）→17pt→21pt→24pt→34pt→45pt→56pt→112ptでサイズ変化

Appleには指定がありませんが、Googleでは、 欧文・和文ごとに、サイズ、ウエイト、行間についてかなり細かく指定されています。Googleのガイドラインはあくまでマテリアル・デザインのためのガイドラインであるため、厳密に踏襲する必要はないでしょう。ただ、デザインをシンプルにするためには、見出しの装飾を極力抑える必要があり、そうなると、文字サイズの違いで見出しレベルを表現しなければならなくなります。その参考値として、Googleが規定している文字サイズを捉えておくとよいのではないでしょうか。

1-3. 行長

欧文＝60字以内、和文＝30字以内

Appleに指定はありませんが、Googleには欧文のみ、本文は60文字以内、見出しは40文字以内で折り返すという指定があります。これを参考とし、欧文では60字以内、和文は30字以内を行送りの基準と捉えるといいでしょう。

1-4. 字間

大きな文字は狭く（-5～-10）、小さい文字は広く（+5～+10）

Apple、Googleともに、文字が小さいほど字間を広くし、大きいほど狭くすべきと書かれています。Googleではトラッキングの値も明確にされています。こちらも厳密に踏襲する必要はありませんが、大きな文字は狭く（-5～-10）、小さい文字は広く（+5～+10）、という定石があると捉えておくとよいでしょう。

1-5. 書体

書体の種類、ウエイトはできるだけ少なく

Appleでは書体を一つに絞る、Googleでは決められた書体を使う、と規定されています。書体はCIやブランド戦略が優先されるべきであり、やはり厳密に踏襲する必要はありません。ただし、書体数、ウエイト数はできるだけ少なくする、というのがセオリーであることは、念頭に置いておくとよいでしょう。

1-6. 色

文字色と背景色の輝度を「4.5:1」以上に

Apple、Googleともに、文字色と背景色のコントラストに関する具体的な規定があります。Googleは色の指定まで行っていますが、これを遵守するとブランドに合わせた配色ができなくなります。ここではAppleのガイドラインを優先し、輝度を「4.5:1」以上の比にする、と捉えておくと良いでしょう。

2. ボタン

2-1. サイズ

横96px×縦96px以上（物理サイズ9mm×9mm以上）

Apple、Googleともに、ピクセル数や物理サイズの規定があります。やや大きめのGoogleを参考値とするのがよいでしょう。

2-2. 形

一般的な形状で、種類は3つ以内に

Apple、Googleともに、形状に関する記述があります。Appleはテキストのみの表現としていますが、これは難しい制約でしょう。フラット（文字のみ）、ライズド（長方形）、フローティングアクション（円形）と3種類の形状を設定しているGoogleのガイドラインの方がより現実的といえます。厳密に守る必要はありませんが、一般的な形状を採用する、種類は3つ以内に押さえる、と捉えておくとよいでしょう。

2-3. 装飾

立体表現を用い、最低限の装飾を施す

Appleではグラデーションやドロップシャドウなどの立体表現を非推奨とし、Googleでは立体表現の活用を推奨しているのが対照的です。フラットデザインのミニマリズムは継承しながら、より分かりやすいUIを規定したのがマテリアル・デザインという歴史に習うわけではありませんが、やはりGoogleのガイドラインの方が現実的でしょう。装飾過多になるは避けながらも、立体表現も活用し、リンクをリンクと認識できるルールをサイト内に敷設すべきです。

2-4. マージン

ボタン同士は16px以上離す

Googleのみ、隣接するボタン同士は16px相当以上空ける、という規定があります。基本的にはこれを参考値として捉えるとよいでしょう。

2-5. ラベル

シンプルな動詞を用いる

ボタンのラベル（文字）について、Appleのみがシンプルな動詞を用いるべきという記述があります。Webサイトもこれに準じるのが良いでしょう。

2-6. 配置

目的を達成するボタンを右、行動を取り消すボタンを左に

行動を選択させるボタンを左右のどちらに配置するか、ということについて、Appleでは破壊的かどうか、Googleでは肯定的かどうかを基準としています。UXに従って考えるべきで、通り一辺倒のルール化は禁物ですが、多くの場合、目的を達成するボタン（「確認」、「実行」など）を右側、行動を取り消すボタン（「キャンセル」「クリア」など）を左側に置くのが基本と捉えておくのがよいでしょう。

3. 配色

3-1. 原則

色を多用せず、基本色は2色以内に。機能上の必然性に従いルール化

Appleでは、色は対話の手段であり使いすぎてはいけない、と記述されています。Googleではプライマリカラーとセカンダリカラーの2色を選び、さらにその各色から3色相を選ぶ、という具体的な規定がなされています。色もブランド戦略の影響を受けるものであり、何も考えずAppleやGoogleに従うべきではありませんが、色は機能を補完するもの、ユーザフレンドリーなUIにはシンプルな配色が望ましい、という基本は押さえておくべきでしょう。

3-2. コントラスト

前景色と背景色の輝度を4.5 : 1以上に

Appleには数値化された明確な規定があり、Googleには「コントラストを確保する」という緩やかな記述があります。様々な光量下での閲覧が想定されるスマートフォン向けのWebサイトでは、コントラストがユーザビリティに大きな影響を与える可能性があります。ここではより厳密なAppleを踏襲し、前景色と背景色の輝度比を「4.5 : 1」以上に保つと考えておきましょう。

4. アイコン

4-1. 形

シンプルで分かりやすいものに

両社ともにシンプルであるべきと規定されています。Appleではストロークについて、Googleではベースの形状にまで言及していますが、シンプルという大きな指針のみ、参考にするのが良いでしょう。

4-2. 色

基本は単色。非選択時は塗り方とコントラストも調整

Appleでは、選択時と非選択時の色の塗り方に関する言及があります。Googleでは、色の濃度を%で指定しています。双方とも厳密に守る必要はありませんが、単色が基本であるというのは、意識しておくとよいでしょう。

4-3. モチーフ

誰もが分かるモチーフに

Googleの、無生物に人間らしさを与えない、という記述が特徴的ですが、これに従うべきかは議論の余地があるでしょう。Appleが規定している「ユーザが認識しやすい普遍性」というのは順守すべき基準になりえるでしょう。独創的なアイコンはNGということです。

4-4. サイズ

アイコン本体は24 x 24 px～50 x 50 pxの間、タッチエリアは44 x 44 px以上

Apple、Googleともにサイズに関する規定があります。両者を統合し、アイコン本体は24 x 24 px～50 x 50 pxの間とし、タッチエリアは44 x 44 pxを最小値とするのがよいでしょう。

5. その他

5-1. イメージ

必然性のある自然で具体的な画像

Googleのみ、画像は飾りではなくツールである、という考え方が述べられています。厳密や制約事項はありませんが、目的に対して明確に機能する自然で具体的な画像であるべきという考え方は、一つの指針にできるでしょう。

5-2. レイアウト

左上が起点。グルーピングと階層化を活用。8がグリッドの最小値

Apple、Googleともに、それぞれ異なる視点からレイアウトに関する言及があります。双方を統合して参考にするのが良いでしょう。

5-3. ライティング

ユーザの知識に合わせた簡潔な表現

Appleでは術後を用い、Googleでは簡潔さを満たすいくつかの基準が示されています。いずれも普遍的なことであり、UIに載せるコピーの参考にできるでしょう。

スマートフォンで動画というと、真っ先に思いつくのはYoutubeにアップしてリンクを張り付ける方法ですが、企業の内規や動画の性質によっては、Youtube上に動画をアップすることができない場合もあります。先日担当したキャンペーンサイトもまさにそうでした。というわけで、ここではYoutube貼り付けじゃない方法での、スマートフォン/タブレット端末用サイトで動画を掲載する際のポイントをご紹介します。違ってるところがあればコメントでご指摘いただけると幸いです。

ちなみに、プラットフォームやOS毎の実装状況をひとまずまとめると以下の通り。なお、スマートフォン/タブレット版はデフォルトブラウザでの利用が前提です。

MPEG4

• MPEG4であれば全てのプラットフォームで再生が可能。
• ただし、動画の中に含まれるメタデータが異なると、同じMPEG4でも環境によって再生ができない。
• そのため、MP4BOX（http://www.videohelp.com/tools/MP4Box）のようなアプリケーションでメタデータを書き換える必要あり。これを行うと、iPhone/iPadでも、Androidでも、PCの各種OSでも再生できる動画になる。
• ブラウザ上でMPEG4の動画をクリックすると、スマートフォンでは専用アプリケーションが立ち上がり、タブレットではブラウザ内で再生される。（PCと同じ挙動）

FLV

• FLVは再生するためにFLASH（SWF）で作成されたFLVプレイヤーが必要になる。必然的に、FLASHの実行を許していないiPhone/iPadといったiOS系端末では再生できない。
• Android系でFLVを再生する場合、専用アプリケーションではなくブラウザ内で実行される（PCと同じ挙動）。ただし、スクリーンサイズが小さいと見づらくなるので、Android系スマートフォンでもMPEG4で専用アプリケーション内で閲覧させるのがいい。

Videoタグの設定方法

• MPEG4をHTMLに埋め込むにはvideoタグを用いる。
• 動画を複数表示する場合には、デフォルトでの読み込みを停止する「preload=”none”」は必須。そうしないと、全ての動画を読み込みに行ってしまう。CPUが非力なスマホではロード中に挙動が極端に悪くなる。
• poster属性を設定しないとサムネイルがなく真っ黒の状態になる。
• 「onclick=”this.play();”」がないとandroid系端末で再生できないことがある。
• iPadでは「controls」を設定しないとブラウザの動画再生用UIが表示されず、再生のコントロールができなくなる。
• videoタグ内にvideoタグ未対応端末へのメッセージを入れる。
• 上記を踏まえると、各種プラットフォームに対応した基本フォーマットは以下のようになる。 <video src=”xxxxx.mp4″ preload=”none” poster=”xxxxx.jpg” onclick=”this.play();” controls > <source src=”xxxxx.mp4″> <div>動画を再生するには、videoタグをサポートしたブラウザが必要です。</div> </video>

MPEG4とFLVの切り替え

• MPEG4であればプラットフォームに依存しないで再生できる。ただ、タブレットでは基本的にPC版と同じサイトを見せることがほとんどだろう。PC版サイトではデザイン性やJSを使ったブラウザとの機能連携などの観点から、FLVでの再生が望ましいことも多い。そこで、スマホとiPadはMPEG4、PCとAndroid系のタブレットはFLVというのが、現状での最適解か。
• PC/タブレット共通サイトにおける、iPadの振り分けはJSで行う。ユーザエージェントがiPad以外の場合FLVを表示し、iPadの場合にはvideoタグを使ってMPEG4を表示する。

その他注意点

• 3G回線を考慮すると、動画のビットレートは200kbpsあたりがよい。
• iPhone/iPadの場合、ThickboxなどのJSライブラリを使って、動画の上にフロートウィンドウを表示させると、フロートウィンドウの下にある動画が優先的にタップされてしまう。つまり、フロートウィンドウ内にあるリンク要素をタップしても、その下にある動画が再生されてしまう。スマホやiPadをターゲット環境に含めるサイトは、動画の上に何かを被せるようなUIにしないほうがよい。