CallConnect運営者ブログCallConnect運営者ブログクラウド電話システムのCallConnectの運営メンバーによるブログです。2022-08-17AndroidとiOSで同じアプリのデザインをやってみてわかったことデザインこんにちは。弊社はコールセンターシステムのコールコネクトを提供しています。2015年にWebでのサービス提供からはじまり、2021年11月にはiOSアプリをリリースしました。2022年現在はAndroidのアプリ開発を進めています。ここ1年でiOS/Androidアプリのデザインに携わり、それぞれのガイドラインや記事を読み漁り、色々と試行錯誤しながらデザインを作成しました。その中で、勉強になった点や注意点などを本記事で紹介します。Designがそれぞれデザインの指針としてまとめられており、アプリをデザインする上で必読です。各ガイドラインを学ぶメリットは下記のようなものがあります。・エンジニアの開発、学習コストを抑えることができる。・一定のユーザー体験を保ちやすい。・ユーザーの学習コストを抑えることができる。それを使うことで、0から作るよりも大きく開発工数を抑えることができます。パーツによっては、アニメーションまでセットになっているものもあります。Designのコンポーネント独自のデザインやアニメーションを用意することになれば、その分エンジニアの調査や学習・検証の工数がかかります。公式のパーツを使えば、そういった工数を抑えることができます。OSのバージョンアップやダークモードへの対応も容易になるメリットもあります。何よりユーザーは、私達のアプリを入れる前からずっとスマートフォンを使い続けています。自然とアプリを使いはじめることができます。注意点OSのガイドラインを守ることはもちろん大事ですが、ブランドやユーザー体験、OS間での共通性が意図したものにならない場合は調整が必要です。iOSのデフォルトアプリはタイトルが極端に大きく太字で入っており、Android公式ではあまり見慣れないデザインのため、そのまま持っていくと違和感が発生します。いった各OSの特徴の強い部分は、そのままでは共通性という観点で扱いづらい場合もあるでしょう。Androidでも利用しやすいデザインにしました。ガイドラインがすべてではないAndroid、iOSでは、ユーザーが自分好みにスマートフォンの設定をパーソナライズできるようにする流れがあります。アプリや通知などの色調が変化するようになりました。Builder」というツールを提供しています。ブランドカラーなどを設定することで、ユーザーのパーソナルな設定に対応できるようにしています。独特の色展開になり、iOSのカラー構成とも大きく異なってしまうことがわかり、利用を断念しました。Mapsなどの公式アプリがメインとなります。iOS16でロック画面などのフォントやカラーのオプションがユーザー側で選択できるようになるなど、以前よりデザインのカスタマイズ性が増すようなアップデートが行われる予定です。16プレビューまた、iOSではラジオボタンやチェックボックスがデフォルトでは用意されていません。リスト形式が基本になります。Appleが提供するインターネットブラウザのSafariでは、ラジオボタンやチェックボックスをサポートしているのに、iOSでは提供していないということになります。WebとAndroidでサポートしているので、全体で共通にしたいという場合もあるでしょう。OSのデフォルトの提供パーツでユーザー体験や認知がイマイチと判断できる場合には、独自実装を検討することがあっても良いと思います。Tabに関してもWebやAndroidではよく使われていますが、iOS公式では提供されていません。iOSではSegmentedControlというものが用意されていますが、SegmentedControlはその名の通り、情報の絞り込みや切り替えで利用されるため、並列情報を並べるタグの代わりにならない場合もあります。AndroidのTabiOSのSegmentedControlこういったところから、WEBやOS間での共通性、ユーザー体験、ブランド体験などとを天秤にかけて判断していく必要がありました。遷移後のページには画面左上に戻るを意味する←ボタンがどちらのOSにも存在します。ボタンの右隣にはiOSでは戻り先のページ内容、Androidでは現在のページ内容をテキストで配置するなど、パーツによって細かい違いがあります。iOSでは階層に入ってもフッターのナビゲーションは残るが、Androidではフッターが省略されることで現在どのページにいるかというのが分かりづらくなるという違いから上記の違いがあるようです。最短で及第点のアプリをリリースアプリの開発にあたり、意識したのは“最短で及第点のアプリをリリースすること”でした。最初は両アプリ共に一部機能のみをリリースすることが決まっていました。後から大きな機能追加や変更があることを予見できる状況でした。そのため、使いやすさの担保のために基本的には各OSの電話アプリを参考にしつつ、全体としてはガイドラインを守ったデザインを心がけ、スピードを重視しました。両アプリの経験値が豊富にあれば、最初からOS間の全体最適を考えながらアプリを開発していくことができたかも知れません。iOSのガイドラインを読みながら、まだ開発していないAndroidとの整合性などを考えることは難しく、時間もかかるため、実装しやすい公式のパーツを使ってデザインすることは理にかなっていたと思います。今後両アプリが改善されていく中で、全体最適を考えていければと考えています。Designを読むことは、とても重要です。それだけでは不十分で、日常的に各OSのスマートフォンを触り、操作の肌感覚を持つことも大事だと感じています。実際に操作をすることで初めて、各ガイドラインの意図や操作の流れなど、全体像を深く理解していくことができるからです。アプリをより良いものにしていくことができると考えます。迷ったら公式アプリを見てみるまた、迷ったときは、実際のOS公式のアプリを触ってみることも有効です。複数のパーツの中で公式がどれを採用しているか、もしくは組み合わせてアプリとして提供しているかというのは、コンポーネントの選択や画面レイアウトを作成する上で非常に参考になります。ガイドラインを学び、守破離を行うそして、公式アプリとは別にTwitterやSlackなどデザインが優れたサービスを触ってみて、ガイドラインをどの程度意識しているか、どういった場所でオリジナルの実装をしているかなどを見て、その理由を考えてみるのもとても勉強になります。各OSのガイドラインは優秀なので、それをベースにすることで一定の体験を提供できます。ユーザー体験のために、場合によっては一部離れるという選択もあります。今後もガイドラインや思想を意識しつつ、実装や運用の工数、ユーザー体験などのバランスを考えながら、より良いユーザー体験を提供していきたいと思います。アップデートについてこんにちは、エンジニアの本間です。アップデートについてこんにちは。1.2....2022-09-26Android初版リリースを終えてこんにちは。かけた思いこんにちは、エンジニアの本間です。CallConnect。»このブログについてクラウド電話システム「CallConnect」の運営メンバーによるブログです。CallConnectの開発・運営を行う中での知見を発信します。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。