← ガイド記事一覧

「かっこいいサイトを作りたい。でも、どこを見て、何を参考にすればいいのか分からない」

Webデザインを始めたばかりの人が最初にぶつかる壁が、これです。参考サイトを検索すると何千件も出てきて、逆に手が止まってしまう——そんな経験はありませんか？

このガイドでは、数あるリファレンスサイトの中から本当に使えるものだけを目的別に厳選しました。さらに、集めたデザインを AIツールでそのまま実装するところまで、初心者が迷わない3ステップで案内します。

なぜ「参考サイト」を見るのか

いきなりゼロから考えると、どうしても手が止まります。プロのデザイナーでも、まず優れた事例を大量に眺めて「方向性の引き出し」を増やしてから作り始めます。

参考サイト探しには、大きく3つの目的があります。

  1. お手本を探す — 全体の雰囲気やレイアウトの当たりをつける
  2. 動きを探す — ページ最上部（ヒーローセクション）のアニメーションを決める
  3. 実装方法を探す — 見つけたデザインをAIで形にするプロンプトを手に入れる

この順番で進めるのが、一番迷いません。順に見ていきましょう。

ステップ1：お手本を探す（デザインギャラリー）

まずは全体像。「こういう雰囲気にしたい」を固めるフェーズです。最初はこの中から2〜3サイトを眺めるだけで十分です。

日本のサイトを見るなら

  • SANKOU! — 日本の定番。業種・テイスト別に整理されていて、実務でそのまま参考にしやすい
  • MUUUUU.ORG — コーポレートサイトだけで3,000件以上。縦長スクロール型のお手本が豊富
  • S5-Style — 「デザイナーが本気で評価した作品」が集まる、厳選度の高いギャラリー

海外のハイレベルな事例を見るなら

  • Awwwards — 世界最高峰のWebデザインアワード。受賞事例は刺激が段違い
  • Land-book — 毎日更新。SaaSやランディングページに強く、色・スタイルで絞り込める
  • Godly（現Recent.design） — 大胆で実験的なデザインを厳選

初心者のコツ：最初から海外の超ハイレベル事例だけを見ると「自分には無理」と感じがち。まず日本のコーポレート事例で現実的な感覚をつかみ、海外は"憧れの引き出し"として少しずつ吸収するのがおすすめです。

ステップ2：動き（ヒーローセクション）を決める

ヒーローセクションとは、ページを開いて最初に目に入る一番上のエリアのこと。ここの第一印象がサイト全体の印象を決めます。「どんな動きにするか」をこのフェーズで決めます。

  • Saaspo — ヒーローセクションだけを135事例集めた専門ギャラリー。セクション単位で比較できるのが便利
  • Unsection — ヒーロー特化。動きのバリエーションを一気に確認できる
  • Awwwards ヒーローアニメ集 — 先端のアニメーション事例だけをまとめた特集

「どんな動きにしたいか」を言葉にできると、次のAI実装がぐっと楽になります。動きは大きく4タイプに分けて考えると整理しやすいです（SliderRevolutionの分類が参考になります）。

  • スクロールで動く（スクロールに連動して要素が動く）
  • 背景が動く（背景に映像やアニメーション）
  • マウス操作で動く（ホバーやクリックで反応）
  • 文字が動く（タイポグラフィのアニメーション）

ステップ3：AIで実装する（プロンプト集）

ここがこのガイドの一番の推しです。お手本と動きが決まったら、あとは AIにプロンプト（指示文）を渡して形にするだけ。コードが書けなくても、良いプロンプトさえあればデザインを実装できる時代になりました。

  • Superdesign.dev のプロンプトライブラリ ★まずはここ — 数百のUI・デザインプロンプトが無料で公開。ダッシュボード／ランディングページ／コンポーネント／アニメーション別に整理されている
  • DesignPrompts.dev — 同じ内容を31種類のデザインスタイルで表現し、それぞれのプロンプトを配布
  • UIPrompt.site — グラスモーフィズムなど70種類以上のモダンなスタイルをプロンプト化
  • 日本語：2026年トレンド×AIプロンプト — ファーストビュー向けの具体的なプロンプト例が日本語で読める

コピー＆ペーストで使えるものが多いので、まずはSuperdesignから気に入ったプロンプトを1つ試してみてください。

まとめ：迷わないための3ステップ

やることはシンプルです。

  1. お手本を集める（SANKOU! や Awwwards で雰囲気を決める）
  2. 動きを決める（Saaspo でヒーローの動きを選ぶ）
  3. AIで実装する（Superdesign のプロンプトで形にする）

全部のサイトを見る必要はありません。各ステップで挙げた最初の1〜2個から始めれば十分です。

次の一歩

AIでの実装をもっと本格的にやってみたくなったら、Claude Code や Codex 向けの「デザイン」系スキルが役立ちます。プロンプトを毎回書かなくても、スキルを入れておけば同じ品質で作業できます。

👉 このサイトの「🎨 デザイン」カテゴリで、Webデザイン・UI制作に使えるスキルを見てみてください。