デザインのセンスは磨ける|駆け出しが今日から実践できる形容詞起点の3ステップ完全ガイド

2026/05/15
「センスがないからデザインができない」「なんとなく作ってるけど、これでいいのかわからない」。駆け出しデザイナーなら、誰しも一度はこんな悩みにぶつかります。
でも、ここで朗報があります。デザインのセンスは「磨ける」もので、しかも再現性のあるプロセスで身につけられるんです。
本記事では、NOT DESIGN SCHOOLのUIデザインメンターとして活躍するキャシ(Katherine)さんが登壇したウェビナー「非デザイナーのためのデザイン入門!〜センスに頼らない"形容詞の魔法"を覚えよう〜」をベースに、駆け出しデザイナーが今日から実践できる「形容詞起点の3ステップ」を完全解説します。
▶ ウェビナー動画:非デザイナーのためのデザイン入門!〜センスに頼らない"形容詞の魔法"を覚えよう〜
「センスがあるってどういうこと?」「自分にもできる?」と悩んでいる方は、ぜひ最後まで読み進めてみてください。
1. なぜデザインで「センス」に悩むのか?|駆け出しが陥る4つの罠

そもそも「センスがない」と感じる原因は、デザインのプロセスが「なんとなく」になってしまっているからです。キャシさんは、駆け出しデザイナーが陥りがちな「なんとなくのデザインプロセス」の問題点を、こう整理しています。
# | 罠 | 具体的な状態 |
|---|---|---|
1 | 再現性ゼロ | 同じことをもう1回やってと言われてもできない |
2 | 意図が説明できない | 「なんでこの色なんですか?」と聞かれても答えられない |
3 | UIフレームワーク頼み | Material UI / Bootstrap / Tailwindのデフォルトをそのまま使っている |
4 | 自分でも何をやってるか分からない | プロセスが頭の中でぐちゃぐちゃ |
これらは「絡まったリボン状態」と言えます。どこから手をつけていいかわからず、出口の見えない迷路にハマってしまう状態です。
そして、この迷路の出口を開ける「鍵」こそが、本記事で紹介する形容詞起点のデザインプロセスなんです。
2. 「センスに頼らないデザイン」とは?|再現性のあるプロセスの正体
「センスに頼らないデザイン」とは、簡単に言うと「なぜそのデザインなのか」を言語化できる、再現性のあるプロセスのことです。
センスがある人は、頭の中で無意識にこの言語化を0.5秒でやっています。一方、駆け出しは同じことを意識的に30分かけてやればいい。プロセスが同じなら、最終的なアウトプットの質に差はつかないわけです。
センスに頼らないデザインの3つの特徴
再現可能:同じプロセスで何度でも同じ品質のデザインを作れる
説明可能:「なぜこの色/なぜこのフォント」を論理的に説明できる
修正可能:途中で要件が変わっても、プロセスのどこに戻ればいいかが明確
キャシさん流「デザインインセプションシート」とは?

