
特殊な形、どうデザインする?「iPhoneX」のアプリデザインで知っておきたいことまとめ
2017年9月、iPhone 8とともに新しいiPhone「iPhone X」が発表されました。
Webデザイナーやスマートフォンのアプリエンジニアの方々は。発売後すぐにデザインに対応できるように準備を進めているのではないでしょうか。
1125 x 2436ピクセルのスーパーRetinaディスプレイだけでなく、全画面のディスプレイに頭上に切り抜かれたようなフロントカメラの存在が特徴的です。
この新しいiPhone向けにデザインするためには、解像度や独特な形、UIの位置などを念頭においておく必要があります。
今回は、iPhoneXのアプリデザインで知っておきたいことをまとめていきます。
特異な形、デザイン手法は変わる?
画像引用元:iOS Human Interface Guidelines
まず最初にはっきりさせておきたいことは、ホームボタンがなくなったりフロントカメラのでっぱりがあることが、デザインをする上での障害になるのか、ということです。
結論から言えば、デザイナーはそうした諸々のiPhone Xの特異な形を気にすることなく、いままで通りの四角い画面をデザインすれば問題ないということです。
画像引用元:iOS Human Interface Guidelines
ホームボタンがなくなった代わりに、iPhone Xではホームインディケーターと呼ばれる横長の棒が下部に位置します。
ホームボタンを押すのではなく、この棒を下から上にスワイプすることでホームスクリーンに戻るか、マルチタスクを行うことになります。
iOSのネイティブアプリをすでに作っている場合は、もちろんiPhone X用にアプリを作り直す必要はなく、そのままiPhone Xにも利用できるようになります。
下記の写真でもわかる通り、ナビゲーションバーやテーブル、コレクションビューやタブなどは、そのまま自動的に配置されますが、iPhone 8よりもiPhone Xのほうが表示領域は若干大きくなっています。
画像引用元:iOS Human Interface Guidelines
ただし、Xcodeなどでカスタムレイアウトを採用している場合には、新しいスクリーンレイアウトを採用する必要があります。
オートレイアウトを採用している場合は、デザイナーの手間を煩わせることはあまりないでしょう。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング