Webデザイン参考の「集め方」。U-MA流「自分だけの最強スワイプファイル」の作り方

「Webデザイン 参考」、集めっぱなしになっていませんか？

「Webデザイン 参考」サイトをブックマークして、フォルダが「おしゃれなサイト」でパンパン。
…しかし、いざデザインを始めようとすると、「どれを参考にすればいいか分からない」「あのデザイン、どこだっけ？」と、結局使えない。

これは、「Webデザイン 参考」を集める目的が「インスピレーション（感覚）」になってしまっているからです。
参考サイトは「集める」のではなく、「分類（ファイリング）」して初めて「武器（スワイプファイル）」になります。

「Webデザイン 参考」を「武器」に変える分類法

「Webデザイン 参考」を集める際は、「なぜ、これが良いと思ったか？」という「理由」で分類します。
U-MAのデザイナーが実践する「スワイプファイル（参考集）」の分類例です。

• フォルダ1：UI（パーツ）
  • 「ヘッダー（グローバルナビ）」の優れた事例
  • 「ボタン（押したくなる）」の優れた事例
  • 「フォーム（入力しやすい）」の優れた事例
• フォルダ2：レイアウト・構造
  • 「グリッドが美しい」事例
  • 「スマホ（レスポンシブ）で秀逸な」事例
  • 「情報量が多いのに、見やすい」事例
• フォルダ3：世界観・コピー
  • 「写真（ビジュアル）が刺さる」事例
  • 「コピー（言葉）が響く」事例
  • 「色使いが絶妙（ブランディング）」な事例

このように、「なぜ」で分類しておけば、「ボタンのデザインに迷った」→「フォルダ1」を見る、「コピーが書けない」→「フォルダ3」を見る、と、すぐに「答え」を引き出せる「武器」になります。

U-MA（ウーマ）は「戦略」で分類する

私たちウーマ（U-MA）のデザイナーは、もう一歩踏み込んで、「戦略」で分類します。
「Webデザイン 参考」サイトを見つけたら、「このサイトの『戦略（目的）』は何か？」を仮説立てします。

• 「このサイトは、『採用』が目的なのに、あえて『社員の笑顔』を使わず、『厳しい表情』を使っている。なぜだ？ → 『プロ意識』というブランディングか」
• 「このサイトは、『購入』が目的なのに、あえて『価格』を小さく見せている。なぜだ？ → 『高級感』というブランディングか」

U-MAは、「Webデザイン 参考」サイトを「デザイン（見た目）」ではなく、「戦略（思考）」を学ぶための「教材」として分析しています。

「Webデザイン 参考」サイトを「武器」や「教材」に変えたい。
そんな「戦略的思考」を学びたいデザイナーは、ぜひU-MA（渋谷）の門を叩いてみてください。