キャシさんがロンドンのRED Academyで学んだプロセスが、デザインインセプションシートです。これは、同心円状にデザインの要素を整理する手法で、以下の3層で構成されます。
層 | ステップ | 内容 |
|---|---|---|
中心(コア) | ステップ1:Why(なぜ) | プロダクトの存在理由を明確化する |
中層 | ステップ2:ムード(形容詞) | ターゲットが感じるべき感情・雰囲気を言語化する |
外層 | ステップ3:ビジュアル言語 | 色彩・形状・空間・動きでムードを表現する |
ポイントは「中心から外側に向かって順番に進めていく」こと。Whyが定まらないままムードや色を決めると、必ずブレます。次の章から、各ステップを順番に解説します。
3. ステップ1|Why(なぜ)を定める:デザインインセプションシートの中心
最初に決めるべきは「なぜそのプロダクトが存在するのか」という根本的な問いです。
Whyを定める3つの問い
問い | 内容 | 例(ECサイトの場合) |
|---|---|---|
何を解決するか? | プロダクトが解決すべき課題 | 「忙しい人が時短で買い物できるようにする」 |
誰のためか? | ターゲットユーザー | 「30〜40代の共働き世代」 |
なぜ今やるのか? | 市場・社会的な必然性 | 「タイパ重視のZ世代も流入しはじめている」 |
このWhyが曖昧なまま色やフォントを決めてしまうと、後から必ずブレます。「なんでこのデザインなんですか?」と聞かれた時に答えられるかどうかは、このWhyがどれだけ具体的に言語化されているかで決まります。
Whyを言語化するときのコツ
3〜5文の短い文章にまとめる:長い説明は要件定義書に書く、ここはエッセンスだけ
数値や固有名詞を入れる:「ターゲットユーザー」より「東京都内・30代・共働き・時短志向」と具体化する
競合と差別化する一言を入れる:「Amazonと違って、◯◯にこだわる」など
NOT DESIGN SCHOOLの駆け出しデザイナーのためのClaude入門でも紹介していますが、AI時代において「Why」を言語化できるスキルは、AIに的確な指示を出すための前提でもあります。
4. ステップ2|形容詞でムードを定める:感情と雰囲気の言語化
Whyが定まったら、次は「そのプロダクトで、ユーザーにどんな感情を持ってもらいたいか」を形容詞で言語化します。
ここが「形容詞起点デザイン」の真骨頂です。
形容詞の役割
形容詞は「ブランドのDNA」として機能します。たとえば、giffgaff(イギリスの携帯会社)は以下の4つの形容詞でブランドを設計しています。
形容詞 | 意味 | 表現したいこと |
|---|---|---|
Friendly(親しみやすい) | 人と人とのつながり | 温かさ・安心感 |
Playful(遊び心のある) | 楽しさ | エンターテイメント性 |
Bold(大胆な) | 挑戦・前進 | 確信・力強さ |
Spirited(活気ある) | 力強さ | 活力・エネルギー |
これらの形容詞は、色・フォント・UXライティング・採用基準・パッケージデザインまで、giffgaffのあらゆる意思決定の基準になっています。
形容詞をブレインストーミングで出すコツ
キャシさん流のやり方では、形容詞を出すときにブレインストーミング方式を使います。
「いいか悪いか」「合うか合わないか」を判断しない:浮かんだものを全て書き出す
対義語のペアで考える:「Dark / Bright」「Sharp / Soft」「Modern / Classic」など
3〜5個に絞る前に、20〜30個出す:候補が多いほど後で入れ替えやすい
競合と被らないか確認する:同業他社と同じ形容詞では差別化できない
ブレインストーミングで全部出しておくと、後から「これは合わない」となった時に、別の候補と入れ替えるだけで済むのが大きなメリットです。
5. ステップ3|ビジュアル言語に翻訳する:色彩・形・空間・動き
形容詞が定まったら、最後はビジュアル言語に翻訳します。ビジュアル言語は以下の4要素で構成されます。
要素 | 内容 | 形容詞からの翻訳例 |
|---|---|---|
色彩 | カラーパレット・コントラスト | Friendly → 暖色系、Bold → 高彩度 |
形状 | 角丸・直線・曲線 | Friendly → 角丸、Bold → 直線 |
空間 | 余白・密度・グリッド | Calm → 余白多め、Energetic → 密度高め |
動き | アニメーション・トランジション | Playful → 弾むモーション、Serious → 控えめ |
色相環×形容詞マッピング(重要)
色彩を選ぶときに最も役立つのが、色相環の角度(0〜360°)と形容詞の対応マップです。

