目次
その「ピン留め」、ただのコレクションになっていませんか？
「デザインの引き出しを増やすために、毎日Pinterestを見てインプットしています！」
後輩デザイナーや初心者の方から、よくこんな元気な報告を受けます。素晴らしい習慣です。日常的に優れたビジュアルに触れることは、クリエイターにとって呼吸をするのと同じくらい重要ですから。
でも、私はいつも意地悪な質問をします。
「で、昨日保存したデザインの『見出しのフォントサイズ』と『ボタンのカラーコード』、言える？」
すると、大半の人は言葉に詰まります。 厳しいようですが、ただ画面をスクロールして「これオシャレだな」「この配色好きだな」とピン留め（保存）するだけの行為は、インプットではありません。ただの「ウィンドウショッピング」です。
ウィンドウショッピングを100時間しても、服を仕立てる技術は身につきませんよね。 いざ真っ白なキャンバス（アートボード）を前にした時、「あれ？ どうやって作るんだっけ？」とフリーズしてしまうのは、デザインの「表面」しか舐めていないからです。
今日は、万年初心者から抜け出すための、ちょっと泥臭いプロのインプット術
私はこれを「デザインの解剖」と呼んでいます。
これを読めば、明日からのあなたの「見え方」が劇的に変わるはずです。
Pinterestの罠：「良いデザインの教科書」だと思い込んでいないか？
具体的なやり方の前に、絶対にお伝えしておかなければならない「大前提」があります。 それは、Pinterestは「絶対的に正しいデザインのお手本集」ではない、ということです。
Pinterest（ピンタレスト）は、世界中のあらゆる画像がアルゴリズムによってレコメンドされる、強力なビジュアル探索ツールです。 私もアイデア出しの初期段階では重宝しています。
しかし、その構造上、重大な罠が潜んでいます。 そこには世界的なクリエイティブエージェンシーが作った数千万円規模の神デザインもあれば、デザイン勉強中の学生が昨日作ったばかりの「なんとなくそれっぽいだけの習作」も同列に並んでしまっているのです。
Pinterestのアルゴリズムは、「あなたがクリックしそうなもの」「視覚的に派手で目を引くもの」を優先して表示します。つまり、「デザインとしての論理的整合性」や「ユーザビリティ（使いやすさ）」は評価軸に入っていません。
「Pinterestでバズっていたから」という理由で、視認性の悪い極細フォントや、コントラストが崩壊した配色、タップ不可能なほど小さなボタンを真似してしまう初心者が後を絶ちません。これは、誤った教科書で勉強しているようなものです。
本当に「プロの品質」を基準としてインプットしたいなら、厳しい審査を通過したWebデザインだけが掲載されているギャラリーサイトを併用するべきです。 例えば、国内の実践的なデザインならSANKOU!
、海外の最先端・実験的な表現ならAwwwardsなどですね。
これらを「教科書（正解）」とし、Pinterestは「アイデアのブレスト用（素材）」と割り切るのが、正しい付き合い方です。
「見る」のではなく「解剖」しろ。プロの執念深いトレース術
では、ギャラリーサイトなどで本当に良いデザインを見つけたらどうするか。ただ眺めるのではなく、アートボードという「手術台」に載せて解剖してください。
「なんかイイ感じ」というあなたのフワッとした感情を、すべて「数値」に変換するのです。
1. メスを入れ、数値を丸裸にする
例えば、FigmaやIllustratorに参考画像をを貼り付けます。そして、その上から四角形（矩形）を被せたり、ガイドラインを引いたりして、以下の数値を徹底的に測ってみましょう。
- 余白（マージンとパディング）：
- 見出しと本文の間は何px空いているか？
- セクション同士の間隔は？
- 画面端からの距離（セーフエリア）はどれくらい確保されているか？
- タイポグラフィ（文字）：
- 見出しのサイズは何pxか？ 本文は何pxか？
- 行間（line-height）は文字サイズの何倍（何%）に設定されているか？
- ジャンプ率（見出しと本文のサイズの比率）はどれくらいか？
- 配色（カラーパレット）：
- スポイトツールで色を吸い出し、カラーコード（HEX値）を抽出する。
- ベースカラー、メインカラー、アクセントカラーの比率を調べる。
初心者が作るデザインが素人っぽく見える原因の9割は、「余白のルールがバラバラ」と「純色（#FF0000や#000000など）をそのまま使っている」ことです。
プロのデザインを解剖すると、「あ、ここは8の倍数で余白が完璧に統一されているな」「この黒文字、実は真っ黒じゃなくて少し青みがかった濃いグレー（#1a1a2eなど）を使っているな」といった「計算された魔法のタネ」がゴロゴロ出てきます。
※色の構造を深く知りたい時は、吸い出した色をAdobe Colorなどのツールに入れて、それが類似色なのか、補色なのか、トライアド配色なのかを確認するのも非常におすすめです。
数値化だけでは片手落ち。「誰に」「何を」を言語化せよ
さて、ここからが今日一番伝えたい「核心」です。ここを理解していないと、ただの「パクリ屋」になってしまいます。
よし、プロの余白は80pxで、フォントサイズは32px、カラーコードは#FF7F50（コーラル）だ！と数値化できたとします。 しかし、それをそのまま自分のデザインにコピペしても、絶対に上手くいきません。
なぜなら、デザインにおけるフォントや色は、「誰に（Target）」「何を（Purpose）」伝えるかによって、正解が180度変わるからです。
デザインは「目的」を達成するための手段
あなたが解剖したそのデザイン。それは一体、どんな背景から生まれたのでしょうか？
- なぜそのフォントなのか？：
- 20代女性向けのオーガニックコスメのLPだから、細身の明朝体でエレガントさと繊細さを出している？
- それとも、BtoB向けのSaaSツールだから、信頼感と可読性を重視した太めのゴシック体を使っている？
- なぜその配色なのか？：
- 「クリックさせる（購入させる）」ためのCTAボタンだから、あえて背景の補色を使って強烈に目立たせている？
- なぜその余白なのか？：
- 高級感を演出したいから、あえて要素を減らしてたっぷりと余白（ホワイトスペース）を取っている？
- ドンキホーテのような「安さ・お得感」を出したいから、余白を詰めて情報を敷き詰めている？
これを考えずに、ただ「Pinterestでオシャレだったから」という理由で、堅い弁護士事務所のバナーに、若者向けのポップな配色と極太フォントを使ってしまったら……それは「デザイン」ではなく「事故」です。
「なぜ、このデザイナーは、この数値を、この色を選んだのだろう？」
この「Why（なぜ）」に徹底的に思いを巡らせ、言語化すること。 デザインの表面的な装飾だけでなく、その奥にある「意図」を汲み取って初めて、あなたは他人のデザインを「自分の引き出し」として自由に使えるようになります。
明日からあなたの見え方が変わる「解剖トレース」の3ステップ
まとめましょう。 今日からPinterestやギャラリーサイトを見る時は、ただスクロールする手を止め、以下の「解剖トレース」を試してみてください。
- ステップ1：手術台に乗せる
- 気になるデザインをスクリーンショットして、FigmaやIllustratorなどのデザインツールに貼り付けます。
- ステップ2：ピクセルを測り、ルールを抽出する
- 要素の上から図形をなぞり、余白のpx、フォントサイズ、カラーコードを「数値」で書き出します。隠されたグリッドシステムや、法則性を見つけ出してください。
- ステップ3：カルテを書く（言語化する）
- そのデザインの横に、テキストで分析結果を書き込みます。 「ターゲットは誰か？」「達成したい目的は何か？」「なぜこの配色・レイアウトにしたと推測できるか？」 この言語化プロセスが、あなたの論理的思考力を鍛え上げます。
最初は途方もなく時間がかかります。1枚のデザインを解剖するのに1時間、いや2時間かかるかもしれません。 でも、無限スクロールで1000枚の画像を無意識に「消費」するより、1枚の画像を骨の髄までしゃぶり尽くす「解剖」の方が、あなたの実力を100倍引き上げてくれます。
世間で言われる「センス」とは、生まれつきの魔法ではありません。 こういった泥臭い「観察と分析の蓄積」、そして「言語化の反復」が、ある日突然、他人の目には「センス」という名前に変わって映るだけなのです。
さあ、ピン留めコレクターを卒業して、今日からデザインに「メス」を入れてみませんか？ あなたのデザインが劇的に変わる瞬間は、もうすぐそこまで来ています。
アートとデザイン論の一覧はこちら