デザイナーの亀谷です。

突然ですが、スマートフォンのデザインで、大きく差が出るポイントはどこだと思いますか。
もちろん意見は様々あると思いますが、私が考える最も大きなポイントは「マージンの取り方」です。
そこで今回はその「マージン」をテーマに、iPhone5とiPhone6/6Plusのマージンの変化に関してお話したいと思います。

マージンを制するために重要なもの

水野学氏の著書「センスは知識からはじまる」にもあるように、「マージンも知識からはじまる」と言っても過言ではありません。
私は、具体的には以下の3つの目線から日々インプットを行っています。

1. 常日頃から可能な限り多くのサービスに触れることで、感覚を養う。
2. 美しいと感じたマージンを実際に測り、その数値を覚えておく
3. 上記2つを、スマートフォンデザインだけでなく、製品パッケージ、自然物など、気になったありとあらゆるもので行う。

美しさ、センスを磨くには、とにかく、どれだけ多くの実例をインプットできるか、にかかっていると私は思います。

実際に測ってみる

今回は、インプット方法その2「美しいと感じたマージンを実際に測り、その数値を覚えておく」にフォーカスします。

こういう時にはどれくらいのマージンを空けるべきか、ボタンが2個並ぶ場合にはどれくらいのマージンが適切なのか、という実例を探し、ひとつずつ測ってインプットします。

ただ触ってみるだけでなく、どうして実際に測ることが重要なのか。

それは、「実際に手で触れる感覚」と「画面上でデザインしているときの感覚」でのサイズ感が異なるため、感覚的に判断してしまうと、使いづらく、美しくないマージンが生まれてしまうことがよくあるためです。

そのために実際の「数値」をインプットしておくことが重要になります。

iPhone6 6Plusの出現によるマージンの変化

それでは、実際にサイズを測ってみましょう。
今回は、iPhone5/6/6Plusそれぞれの画面レイアウトに関するマージンを測り、変化を比べてみたいと思います。

2014年9月26日時点では、iPhone6/6Plusの画面解像度に最適化できているアプリはまだ多くありません。
今回は、Apple純正アプリおよび、対応済みアプリ（iOSの設定画面 / App Store / Twitter / Pinterest）を用いて検証していきます。

※ 今回のアプリを含めて、現在iPhone6 6Plusの画面解像度に対応ができているアプリ：
「Apple純正アプリ」は当然として「Twitter」「Pinterest」「Evernote」「Tumblr」「Wunderlist」「Foursquare」「Swarm」等があります。iPhone6/6plusをお持ちの方は、是非触ってみてください(Foursquare社はすでに2つのアプリで6/6Plusに対応ができており、非常に対応スピードが早いです)。

 

注釈：

このマージン調査は、端末でスクリーンショットを撮り、Photoshopに取り込んでサイズを測った数値になります。よってすべてが完璧に正しいサイズを計測できているわけではありません。

App Store

まずは、Apple純正のアプリから見ていきます。

ここでは、01. ステータスバー / 02. ヘッダナビゲーション / 03. リストコンテンツ / 04. フッタタブ に関してマージンおよびアイテムのサイズを測っていきます。

ヘッダナビはほとんどすべてのアプリで用いる要素ですね。

ヘッダの文字の基本的なサイズはiPhone5・iPhone6では34px / 6Plusでは51px程度。
ヘッダの左右アイテムの外のマージンサイズは20px / 42px（1.5倍でないことに注目！）を目安として覚えましょう。

よく見かける、「アイキャッチ + タイトル + サブテキスト」という構成のリスト型UI。よく使われるUIであるだけに、細かなマージンの取り方やタイトルとサブテキストの文字サイズの違いなどに注意したいです。

そして少し面白いのが、iPhone5/6と6Plusを比べると、テキストサイズは1.5倍になっていますが、余白は1.5倍よりも大きく確保している箇所があるということ。

iPhone5/6から6Plusへは正確に1.5倍でなければいけないという決まりはないので、画面が大きいという利点を生かして、マージンをしっかりと取っているのだと予想されます。

