iOSDC Japan 2024でiOSアプリらしさをテーマに登壇しました
こんにちは。デザイナーのあぼねこ(@avocadoneko)です🥑🐈⬛
2024年8月22日から24日に開催されたiOSDC Japan 2024のスポンサーセッションで登壇しました。
以前、登壇資料をXで公開しましたが、実際に話した内容は伝わりにくいと思うので、この記事では当日の発表内容を書き起こしてお伝えします。
また、当日うまく答えらず悔しい思いをした🚀質疑応答への回答🚀も追記しています（泣）
[✋当日のYouTubeが公開されたらここに貼る]
✍️iOSDCスポンサーセッションの登壇資料公開します
— あぼねこ (@avocadoneko) August 27, 2024
Figmaスライドでつくりました！
Before→Afterのところは触れるようになっています！
（喋りで補足してる部分が多く、スライド見ても内容伝わりにくいと思いますので、喋った内容は改めて記事にします）https://t.co/w8UfdXfQ8j
会社のnoteで書いた記事はこちら↓
登壇資料はこちら↓
iOSアプリらしさを言語化するために
私は普段からアプリのデザインには関心をもっていたので、いろんなアプリをダウンロードして触ってみてはいたものの、iOSアプリらしさについては一度も考えたことがありませんでした。
そこでまずはHuman Interface Guidelinesを中心にさまざまな文献や動画を見て、情報集めを始めました。
Human Interface Guidelinesについては現在出ているものだけでなく、昔に出版されたものも読むことで、よりiOSアプリらしいデザインについての理解が深まりました。
また、たくさんのアプリの観察もしました。
特に、Apple標準のアプリはiOSアプリらしさを見つけるための重要なヒントになると感じ、他のアプリと比較しながらその特徴を探りました。
このようなインプットを進めている途中で出会ったのが、今年の4月に行われたTry!Swiftでの「良いアプリケーションをデザインするための感覚の持ち方」というusagimaruさんの登壇資料でした。
この発表では「iOSらしいデザイン」についてインターフェースの動き・アニメーションを中心に話をされていました。
これがとても素晴らしい発表だったので、改めて私からiOSらしさについて語る必要性についてはすごく悩みました。
しかし、悩んだ結果、「iOSらしさ」のような抽象的なことに対する解釈は決してひとつではなく、いろんな考え方があってもいいのではないかと思ったので、今回私の解釈するiOSアプリらしいデザインについて話すことを決めました。
私が解釈するiOSアプリらしいデザイン
iOSアプリらしいデザインとは、一言で言うと、直感的に使えるデザインだと考えました。
「直感的」という言葉は、Apple製品を語るときに世間でよく使われる表現です。
たくさん調べて考え抜いた結果、結局のところ「iOSアプリらしさ」を言語化する際に、「直感的」という言葉に行き着いてしまいました。
私がiOSらしいと感じるアプリを触っていると、画面を操作しているだけのはずなのに、まるで直接物体を触っているような感覚に陥ることがしばしばありました。
逆に、iOSらしさを感じないアプリでは、操作対象が自分の指から遠く離れているような感覚がして、操作が不自然に感じられました。
そのため、現実世界で物を掴んで持つように、iOSらしいデザインは直感的に使えるデザインと言えると考えました。
これらはiOSのデザイン原則からも説明できると思いました。
iOSのデザイン原則について
iOSのデザイン原則とは、ユーザーにとって使いやすく、魅力的なインターフェースを作成するための、Appleが定めた基本的なiOSアプリデザインの方針のとこです。
これらは現在のHuman Interface Guidelinesからは記載がなくなってしまいました。
デザイン原則は6つありました。
Aesthetic Integrity （外観の整合性）
Consistency （一貫性）
Direct Manipulation （直接的な操作性）
Feedback （フィードバック）
Metaphors（現実世界の比喩）
User Control （ユーザー主導）
※ Aesthetic Integrity を「外観の整合性」と訳した理由は、この原則がUIの美しさではなく、アプリの機能と外観が一致しているかどうかを重視しているからです。「美的整合性」では伝わりにくいため、機能とデザインの調和を意味する「外観の整合性」としました。
そのうちの4つ（Direct Manipulation・Feedback・Metaphers・User Control）が特に直感的に使えるデザインをつくりだしているなと思いました。
「直感的」を実現するデザイン原則とアプリの事例
Direct Manipulation （直接的な操作性）
iPhoneで使えるジェスチャーは日常生活の物理的な動作を模倣しているため、デジタルインターフェースにおいても実際にオブジェクトに触れているような感覚を与えます。
たとえば、引き出しを開けて中身を確認する動作は、iOSにおけるハーフモーダル内のコンテンツをスワイプして確認する動作に似ています。両手を使って行うのと指先で行うのとでジェスチャーのサイズ感は異なりますが、好きなところまで引き出せて、引き出しの中と外を見比べながら作業ができることは現実世界でもデジタルインターフェースでも同じです。
Feedback （フィードバック）
これはユーザーの操作に対してシステムの応答を視覚的、聴覚的、触覚的に提供するものです。これにより、ユーザーは操作が成功したかどうか、システムがどのように応答したかを理解できます。
現実世界では人が起こしたアクションに対して、視覚的なフィードバックだけでなく、聴覚的、触覚的なフィードバックも提供されます。
たとえば、バスケットボールを胸の位置から地面に落とすと、ボールが地面に当たった瞬間に跳ねたことが目で見てわかり、ボールが地面にぶつかる音がして、地面を伝わって振動を感じます。
同様にアプリでも、視覚、聴覚、触覚へのフィードバックがあると、現実世界の物を操作しているときと同じような操作感を実現できます。
Appleのミュージックアプリでは、再生ボタンを押すとアイコンが切り替わり、音楽が鳴りだすことで視覚的・聴覚的なフィードバックを提供しています。
また、お気に入りボタンでは、タップするとアイコンが切り替わり、ハプティックフィードバックによってデバイスから振動がくることで視覚的・触覚的なフィードバックを提供しています。
Metaphors（現実世界の比喩）
メタファーはユーザーが新しいインターフェースを理解しやすくするために、現実世界の概念や物体を使って表現する手法です。これにより、ユーザーは直感的に操作方法を理解できます。
たとえば、ブックアプリのように本を読めるアプリでは、矢印ボタンがなくても、現実世界の本と同じようにページが重なっている視覚的なデザインを採用することで、ユーザーは自然にページをめくる動作を理解し、本として読むことができます。
先ほど例に挙げたハーフモーダルも引き出しのメタファーと言えます。
User Control （ユーザー主導）
ユーザーコントロールは、ユーザーが自身の意思決定に基づいてアプリの機能を自由に使えるようにすることで、システムに対する信頼感を高めることができます。
たとえば、自宅から職場に向かう際、現実世界ではどの道を通るかを自由に選択し、実行できます。同様に、マップアプリも最適なルートを提案してくれますが、その提案に従うかどうかはユーザー次第です。アプリは一つの最適ルートを勝手に決定するのではなく、ユーザーが自分の判断で他のルートを選択できるように配慮しています。
アプリにiOSらしさを取り入れるには〜架空のiOSアプリで実践〜
デザイン原則にのっとったデザインができていればよりiOSらしいアプリになりそうだということがわかりました。
次は実際にどのようにアプリをデザインすればよりiOSらしくなるのかという部分について見ていきたいと思います。
デザインの実践例では、世界各地のランドマークをダイナミックな写真とテキストで紹介する架空のアプリを改善していきます。
カードリストから詳細にいくトランジションを改善する
Beforeではカード一覧ではスクロールができて、カードアイテムをタップすると、プッシュと呼ばれる、右から画面が重なるようなトランジションで詳細画面が開きます。
Afterではカードをタップすると、プッシュトランジションではなく、カードがそのまま拡大して開くようなトランジションにより詳細画面に遷移するように改善しました。
この改善により、何の詳細が開かれたのかがアニメーションによって直感的にわかりやすくなりました。
ただし、ここではすべてのリスト→詳細への遷移にこのようなアニメーションをつけるべきだと言っているわけではありません。
今回のような改善は、画像がメインのUIでは効果的ですが、たとえばメールAppのようにビジュアルを強調させたくない場合はプッシュトランジションを使い続けるべきです。プッシュトランジションは、階層構造があるアプリにおいて非常に分かりやすいトランジションです。
このトランジションの実装方法についてはWWDC2024の以下のセッションでも紹介されていました。
お気に入り登録のアニメーションを改善する
今度はランドマーク詳細画面でのお気に入り登録時のUIを改善してみます。Beforeではお気に入りアイコンをタップしたら色が黄色に変わるだけです。
Afterでは、詳細画面でお気に入りアイコンをタップすると、ランドマークの写真が浮き上がり、お気に入りタブに入っていくようなアニメーションが実行されます。
これにより、お気に入りに移動したことが直感的に分かりやすくなり、追加したランドマークがどこで見られるのかも簡単に把握できます。
まとめ
私はiOSらしいアプリを「直感的に使えるデザイン」と表現しました。それは、言い換えると、画面上の要素が現実世界に近い挙動を持っていると考えました。
そして、実際にアプリをiOSアプリらしく、直感的に使えるデザインにする例として、ユーザーが何らかのアクションを行った際に、単に画面が切り替わるのではなく、アニメーションを通じて操作とその結果の中間の動作が連続して見えるデザインにすることをお見せしました。
例としては見せられませんでしたが、例えば触覚フィードバックを使う・リアルタイムで進行状況が可視化されるライブアクティビティを使うなど、他にもアプリを改善できそうな施策はありそうです。
・・・
🚀 質疑応答への回答 🚀
実は発表後の質疑応答では2つの質問をいただきましたが、あまりうまく答えられませんでした😑
その代わり、登壇後のAsk the Speakerやカンファレンスの懇親会で、多くの方々と話し合う中で、2つの質問について意見交換ができました。その議論を踏まえて私が考えた回答を、ここに記載したいと思います。
💬 スワイプで前の画面へ戻れるようにしたアプリは、便利な反面、誤操作が増えてしまうのではないか？その場合どうすればいいのか？
実践例で、バツボタンだけでなく、画面のフリックでもカード詳細から一覧に戻れるように改善したことに対する質問でした。
質問してくれた方は、戻りたくないときにスワイプで前の画面に戻ってしまうことがよくあるそうです。
誤操作があることを把握した上でどのようにデザインしていくべきかを考えてみました。
結論として、アプリのスワイプ操作はユーザーの操作性と誤操作防止を両立させるために、利用シーンに応じた適切な設定が必要です。
一般的に、「戻る」操作には画面上の「戻る」ボタンだけでなく、エッジスワイプ（画面の左端からのスワイプ）を利用することが望ましいです。これは、iPhoneにはAndroidのような画面下部の「戻る」ボタンがないため、ヘッダーに設置された戻るボタンだけではユーザーの指が届きにくいからです。エッジスワイプは意図的な操作と認識されやすく、誤操作のリスクを減らすことができます。
一方で、スクロール中に誤って戻ってしまうアプリは、エッジスワイプではなく、画面中央からのスワイプ操作でも戻れるように設定されていることが多いです。画面中央からのスワイプ操作は、意図せず誤操作を誘発する可能性が高く、特にコンテンツをスクロールしている途中で前の画面に戻ってしまうケースがあります。
ただし、特定の状況やアプリの目的によっては、中央部分からのスワイプで戻れるように設定することが、利便性を向上させる場合もあります。
詳細でのスクロールが少ないアプリ：スクロールがあまり必要ない場合、画面全体をスワイプ操作に使うことで、操作性を高めつつ誤操作のリスクを最小限に抑えられます。
テキスト編集やフォーム入力など、途中で操作を中断したくない詳細画面があるアプリ：この場合、入力中に誤って前の画面に戻らないように、エッジスワイプや特定のボタンでのみ戻れるようにする方が良いです。（もちろん戻っても入力内容を保持できるのが理想ですが）
例えば、縦長の漫画アプリなど、じっくりとコンテンツを読みながらたくさんスクロールする必要がある場合は、エッジスワイプが適していると思います。
逆に、ショッピングのように商品の比較のために一覧と詳細画面を頻繁に行き来する場合は、画面全体スワイプで戻れるようにすると、操作が簡単になり使いやすくなります。
💬 どの程度までiOS標準のUIにするべき？自前で作ったアニメーションやデザインをどのようにしてユーザーにとってわかりやすいものにする？
個人でアプリを開発してる方からの質問でした。おもしろいインタラクションを取り入れたいが、どの程度まで取り入れたら良いのかで迷っていたみたいです。
こちらも結論としては、アプリの目的やターゲットユーザー、ブランドイメージによって異なると考えました。
基本的には、iOS標準のUIやインタラクションを使用することで、ユーザーは操作が直感的になり、開発者にとってもメンテナンスがしやすくなります。iOS標準のUIコンポーネントを使うことで、ユーザーはアプリの使い方をすぐに理解できます。
しかし、標準的なUIだけではアプリのブランドを十分にアピールできない場合があります。たとえば、ナビゲーションや基本的な操作はiOS標準に沿ったデザインにする一方で、アプリのコア機能や独自性を持たせたい部分は、カスタムUIやアニメーションを使用することでブランドを強調することができます。これにより、アプリに個性が生まれ、ユーザーにとっても印象的な体験となります。
特に、ゲームのようなエンタメ系アプリでは、iOS標準に完全に沿う必要はなく、独自のデザインやインタラクションがエンターテインメント性を高めます。
ただし、UIに独自性を持たせたい場合でも、iOSのデザイン原則を考慮してデザインし、実際に使いやすいかどうかを確認するためにユーザーテストを行うことが重要です。
・・・
おわりに
人生初の登壇がiOSDCだったことは、かなりハードルが高かったですが、挑戦して本当に良かったです。
登壇を見に来てくださった皆さん、そして会場で声をかけてくださった皆さん、本当にありがとうございました。これからもぜひ交流を続けていけたら嬉しいです✌️
この記事が気に入ったらサポートをしてみませんか？