ダミー要素だけのデザイン制作は危険!文字・画像もUIデザインの重要な要素


イラスト:イケダマリカ

文字や画像もUIデザインの要素

ユーザーは、コンテンツを見る・読むためにサイトに来ています。大半のユーザーはレイアウトデザインを見るためにサイトに来ていません。
UIデザインの要素で、色やアイコンや書体が重要な要素であるならば、レイアウトの中の文字1文字1文字、画像もUIデザインの重要な要素です。

レイアウトデザインはコンテンツの内容に応じて決定され、レイアウトはコンテンツを表現するためのデザインにしなくてはなりません。
コンテンツの内容からデザインが決まることから、ダミーテキスト・ダミー画像で作ったデザインは、しっかり情報を伝えられる保証がないということになります。

ダミーデータのデザインを完成品としていないか?

とあるUIデザイナーの方がUIデザインのトレーニングとして、メルカリのUIを同じように作成する過程を記事にしていました。
UI制作のトレーニングとして、取り組み自体は良いことですが、「デザイン観点」という点から見ると、ダミーデータで出来ているデザインを完成図としてしまっていることが、意識の落とし穴になっています。

UIのレイアウトデザインを組み立てる際、ダミーデータは手早く体裁の整ったデザインが出来るため、デザイナーやチェックする関係者の人にとって違和感がないかもしれません。

しかし、実際にどのようなデータが入るのか検証せずにデザインを作った際、これらを検討することはできないでしょう。

  • ユーザーはそのコンテンツから得られた情報のどこで心が動き、次の行動を起こすのか
  • 一覧で出る場合、ユーザーは情報を見比べて望ましいものを見つけられるだろうか
  • 画像の中のどんな要素を見て、ユーザーは情報を読み取るのか

このように、ユーザーが実際に見るコンテンツがなければ検証できない事柄があります。

また、レイアウトデザイン中に非現実的な前提を無意識にしてしまうことがあります。どのような画像が登録されるか、画像は必ず登録されるのか、ない場合はどうなるのか等、コンテンツ登録・配信側のビジネス・技術の仕組みをUIデザインの時点でしっかりと確認するとよいでしょう。

コンテンツを情報設計して、実データでレイアウトデザインする

レイアウトデザインの前に、どのようなコンテンツがユーザーにとって必要なのか、情報設計を必ず行いましょう。
UIデザインの早い段階から、実際のコンテンツを使ってデザイン制作を行うことで、コンテンツを元にレイアウトを設計し、コンテンツがある状態でユーザビリティテストを行い検証することで、ユーザーが正しく情報を読み取れることでユーザビリティの高いUIを作成することができます。

UX視点のレイアウト講座受講で意識が変化した

UX DAYS TOKYOで月1回定期開催している「UX視点でのサイト改善検定講座(レイアウト編)」を受講して、ダミーテキスト・画像が駄目ということを学びました。
受講するまでは、ダミーテキストや画像を使ってレイアウトデザイン制作していることがありましたが、たとえペーパープロトタイプであっても極力実データを使ってレイアウトをしないとユーザビリティ向上に繋がらないという基本的な部分が徹底できていなかったことがわかりました。

実データを使ったレイアウトデザインからユーザビリティテストを高速で実践しながら学んだことで、改めてコンテンツがUIの重要な要素であると強く意識するきっかけになりました。今では業務でも実際にどんなコンテンツがユーザーに必要だろうか?という情報設計を先に行ってから実データを使ったレイアウトデザインをして、よりユーザーに伝わるデザインを心がけています。

受講終了後に課題提出したものを添削してくれるので、UX視点が身についているか確認できるため、UIのレイアウトデザインを業務でこなしている方も自分の視点の抜け落ちを改めて確認できるきっかけとなります。

ぜひ、受講してみてはいかがでしょうか?
https://uxdt.connpass.com/event/87049/

参考記事

この記事を書いた人:イケダマリカ

事業会社のデザイナーでUX設計、UIデザインとフロントエンド実装をやっています。業務用ツール開発が好きで最強の管理画面を作りたい。UXも技術も日々勉強中!趣味は片付け、インテリア小物とゲームです。