iOS 7対応のアプリデザイン、モバイルサイト作成ガイド2013

Designing-for-iOS-7

 

アップルが新ブラウザiOS 7を公開してから、数週間が経過し、まわりでも利用している方を、見かける機会も多くなったのではないでしょうか。

 

 

今回は、すでに機能として完成されているアプリのリデザインを含め、iOS 7と見事に調和した、アプリデザインを作成するときの、ポイントをまとめたエントリー「Designing for iOS 7: Guide to Getting Started」が公開されていたので、今回はご紹介します。

 

 

新しくアプリデザイン、モバイルサイトを作成するときにも使える、押さえておきたいポイントがまとめられているので、どのようなデザインテクニックがiOS 7で利用されているのか、確認しておくと良いかもしれません。

 

 

 

詳細は以下から。

 

 

 

[dropcap1]1[/dropcap1]フラットデザインを意識しよう

 

 

アップルのiOS 7では、完全にフラットではありませんが、フラットデザインを意識したインターフェースデザインとなっています。

 

アプリデザインやモバイルサイトを作成するときは、常にこのフラット感を大切にする必要があります。これまで主流となっていた、リアル感を追求したSkeuomorphicデザインではなく、シンプルさが重要です。

 

 

iOS7作成ガイドでは、シンプルさとユーザビリティーがポイントとなっていますが、特にフラットデザインでなければいけない、というわけではありません。いくつかのデザインパーツでは、アップルが独自に開発したデザインが利用されています。

 

たとえば、iOS 7では淡い色使いに透明感のある、グラデーションが利用されています。しかしフラットデザインでは、カラフルでポップな、単色カラーを利用する傾向があります。またキーボードやボタンなどにも、ドロップシャドウが採用され、オリジナルのデザイン質感を表現しています。

 

ios7

 

 

 

[dropcap1]2[/dropcap1]タイポグラフィーに注目しよう

 

 

 

タイポグラフィーは、iOS 7ではもっとも重要なキーのひとつです。ボタンなどと同様に、テキストを直接タップするデザインへと変化しています。

 

アップルのデフォルト設定では、Helvetica Neueが使用されており、シンプルでライトな印象を与えてくれます。iOS 7では、ユーザビリティの観点から、フォントサイズを少しだけ大きくしています。フォントカラーや、フォントサイズを利用した、階層の作り方を意識しながら作成すると良いかもしれません。

 

 

まず利用したいフォントを選択してから、テキストのデフォルト設定を参考に、はじめてみてはどうでしょう。

 

  • ナビゲーションタイトル: ミディアム 34px
  • ボタン、テーブルヘッダー: ライト 34px
  • テーブル ラベル: レギュラー 28px
  • タブバーアイコンラベル: レギュラー 20px

 

Focus-on-Type

 

 

 

[dropcap1]3[/dropcap1]ボーダーレス化しよう

 

 

 

iOS 7のデザインでは、不要なラインなどを削除した、ボーダーレスなデザインが特徴となります。カレンダー機能などでは、グリッドテクニックを利用していますが、より余白スペースを採用した、ミニマルデザインとなっています。

 

 

このデザインテクニックは、ユーザーにまるでグリッドラインが描かれているような、使いやすい操作感を与えることができます。

 

Go-Borderless

 

 

 

[dropcap1]4[/dropcap1]新技術、テクノロジーを駆使しよう

 

 

 

iOS 7の大きな変化として、多彩なアニメーションが挙げられます。これまでよりも複雑なコンポーネントでも、利用されており、ビジュアルでユーザーを楽しませてくれます。

 

 

たとえばダイナミックな動きが魅力的な、パララックスエフェクトを使って、上下左右自由にレイアウトしても良いでしょう。これまででは実現できなかった機能は、よりユーザーを魅了するでしょう。

 

Consider-Parallax

 

 

 

[dropcap1]5[/dropcap1]レイヤー化で奥行きを与えよう

 

 

 

アップルがもうひとつ、奥行き感の再現テクニックとして、レイヤーを利用したデザインを提案しています。以前のリリースでは、リアル感を追求したSkeumorphicエフェクトを使い、デザインの奥行きを表現していました。

 

 

たとえばホーム画面でフォルダを開くとき、ディスプレイの一部分を重ねて、表示する仕組みとなっています。同時に、レイヤーに半透明ガラスエフェクトを適用することで、背景が透けて見えるテクニックを活用されています。Photoshop、HTML/CSSによるデザイン方法は、以下を参考にどうぞ。

 

 

Take-Care-with-Your-Icon

 

 

 

[dropcap1]6[/dropcap1]アイコンにも気を配ろう

 

 

 

iOS 7のデザインガイドに沿ったアイコン作成は、アプリやモバイルサイトと同じくらい、重要なデザインポイントとなります。

 

 

以下は、iOS 7用アイコンデザインを、より手軽に作成できる、PSDファイルとアクションファイルのセットなります。

 

App Icon Template

app-icon-template(2)

 

 

 

Icons – iOS 7 Icon Generator

20種類のカラフルなグラデーションが用意された、Photoshop用iOS 7アイコンジェネレーターで、有料アイテムとなります。

iconbuilder

 

 

 

[dropcap1]★[/dropcap1]こちらもお忘れなく、、。

 

 

  • これまでに使っているアイコンを、新しいスタイルにアップデートしましょう。iPhoneでは120x120px、iPadでは152x152pxとなります。
  • デモページには、ステータスバーを配置しましょう。
  • すべてのアプリは、RetinaディスプレイとiPhone 5に対応する必要があります。

 

 

さらに詳しいガイドラインが知りたいひとのために、アップルはデザイナー、開発者用としてUIトランジションガイド(英語)と、iOS 7のデザインコンセプトを紹介したガイドライン(英語)を公開しています。

 

 

参照元リンク : Designing for iOS 7: Guide to Getting Started – Designmodo.com