角度 | 色相 | 連想される形容詞 | 代表ブランド例 |
|---|---|---|---|
0〜60° | 赤・オレンジ | 情熱・興奮・危険・エネルギー | Coca-Cola、Netflix、YouTube |
60〜120° | 黄・黄緑 | 元気・快活・希望・楽しさ | giffgaff(黄)、McDonald's |
120〜180° | 緑 | 安心・和・新鮮・健康・癒し | Spotify、Whole Foods |
180〜240° | シアン・水色 | 爽快・自由・革新・解放感 | Twitter(旧)、TikTok |
240〜300° | 青・青紫 | 信頼・誠実・冷静・知的・秩序 | Facebook、LinkedIn、Booking.com |
300〜360° | マゼンタ・ピンク | 創造性・個性・遊び心・神秘 | giffgaff(ピンク)、Instagram |
たとえばクライアントに「Playful(遊び心のある)でポップな色にして」と言われたら、60〜120°エリア(黄〜黄緑)か180°前後(シアン)から選べば、まず外しません。「信頼感のある冷静な雰囲気で」と言われたら、240〜300°エリア(青系)が確率論的に正解です。
このマッピングを記憶しておくだけで、配色の精度が劇的に上がります。色相環マップの詳細は、シリーズ#2の「色相環×形容詞|配色を理屈で選べる完全マップ」(公開予定)で深掘りします。
コントラストチェックは必須
色を選んだら、必ずコントラスト比をチェックします。FigmaならAbleプラグインやColor Contrast Checkerが便利です。
WCAG基準では、テキストと背景のコントラスト比が以下を満たす必要があります。
AAレベル(推奨):通常テキスト 4.5:1 以上、大きな文字 3:1 以上
AAAレベル(最高):通常テキスト 7:1 以上、大きな文字 4.5:1 以上
「形容詞的に最高の色」が「読めない色の組み合わせ」だと意味がないので、ここは必ず確認しましょう。
6. 実例|giffgaff(イギリス携帯会社)が4つの形容詞でDNAを設計した話
ここまでの3ステップを、実例で見てみます。giffgaffの公式デザインシステムを題材に、形容詞からビジュアルが導かれていく流れを追いかけます。
giffgaffのDNA:4つの形容詞

すでに紹介した通り、giffgaffは以下の4形容詞でブランドを設計しています。
Friendly(親しみやすい)
Playful(遊び心のある)
Bold(大胆な)
Spirited(活気ある)
カラーパレットの解説
giffgaffの公式カラーパレットは6色で構成されます。

