ベイジでは、ウェブサイトをエンジニアが実装した後にデザイナーがチェックする。その際に、自分のデザイン通りに修正してもらうべきか、エンジニアの負荷を考慮して諦めるべきか悩むことが多い。
これを1on1で上司に相談したら、ウェブサイトのデザインと実装で意識すべき点についてのアドバイスがもらえたので、まとめようと思う。
ユーザーの視点を最も重視する
実装後のデザインチェックで問題に感じる箇所があれば、以下の3つの観点から対応を決める。
- どれくらいデザイン上の違和感があるか（デザイナー視点）
- どれくらい修正に負荷がかかるか（エンジニア視点）
- どれくらい見にくい・使いにくいか（ユーザー視点）
この中で最も重要なのは、3つ目のユーザー視点である。もちろん、エンジニアに渡したデザインデータと実装されたウェブサイトに相違があれば指摘すべきだ。その上でデザイン通りだとしてもユーザビリティに問題がないかを確認する必要がある。
デザインの見た目の再現だけにこだわって、ユーザーの使いやすさを損ねるようなことは絶対に避けなければならない。ユーザーにとっては使いにくいけどエンジニアが大変そうだから修正しない、という判断も基本的にはNGだ。
ユーザーにはサイトの訪問者だけでなく、顧客社内の更新担当者も含まれる。公開後に変更が発生すると思われる箇所は、顧客が編集してもデザインに問題が起きないか？という視点も忘れてはならない。
ベイジのデザインチームでは、デザインチェックの心構えとして以下のような内容が掲げられているので、改めて見返したい。
過去に作ったデザインルールや設計書が「最適解」である保証はない。実装後に改めてブラウザで見てみたら「こうした方がよくない？」と感じる箇所が、きっと出てくるはず。ユーザーの立場で感じた点を指摘してこその、デザインチェック。
デザイナーの役割は「ユーザーの代弁者」であり「ユーザーメリットの守護者」。これでユーザーを誘導できるのか、これで経営課題を解決する可能性を高められるのか、と疑問に思ったらすぐ変えるような柔軟性が必要。
あらかじめ強度の高いデザインにしておく
多少テキストが増えたり、ウィンドウ幅が変わったりしただけで見た目が破綻するようなら、そもそも「デザインの強度が低い」と考えたほうがいい、という指摘を上司から受けた。
たとえば見出しを中央揃えにしていると、テキストが長くスマホで数文字だけ改行されてしまった場合に、違和感のある表示になりやすい。しかし、これは実装前のデザイン段階から予測できていれば、見出しは左揃えで統一するなどして事前に避けられるはずだ。
実装されて原稿が流し込まれてから見た目の違和感に気づくことがないよう、最初から見出しなどのテキストが増えた場合のことなどを想定し、柔軟で強度の高いデザインを目指したい。
より工数のかからない方法を考える
見出しなどのテキストが増えても破綻しないデザインを目指すのは大事だが、これは必ずしもデザインをテキストに合わせるべきという話ではない。むしろ実装後にテキストに関連する違和感を発見した場合は、まず文字数などを調整できないか検討したほうがいいだろう。
なぜならデザインやコードを変えるよりも、圧倒的に工数が少なく済むからだ。もちろんデザインに合わせるために文章の意味を損ねるような調整はすべきではないが、上手く表現を変えれば文字数を削減できることはよくある。
たとえば先ほどの「スマホでの改行位置が気持ち悪い」という問題は、PCとスマホで改行位置が変わるように実装して解決することもできるだろう。しかし、このような改行位置の問題は文字数によって至るところで発生する可能性があり、全パターンに対応していたら工数もかかるしキリがない。「スマホでも改行しないよう文字数を減らす」という選択が取れるなら、それがベストだ。
デザイナーとしては、理想のクオリティと現実的なコストのせめぎ合いの中でベストなバランスを見つける、というビジネス的な観点も忘れないようにしたい。
