それ、デザインじゃない！！
第1章 素材を並べることと、デザインすることは違います。
―余白と奥行きの話
デザインを始めたばかりの人が、最初にやりがちなことがあります。
素材を、全部使うことです。
撮ってもらった写真、クライアントから渡されたロゴ、伝えなければならない文言、装飾に使えそうなアイコン。それらを画面の中にきっちり収めて、「完成しました」と言う。
でも、それはデザインじゃなくて、配置です。
両者の違いは何でしょうか。配置は「要素をどこかに置く行為」です。デザインは「見る人の視線を設計する行為」です。この違いは小さいようで、実は決定的です。
余白を怖がっていませんか。
多くの人が余白を「何もない空間」として扱います。もったいないと感じるのか、何かで埋めようとします。でも、余白はメッセージです。余白があるから、視線が止まる。余白があるから、重要なものが浮かび上がる。余白があるから、画面が呼吸できます。
有名なデザイナーたちが口をそろえて言うことがあります。「引き算がデザインだ」と。足し算は誰でもできます。何かを置けばいい。でも引き算は難しい。何を置かないかを決めるには、何が大切かを理解していないとできないからです。
余白を削る人は、何を伝えたいかがわかっていないことが多いです。
奥行きについても、同じことが言えます。
奥行きとは、影をつけることではありません。グラデーションをかけることでもありません。奥行きとは、「手前にあるもの」と「奥にあるもの」の関係を意図的に設計することです。
視覚的な階層と言い換えてもいいでしょう。一番目立ってほしいものが一番目立ち、次に目立ってほしいものがその次に目立ち、背景にあるべきものは背景に収まっている。その秩序が、奥行きを生みます。
あなたのデザインで、一番大事なものはどれですか。
そう聞かれたとき、すぐに答えられますか。もし迷うなら、それはデザインの問題ではなく、思考の問題です。デザインは思考を可視化するものです。何を伝えたいかが曖昧なまま作ると、デザインも曖昧になります。
要素を置く前に、一度だけ自分に問いかけてください。「この画面を見た人は、最初にどこを見るべきか。次にどこを見るべきか。」その順番を設計できていれば、余白も奥行きも、自然と生まれます。
ツールは関係ありません。PhotoshopでもFigmaでも、紙と鉛筆でも。考え方が先にあって、ツールはその手段に過ぎません。
「なんかごちゃごちゃしてる」と言われたことはありませんか。それは素材が多すぎるのではなく、優先順位がないからです。「なんかさみしい」と言われたことは？それは素材が少ないのではなく、意図がないからです。
余白と奥行きは、技術ではなく、思考の産物です。
考えることから始めてください。画面に向かう前に、紙に書いてもいい。「何を一番伝えたいか。次は何か。それ以外は本当に必要か。」この問いに答えられたとき、初めてデザインが始まります。
素材を全部使うことが誠実さだと思っている人がいます。でも、受け取る人の視線と時間を奪わないことの方が、ずっと誠実です。
引き算を、恐れないでください。
第2章 フォントを3種類以上使っていたら、それはデザインじゃなくてフォント展示会です。
―書体の話
フォントを選ぶことと、フォントを使いこなすことは、まったく別の話です。
多くの人は前者はできます。Googleフォントを開いて、かわいいものを選んで、見出しに当てる。でも後者ができている人は、思ったより少ないです。
「なんとなく雰囲気が合いそうだから」という理由でフォントを選んでいる人へ。その選び方は、デザインの言語を無視しています。
書体には歴史があります。セリフ体（明朝系）は古典的な権威と信頼を持ちます。サンセリフ体（ゴシック系）は現代的な明快さを持ちます。スラブセリフはたくましさと安定感を。手書き風フォントは親しみやすさと個性を。
それぞれの書体が、長い時間をかけて人々の視覚に刷り込んできた印象があります。あなたがどう思うかではなく、見る人がどう感じるかです。フォントはそういうものです。
では、何種類使えばいいのか。
原則として、2種類です。見出し用と本文用。慣れてきたら、アクセント用に1つ加えて3種類。それ以上は、よほどの理由がない限り必要ありません。
3種類以上使いたくなる気持ちはわかります。1つに絞るのが怖いんです。変化をつけたい。でも、その変化はフォントでつけるものじゃありません。ウェイト（太さ）とサイズの対比でつけるものです。
同じフォントでも、Regular と Bold では全然違う表情を持ちます。同じフォントでも、12ptと48ptでは役割が変わります。この「1つを極める」ことの方が、10種類を並べるより何倍も難しく、何倍も美しい結果を生みます。
字間と行間の話をしましょう。
多くの人が無視している、でも実はデザインの質を左右する要素です。
字間（トラッキング）とは、文字と文字の間のスペースです。見出しを大きくするとき、デフォルトのままにしていませんか。大きな文字は、字間を少し詰めると引き締まります。逆に、小さいキャプション文字は、少し広げると読みやすくなります。
行間（レディング）とは、行と行の間のスペースです。本文テキストに対して、行間が狭すぎると読者の目が迷子になります。広すぎると間延びして、ひとまとまりの文章に見えなくなります。本文なら行間1.5～1.7倍が一般的な目安です。
これは「感覚」ではなく「設計」です。何ptにするかに、理由を持てますか。
フォントの組み合わせについて、もう少し踏み込みましょう。
2種類のフォントを使うとき、コントラストをつけることが大切です。似たような書体を2つ並べても、何のために2種類使ったのかわかりません。セリフ体とサンセリフ体を組み合わせるとか、細いウェイトと太いウェイトを組み合わせるとか、明確な対比を意図してください。
「合いそうだから」ではなく、「この対比をつくりたいから」という理由で選ぶ。その一歩が、素人と中級者の分かれ目です。
最後に、最も重要なことをお伝えします。
フォントの選び方よりも大切なのは、フォントの扱い方です。どんなに美しいフォントを選んでも、サイズも太さも行間もバラバラで、優先順位が見えなければ意味がありません。
1つのフォントで、すべての情報の重要度を表現できますか。見出しは一番大きく太く。小見出しは少し小さく。本文は読みやすく細く。キャプションはさらに小さく、でも読める。
この階層が整っていれば、フォントは1種類でもデザインとして成立します。
フォントを増やす前に、今使っているフォントを極めてください。
第3章 5色以上使っているなら、それはデザインじゃなくてクレヨン画です。
―色の役割の話
色には、役割があります。
これを知らずに色を使っている人が、驚くほど多いです。「きれいな色だから」「合いそうだから」「なんとなくこのパレットが好きだから」。でも色は、好みで選ぶものではなく、役割で選ぶものです。
基本的な役割は3つです。メインカラー、サブカラー、アクセントカラー。
メインカラーはブランドや画面の印象を決める色です。最も広い面積を占めます。サブカラーはメインを支える色です。背景や区切りに使います。アクセントカラーは、一番注目させたい場所だけに使う色です。ボタン、強調文字、重要な数字など。
この3つだけで、ほとんどのデザインは完成します。
「でも、もっと華やかにしたい」と思う人がいます。その気持ちはわかります。でも、色を増やすことと、華やかになることは、イコールではありません。むしろ逆です。色が多いと、視線が散らばって、何が重要かわからなくなります。結果的に「うるさい」「まとまりがない」という印象を与えます。
華やかさは、色の数ではなく、色の選び方と配置で生まれます。
色の選び方について、少し整理しましょう。
同系色でまとめる場合は、明度（明るさ）と彩度（鮮やかさ）の変化でリズムをつくります。同じ青でも、濃い青・中間の青・薄い青を使い分けることで、単調にならずにまとまりが生まれます。
補色を使う場合は、メインとアクセントの関係で使います。例えば、青みがかった画面にオレンジのアクセント。この対比が、視線を誘導します。ただし、補色は使い過ぎると目が疲れます。アクセントは、あくまでポイントだけに。
白と黒を忘れている人が多いです。白と黒は「色なし」ではありません。最も強い明度対比を生む、強力なデザインの道具です。特に黒は、他の色を引き締める効果があります。
配色の失敗パターンを知っておくと、避けられます。
一番多いのは「全部目立たせようとする」パターンです。見出しも本文もボタンも背景も、それぞれ違う鮮やかな色にする。結果、何も目立たなくなります。目立つということは、相対的なものです。何かが目立つためには、何かが引いていないといけません。
次に多いのは「好きな色だけ使う」パターンです。個人の趣味で色を選ぶと、ターゲットの感覚と合わないことがあります。子ども向けのサービスに大人っぽいくすんだトーンを使ったり、高級感を出したいのに明るいポップな色を使ったり。色はメッセージです。受け取り手の文化と感覚を考えてください。
そして、「配色ツールに頼りすぎる」パターン。美しいパレットを生成してくれるツールはたくさんあります。でも、パレットを出力することと、それをデザインに使いこなすことは別です。ツールが提案した6色を全部使う必要はありません。
色の使いこなしは、練習と観察で育ちます。
街に出て、好きだと思ったものの色を観察してください。何色使っているか、どの色が一番多いか、どこにアクセントがあるか。あるいは好きなウェブサイトやパッケージデザインを分析してください。「この色はどんな役割を担っているか」を言語化できるようになると、自分のデザインにも応用できます。
最後に一つだけ。
色を足す前に、色を減らすことを考えてください。今使っている色のうち、本当に必要なものはいくつですか。削れる色が必ずあるはずです。
引き算は怖くありません。残った色たちが、より強く輝きます。
第4章 「なんとなく真ん中に置いた」は、グリッドじゃなくて直感です。
―グリッドと整列の話
要素を置くとき、どうやって位置を決めていますか。
「なんとなくバランスよく見えるから」「真ん中に置いたら安定しそうだから」「なんかここが気持ちいいから」。
それは感覚であって、設計ではありません。感覚が優れたデザイナーなら、それでも美しいものができることがあります。でも再現性がありません。次も同じようにできる保証がない。修正を求められたとき、なぜそこに置いたか説明できない。
グリッドとは、その「説明できる理由」を事前につくっておくものです。
グリッドは見えません。完成したデザインには、グリッドの線は映りません。でも、グリッドがあるデザインと、ないデザインは、見た瞬間に違いがわかります。
グリッドがあると、情報が整然と並び、視線が自然に流れます。どこを見ればいいかが直感的にわかります。読む気になります。グリッドがないと、要素があちこちにあり、視線が迷います。なんとなく信頼できない印象を与えます。
これは感覚の問題ではなく、人間の認知の仕組みの話です。人は「秩序」を安心と結びつけます。
グリッドの基本を押さえましょう。
最もシンプルなのは、マージン（余白）を統一することです。画面の端から要素までの距離を、全方向で揃える。これだけで、グリッドの第一歩です。やってみると、意外と揃っていないことに気づきます。
次に、カラム（縦の列）を設定します。12カラムグリッドが有名ですが、最初は4カラムや8カラムでも十分です。すべての要素の幅と位置をこのカラムに合わせると、自然と整列が生まれます。
ベースライングリッドという考え方もあります。テキストの行が等間隔に並ぶよう、縦の基準線を設けるものです。特に文字量が多いデザインでは、これがあると読みやすさが格段に上がります。
整列について、もう少し踏み込みます。
整列には4種類あります。左揃え、右揃え、中央揃え、両端揃え。それぞれに適した場面があります。
左揃えは、最も読みやすい整列です。横書きの文章はほとんどこれでいい。視線の起点が揃うから、リズムよく読めます。中央揃えは、見出しや短いキャッチコピーに使います。量が多いと読みにくくなります。右揃えは、数字の列や特定のUIパーツに使います。意図なく使うと「なんか変」になります。
「整列がバラバラ」なデザインは、意識していなくても目に入ります。受け取り手は「なんかちぐはぐ」と感じます。でも理由は言語化できません。整列はそういう、気づかれにくいけど確実に影響する要素です。
グリッドを使うことへの抵抗感について。
「グリッドに縛られると、自由なデザインができない」と感じる人がいます。でも、制約は創造の敵ではありません。むしろ逆です。グリッドという「枠」があるから、その中でどう表現するかに集中できます。ルールを知っているから、意図的にルールを破れます。
グリッドを無視したデザインと、グリッドをあえて崩したデザインは、まったく違います。前者は単なる混乱で、後者は意図的な緊張感です。崩すためには、まず守れないといけません。
最後に、確認してほしいことがあります。
今作っているデザインの中で、要素の端が揃っていない箇所はありますか。マージンが場所によって違う箇所はありますか。テキストの整列が混在していませんか。
これらを揃えるだけで、デザインは一段上がります。新しい要素を追加する前に、まず今あるものを揃えてください。
グリッドは、センスではなく、習慣です。
第５章 「おしゃれ」と言われても、使えなければ失敗作です。
―見た目と機能の話
見た目がきれいで、でも使えないデザインがあります。
ボタンがどこにあるかわからない。次に何をすればいいかわからない。文字が読めない。情報の優先順位がわからない。見た目はきれいなのに、使っていると疲れる。
これは「おしゃれなデザイン」ではなく、「おしゃれに見えるデザイン」です。
デザインは問題を解決するためにあります。伝えたいことを伝える。やってほしいことをしてもらう。使う人が迷わないようにする。この目的を忘れて、見た目だけを追いかけると、機能しないデザインが生まれます。
「見た目がいい」と「機能する」は矛盾しません。両立できます。でも、両立させるためには、機能の設計が先にあって、見た目の設計がそれに従う必要があります。順番が逆になると、たいてい失敗します。
UIデザインの例で考えてみましょう。
ボタンのデザインをするとき、何を考えますか。色、形、文字。でも本当に考えるべきことは「このボタンを見た人が、迷わず押せるか」です。
押せるものに見えるか。押したいと思えるか。押した後どうなるかが予測できるか。これらがクリアされて初めて、色や形の話ができます。
「でも、ボタンを四角にするのはデザインじゃない」と思いましたか。違います。四角のボタンが押しやすいなら、それが最善のデザインです。デザインとは、形の新しさを競うものではありません。
タイポグラフィも同じです。
読みにくいフォントを使って「おしゃれ」と言っても、読んでもらえなければ意味がありません。アート作品なら別ですが、コミュニケーションのためのデザインである限り、まず読めることが前提です。
フォントサイズが小さすぎる。コントラストが低くて背景に溶け込んでいる。行間が詰まっていて読む気がなくなる。これらは見た目の問題ではなく、機能の問題です。
情報設計の話もしなければなりません。
何を一番伝えたいか。その次は何か。これを整理せずにデザインを始めると、情報が並列に並んでしまいます。見た目はそれっぽくても、見た人は何も覚えていません。
重要なことが目立ち、次に大切なことがその次に目立ち、補足情報は控えめにある。この序列が設計されていることを、情報設計と言います。これは、きれいにするよりも先に考えることです。
「機能するデザイン」を追求すると、シンプルになることが多いです。
なぜなら、必要のない要素が削られていくからです。伝えることだけが残ります。そのシンプルさは、貧しいのではなく、精度が高いのです。
最もシンプルで最も機能するデザインは、最も難しいデザインです。何かを足すより、何かを引く方が、ずっと難しい。でも、それができたとき、見た目も機能も両立した本当の意味での「いいデザイン」になります。
ユーザーに「きれいだ」と言ってもらうことと、「使いやすい」と言ってもらうことは、どちらが正解ですか。
どちらも正解です。でも、どちらかしか選べないなら、迷わず「使いやすい」を選んでください。見た目は慣れます。でも使いにくさは、毎回ストレスを与え続けます。
機能することが、最初の義務です。そこから先が、デザイナーの腕の見せ所です。
第６章 「可愛いから選んだ」ロゴは、ブランドの声ではなく、あなたの好みです。
―ロゴとアイコンの話
ロゴは、飾りではありません。
これを、まず理解してほしいのです。ロゴはブランドの声です。そのブランドが何者で、何を大切にしていて、誰に向けたものなのかを、形と色で表現したものです。
「かわいいから」「さりげなくておしゃれだから」「流行りのデザインだから」でロゴを選んでいる人は、ブランドの声を雰囲気で決めているのと同じです。
アイコンも同様です。UIの中のアイコンは、言語を超えたナビゲーションの道具です。「家のマーク」を見たらトップページへ。「虫眼鏡」を見たら検索へ。「ハンバーガーメニュー」を見たらメニューへ。これらは訓練されたコミュニケーションです。
「かわいいアイコンに変えたい」という要望を受けたとき、考えるべきことがあります。そのアイコンを見た人が、一瞬で何のボタンかわかるか。わからなければ、どんなにかわいくても失敗です。
ロゴのデザインプロセスについて話しましょう。
ロゴを作るとき、多くの人がいきなりIllustratorを開きます。でもその前に、言語化の作業が必要です。「このブランドの一言コンセプトは何か」「ターゲットはどんな人か」「競合と比べてどう見せたいか」「どんな感情を持ってほしいか」。
これらへの答えが、ロゴの形と色を決めます。
丸みがあるか、角張っているか。明るい色か、落ち着いた色か。シンプルか、複雑か。細かいか、大胆か。これらはすべて、ブランドの性格を反映させるべき選択です。
「丸っこい方がかわいい」は理由になりません。「このブランドは親しみやすさと包容力を伝えたいから、角を丸くした」が理由です。
可読性という話をしなければなりません。
ロゴは、様々なサイズで使われます。大きなサイン、名刺、ウェブサイト、スマホの小さなアイコン。どのサイズでも認識できることが、ロゴとしての最低条件です。
複雑すぎるロゴは、小さくなったとき何が何かわからなくなります。繊細すぎる線は、縮小したとき消えます。グラデーションが多用されたロゴは、1色印刷や白黒コピーのときに機能しません。
「かっこいいロゴ」と「使えるロゴ」は違います。本当にいいロゴは、どんな使い方でも機能します。
アイコンの話をもう少し続けます。
UIの中でアイコンを使うとき、一貫性を保つことが重要です。線の太さ、角の処理、サイズ感。これらが揃っていないと、画面全体がちぐはぐに見えます。
「このアイコンはここから持ってきて、このアイコンはあのサイトから」という作り方をすると、スタイルが混在します。アイコンセットを統一するか、自分でルールを決めて作るか。どちらにしても、一貫性がないと「まとまりがない」という印象を与えます。
ロゴとアイコンに共通して言えることがあります。
それは「小さくても機能する」ものが、本当に優れたデザインだということです。大きな画面で見ればどんなデザインも映えます。でも、名刺サイズに縮小したとき、ファビコンになったとき、それでも機能するかどうかが試されます。
ロゴを作るとき、まず最小サイズで確認してください。16×16ピクセルでも認識できますか。1色でも意味が伝わりますか。白黒でも成立しますか。
これらをクリアした上で、きれいにする。その順番を間違えないでください。
ブランドの声は、あなたの好みではなく、届けたい相手への言葉で決まります。
第７章 「今これが流行ってるから」だけで使うなら、それはあなたのデザインじゃなくて、誰かのデザインの転載です。
―トレンドと自分の言語の話
トレンドを参考にすることと、トレンドをコピーすることは、まったく違います。
毎年、デザインのトレンドが更新されます。グラスモーフィズム、ニューモーフィズム、ブルータリズム、Y2Kデザイン。それらが流行り、Pinterestに溢れ、みんなが真似します。
でも、1年後には「あのころ流行ってたやつ」になっています。
トレンドには寿命があります。流行りに乗ることは悪くありませんが、流行りだけを追いかけると、常に周回遅れになります。なぜなら、トレンドを作っている人たちはすでに次を見ているからです。
トレンドを本当に活用できるデザイナーは、表面をコピーしません。なぜそのデザインが生まれたのか、どんな時代の空気を反映しているのかを読んで、自分のデザインに落とし込みます。
背景を理解するということです。
例えば、フラットデザインが流行った背景には、スマートフォンの普及と、写実的なグラフィックが重すぎるという課題がありました。シンプルにすることで、小さな画面でも見やすく、読み込みも速くなる。機能的な理由がありました。
ミニマリズムが継続して評価される背景には、情報過多の時代に、ノイズを減らして本質を伝えたいという欲求があります。
そういう「なぜ」を理解すると、トレンドは参考書になります。ただ真似るだけの人にとっては、単なる見た目の流行です。
自分の言語を持つということ。
デザインを続けていくと、「自分のスタイル」が生まれます。これは意図して作るものではなく、試行錯誤の積み重ねの中で自然に育つものです。
でも、トレンドを追いかけてばかりいると、このスタイルが育ちません。なぜなら、常に誰かのスタイルを借りているからです。
自分の言語を持つためには、好きなものを深掘りすることが必要です。「なぜこれが好きか」「何がいいと感じているのか」を言語化する。そこに、あなたの美意識が宿っています。
インプットの質を上げることも重要です。
デザインのインプットとして、同じジャンルのデザインばかり見ていませんか。UIデザインを学ぶためにUIデザインのギャラリーだけ見ていると、その中での「普通」は身につきますが、突き抜けたものは生まれません。
絵画、建築、写真、音楽、映画、ファッション。デザインとは関係ないと思われる分野から、美意識は鍛えられます。なぜこの構図が美しいのか。なぜこの空間が心地よいのか。なぜこの音楽が感情を動かすのか。これらを考える習慣が、デザインの感覚を育てます。
パクりとオマージュの違いも知っておいてください。
オマージュとは、先人の仕事への敬意であり、そこから学んで自分のものにする行為です。パクりとは、理解せずに表面だけを取ってくる行為です。
違いは、理解があるかどうかです。なぜその色なのか、なぜその形なのか、なぜそのレイアウトなのか。それを説明できるなら、参考にすることは学習です。説明できないなら、それはただのコピーです。
最後に、問いかけたいことがあります。
あなたのデザインを見て、「これは誰が作ったか」がわかりますか。
どこかで見たことがある感じがしないですか。流行りに乗っているが、それだけの感じがしないですか。
自分の言語を持つことは、時間がかかります。でも、それが育ったとき、あなたのデザインは「トレンドを使っているのに、あなたにしか作れない」ものになります。
トレンドは道具です。あなたのメッセージを伝えるための。トレンドがメッセージになっていたら、逆です。
あなたは何を伝えたいですか。その答えがあるとき、初めてトレンドを正しく使えます。
