デザインしていく中でデザインルールがバラバラになったことはないだろうか。
私の課題として、そのパーツ単位では見やすく、使いやすいものを考えられても、サイト全体で見た時にUIのデザインルールがバラバラになってしまう事がある。
その場ごとに最適解を出すデザインとは
例えばリンクの横にアイコンを配置する場合のデザインルール。
- リンクが縦に並ぶとテキストの長さにバラつきがあるので、矢印は左にあった方が見やすい（アイコン左のルール）
- 外部リンクマークは一般的に右側が多く見られるので右側が自然（アイコン右のルール）
- アコーディオンの「+」アイコンは右に配置し縦が揃っていたほうが見やすい（アイコン右縦揃えのルール）
- ボタンは矢印が右にある方が見やすい（ボタン系は右にアイコンのルール）
- お問い合わせのメールアイコンはテキストの左側が見やすい（文字の左側にアイコンルール）
…この様にその場その場で最適解を出してデザインしていくとデザインのルールが増えすぎてしまう。
デザインルールが増えることによるデメリット
パーツごとのデザインが良くなっても、デザインのルールが増えすぎてしまうことによるデメリットは多い。
ルールの分だけ開発時間がかかることや、複数のルールを開発者が理解する時間もかかってしまうため実装コストがかかってしまう。
また、サイト規模が大きい場合や複数人で作業してページを展開してく際にどのルールを適用してデザインすればよいか迷ってしまい制作コストやコミュニケーションコストもかかってしまう。
対策
早い段階でコンポーネント化して流用する
今まではデザインをある程度作り終えてからコンポーネント化するようにしていたが、早い段階でコンポーネント化してしまえばパーツのルールを保ったまま流用ができ、自然とデザインルールを増やせない状況にできる。
デザインルールを言語化する
先程の例でいうとアイコンの位置が左右混在したデザイン自体が問題なのではなく、どんな場合にアイコンの位置が右になるのか、そのパターンがはっきりしていないことで実装コストや制作コストがかかってしまう。
「外部リンクマークは右に配置」「複数のリンクが並ぶ場合は左に配置」「ボタンは右に配置」というように言葉で整理できると後から立ち返ってデザインを検討することができる。
デザインしていると目の前のパーツや狭い範囲での見やすさや使いやすさに気を取られてしまいがちだ。サイト全体を通して一貫性のあるデザインになるよう、先を見据えた作り方をしていきたい。
