未経験の私がプロのデザイナーに教わった"デザインを説明する４つのポイント"
都内Web制作会社クオートワークスさんでインターン中のきのみです。
今回の記事では、未経験の私がプロのデザイナーに教わったデザインを説明する4つのポイントをご紹介します！
「なぜこのデザインにしたのか？」
ポートフォリオサイトの実績を見ていただく採用面接、いざデザイナーになってクライアントに提案する際など、デザイナーを目指す以上デザインの意図を説明する機会は多いと思います。
そして私自身、インターンになる前に制作した架空サイトについてうまく言語化ができず面接で失敗したことがあります。非常に苦いです。
そこで今回は、インターン先の制作会社の社長にデザインを説明する４つのポイントを教えていただきました。
💡デザインを説明する4つのポイント
1.制作段階で意図を理解し根拠を持つ
2.課題を整理する
3.見ただけでわかることは説明せず、理由を述べる
4.課題に対してデザインがどう解決しているか示す
今回の記事では、実際に学んだポイントを抑え、インターン中にデザインしたサイトの説明をしていきたいと思います！
デザインを説明する4つのポイントについては、後半で詳しく解説します。
就職活動で自分のデザインをしっかりと説明したい
デザインについて言語化する方法が知りたい
こういった疑問を持っている勉強中の方に、私の学習記録が参考になれば幸いです🙂↕️✨✨
インターン先の制作会社
QUOITWORKS
実績バリバリ社長・ムラマツさん
https://x.com/muuuuu_chang?s=21&t=TSlP8pfdADnSqggtp9QdtQ
webギャラリーサイト運営
「MUUUUU.ORG」
https://muuuuu.org/
デザインの有益情報が学べるYouTube
「MUUUUU.TV(ムーテレ)」
https://www.youtube.com/@muuuuu_tv
1．歯医者の架空サイトのデザイン説明
先日私が制作したのは、歯医者をクライアントとした架空サイトです。
このサイトのデザインについて教わったポイント踏まえて説明をしていきます。
1-1.簡単にゴールと課題を振り返り
まずはじめに今回制作したサイトの課題を振り返ります。
仮想クライアントのゴールと課題をまとめると以下の通りです。
⚫︎クライアントのゴール
・優しく丁寧な歯医者としてのブランドイメージを確立する
・幅広い診療科目や最新技術など機能面の強みを訴求する
・問い合わせ数、新規患者数、リピート率のKPI改善を図る
・「あなたの笑顔を私たちが守ります」のコピーを浸透させる
・清潔感と快適さ、自信を持って笑顔で過ごせるイメージを訴求
●課題
・歯医者に対する堅苦しいイメージを払拭したい
・機能的な強みをアピールする必要がある
・信頼感と親しみやすさを感じてもらいたい
・コンバージョン（問い合わせや予約）につなげたい
これらの課題解決に向け、構成の順番やデザインの意図を明確に設計し、クリニックの強みを最大限に引き出せるように取り組みました。次のデザインコンセプトで詳しくお話しします。
1-2.トップページの構成
今回のサイトでは、ゴール設定を基に、ユーザーが知りたい情報に的確にたどり着けるようようなディレクトリマップを作成しました。構成は以下の通りです。
●トップページの構成
ファーストビュー：歯医者さんの特徴と問い合わせ方法をパッと見で伝える
コンセプト：「通いやすさ」「高い技術」など、魅力を端的に訴求
診療案内：歯科診療メニューの充実さをアピール
当院について：院長・スタッフ紹介で、人となりと専門性を感じてもらう
患者様サポート：口コミ・症例写真で、リアルな評判の良さを証明
医院情報：アクセスや診療時間など、来院に必要な情報を掲載
お問い合わせ：予約・相談のハードルを下げる導線を用意
この順番には以下のような理由があります。
・ファーストビューとコンセプトを上位に配置し、クリニックの特徴を早く伝える
・診療案内を前面に出すことで、歯科治療の専門性の高さを印象づける
・口コミや症例写真を後半に配置し、客観的な評価で信頼感を高める
・お問い合わせは最後に持ってきて、興味を持った患者さんを逃さない
患者さんが「どんな歯医者さんか」「何を重視しているか」といった情報を、順を追ってわかりやすく把握できるよう構成しました。
特にこだわったのは、ファーストビューの内容です。
●写真
笑顔の印象的なスタッフ写真を大きく使用したのは、このクリニックが親しみやすく、通いやすい雰囲気であることを訴求する目的です。
● キャッチコピー
キャッチコピーは、提供された日本語のコピーに、英語のコピーを組み合わせました。 英語のコピーで洗練された雰囲気を出しつつ、日本語のコピーも強調できるように配置しています。
●患者さんへの情報
ユーザビリティとデザイン性の両立を目指し、来院につながる重要な情報は、目立つ位置に過不足なくバランスを見て配置しました。
診療時間はテキストではなく表を用いて視覚的にわかりやすいデザインにし、アクセス情報では駅からのアクセス・マップのリンクも配置することでユーザーがスムーズにクリニックを利用できるような設計にしました。
1-3.デザインコンセプト
今回制作したサイトのコンセプトは、「親しみやすさと信頼感を兼ね備えた、あたたかみのクリニック」です。
歯医者の専門性や清潔感といったイメージを保ちつつ、患者さんの歯医者へのハードルを下げ、「ここなら通ってみようかな」と思ってもらえるような両面性を持ったデザインを目指しました。
●各要素のコンセプト
今回のサイトデザインの方向性に合わせ、余白を多めに取り、柔らかく丸みを帯びた印象を与えるようにしました。
歯医者に冷たいイメージや堅苦しさを感じる患者さんもいると思い、角丸を用いることで、そういった印象を払拭し、柔らかさと親しみやすさを演出することを狙いました。
一方で、シャドウは使用せず、全体的にフラットなデザインで統一しました。洗練された印象は残しつつ、あまり気張った感じは受けないデザインを目指しました。
視覚的な情報を与えたい診療案内では、サイトのトーンに合わせたイラストを使用しました。
特にユーザーにアピールしたいセクションでは、歯医者を連想させる海外のラインアートイラストを背景に使用しました。
細めの線で柔らかい印象にし、歯医者らしさは残しつつ、洗練された雰囲気と柔らかさも表現しました。 視覚的にメッセージ性の高いデザインを取り入れ、ユーザーの記憶に残る表現を目指しました。
●配色
「親しみやすさと信頼感を兼ね備えた、あたたかみのあるイメージ」を表現するために、彩度の低い落ち着いたパステルカラーの青と、清潔感をイメージさせる白をメインカラーにしました。
ページ上部に固定される予約フォームボタンには青の補色のオレンジを使用して目立たせています。
配色の基礎については、ムラマツさんのYouTubeで勉強しました！
●フォント
見出しの日本語フォントには「新レトロ丸ゴシック」というフォントを使っています。
このフォントは、レトロな雰囲気もありながら、丸みを帯びたかわいらしい印象が特徴です。ウェイトはミディアムにすることで、可愛くなりすぎず清潔感と優しい印象を残せます。
見出しの欧文フォントには「Brandon Grotesque（ブランドングロテスク）」というフォントを使っています。
このフォントは、現代的でシンプルな印象で、スマートな形とやわらかな雰囲気が特徴です。文字の大きさが統一されていて、数字や記号も同じスタイルでデザインされているので、全体的にまとまりのある洗練された印象になります。
欧文フォントは、日本語フォントの雰囲気に合っているものをムラマツさんに教えていただきました！
日本語フォントと欧文フォントを合わせることでサイトのトーンに統一感が出ました。
本文の日本語フォントには「Noto Sans JP」を使用しています。本文は読むことが目的なので、印象の強いフォントを使用せず読みやすさを優先しています。
1-4.ゴール設定の課題達成度を確認
最後に設定したゴール設定を見て、項目ごと達成できている箇所を確認します。（今回は量が多いので一部にしています！）
●情緒的なデザインの課題
目的
・優しさ、丁寧さ、専門性の高さを連想させるブランドイメージを構築する
・患者様に信頼していただける、身近で頼れる歯科医院としてのイメージを確立する
・清潔感があり、快適な院内環境であることを訴求する
解決
・実際の院内の写真や動画を使うことで、歯科医院の雰囲気を感じてもらえるようにしました。清潔で快適な空間だとわかり、不安が和らぐようにしました。
・サイト全体を通して、スタッフの笑顔の写真を使用し、親しみやすさと思いやりが伝わるようにしました。
・サイトデザインは、白を基本の色にして清潔感を出しつつ、温かみのあるイラストや写真で柔らかい雰囲気も作るようにしました。安心感があり、リラックスして見てもらえるようにしました。
・アイコンやイラストを使って、情報をわかりやすく伝えるようにしました。親しみやすさも出して、サイトに好感を持ってもらえるようにしました。
●機能的なデザインの課題
目的
・直感的なナビゲーションと問い合わせのしやすさを重視する
・問い合わせ数を現在の2倍に増やすことを目標とする
解決
・ナビゲーションメニューをシンプルで直感的な構成にし、サービス内容や問い合わせにすぐにたどり着けるようにしました。
・ヘッダーとお問い合わせページ電話番号を目立つように表示しました。いつでも簡単に連絡できるようにして、問い合わせのハードルを下げるようにしました。
●コンテンツの課題
目的
・幅広い診療科目に対応できる体制があることを訴求する
・患者様に寄り添う、優しく丁寧な歯科医院としてのブランドイメージを確立する
解決
・「診療案内」ページで、各診療科目の特徴や強みを詳しく説明するセクションを設けました。歯科医院の専門性や幅広い対応力をアピールできるようにしました。
・「当院の理念」や「患者様第一主義の姿勢」を明確に文章にして、トップページや「About Us」ページで伝えるようにしました。歯科医院の価値観やポリシーを知ってもらえるようにしました。
●システムの課題
目的
・SEO対策を行い、検索エンジンからの流入を増やす
・予約や問い合わせ手段の多様化を図る（オンライン予約、LINEでの対応など）
解決
・各ページのタイトルタグ、見出しタグなどを明確にし、SEOに適した構成で作成しました。検索エンジンからの流入増加を狙えるようにしました。
・予約変更やキャンセルの手続きをオンラインで完結できるようにしました。利便性を高めて、キャンセル率を下げ、診療効率の向上につなげられるようにしました。
●その他の課題
目的
・地域に根差した歯科医院として、患者様から信頼され、愛される存在を目指す
・患者様の歯の健康を長期的にサポートするパートナーとしての役割を果たす
解決
・地域イベントへの参加報告や、社会貢献活動の詳細をブログや「地域貢献」ページで紹介するようにしました。地域に根差した歯科医院としてのイメージを作り、信頼感や愛着を高められるようにしました。
・患者様の声を積極的に掲載して、口コミの力を活用するようにしました。歯科医院の評判や人気を可視化して、新規患者の獲得につなげられるようにしました。
・虫歯や歯周病などの一般的な歯の疾患について、予防法や治療法を詳しく解説するようにしました。ユーザーの関心が高いトピックの信頼できる情報を提供して、専門性をアピールできるようにしました。
一方、いくつかゴールに対して不十分な点もありました。
・初診者や症状別問い合わせ先の明確化
・治療内容別の予約枠の設定
これらの点については確認漏れがあり…実際は修正すべき箇所です。
今後の改善の余地として残っています。反省です…🥹🥹
以上が、ムラマツさんから教えていただいた"デザインの説明の重要ポイント"を抑えた架空サイトのデザイン説明になります！
この後はポイントごとの解説をしていきます。
2.デザインを説明する4つのポイント解説
インターン先のクオートワークス社長・ムラマツさんに教わったのは以下の4つのポイントです。
💡デザインの説明で重要な4つのポイント
1.制作段階で意図を理解し根拠を持つ
2.課題を整理する
3.見ただけでわかることは説明せず、理由を述べる
4.課題に対してデザインがどう解決しているか示す
2-1.制作段階で意図を理解し根拠を持つ
まずデザインを説明するための大前提として、制作の段階で目的意識を持った課題設定が必要ということを教えていただきました。
私のような初心者の場合、ゴール設定、ディレクトリマップ、ワイヤーフレーム、デザインなどの工程で「目的意識を持ってサイトを設計する」というのが難しい…。
実際、制作したサイトの情報設計・デザインについて、ムラマツさんからフィードバックを頂く際には頭を使いすぎてパンクしそうでしたw
「ここにリンクボタン要らないの？」
「このレイアウトの順番でいいも？クライアントの強みを生かせてるの？」
「ファーストビューの配置はなんでこれにしたの？」
「なんでこのデザインにしたの？」
こういった指摘を鬼のようにいただいても始めは答えることができず、自分の情報設計・デザインすべてを説明できるようになるまでたくさんの時間が掛かりました。
しかしその工程があったおかげで、「なぜこの構成にしたのか？」「なぜこのデザインをしたのか？」を具体的に言語化できるようになってきました！
自分のデザインの一番の理解者になるには、目的を持った課題設定が重要だと学びました。
2-2.課題を整理する
そして実際にクライアントへデザインを説明する際には、まず簡単に課題を振り返ることが必要だと教えていただきました。
課題の優先順位について再度クライアントと認識を合わせておくことで、スムーズに説明に入ることができるそうです。
ゴール設定との具体的な照らし合わせは最後にするそうなので、最初の振り返りでは、簡単にゴール設定を整理しておくことが重要です。
2-3.見ただけでわかることは説明せず、理由を述べる
制作中、フィードバックを頂くためにムラマツさんにデザインを説明したところ、「見てわかることを説明しても意味がない。見たままを実況しないで理由を伝えなきゃだめ。」とご指摘を頂きました。
たしかに当時の私の説明は、色使いや配置など、一目見ただけでわかることをいちいち説明していただけでした。
本当に伝えるべきなのは、先ほどのポイントと同様に、なぜそのデザインを選んだのかという理由と根拠だとムラマツさんの指摘で気づきました。
見たままを実況せず、理由を伝えるというのは意識しないと実はなかなか難しい。頑張りましょう。
2-4.課題に対してデザインがどう解決しているか示す
クライアントがディレクターやデザイナーにデザインを依頼して、一番気になっているのは「自分たちの課題をどうやって解決してくれているのか」ということ。
そこで、ゴール設定に対する具体的な解決方法を伝えることを教えていただきました。
設定したゴールや課題に対して、デザインがどのように解決策を示しているのかを、ざっくりとした説明ではなく、具体的な機能やデザインの要素を挙げながら、それらが課題解決にどう役立つのかを強調することが重要だそうです。また、課題解決の説明はゴール設定に沿って、機能的なデザイン、情緒的なデザイン、コンテンツ、システム、その他の5つの観点に分けて行うと情報が整理できて効果的だと教えていただきました！
●５つの観点
機能的なデザイン
ユーザーが目的を達成しやすいように、ナビゲーション、レイアウト、ボタンなどが工夫されているか？操作がシンプルで、迷わずに使えるようなっているか？
情緒的なデザイン
色使いやデザインのテイストが、ターゲットユーザーの感性に合っているか？見た目の雰囲気で、良い印象を与えられるか？
コンテンツ
サイトで提供している情報やサービスが、ユーザーの求めているものと一致しているか？わかりやすく、必要な情報がきちんと伝わるよう配慮されているか？
システム
サイトのページ構成が整理されていて、行きたい場所へ迷わずたどり着けるか？全体が使いやすいシステムになっているか？
その他
その業界の一般的なルールに沿っていたり、会社のイメージと合ったデザインになっていたりと、細かな点でもサイトの質を上げる工夫が施されているか？
4.まとめ
1.制作段階で意図を理解し根拠を持つ
2.課題を整理する
3.見ただけでわかることは説明せず、理由を述べる
4.課題に対してデザインがどう解決しているか示す
以上がムラマツさんに教えていただいたデザイン説明の４つのポイントでした。
また、これらに加えて大切だと感じたのは「相手に伝わる説明」です。
ムラマツさんから「伝え方も大事や！」と教えていただいたこの書籍では、相手に伝わる説明の方法が学べます。一部抜粋で要点をご紹介します！
（私はYoutubeの要約動画を観ました！）
自分が伝えたいことではなく相手が聞きたいことを意識する
・目的"なんのために"、相手のこと"何が聞きたいのか"の2点を考える
事実と解釈を分ける
・事実と解釈の違いを理解していないと、相手が求める返答と違ってしまう
・ビジネスの場では事実を端的に伝えることが重視されがちだが、場面に応じて解釈を伝えることで相手と意見交換ができる
●解釈を伝えるポイント
・まず相手が事実を理解している必要がある
・「これは私の主観ですが」と前置きをいれる
抽象から具体へ説明する
・概要を説明してから具体的な内容を伝えると相手は理解しやすい
・話題ごと見出しを分け、抽象→具体→抽象→具体を繰り返す
これはデザイン説明だけでなく、普段から意識できるとより良いのコミュニケーションがとれると思います。
私自身まだまだわかりやすい伝え方がニガテです🥹がんばります。
そして最後に、私が制作した架空サイトデザインの反省をして終わりたいと思います。
5.今回の架空サイトデザインの反省
●今回のデザインの反省
まず最初の参考サイトの探し方が間違っていたことです。
ゴール設定から参考サイトを探したのですが、課題の理解が不足していて、サイトをデザインしながら参考サイトを集め直すという非効率な動きとなってしまいました。
💡ムラマツさんの参考サイト探しのアドバイス
・参考サイトを一度決めたらブレさせない。際限なく探し続けると終わりがない
・同業種だけでなくいろいろな業種から探す
今回参考にしたギャラリーサイト
MUUUUU.ORG
https://muuuuu.org/category/taglist/typo
S5-Style
https://bm.s5-style.com/
Behance
https://www.behance.net/?field=web+design
限られた時間の中で、理解した情報で戦略的に設計することが求められると実感しました。次回の改善に生かしたいと思います！
良かった点としては、ヒアリングから課題の設定、ワイヤーフレーム制作、デザインから提案までの基本的な流れをつかむことができたことです。
まだまだできてはいませんが、課題の発見から解決まで、論理的に積み重ねていくことの大切さを学べました。独学のときには学べていなかったことです！
今回の架空サイト制作は、今までの学習に比べて数段負荷がかかっていた分、学びも大きかったと思います。
現在の私の目標は、ユーザビリティとデザインを両立させたデザインができるWebデザイナーになることです。今はデザインが下手だし、情報設計もできていないことばかりで、そもそも就職もできていませんが、目標に向けて今後も学習を頑張りたいと思います！
●最後に
今回の記事を作成した経緯をご説明すると、本当は架空サイトの制作プロセスをまとめた前回の記事でデザインの説明をしなければいけなかったのですが、完全に忘れていました。そこでデザインの説明方法についてまとめたというのが裏話ですw
そして最初のプロセスを解説した記事は多くの方に読んでいただき、有難いことにお褒めのお言葉もたくさん頂きました。
未経験からWebデザイナーになるための学習記録が、同じようにデザインを勉強している方の参考にしていただけてめちゃくちゃ嬉しいです！
皆様本当に大感謝です！
今後も情報発信を継続していきたいと思います！メインの就活もがんばります！
ではまたね～。きのみ
この記事が気に入ったらサポートをしてみませんか？