こんにちは、デザイナーの比嘉証太です。
UIデザインには、多くの「定石」があります。
ボタンはボタンらしく見せる。
ナビゲーションは見つけやすい場所に置く。
同じ役割の要素には、一貫した見た目と振る舞いを持たせる。
こうした定石は、ユーザーが迷わず使えるUIをつくるうえで重要です。ただ、すべてを定石通りに整えれば、それだけで良いUIになるわけではありません。
標準的なUIだけを積み重ねると、機能的でも、そのサービスらしい印象や体験をつくりにくくなります。反対に、独自性を求めてルールから外れすぎれば、ユーザーを迷わせてしまいます。
では、どこまでルールを守り、どこから独自性を出してよいのでしょうか。
「ここは一般的なUIに合わせたほうがいい」
「ここは少し崩しても問題ない」
「ここはむしろ、ブランドらしさを出したほうがいい」
ユーザーの理解しやすさや情報の重要度、ブランドの印象などを見ながら、デザイナーは日常的にこうした判断をしています。
大切なのは、ルールを守ることでも、ルールを破ることでもありません。そのルールが何のために存在しているのかを理解し、守るべき部分と、独自性を出せる部分を判断することです。
今回は、普段デザイナーが行っているこの判断を、「どこまでルールを守るべきか」という視点から、3つの領域に整理してみました。
領域1：ユーザビリティを守る領域
最も慎重に扱うべきなのは、ユーザーが「操作できるかどうか」に直接関係する部分です。
たとえば、
- どこを押せるのか分かる
- 現在どの状態なのか分かる
- 入力すべき内容が分かる
- 操作した結果が適切にフィードバックされる
- 削除や購入など、重要な操作を誤認しにくい
といったものです。
ユーザーは、これまで使ってきたサービスから「これは押せそう」「このアイコンなら閉じる」といった共通認識を身につけています。
UIでは、この既存の知識を利用することで学習コストや認知負荷を下げられます。逆に、ここへ強い独自性を持ち込むと、新しい操作方法を覚えてもらう必要が生まれます。
特に、
- 会員登録
- 購入
- 決済
- フォーム入力
- 設定変更
- 削除
といった重要な操作では、「他とは違うUI」よりも、迷わず目的を達成できることを優先します。
領域2：情報設計を調整できる領域
一方で、UIのルールすべてに同じ強さで従う必要があるわけではありません。レイアウトや余白、情報の見せ方には、比較的大きな設計の自由があります。
たとえばカード型UIは情報を整理しやすい一方、すべてを同じ大きさで並べると、重要度の差が伝わりにくくなることがあります。
その場合には、
- 重要な情報だけサイズを大きくする
- 一部をあえてグリッドから外す
- 情報量に合わせて余白を変える
- コンテンツごとにレイアウトの密度を変える
といった方法が考えられます。
ここで重要なのは、単に「ルールを崩す」ことではありません。ルールが担っていた役割を、別の方法で満たせているかどうかです。
大切なのは、カードやグリッドといった形式を守ることではなく、「情報のまとまりや優先順位が伝わる」という目的を守ることです。
目的を別の方法で満たせるなら、見せ方は変えてよい。表面的なルールではなく、そのルールが解決している課題まで捉えることで、デザインの選択肢は広がります。
領域3：ブランド体験をつくる領域
さらに自由度が高いのが、ブランドやサービスの印象をつくる領域です。
たとえば、
- タイポグラフィ
- 写真やイラスト
- モーション
- スクロール演出
- レイアウトのリズム
- インタラクション
などです。こうした部分は、単純な「使いやすさ」だけでは評価できません。
Webサイトを訪れた瞬間に、
「この会社らしい」
「なんだか面白そう」
「もう少し見てみたい」
と感じてもらうことも、ユーザー体験の一部だからです。
ブランドサイトやサービス紹介では、意外性のあるレイアウトや動きが、サービスの特徴や個性を伝えることもあります。
ただし、自由にデザインすればよいわけではありません。判断基準は、ユーザーへの負荷と、その表現から得られる体験価値のバランスです。
ファーストビューで特徴的なアニメーションを使うことには意味があっても、購入ボタンを見つけにくくするメリットはほとんどありません。同じ「標準から外れる」でも、場所と目的によって判断は変わります。
進研ゼミ高校講座で実践した、共通ルールと個性の両立
実際のプロジェクトでも、これらの領域を組み合わせて設計しています。
bravesoftが支援した「進研ゼミ高校講座 3プロダクト横断グランドデザインシステム構築＆UIリニューアル」では、株式会社ベネッセコーポレーション様の「AI StLike（高ゼミアプリ）」「StudyCast」「エベレス」という3つのプロダクトに共通するデザインシステムの構築と、UIのリニューアルを行いました。
このプロジェクトで求められたのは、進研ゼミ高校講座として一貫したブランド体験をつくりながら、それぞれのプロダクトが持つ個性や、対象となるユーザーに適したUI・UXを両立することでした。
そこで、まず3つのプロダクトで共通化すべきデザインルールを整理し、そのうえで各プロダクトの目的やユーザーに合わせてUIを展開しました。
操作方法や状態の表現など、ユーザーが迷わず利用するためのルールは共通化する。一方で、情報の優先順位やレイアウトは、それぞれのプロダクトの目的に応じて調整する。さらに、ビジュアルやモーションには、各プロダクトの特徴に合わせた個性を持たせる。
すべてを同じ見た目にするのでも、すべてを自由にするのでもなく、何を共通化し、何を変えるべきかを整理する。これは、今回紹介した3つの領域を、実際のプロジェクトに当てはめた一例です。
AIで表現の幅を広げ、最後は人が判断する
最近では、デザインの検討段階でAIを活用することも増えています。私自身も、AIに完成形を任せるのではなく、アイデアや表現の方向性を広げるために使っています。
自分だけで考えると、これまでの経験や慣れたパターンの中から答えを探しがちです。AIに複数の方向性を出してもらうことで、自分では思いつかなかった見せ方に気づくきっかけになります。
もう一つ有効なのが、AIを「一次レビュー役」として使うことです。アクセシビリティ、一般的なUIパターン、基本的な一貫性など、ルール側の確認をAIに補助してもらいます。ただし、指摘をそのまま正解とせず、実際のユーザーや目的に照らして、人が妥当性を確かめます。
AIに基本的なルールの確認を補助してもらうことで、人はより「そのサービスらしさ」や新しい表現、独自性といった体験価値の検討に集中できます。一方で、どのルールを守り、どこで外すかの最終判断までAIに委ねるわけではありません。ルールの意味を理解したうえで、最後に選び、調整するのは人です。
「正しいUI」をつくることが、ゴールではない
UIデザインには多くの原則やベストプラクティスがあります。知っていることで失敗は減らせますが、ルールを知っていることと、適切な判断ができることは同じではありません。
bravesoftでは、「世界をぶちやぶる」ためのフィロソフィーとして「BRAVE THROUGH」を掲げています。
これをUIデザインに引き寄せるなら、既存のルールを無条件に壊すことではありません。ルールが守っている使いやすさを理解したうえで、「この形でなければならない」という思い込みがより良い体験を阻んでいるなら、そこから一歩踏み出すことです。
UIデザインでぶちやぶるべきなのは、使いやすさではなく、「この形でなければならない」という思い込みなのかもしれません。
守るべきところは守る。目的を別の方法で満たせるところは調整する。そして、サービスらしさを伝えるところでは新しい表現に挑戦する。
ルールの意味を理解したうえで、どこを守り、どこを調整し、どこで既存の枠を越えるかを設計する。その判断の積み重ねが、使いやすさとサービスらしさを両立したUIにつながると考えています。
