<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>デザインプロセス - デザペディア</title>
	<atom:link href="https://www.ds-pedia.com/tag/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%83%97%e3%83%ad%e3%82%bb%e3%82%b9/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ds-pedia.com</link>
	<description>デザイナーやクリエイターのための情報メディアサイト</description>
	<lastBuildDate>Fri, 14 Aug 2026 04:34:10 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.4</generator>

<image>
	<url>https://www.ds-pedia.com/wp-content/uploads/2026/07/cropped-favicon@2x-32x32.png</url>
	<title>デザインプロセス - デザペディア</title>
	<link>https://www.ds-pedia.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>「誰に」届けるかが見えると、デザインはもっと優しくなる。Web制作におけるペルソナとカスタマージャーニーの活用法</title>
		<link>https://www.ds-pedia.com/2026/08/14/%e3%80%8c%e8%aa%b0%e3%81%ab%e3%80%8d%e5%b1%8a%e3%81%91%e3%82%8b%e3%81%8b%e3%81%8c%e8%a6%8b%e3%81%88%e3%82%8b%e3%81%a8%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%af%e3%82%82%e3%81%a3%e3%81%a8/</link>
					<comments>https://www.ds-pedia.com/2026/08/14/%e3%80%8c%e8%aa%b0%e3%81%ab%e3%80%8d%e5%b1%8a%e3%81%91%e3%82%8b%e3%81%8b%e3%81%8c%e8%a6%8b%e3%81%88%e3%82%8b%e3%81%a8%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%af%e3%82%82%e3%81%a3%e3%81%a8/#respond</comments>
		
		<dc:creator><![CDATA[Yuny]]></dc:creator>
		<pubDate>Fri, 14 Aug 2026 04:34:10 +0000</pubDate>
				<category><![CDATA[デザインナレッジ]]></category>
		<category><![CDATA[記事]]></category>
		<category><![CDATA[UIデザイン]]></category>
		<category><![CDATA[UXデザイン]]></category>
		<category><![CDATA[Webデザイナー]]></category>
		<category><![CDATA[デザインプロセス]]></category>
		<guid isPermaLink="false">https://www.ds-pedia.com/?p=1387</guid>

					<description><![CDATA[<p>こんにちは！UIデザイナーのYunyです。 学生時代にデザインを学んでいた頃は、「学校でそう習ったから」という理由だけで、それほど深く意識せずにとりあえずペルソナを作ってから進めるのが普通でした。しかし実務に入り、クライ &#8230; </p>
<p class="link-more"><a href="https://www.ds-pedia.com/2026/08/14/%e3%80%8c%e8%aa%b0%e3%81%ab%e3%80%8d%e5%b1%8a%e3%81%91%e3%82%8b%e3%81%8b%e3%81%8c%e8%a6%8b%e3%81%88%e3%82%8b%e3%81%a8%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%af%e3%82%82%e3%81%a3%e3%81%a8/" class="more-link">続きを読む<span class="screen-reader-text"> "「誰に」届けるかが見えると、デザインはもっと優しくなる。Web制作におけるペルソナとカスタマージャーニーの活用法"</span></a></p>
<p>The post <a href="https://www.ds-pedia.com/2026/08/14/%e3%80%8c%e8%aa%b0%e3%81%ab%e3%80%8d%e5%b1%8a%e3%81%91%e3%82%8b%e3%81%8b%e3%81%8c%e8%a6%8b%e3%81%88%e3%82%8b%e3%81%a8%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%af%e3%82%82%e3%81%a3%e3%81%a8/">「誰に」届けるかが見えると、デザインはもっと優しくなる。Web制作におけるペルソナとカスタマージャーニーの活用法</a> first appeared on <a href="https://www.ds-pedia.com">デザペディア</a>.</p>]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">こんにちは！UIデザイナーのYunyです。</p>


<div class="target-audience"><div class="target-audience__title">この記事はこんな方に向けて書いています</div><ul class="target-audience__list"><li class="target-audience__item">ターゲット設定が曖昧で、デザインの方向性がブレてしまう方</li><li class="target-audience__item">クライアントやチーム内で、デザインの意図を論理的に説明したい方</li><li class="target-audience__item">ユーザーの感情に寄り添った、使いやすいWebサイトを作りたい方</li></ul></div>



<p class="wp-block-paragraph">学生時代にデザインを学んでいた頃は、「学校でそう習ったから」という理由だけで、それほど深く意識せずに<strong>とりあえずペルソナを作ってから進める</strong>のが普通でした。<br>しかし実務に入り、クライアントワークの忙しさに追われるようになると、「20代女性向け」といった<strong>ざっくりしたターゲットだけを伺って</strong>、いきなり画面を作り始めてしまうことがありました。</p>



<p class="wp-block-paragraph">すると、最初は「ポップでいいですね！」と言われていたのに、数日後には「やっぱりもう少し落ち着いた感じで…」と<strong>方針がブレてしまい</strong>、お互いに「なんか違う」と迷走してしまう失敗を経験しました。<br>表面的なビジュアルだけを整えても、本当に<strong>届けるべき相手の顔</strong>が見えていなければ、最終的なアウトプットは誰の心にも刺さらないものになってしまいます。</p>



<p class="wp-block-paragraph">そんな時に改めて重要性に気づいたのが、前述した<strong>ペルソナ</strong>に加え、ユーザーの感情の動きを可視化する<strong>カスタマージャーニーマップ</strong>を活用することです。<br>これら2つのツールは、単に作るのが目的ではなく、チームやクライアントと「どんな人に届けるのか」を深く共有し、合意形成するための<strong>強力なフレームワーク</strong>になります。</p>



<p class="wp-block-paragraph">今回は、これらのツールを実務のデザインにどう落とし込んでいくか、具体的な活用事例とともにお話しします。</p>



<h2 class="wp-block-heading">なぜ「ペルソナ」が必要なのか？ターゲット設定との違い</h2>



<p class="wp-block-paragraph">ターゲットとペルソナは、実務において似ているようで全く異なります。<br>ターゲットは「20代女性・会社員」といった属性の集団ですが、これだけでは<strong>「可愛い」や「使いやすい」の基準</strong>が非常に曖昧です。</p>



<p class="wp-block-paragraph">たとえば同じ「20代女性・会社員」でも、キャリア志向で効率を重視し、隙間時間にサクサク情報収集したいAさんと、休日のリラックスタイムにカフェでゆったりとコンテンツを楽しみたいBさんとでは、好むUIが全く違います。<br>Aさんには一覧性が高く無駄のないミニマルなデザインが必要ですが、Bさんには余白をたっぷり取り、大きな写真で世界観を伝える情緒的なデザインが響くはずです。</p>



<figure class="wp-block-image size-medium"><img fetchpriority="high" decoding="async" width="300" height="167" src="https://www.ds-pedia.com/wp-content/uploads/2026/08/persona-card-300x167.jpg" alt="【図解】解像度の高いペルソナ資料のイメージ]" class="wp-image-1394" srcset="https://www.ds-pedia.com/wp-content/uploads/2026/08/persona-card-300x167.jpg 300w, https://www.ds-pedia.com/wp-content/uploads/2026/08/persona-card-1024x572.jpg 1024w, https://www.ds-pedia.com/wp-content/uploads/2026/08/persona-card.jpg 1376w" sizes="(max-width: 300px) 100vw, 300px" /></figure>



<h3 class="wp-block-heading">「たった1人のユーザー」を解像度高く描く</h3>



<p class="wp-block-paragraph">一方、ペルソナは「休日は友人とカフェ巡りをし、仕事帰りの電車内でスマホを使ってじっくり情報収集する25歳の〇〇さん」といった、<strong>たった1人の具体的な架空の人物像</strong>を詳細に描きます。</p>



<p class="wp-block-paragraph">この解像度の高さによって、チーム全体で「この人ならどんな配色を心地よいと感じるか」「どんなフォントなら読みやすいか」といった<strong>共通の判断基準</strong>が統一されます。<br>個人の感覚や好みに依存したデザインから脱却し、「〇〇さんならこのボタンは押しやすいはずだ」という<strong>根拠のある選択</strong>ができるようになるのです。</p>



<h2 class="wp-block-heading">プロジェクトでのペルソナとジャーニーマップの活用メリット</h2>



<p class="wp-block-paragraph">実際に、多くのWebサイトリニューアルや新規サービス開発において、<strong>これらのツールはプロジェクトの羅針盤として機能します。</strong></p>



<p class="wp-block-paragraph">特にBtoBのような専門用語が多く複雑なサービスの場合、プロジェクトメンバー間で「ユーザーが本当に知りたい情報は何か」という認識がズレやすくなります。そこでペルソナとカスタマージャーニーマップを設定し、ユーザーが<strong>「知りたい情報」に感覚的にたどり着けるよう</strong>サイトを再設計することで、直帰率の改善や導線の最適化に繋がります。</p>



<h3 class="wp-block-heading">ユーザーの感情をチーム全体で共有する</h3>



<p class="wp-block-paragraph">また、新機能を追加する際も、サービスを提供する側と利用する側双方の思考や感情を<strong>ジャーニーマップで可視化</strong>することが重要です。<br>ユーザーの細かな感情の動きを事前にチーム全体で共有することで、単なる機能の羅列ではなく、<strong>本当に求められるUX設計</strong>を実現できるのです。</p>



<p class="wp-block-paragraph">例えば、ユーザー登録画面ひとつをとっても、「ここで個人情報を入力するのは少し不安に思うだろうな」という感情を事前にマップで共有できていれば、入力欄のすぐそばに「なぜこの情報が必要なのか」「セキュリティはどうなっているか」というマイクロコピーを添えることができます。<br>このように、ツールを活用することで、ユーザーへの細やかな配慮が行き届いたデザインが可能になります。</p>



<h2 class="wp-block-heading">カスタマージャーニーマップで「体験の時間軸」を可視化する</h2>



<p class="wp-block-paragraph">ペルソナが決まったら、次はその人がWebサイトを訪れ、目的を達成するまでの行動や思考、感情の変化を時系列で整理します。<br>これが<strong>カスタマージャーニーマップ</strong>です。</p>



<p class="wp-block-paragraph">ユーザーは<strong>常に一定の感情でサイトを見ているわけではありません。</strong><br>最初は「どんな商品があるんだろう？」と不安や期待を抱き、比較検討の段階では「本当にこれが一番良いのかな」「他社とどう違うのかな」と<strong>迷いが生じます。</strong></p>



<figure class="wp-block-image size-medium"><img decoding="async" width="300" height="167" src="https://www.ds-pedia.com/wp-content/uploads/2026/08/journey-map-timeline-300x167.jpg" alt="【図解】ユーザーの感情と行動の時間軸を可視化する" class="wp-image-1391" srcset="https://www.ds-pedia.com/wp-content/uploads/2026/08/journey-map-timeline-300x167.jpg 300w, https://www.ds-pedia.com/wp-content/uploads/2026/08/journey-map-timeline-1024x572.jpg 1024w, https://www.ds-pedia.com/wp-content/uploads/2026/08/journey-map-timeline.jpg 1376w" sizes="(max-width: 300px) 100vw, 300px" /></figure>



<p class="wp-block-paragraph">「ユーザーが今、どの段階にいて、どんな情報を欲しているのか」を時間軸で把握することで、<strong>どのタイミングでどんなコンテンツを配置すべきか</strong>、論理的な根拠を持って導線を設計できるようになります。<br>たとえば、比較検討フェーズで迷っているユーザーに対して、強引な売り込みのメッセージを出しても逆効果です。</p>



<p class="wp-block-paragraph">そのフェーズでは、他社との違いがひと目でわかる「機能比較表」や「利用者のリアルな口コミ」を配置することで、<strong>ユーザーの不安を取り除くデザイン</strong>が必要になります。<br>また、購入や申し込みの直前（アクションフェーズ）では、余計なリンクを排除して入力フォームに集中させるなど、時間軸ごとの感情に合わせた柔軟なUIの切り替えが求められます。</p>



<h2 class="wp-block-heading">作って満足しない。チームとクライアントの「合意形成」に活かす</h2>



<p class="wp-block-paragraph">ペルソナとジャーニーマップを活用する上で、現場で最も陥りがちな落とし穴があります。<br>それは<strong>「綺麗な図解を作って満足してしまう」</strong>ことです。</p>



<p class="wp-block-paragraph">立派なドキュメントを作ること自体が目的化してしまうと、実際のUIデザインには何も反映されず、結局は<strong>デザイナーの感覚で作った画面</strong>になってしまいます。<br>これでは<strong>全く意味がありません。</strong></p>



<figure class="wp-block-image size-medium"><img decoding="async" width="300" height="167" src="https://www.ds-pedia.com/wp-content/uploads/2026/08/consensus-building-300x167.jpg" alt="【図解】合意形成のための共通言語としての活用" class="wp-image-1388" srcset="https://www.ds-pedia.com/wp-content/uploads/2026/08/consensus-building-300x167.jpg 300w, https://www.ds-pedia.com/wp-content/uploads/2026/08/consensus-building-1024x572.jpg 1024w, https://www.ds-pedia.com/wp-content/uploads/2026/08/consensus-building.jpg 1376w" sizes="(max-width: 300px) 100vw, 300px" /></figure>



<p class="wp-block-paragraph">これらのツールの本当の価値は、チーム内でのプロダクトに対する理解を深めたり、クライアントと「ターゲット像」の認識が正しく揃っているかを確認し合うための<strong>合意形成</strong>にあります。<br>実務において、私はクライアントとのミーティングで<strong>ジャーニーマップを画面に映しながら</strong>お話しすることがあります。</p>



<h3 class="wp-block-heading">「最強の判断基準」としての役割</h3>



<p class="wp-block-paragraph">「情報収集フェーズのユーザーは不安を感じているので、まずは安心感を与える比較表を配置しましょう」と提案することで、「だからこの配置なんですね」と深く納得していただけました。<br>また、デザイン案がA案とB案で割れた際にも、「ペルソナの〇〇さんなら、どちらを好むか？」という基準に立ち返ることで、個人の好みを排除したスムーズな意思決定が可能になります。</p>



<p class="wp-block-paragraph"><a href="https://www.ds-pedia.com/2026/07/11/ai%e6%99%82%e4%bb%a3%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%83%87%e3%82%b6%e3%82%a4%e3%83%8a%e3%83%bc%e3%81%a8%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e3%81%ae%e5%8d%94%e5%83%8d%e3%80%82%e3%83%87/">『AI時代におけるデザイナーとエンジニアの協働』</a>という記事でも紹介しているように、認識のズレをなくすための<strong>共通言語</strong>を持つことは、プロジェクトを円滑に進める上で極めて重要です。</p>



<h2 class="wp-block-heading">データに基づいたアップデートと運用</h2>



<p class="wp-block-paragraph">ペルソナやジャーニーマップは、<strong>一度作れば完成というものではありません。</strong><br>むしろ、<strong>リリースしてからが本番</strong>です。</p>



<p class="wp-block-paragraph">実際にWebサイトを運用し始めると、アクセス解析のデータやユーザーのフィードバックから、「想定よりこのページでの離脱が多い」「意外とあの機能がよく使われている」といった、<strong>初期の想定とのズレ</strong>に気づくはずです。<br>たとえば、スマホでじっくり読まれると想定していたコンテンツが、実はPCから短時間でサッと閲覧されていたりします。</p>



<figure class="wp-block-image size-medium"><img decoding="async" width="300" height="167" src="https://www.ds-pedia.com/wp-content/uploads/2026/08/data-update-cycle-300x167.jpg" alt="【図解】データに基づくペルソナとジャーニーの改善サイクル" class="wp-image-1389" srcset="https://www.ds-pedia.com/wp-content/uploads/2026/08/data-update-cycle-300x167.jpg 300w, https://www.ds-pedia.com/wp-content/uploads/2026/08/data-update-cycle-1024x572.jpg 1024w, https://www.ds-pedia.com/wp-content/uploads/2026/08/data-update-cycle.jpg 1376w" sizes="(max-width: 300px) 100vw, 300px" /></figure>



<p class="wp-block-paragraph">こうした実際のデータをもとに、定期的にペルソナやジャーニーマップを見直し、微調整を行っていく運用こそが大切です。<br>ユーザーの行動や市場環境は常に変化しているため、私たちの理解も<strong>常にアップデートしていく必要</strong>があります。<br>作成時の「仮説」を、運用を通じた「事実」で上書きしていくことで、より精度の高い、ユーザーにとって本当に使いやすいサイトへと進化していくのです。</p>



<h2 class="wp-block-heading">終わりに</h2>



<p class="wp-block-paragraph">ペルソナとカスタマージャーニーマップは、決して<strong>デザインを縛るルールではありません。</strong><br>むしろ、ユーザーの「顔」が見え、その「感情」の動きに寄り添うことができれば、Webデザインは単なる情報の羅列や装飾から、人を適切に導くための<strong>優しいコミュニケーション</strong>へと変わります。</p>



<p class="wp-block-paragraph">最初は難しく感じるかもしれませんが、まずは「どんな人が、どんな気持ちでこの画面を見ているか」を想像するところから始めてみてください。<br>最後までお読みいただき、ありがとうございます！</p>



<p class="wp-block-paragraph">これからも、ユーザーの心に寄り添うデザインの探求を一緒に楽しんでいきましょう。<br>それでは、良いデザインライフを！</p><p>The post <a href="https://www.ds-pedia.com/2026/08/14/%e3%80%8c%e8%aa%b0%e3%81%ab%e3%80%8d%e5%b1%8a%e3%81%91%e3%82%8b%e3%81%8b%e3%81%8c%e8%a6%8b%e3%81%88%e3%82%8b%e3%81%a8%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%af%e3%82%82%e3%81%a3%e3%81%a8/">「誰に」届けるかが見えると、デザインはもっと優しくなる。Web制作におけるペルソナとカスタマージャーニーの活用法</a> first appeared on <a href="https://www.ds-pedia.com">デザペディア</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.ds-pedia.com/2026/08/14/%e3%80%8c%e8%aa%b0%e3%81%ab%e3%80%8d%e5%b1%8a%e3%81%91%e3%82%8b%e3%81%8b%e3%81%8c%e8%a6%8b%e3%81%88%e3%82%8b%e3%81%a8%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%af%e3%82%82%e3%81%a3%e3%81%a8/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
