AIでWebを作る前に集めたいデザイン資料 Viktor氏が用途別に7つの参照先を紹介
日本語参考訳
ブックマークしておく価値のある、無料のAIデザイン資料7選。 1. https://motionsites.ai/ — 800以上の無料の高品質なWebサイト用プロンプト。1,000以上の背景やモーション付きセクション。Claudeに貼り付けて、制作物を公開しよう。 2. https://land-book.com/ — ランディングページの着想を得るのにぴったり。 3. https://recent.design/ — Webデザインの着想に役立つ、魅力的なギャラリー。 4. https://landdding.com/ — 質の高いランディングページ。 5. https://fontinlogo.com/ — ブランドで使われているフォント。 6. https://godly.website/ — 受賞したWebサイト。 7. https://60fps.design/ — モバイルUIのアニメーション。 次のプロジェクトのために保存しておこう。
AINNでは投稿本文・投稿者本人の追記・第三者コメントの全文転載を避け、X公式埋め込みと元投稿への導線を中心に表示します。
AIによる見どころ整理
何について
Viktor Oddy氏が、AIを使ったWeb制作の参考になる7つのサイトを紹介した。MotionSitesはClaudeに渡す制作指示や背景、Land-book・Recent・Landdding・GodlyはWebデザインの作例、Fontinlogoはブランドの書体、60fpsはモバイル画面の動きを探す用途に分かれる。投稿では無料と紹介しているが、リンク先には有料機能や別料金のライブラリもあり、すべての素材を無制限に使えるという意味ではない。制作指示を考える資料と、画面・文字・動きの参考例を分けて探せる点が実用的だ。
なぜ注目
個別の制作デモとは異なり、Web画面・書体・モバイルの動きまで参照先を用途別に整理している。紹介者の無料という表現と各サイトの有料機能を区別すれば、AI制作の準備に使う資料集として役立つ。
🔰 初学者向け要約
AIに「おしゃれなサイトを作って」と頼む前に、好みの画面や文字、動きの例を集めるための一覧です。指示文を探す場所と、デザインを眺める場所では使い方が違います。公開されている作例を参考にできても、素材の再利用や追加機能がすべて無料とは限らないので、利用時は各サイトの条件を確認します。
用語を調べる
公開記事とWeb上の出典をもとに、Geminiが短く説明します。1日5回まで利用できます。