―“探す時間”を短縮して“作る時間”を最大化するロードマップ―
対象読者
デザインを学び始めたばかりで、良いお手本をどう探せばいいかわからない人
得られるもの
- 目的別に厳選した20サイトの早見表
- 迷わず比較できるブックマーク & タグ付けフロー
- 「見る→気づく→真似る」の黄金ループを続けるコツ
目次
インスピレーション収集に失敗する３つの罠
スクロールできます
| 罠 | よくある症状 | 解決キーワード |
|---|---|---|
| ①“ただ眺めて満足”症候群 | フォルダがスクショで埋まり、活用せず時間だけ経過 | タグ分け＋比較 |
| ②Pinterest迷子 | Related Pinを追い過ぎて初めのテーマを忘れる | 検索ブール (AND/OR/-) |
| ③海外トレンド翻訳ロス | 英語UIが読めず機能を触らない | Chrome自動翻訳＋ジャンル別和訳リスト |
カテゴリ別・神サイト20選
総合ギャラリー（毎日巡回）
Behance
- Adobe公式の巨大ポートフォリオ
- クリエイターの作業配信が視聴でき、プロセスを学べる。
- 「Moodboard」ボタンで複数作品を1枚ボード化→PinterestへPinすると整理が早い。
Dribbble
- 1枚画像＋短文でサクッと閲覧
Animation / Case Study / GIFなど形式で絞れる。- 気に入ったShotを「Bucket」に保存→週末まとめて模写素材に。
Awwwards
- 世界の優良Webを表彰
- 受賞サイトで使われているフレームワークや JS ライブラリを自動表示。
Filter > Tag > Colorful等で配色トレンドだけ収集。
UI／UX特化
Mobbin
- モバイルアプリ画面を大量収録
- ログインや購入などユーザーフロー単位で全画面をスライド表示。
Save to Setで自分用リスト作成→FigmaにフローをEmbedし参考線と重ねる。
Collect UI
- Web+App双方、日替わり更新
- テーマ別UIお題が投稿される。
- “Email Signup” で空白ページを探し、フォームUIだけを比較 → 実務で即役立つ。
UI Sources
- サブスクUIを分解表示
- 実アプリの操作画面が自動スクロール動画で見られる。
- Pauseしてスクショ→パス名を「appName_stepX」で保存すると後で探しやすい。
配色 & タイポ
Color Hunt
- 4色パレットを毎日追加
- LikeしたパレットだけJSONでDL→FigmaのImport Stylesで瞬間登録。
Coolors
- 画像アップで主要5色を抽出＆自動WCAG診断。
Spaceで連打 → “Lock”機能で良い色を固定し3色だけランダム追加入れ。- スペースキーで無限カラーパレット生成
Google Fonts Showcase
- 見出し×本文の組み合わせが即見える
- 気に入ったペアは CSS コードをコピーして Figma／STUDIO に貼るだけ。
- Google Fonts限定で「Serif＋Sans」「Sans＋Sans」など 500 以上のペアを掲載。
イラスト & 3D
Shigureni Free Illust
- ゆるい線と優しいパステル調カラーが中心で、ブログやSNSサムネに合わせやすいテイスト。
- 〈⽇常／ビジネス／季節イベント／ペット〉などシーン別カテゴリで随時追加中。
- 1クリックDLなので「資料のワンポイント」「ノートアプリ用ステッカー」と相性抜群。
Skribbl
- 手描きとフラットをワンクリックで切替。
- 人物ポーズ別フィルタ→プロジェクトのペルソナヒーローに流用。
- 手描きスケッチタッチの人物
Spline Showcase
- 3Dインタラクション事例集
- 埋め込みウィジェットのマテリアル値を閲覧者が触れる。
- 気に入ったモデル→「Duplicate in Spline」で自分のワークスペースにコピー→カメラアングルだけ変えオリジナル化。
ロゴ & ブランド
Logo Lounge
- 毎年のロゴトレンドPDFをDL可。
- レポートで気になった形状タグを自ブランドMoodboardに貼り、方向性確認。
- 世界のロゴ年鑑
Brand New (UnderConsideration)
- ロゴ刷新のビフォー／アフター比較レビュー
- ロゴ刷新の比較スライダー。
- コメント欄で海外デザイナーの辛口レビュー→翻訳→学びに。
logostock
- 「良質なロゴデザインをストックする」インスピレーション専門ギャラリー
- 日本市場向けのトレンドが分かる
- 解説コメントから配色・形状の理由付けを学べる
アニメーション＆マイクロインタラクション
LottieFiles Inspiration
- ブラウザ上で色・速度変更→即テスト。
Search "Loading"→ アプリのローディングGIFをJSON化し軽量化。- JSONアニメ一覧
CodePen “UI Animation”
- CSS/JSスニペット
- 右側パネルでリアルタイム編集。
- 自分のブランドカラーだけ差し替え→EmbedでLPに貼り付け即適用。
Rive Showcase
- マウスイベントでアニメ分岐。
- “Copy Flutter Code” で開発に手渡し→ノーコード＋コード連携がスムーズ。
- リアルタイム編集可能な交互アニメ
効率的に見る3ステップフロー
ステップ1 ブックマーク → タグで整理
| 操作 | おすすめ拡張機能 |
|---|---|
| Chromeで保存 | Raindrop.io（階層フォルダ＋タグ） |
| 速度重視 | Tabliss + OneTab（一括保存→開放） |
ステップ2 お気に入りは「3秒レビュー」
- 構成
- カラー
- タイポ ※直感で○×つける
→ 90点以上だけ Pinterestボード にコメント付きPin
ステップ3 週１「模写×改善メモ」
- Figmaでフレームコピー→差し色・余白だけ改変
- Notionテンプレ「学びログ」で “気づき＆応用アイデア” を残す
時間短縮Tips 表
スクロールできます
| シーン | 時短ツール | 効果 |
|---|---|---|
| スクショ収集 | Shottr（Mac） | URL付きでPNG保存 |
| カラーピック | ColorZilla | 画面上どこでもHEX取得 |
| テキスト抽出 | Copyfish OCR | 画像内文字を即コピー |
| AI分類 | ChatGPT＋Spreadsheet | コピーしたALTテキストを一括タグ化 |
よくある質問 FAQ
まとめ＆明日のアクション
- ハニカムマップから気になるサイトを3つ開く
- Raindrop.io でフォルダ「UI」「配色」にタグ保存
- 明日、Pinterestに90点超をPinしコメントを書く
このサイクルだけで、“探す時間＜作る時間” が実現します。記事が役立ったら #デザイン参考サイト を付けてXでシェア、あなたの推しサイトも教えてください！
