その場で最適解を出すデザインは破綻する

岡本 早樹のプロフィール画像
デザイナー 岡本 早樹

5,917 view

デザインしていく中でデザインルールがバラバラになったことはないだろうか。

私の課題として、そのパーツ単位では見やすく、使いやすいものを考えられても、サイト全体で見た時にUIのデザインルールがバラバラになってしまう事がある。

その場ごとに最適解を出すデザインとは

例えばリンクの横にアイコンを配置する場合のデザインルール。

  • リンクが縦に並ぶとテキストの長さにバラつきがあるので、矢印は左にあった方が見やすい(アイコン左のルール)
  • 外部リンクマークは一般的に右側が多く見られるので右側が自然(アイコン右のルール)
  • アコーディオンの「+」アイコンは右に配置し縦が揃っていたほうが見やすい(アイコン右縦揃えのルール)
  • ボタンは矢印が右にある方が見やすい(ボタン系は右にアイコンのルール)
  • お問い合わせのメールアイコンはテキストの左側が見やすい(文字の左側にアイコンルール)

…この様にその場その場で最適解を出してデザインしていくとデザインのルールが増えすぎてしまう。

デザインルールが増えることによるデメリット

パーツごとのデザインが良くなっても、デザインのルールが増えすぎてしまうことによるデメリットは多い。

ルールの分だけ開発時間がかかることや、複数のルールを開発者が理解する時間もかかってしまうため実装コストがかかってしまう。

また、サイト規模が大きい場合や複数人で作業してページを展開してく際にどのルールを適用してデザインすればよいか迷ってしまい制作コストやコミュニケーションコストもかかってしまう。

対策

早い段階でコンポーネント化して流用する

今まではデザインをある程度作り終えてからコンポーネント化するようにしていたが、早い段階でコンポーネント化してしまえばパーツのルールを保ったまま流用ができ、自然とデザインルールを増やせない状況にできる。

デザインルールを言語化する

先程の例でいうとアイコンの位置が左右混在したデザイン自体が問題なのではなく、どんな場合にアイコンの位置が右になるのか、そのパターンがはっきりしていないことで実装コストや制作コストがかかってしまう。

「外部リンクマークは右に配置」「複数のリンクが並ぶ場合は左に配置」「ボタンは右に配置」というように言葉で整理できると後から立ち返ってデザインを検討することができる。

デザインしていると目の前のパーツや狭い範囲での見やすさや使いやすさに気を取られてしまいがちだ。サイト全体を通して一貫性のあるデザインになるよう、先を見据えた作り方をしていきたい。

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,581 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,220 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,538 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    BtoBサイトにおける「ファーストビュー攻略法」

    2,929 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
    デザインを複数案作る時の心得

    6,404 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
上に戻る