ほとんどのアプリで用いるフッタータブ。
この部分では、iPhone5/6から6Plusへはきれいに1.5倍のサイズになっています。

iOS標準の設定画面

アプリの設定画面などで多く用いられるリスト状のUIの参考として、もうひとつ純正の画面で検証してみましょう。

画面端から内側へのマージンやアイキャッチ(上ではオレンジのアイコン)と項目名の間のマージンなど、読みやすくなるバランスに計算されています。特に、設定等を担うUIなので、オリジナリティよりも機能性が優先される場所です。純正のマージンを暗記して、自身のデザインに反映しましょう。

Twitter

では、次は使いやすく、シンプルなUIで定評のあるTwitterを検証していきます。

まずは、自分のプロフィール情報を表示する画面です。

Twitterのデザインで注目すべきは点は、iPhone5サイズからiPhone6サイズでもUser Nameなどの文字のサイズを最適化させているということ。
現状では、iPhone5と6では文字サイズ・マージンサイズは変えないパターンがほとんどなのですが、ここをきちっと最適化させているのは流石だと感じました。

Pinterest

Pinterestは代表的なカード型UIのアプリです。その中でも2カラムでの表示の場合がこちら。
スマホの小さな画面内で2カラムという見せ方、かつカードUIなので、細かなマージンの取り方が使いやすさに直結します。
上の分析を見ればわかる通り、カードの外側も内側も十分にマージンが取られていますし、文字のサイズも決して小さくありません。
2カラムのUIは、マージン・文字サイズを必要以上に小さく作成してしまう、という状況に陥りやすいUIです。
そうならないよう、マージン・文字サイズにしっかりスペースを割くことが重要です。

Pinterestの1カラム状態。Facebookなどにも見られる、一般的なカード型UIとなります。

iOS7からAppleが推奨する、「画面を端から端まで全部使うUI」には反しますが、コンテンツ同士の分かれ目が判別しやすいため、ユーザビリティも高く、多く利用されるUIです。

こちらも注目すべきは、カードの外側と内側のマージンサイズおよびテキストサイズ。十分にサイズが確保されていることがわかるかと思います。
Apple推奨の「画面を端から端まで全部使うUI」と比べると、カードの外側のマージン分横幅が小さくなります。上記のiPhone5サイズで言えば、20px × 2で40pxも削っているため、画面横サイズ600pxというな状況下でレイアウトを組むことになるため、コンテンツの種類やテキスト量などが多い場合の見せ方としては窮屈に見えてしまい、不適切な場合もあります。

そのアプリを使う場面に合わせ、注意してUIを選択しましょう。

iPhone5 ~ 6Plusまでのマージン変化

検証の結果、基本的にiPhone5とiPhone6では要素のサイズはほとんど変わりがありませんでした。ただし、画面横サイズの違いには対応しています。
また、iPhone6と6Plusでは各要素を最適なサイズへ変化させる必要があり、そのセオリーは

1. 文字サイズはiPhone5/6から1.5倍。
2. マージンは必要に応じて、1.5倍以上の十分なサイズを確保する。

という結論です（2014年9月26日時点）。
特に2に関しては、実例を多くインプットしていくのが重要です。
今回の調査での所感としては、画面左右からの内側マージンに関しては1.5倍よりも大きくマージンを確保しても良いのかなという印象です。
iPhone6/6Plusに対して、適したマージンサイズをいち早く研究し、適用させていくことが今デザイナーに望まれていることでしょう。
（私が担当しているCouplesも、iPhone6・6Plusの画面サイズの対応作業中です。）

まとめ

デザインしていて自分の判断で迷った時には、参考となるデザインを探し、実際に一つ一つサイズを測ってそれをインプットしていく。地道な作業ではありますが、これがスマートフォンデザインの必勝法になると思います。

今回は、主に知識をインプットするという点に関して書きましたが、このインプットから、どのようなアウトプットが生まれたのかを知りたい方は、「Couples」をダウンロードして使ってみてください。