【Q&Aで現場力アップ！】UX視点のWebデザイン制作 実践講座（情緒性編）
近年、Web制作においてUXを意識する重要性が高まっています。しかし、具体的にはどうすればよいか、悩むデザイナーも少なくないでしょう。よいUXに貢献するWebデザインの考え方・つくり方を、UI/UXデザイナーの金成奎さんにおうかがいしました。（『Web Designing 2025年10月号』より抜粋）
プロフィール
金 成奎
プロダクトデザイナー／UIデザイナー／Webデザイナー
早稲田大学第一文学部卒業後、Webデザイナー／UIデザイナーとして事業会社、広告代理店、制作会社などで経歴を重ねる。行政・保険・交通・教育などの分野でコーポレートサイト、サービスサイト、業務アプリケーションなど、デジタルプロダクトのUIデザイン・ビジュアルデザイン・アートディレクションを数多く手がける。
https://x.com/seikei_kin
情緒性編｜不定形な「情緒性」を具体的なデザインに昇華させるヒント
「情緒性」は、ユーザーの感情的体験を惹き起こすのに不可欠な要素
デザインの「情緒性」は、ユーザーがデザインに触れたときに生じる感情や印象のことです。「かわいい」や「高揚感」など、ユーザーに抱いてほしい感情的な体験＝情緒を想定し、それを惹き起こすデザイントーンを決めていきましょう。
「情緒性」を目に見える形にし、ステークホルダー間で共通認識を持つためには、下記に示すようなインジケーターやマトリックスを活用した可視化がおすすめです。
1UPを目指す！実践Q&A
Q. 「なんか違う」って、それって結局、好みの問題じゃないの？
A. マトリックスを活用し、言葉の意味をすりあわせる。
「なんか違う」「もっとかわいく」といった表現だけでは、話者の主観の域を出ないため、情緒に関する言葉をマッピング・可視化し、目指すべき方向をステークホルダー間ですりあわせることが必要です。
その際におすすめなのが、上図のマトリックスを活用する方法です。インジケーターの2つを縦軸と横軸にとり、参考サイトのキャプチャなど、具体的なイメージを該当の象限にプロットしていきます。
これにより、軸に用いた言葉の意味や、その配分バランスが可視化され、ステークホルダー間で共通の認識を持ちやすくなります。そのうえで、準備段階で設計したユーザーイメージに基づき、目指すべきデザイントーンを策定していくようにしましょう。
Q. インジケーターの軸はどうやって決めればよいのですか？
A. 図の4つの軸を使用するのがおすすめです。
一つの例として、インジケーターのパラメーターは、左図で示した❶成熟度、❷態度、❸温度感、❹品性の4つの軸を使用してみるとよいでしょう。これらの軸は、私たちが現実世界で人に対して抱く印象の評価軸の中で、おおむね網羅性があると考えられる妥当な軸を4つ選び、Webデザインの世界に適用した、いわばデザインを擬人化した評価軸です。
例えば、今回目指すべきデザインは同年代の友だちのようなフレンドリーな存在か？ それともスーツを着た真面目な先輩か？ という具合に擬人化して捉え、それぞれのインジケーターを「調整」してみると、目指すべき情緒の方向性が可視化され、わかりやすくなるはずです。
デザイナーに求められる姿勢とこれからの展望
UX視点でのデザイン制作は、ユーザーの声に触れることが重要であり、そのためにはデザイナーにも「叩き台」をつくったりリサーチに参加したりする、“フットワークの軽さ”を求められる場面が多くあります。
また、仮説を立てる中では、自身のユーザーとしての体験（UIやサービスにあれこれ思う経験）に助けられることも多く、ユーザーとしてさまざまなプロダクトを実際に試してみることも必要だと感じます。
仕事でもそれ以外の場でも、なんでも前のめりに試し、“楽しめる”資質は、これからのWebデザイナーの大きな武器となるでしょう。
1. 求心力
UX視点でのデザインには、仮設検証のサイクルに多くの人を巻き込んでいく力が必要です。ディレクターなどのチームリーダーだけでなく、デザイナーにも、「叩き台」をつくって周囲に意見を求めたり、リサーチに身軽に参加したりする積極性が必要とされる場面は多いです。これからのWebデザインでは、人を巻き込み・巻き込まれる「求心力」を持つ人の存在感が増してくるでしょう。
2. 可視化力
UXを意識したデザイン制作は、ユーザーの声を取り入れながら進めるため、インタラクティブなプロトタイプなど、議論の土台となる「叩き台」が大きな役割を果たします。要件があいまいな状態であってもひとまず目に見える形に出力できる「可視化力」は、チームの中で重宝される、デザイナーならではの能力と言えるでしょう。
3. “ミーハー”力
UXに関する観察眼・指摘が鋭い人は、みな一様に「新しいもの好き」です。新商品や気になるものは、すぐに試してみる。そうすることで、ユーザーとしての体験の「総量」が多くなり、デザインに活かせるリアルな知見の引き出しも増えるからです。業務でも趣味でも、なんでも興味を持ったら “ミーハー”に飛び込んでみましょう。
Webデザインのこれから
近年、「UX」という言葉も浸透し、よいユーザー体験を追求することはサービスやWebサイトをつくるうえである意味当たり前の姿勢になってきました。プロジェクトマネージャーもエンジニアも、そしてクライアントやビジネスオーナーも「UX」を自身の観点から語ることは珍しくありません。
そういった状況において、デザイナーも近視眼的にユーザーのこと、UXのこと「のみ」を考えるのではなく、ユーザー体験を超えた、クライアントやサービス全体の最適化を見据えた視点を持つことが重要です。例えば、ときに職能を越境し協業する、リサーチの内容やデータを積極的に機能開発に利活用する、プロジェクト背景にあるビジネスの構造を理解するなど。
ここまで「理想のユーザー体験」を追求するにはというお話でしたが、「理想の」デザイナーであるためには、これからはユーザー体験を超えて価値を発揮する、こういったある種「脱デザイナー」的なマインドを持つことが求められているのかもしれません。
書誌情報
著作：金 成奎
書籍：2,739円
電子版：2,739円
B5：272ページ
ISBN：978-4-8399-83000
発売日：2025年03月03日
＜内容紹介＞
最適なウェブサイト・アプリケーションのデザイン決定方法を論理的に解説！
「機能性」と「情緒性」という観点からウェブデザイン‧UIデザインの方針を策定することで、使いやすさや便利さとビジュアルのクオリティを両立でき、高品質なデザインを実現できます。結果として、ステークホルダー間でデザインの合意形成がしやすくなりプロジェクト全体の成功に寄与できます。デジタルプロダクトの設計‧開発に関わる、全ての関係者にとって、円滑なプロジェクト進行を実現するための手がかりとなる一冊です。
ウェブサイトやアプリケーションなど、デジタルプロダクトの現場では、作業者にとってはデザイン案がなかなか承認されない、評価者にとってはチェックする基準が曖昧なため的確なフィードバックが難しいなど、作業者と評価者の間で認識の齟齬が生じる場合があります。プロジェクトの進行に支障をきたしたり、品質に問題が生じることも少なくありません。
これらの課題解決のために、本書ではデザインを「機能性」と「情緒性」という2軸で捉え、ウェブデザイン‧UIデザインの方針と基準を策定し、その方針と基準に則ってデザインを作業を進行するメソッドを解説します。その結果、使いやすさや便利さとビジュアルのクオリティを両立できる、高品質なデザインが実現でき、以下のような効果が期待されます。
‧ デザインに対する合意形成が促進され、手戻りや修正作業を削減することができる
‧ 関係者間の認識の齟齬の未然に防ぎ、円滑にコミュニケーションを行うことができる
‧ 最終的な成果物に対する品質や満足度を上げ、プロジェクト全体の成功に貢献できる
本書で示した手法を参考にすることで、デザイン制作を円滑に進め、デザインをより論理的に捉えることのできるデザインの考え方=思考法がきっと身に付きます。
取材・文：原明日香（アルテバレーノ）