カテゴリ | 色 | 形容詞との対応 |
|---|---|---|
プライマリー | 黄色 | Playful(遊び心) |
プライマリー | ピンク(マゼンタ) | Bold + Playful |
プライマリー | 純黒(#000) | Sophistication(洗練) |
プライマリー | 純白(#FFF) | コントラストと余白 |
セカンダリー | ターコイズ | Brighter, Cheekier(明るく生意気に) |
セカンダリー | オリーブグリーン | Calm and Serene(落ち着き・静寂) |
賢い設計:「あえて逆をいく」セカンダリーカラー
ここに、giffgaffの設計の賢さがあります。
セカンダリー2色のうち、ターコイズは4つの形容詞(Friendly/Playful/Bold/Spirited)の系統を継承していますが、オリーブグリーンはあえて4つの形容詞から外れる方向で選ばれています。
なぜか? プライマリーの黄色とピンクのビビッドな組み合わせが連続すると読み手が疲れるからです。そこで広告やバナーで「アクセント」として機能する逆方向の色を意図的に1色加えている、というわけです。
これは駆け出しデザイナーがすぐに拝借したいテクニックです。3〜4色のカラーパレットを作るとき、1色だけ「あえてDNAと逆」を入れると、デザイン全体に奥行きが出ます。
フォント選定の論理
giffgaffの公式デザインシステムでは、フォントも形容詞起点で選ばれています。たとえば丸みのあるサンセリフ体(Quicksand系)は、4つの形容詞のうち「Friendly(親しみやすい)」を直接的に視覚化しています。
このように、色 → フォント → アイコン → UXライティング → 採用基準まで、すべてが4つの形容詞から逆算されているのが、giffgaffがブランディング教材として最強と言われる理由です。
7. 駆け出しが今日から実践できる5つのアクション
ここまで読んで「やってみたい」と思った方に、今日から実践できる5つのアクションを紹介します。
アクション1|好きなデザインを1つ選んで「形容詞」で分解する
毎日5分、Pinterest や Instagram で好きなデザインを1つ選び、3つの形容詞で言語化してみる練習。「なんとなくいい」を「◯◯で◯◯で◯◯だからいい」に翻訳する習慣をつけます。
アクション2|Airbnbのブランドカラー(ピンク #FF385C)を5要素に分解する
キャシさんがウェビナーで実演していた、AirbnbのブランドカラーをHSLで分析する練習。

要素 | Airbnbのケース |
|---|---|
色相 | 暖色系(620〜630nm/赤寄りピンク) |
彩度 | 100%(高彩度) |
明度 | 中程度(HSL: 61%)。50%だと攻撃的すぎる |
文化的連想 | 情熱・親しみ・歓迎 |
ブランド整合性 | "Belong Anywhere" のミッション(温かさ+包括性) |
「センスがある」とは、こういう分解を0.5秒でできる人のこと。逆に言えば、この5要素分解を意識的に繰り返せば、後天的にセンスが身につくということです。
アクション3|既存ブランドの「形容詞4選」を逆算する
NOT DESIGN SCHOOL、Spotify、Apple、好きなブランドを1つ選んで、「もしこのブランドが4つの形容詞で表現されるなら?」を妄想してみる。逆算思考でブランディングの感覚が掴めます。
アクション4|色相環マップを壁に貼る

色相環×形容詞のマッピング表を印刷して、デスクの近くに貼っておく。配色に迷ったときに即参照できる状態を作ります。
アクション5|Refactoring UI を読む
Refactoring UI(Adam Wathan & Steve Schoger 著)は、駆け出しが「センスに頼らないデザイン」を体系的に学べる定番書です。色・余白・タイポグラフィを「ルール」として整理してくれます。
その他のおすすめ書籍:
The Design of Everyday Things(Don Norman 著):UXの古典
Apple Human Interface Guidelines:iOS/macOS/visionOSの最新版
Material Design 3:Googleの公式デザインシステム(2025年に Material 3 Expressive にアップデート)
8. 校長の見解|AI時代こそ「言語化されたデザイン」が武器になる
ここからは、NOT DESIGN SCHOOL校長のもちが、本記事のテーマについて思うところを書いていきます。
視点1:AI時代こそ「言語化されたデザイン」が武器になる
形容詞ベースのデザインプロセスは、Claude や Figma MakeなどのAIツールに指示を出すときの必須スキルです。
「なんとなくいい感じで」では、AIには伝わりません。「Friendly で Playful で、ターゲットはZ世代の女性、メインカラーは黄系60度〜120度エリアで」と具体的に指示できる人が、AIを最大活用できる時代に入っています。
詳しくは 駆け出しデザイナーのためのClaude入門 や Studio制作×AIワークフロー でも解説しています。
視点2:駆け出しほど「センス信仰」を捨てたほうがいい
NOTで生徒を見ていて感じるのは、「センスがない」と止まる人より「プロセスを回す」人のほうが、結果的にデザインが伸びるということです。
センスは結局のところ「知識の蓄積」です。経験を積めば後から身につきます。そして一朝一夕に身につくものでもありません。センスを伸ばすにはどうしたいいのか悩むより今、目の前のプロジェクトで「Why → 形容詞 → ビジュアル」のプロセスを回すほうが、伸びは早いです。
視点3:言語化を磨くなら、待ち時間中の広告やクリエイティブで「速攻言語化ワーク」をやる
センスを磨きたいなら、机に向かって参考書を読むより、日常で目に入る広告やクリエイティブを10秒で言語化する習慣が一番効きます。
もち自身が毎日やっているのは、こんな感じ:
電車待ち・移動中の中吊り広告:「この企業のキービジュアル、3つの形容詞で言うと?」を10秒で言語化
カフェのメニュー表・看板:「どんな客層を狙ってる? どの形容詞で表現してる?」を考える
コンビニで見つけた新パッケージ:「色相環のどこ? なぜその色? DNAは?」を分析
アプリのスクショ・LP:「このプロダクトのDNAは何? どの形容詞が強い?」を分解
YouTube広告・SNS広告:「30秒の動画で何の感情を作りたい? 色・音・カットの選び方は?」を観察
ポイントは、最初から「0.5秒で答えを出そうとしないこと」。最初は10秒、慣れたら3秒、それも慣れたら1秒。スマホをスクロールする時間を、言語化練習に振り替えるだけで、3ヶ月後には自分でも驚くほど変わります。
センスがある人の頭の中は、これを無意識にやり続けてきた結果でしかありません。待ち時間・移動時間・寝る前の数分を「言語化トレーニングの時間」に変えるだけで、後天的にセンスは確実に育ちます。
視点4:「センスに頼らない」=「再現できる」=「人に教えられる」=「チームで作れる」
1人の天才デザイナーよりも、プロセスを共有できるチームのほうが、圧倒的に強い時代に入っています。
駆け出しでも「なぜこのデザインなのか説明できる」状態になっていれば、クライアント提案で勝てるし、チームでも信頼されます。形容詞起点のプロセスは、デザイナーとしての"市場価値"を上げる武器だと、もちは思っています。
9. 限界と注意点|このプロセスが効かないケース
万能なプロセスではありません。以下のケースには注意が必要です。
注意点1:純粋アート・実験的クリエイティブには不向き
このプロセスは「ゴールから逆算する」型なので、ビジネス文脈やブランディング文脈で力を発揮します。一方、自己表現としてのアート、実験的なクリエイティブには向きません。アートとデザインは目的が違うので、混同しないことが大事です。
注意点2:形容詞は文化・世代で意味が変わる
giffgaffの「Playful = 黄色とピンク」はイギリスの文化が前提です。日本のZ世代向けと団塊世代向けでは「Playful」の最適色が違いますし、宗教圏が違えば色の意味自体が変わります。
形容詞ベースのプロセスを回す前に、ペルソナ理解(誰に届けるか)が必須です。これを飛ばすと、形容詞だけ正しくても刺さらないデザインになります。
注意点3:理屈を覚えても手を動かさないと身につかない
このプロセスは読んだだけでは身につきません。実際に1つのプロジェクトで「Why → 形容詞 → ビジュアル」を10〜20回繰り返して、初めて感覚として定着します。
座学とアウトプット練習をセットで進めるのが、最短ルートです。アクション1〜3は今日から始められるので、ぜひ手を動かしてみてください。
10. FAQ
Q1. センスがある人と無い人の決定的な違いは何ですか?
A. キャシさんの言葉を借りると、センスの正体は「パターン認識の自動化」です。センスがある人は、形容詞→色→形→空間の翻訳を0.5秒で自動的にやっているだけ。プロセス自体は同じです。違いは「意識的にやっているか、無意識でやっているか」だけなので、意識的に繰り返せば後天的にセンスは身につきます。
Q2. 形容詞は何個くらい決めればいいですか?
A. giffgaffのように3〜5個がおすすめです。多すぎると優先順位がブレ、少なすぎると差別化されません。ブレインストーミングで20〜30個出した上で、Whyに最も近い3〜5個に絞るのが王道です。
Q3. クライアントから「なんとなくこんな感じで」と言われた時はどうすればいいですか?
A. 形容詞ヒアリングを使ってください。「『なんとなく』を3つの形容詞で表現するとどうなりますか? 例えば『信頼感がある』『親しみやすい』『先進的』みたいに」と聞き返すと、クライアントも自分の頭が整理されて、後の修正依頼が激減します。詳しいヒアリング術はロゴデザインのヒアリング&修正対応完全ガイドでも解説しています。
Q4. AIツール(Claude、Figma Make等)を使う場合、このプロセスはどう活きますか?
A. AIへの指示文(プロンプト)が圧倒的に質が上がります。「いい感じのLPを作って」より「Friendly/Bold/Modern の3形容詞、ターゲットは30代共働き、メインカラーは黄系60〜120度エリア」と指示するほうが、AIのアウトプットの精度が10倍違います。詳しくは駆け出しデザイナーのためのClaude入門を参照してください。
Q5. 「センスを磨く」ために、明日から何をすればいいですか?
A. アクション1(毎日5分の形容詞分解) を1ヶ月続けてみてください。Pinterestで好きなデザインを1日1つ選んで「3つの形容詞で言語化」する習慣だけで、配色・形状・空間の感覚が劇的に変わります。またNOT DESIGN SCHOOLでは全員が「言語化ワーク」に取り組み、日々センスを磨いています。言語化ワークの詳細についてはまた別途記事を執筆しようと思います。
参考リンク
ウェビナー動画
非デザイナーのためのデザイン入門!〜センスに頼らない"形容詞の魔法"を覚えよう〜(NOT DESIGN SCHOOL公式 / 登壇:キャシさん)
スピーカー
キャシ(Katherine)さん:NOT DESIGN SCHOOL UIデザインメンター
肩書き:シニアデジタルプロダクトデザイナー/Friends of Figma London Group Leader
25年以上の海外生活、IELTS 8.0レベルの英語力を強みとしたグローバル視点でのアドバイスに定評あり。最近はWebアプリの個人開発にどハマり中で近日中にβ版リリース予定。
出典・公式ドキュメント
Refactoring UI(Adam Wathan & Steve Schoger 著)
NOT DESIGN SCHOOL 関連記事
NOTのパーソナルコースでキャリアの幅を広げよう!
記事を読んで「自分はどう進めればいい?」と思ったら、LINEや相談用slackから気軽に聞いてください。ひとりで悩む時間がいちばんもったいないです👍️

\ ✨まずはLINEで気軽に無料相談✨️ /
LINEで気軽に相談する
\ 🔥現在 82名 の生徒が受講中🔥 /
パーソナルコースを見る
【生徒募集中】パーソナライズ型のデザインカリキュラム
NOT DESIGN SCHOOLのパーソナルコースなら、あなた専用のオーダーメイドカリキュラムで、最短6ヶ月で実務レベルのデザイナーへ。AIの学習コンテンツや勉強会も充実!まずは無料相談から。

\ 🔥現在 82名 の生徒が受講中🔥 /
パーソナルコースの詳細を見る
自分のペースで学べる!買い切り動画講座のご紹介

Claude Code入門講座
Claude Codeを初めて触る人向け。セットアップから基本操作まで一気に学べます。
※こちらはウェビナーのアーカイブ販売です
6,600円(税込)

Illustratorマスター講座
イラストレーターとフォトショップの基礎をマスター
全20レッスン以上 / 動画 9時間以上
19,800円(税込)

Figmaマスター動画講座
基礎から応用までFigmaの使い方をマスター
全50レッスン以上 / 動画 17時間以上
19,800円(税込)

Studioマスター動画講座
基礎からCMSまでStudioの使い方をマスター
全40レッスン以上 / 練習課題 収録
19,800円(税込)

Framerマスター動画講座
基礎から高度なアニメーションまでFramerの使い方をマスター
全25レッスン以上 / 完全日本語解説
19,800円(税込)

作字マスター動画講座
iPadのProcreateをつかった作字のつくり方をマスター
全7レッスン / 7時間の動画
19,800円(税込)
TOPに戻る
\Slackで個別相談受付中/

最短6ヶ月で「自分に必要なスキル」だけを集中して身につけるNOTのパーソナルコース。
\ ✨まずはLINEで気軽に無料相談✨️ /
LINEで気軽に相談する
\ 🔥現在 82名 の生徒が受講中🔥 /
パーソナルコースを見る
🆕 新着記事

NOT DESIGN EXPO|デザインの幅を広げる7分野×7時間のオンライン大型ウェビナー開催決定!!参加申込 受付中✨️
👀 買い切り動画講座 大好評発売中!

Claude Code入門講座
Claude Codeを初めて触る人向け。セットアップから基本操作まで一気に学べます。
※こちらはウェビナーのアーカイブ販売です

Illustratorマスター講座
イラストレーターとフォトショップの基礎をマスター
全20レッスン以上 / 動画 9時間以上

Figmaマスター動画講座
基礎から応用までFigmaの使い方をマスター
全50レッスン以上 / 動画 17時間以上

Studioマスター動画講座
基礎からCMSまでStudioの使い方をマスター
全40レッスン以上 / 練習課題 収録

Framerマスター動画講座
基礎から高度なアニメーションまでFramerの使い方をマスター
全25レッスン以上 / 完全日本語解説

作字マスター動画講座
iPadのProcreateをつかった作字のつくり方をマスター
全7レッスン / 7時間の動画

第一線で活躍するデザイナーたちの仕事観や価値観をディープに深堀りする対談ポッドキャスト
✍ 受講生の学習記録も更新中!






