【Q&Aで現場力アップ！】UX視点のWebデザイン制作 実践講座（機能性編）

Q. オリジナリティのあるデザインを目指したい！

A. ユーザーがなじんでいるセオリーに逆らわない。

WebデザインやUIデザインにおいて、奇抜さや突飛に感じられる演出や個性は逆効果です。

例えば、「検索ボタンは画面右上にある」「サイトロゴをクリックするとトップページに戻る」といったことを、私たちは日々の経験の中で、なかば当然のものと認識しています。こうした慣習やメンタルモデルには逆らわず、予想しやすい視覚表現や、違和感のない動線設計、インタラクションを心がけましょう。

具体的には、AppleやGoogleなど、多くの人が使い慣れているアプリケーションやWebページのUI設計や“ふるまい”を参考にすることや、リアルのプロダクトの操作体験を模倣すること（例：付箋アプリで付箋を貼ったりはがしたりする動作を取り入れる）などが該当します。

Q. 画面上でデザインを作成するだけではダメですか？

A. 使う場所やシーンを考慮し、リアルな課題を発見しよう。

アプリやWebページは、必ずしも室内の落ち着いた場所で閲覧されるとは限りません。さまざまな環境や状況で利用される場合があり、デザインする際にもそういった制約を考慮に入れる必要があります。例えば、屋外作業時に使う業務アプリや街歩きガイドなど、天気や光の強さによっては画面が見づらい場合もあります。この場合、そういった利用シチュエーションを考慮に入れた配色コントラストを意識することが必要です。

また、献立アプリなどでは、調理中に手が汚れて画面に触れづらい場面などもあるでしょう。この場合や音声コンテンツの活用や細かい操作を要求しない工夫も必要でしょう。

デザイン制作中は画面の中だけで最適な状況を考えてしまいがちですが、真によいユーザー体験を提供するうえでは、ときに実地検証してみたり、利用ユーザーにインタビューすることも大事です。

書誌情報

ウェブデザインの思考法【第2版】

著作：金 成奎
書籍：2,739円
電子版：2,739円
B5：272ページ
ISBN：978-4-8399-83000
発売日：2025年03月03日

＜内容紹介＞
最適なウェブサイト・アプリケーションのデザイン決定方法を論理的に解説！

「機能性」と「情緒性」という観点からウェブデザイン‧UIデザインの方針を策定することで、使いやすさや便利さとビジュアルのクオリティを両立でき、高品質なデザインを実現できます。結果として、ステークホルダー間でデザインの合意形成がしやすくなりプロジェクト全体の成功に寄与できます。デジタルプロダクトの設計‧開発に関わる、全ての関係者にとって、円滑なプロジェクト進行を実現するための手がかりとなる一冊です。

ウェブサイトやアプリケーションなど、デジタルプロダクトの現場では、作業者にとってはデザイン案がなかなか承認されない、評価者にとってはチェックする基準が曖昧なため的確なフィードバックが難しいなど、作業者と評価者の間で認識の齟齬が生じる場合があります。プロジェクトの進行に支障をきたしたり、品質に問題が生じることも少なくありません。

これらの課題解決のために、本書ではデザインを「機能性」と「情緒性」という2軸で捉え、ウェブデザイン‧UIデザインの方針と基準を策定し、その方針と基準に則ってデザインを作業を進行するメソッドを解説します。その結果、使いやすさや便利さとビジュアルのクオリティを両立できる、高品質なデザインが実現でき、以下のような効果が期待されます。

‧ デザインに対する合意形成が促進され、手戻りや修正作業を削減することができる
‧ 関係者間の認識の齟齬の未然に防ぎ、円滑にコミュニケーションを行うことができる
‧ 最終的な成果物に対する品質や満足度を上げ、プロジェクト全体の成功に貢献できる

本書で示した手法を参考にすることで、デザイン制作を円滑に進め、デザインをより論理的に捉えることのできるデザインの考え方=思考法がきっと身に付きます。