10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

アプリのどこに「自社らしさ」を入れるか

10
Posted at

はじめに

アプリのブランディングといえば、独自のフォントやアイコンなどを使う方向を考えがちでした。
ですが、WWDC26のこのセッションを見て、何をどう独自にするか以前に、独自にしていい場所とそうでない場所があるということを知りました。
この発想は自分になかったので、今回はこの切り分けに関連する部分についてセッションの中身をまとめたいと思います。

アプリを2つのレイヤーで見る

image.png
リキッドグラスが導入されてから、アプリは以下の2つのレイヤーに分けて考えられるようになりました。

役割 ブランドの入れ方
UIレイヤー グローバルナビゲーションとして機能する部分。タブバー、ツールバー、メニュー、フローティングアクション 基本的に入れない。OS標準の作法に従う
コンテンツレイヤー そのアプリを固有のものにしている機能そのもの ここが主戦場。最大限表現していい

つまり、「この要素はナビゲーションか、コンテンツか」という判断軸を持てば、どこに独自デザインをあててもいいかがわかるようになるということです。
実際にSlackのようなアプリを見ると、コンテンツレイヤーはオリジナリティ溢れるデザインになっていますが、ナビゲーションやボタン配置はしっかりiOSの標準に乗っています。

やらない方がいいこと

  • 車輪の再発明

    例えばコンテキストメニューのような、iOSユーザーならすでに仕様をわかっているようなものを独自実装でやってしまうと、学習のコストが増えるだけでブランドの強化に寄与しません。実用的なものに関しては、標準のコンポーネントを使う方が無難である、という判断です

  • タブバーにブランドカラーを載せる

    image.png

    以前はよく取られていた手法ですが、タブバーにカラーがあると全体的に重く見えて、結果的にコンテンツエリアを狭くしてしまっていました。リキッドグラスなのであれば、ブランドカラーはコンテンツレイヤーに置くことが推奨されます

  • ロゴを全面的に出す

    アプリを開いている間に、ユーザーに今どのアプリを開いているかを思い出させる必要はありません。置いたとしても、スクロールでフェードアウトするくらいの控えめさがエレガントです

どうやってブランドを表現するか

上述の通り、コンテンツレイヤーに入れるのが基本ではありますが、UIレイヤーでも表現することは可能です。
セッションを聞いて特に印象的だったのは、標準のものを組み合わせるだけでも個性は表現できるということです。
システムフォントにも複数の書体があり、それらとサイズ・ウェイトの組み合わせをしたり、7,000以上あるSF Symbolsから選ぶといったやり方があります。
独自フォントや独自アイコンを作ることがブランドの表現だと考えがちですが、まずは標準で組み立ててみて、足りない部分は独自で補うという順番が安全だと感じました。

まとめ

「標準のものを使うか、独自にするか」という判断は、感覚ではなくレイヤーの所属によって決められるということを知れたのが今回1番の収穫でした。
ブランドの表現を探求すること自体は重要ですが、OSの標準動作から逸脱してユーザーの慣習を混乱させるような過剰な押し付けは体験を悪くしてしまいます。
ただ、作っている側からするとカスタムフォントを入れることもロゴを置くことも「ちゃんとブランドを考えた仕事」に見えてしまうので、やりすぎの線がどこかは自分では気づきにくいかもしれません。だからこそ、レイヤーという外側の基準を持っておくことに意味があるのだと思いました。
基本を守った上で個性をどう出すか、という順序は忘れないようにしたいです。

10
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?