モバイルWebのUIデザインことはじめ : 第5回 プラットフォーム別のデザイン特性ーiOSの場合
前回はAndroidのデザインガイドラインを解説しました。今回はiOSについて説明します。
iOSはバージョン7でスタイルの大きな転換をしました。
iOSは、バージョン6まで物理的に存在する道具の操作感を模したUIスタイルを採用していました。ツヤがあって押したくなるぽってりした質感で表現されているボタンや、まるで本物のノートのように「めくれた感じ」のあるノートアプリなど…。こうしたUIスタイルの方向性は「スキューモーフィズム」と呼ばれ、iOSならではの世界観を作っていました。
ところがAppleはiOS7から、こうしたビジュアル的なギミックに頼ったスタイリングを一新し、質感の演出に凝ることを避けるよう指針を変更しました。一般には「フラットデザイン」と呼ばれるようになり、現在に至ります。
なお、iOSは、この記事が公開されるころにはバージョン8の正式版がリリースされる予定です。iOS8は7のスタイル指針を継承しています。
iOSのデザインガイドラインは以下にまとめられています。
iOS7 Human Interface Guideline
画面遷移の設計指針、アニメーション効果を含めたインタラクション、余白サイズの設定やアイコン、望ましいフォントスタイル設定に至るまで「基本的な考えかた」と「デザインの例」を言葉で説明しています。そのため非常にボリュームが多いです。
WEBページのスタイリングで参考になりそうな指針を抜粋しましょう。ここで触れる値はiOS7向け、iPhone4および5での表示を想定しています。
レイアウト
iPhone 5と4は幅サイズについては640pxで、同じ値です。また、ナビゲーションバーやタブバー、テーブルセルの大きさも共通の望ましいとされている設定値があります。
例えば、テーブル（リストを並べたリンク集のようなレイアウト）の1項目の高さは88pxです。画面下に出てくるアイコン付きのナビゲーション（タブバーといいます）の高さは98pxです。
なお、画面左右の余白は30pxが標準です。
デザインのテンプレートはサードパーティーのWEBサイトteehan+laxからダウンロードできます。
タップ領域
タップ可能な領域の基準サイズは44px四方です。リンクボタンのサイズやナビゲーションバーのサイズ設定で目安にしましょう。
詳しくはiOS7 Human Interface Guidelines レイアウトの項目を参照してください。
アイコン
繊細な線で描画した丸みのあるフォルムのアイコンがいわゆる「iOSっぽい」アイコンです。
フォルムの描き方に推奨の形はありませんが、タップ時の反応には推奨があります。ノーマル時は線描のアイコンでも、タップ時は中を塗りつぶす。塗りつぶしが難しいフォルムの場合、線を太くして色を変えてインタラクションを表します。
詳しくはiOS7 Human Interface Guidelines バーボタンアイコンの項目を参照してください。
タイポグラフィ
iOSの標準日本語フォントはヒラギノ角ゴシックファミリーです。Mac OSの日本語標準フォントも同じなのでMacユーザーにはなじみがありますね。
欧文フォントはHelvetica Neueファミリーで表示します。Webページのフォント指定にこれらを入れておくと良いでしょう。
もしiOS以外でもこれらのフォントを表示する目的でWeb Fontを利用する場合はフォントベンダーが提供するFontサービスを利用する必要があります。ヒラギノファミリーはTypeSquare（モリサワ）、Helvetica NeueはMyFonts.comで入手できます。
ガイドラインでは見出しやタイトルには太字の指定を推奨しています。なお、本文用のテキストは14pxから17px、最小フォントは11pxを推奨しています。ナビゲーションバーのタイトルは34pxの太字を、ボタンのラベルは34pxの細字、リンクリストなどテーブルのラベルは28pxが推奨です。
iOSが搭載している欧文フォントはこのサイトにリストアップされています。
外見的なiOSっぽさとは？
見た目の特徴が印象的なiOSですが、どんなスタイルがiOSっぽいのかという判断は非常に属人的で、かつ、見た人の感性に委ねられる部分が大きいです。Appleはデザイン指針をパラメーターで指定しているわけではないので現場で「こんな感じ」を共有することになります。
筆者がAppleとやりとりしたうえで感じた「iOSっぽさ」をまとめました。参考までに共有します。
アイコンに限らず、UIの画面やパーツにおいても背景にさりげなくグラデーションが使われている表現が好まれます。コントラストが強い枠線で囲った太さを感じるスタイルは好まれない傾向にあります。
また、レイアウトのスタイルは画面いっぱいにコンテンツを広げ、弱い線で区切る表現が好まれます。周囲を罫線で囲む表現や立体的なギミックは好まれません。
サードパーティのリソース
ピクセル寸法で表した端末ごとの画面解像度や、詳しいレイアウト寸法などスタイリングに関する情報は、よくまとまった外部のリソースがありますのでそちらが参考になります。
また、iOS風に作りこまれたたくさんのアイコンが購入できます。自前でゼロからアイコンセットを作るのが大変な場合利用しましょう。
