AIでWebをデザインするとき、どこで実例を探す？ MotionSites創業者が挙げた8サイト
日本語参考訳
AIでデザインする人に向けた8つの候補。①MotionSites StudioはLovableより安いと投稿者は紹介。②MotionSitesには3Dサイトや動きのあるセクションなど800件を超えるデザインのプロンプトがあり、Claudeに貼り付けて制作できる。③Land-bookはランディングページの参考に。④Recent DesignはWebデザインのギャラリー。⑤Landddingは優れたランディングページの例。⑥Font In Logoはブランドが使う書体。⑦Godlyは受賞サイトのような作例探しに。⑧60fps.designはモバイルUIのアニメーション。次のプロジェクト用に保存しておこう。
AINNでは投稿本文・投稿者本人の追記・第三者コメントの全文転載を避け、X公式埋め込みと元投稿への導線を中心に表示します。
AIによる見どころ整理
何について
Viktor Oddy氏のリストは、作るためのツールと、デザインの判断材料を探すサイトに分けて読める。最初の2件は同氏が運営するMotionSites StudioとMotionSites。後者は、Claudeなどに渡せるプロンプトと作例を提供する。創業者が案内する「800件以上」は、3Dサイトや動きのあるセクションを含むデザインの数だ。
なぜ注目
StudioはLovableより安いというのは運営者自身の評価だ。投稿には比較したプランや同じページを作るのに使った金額は示されていない。Lovableは作業内容によって消費クレジットが変わるため、このリストから価格の優劣までは判断できない。
🔰 初学者向け要約
ランディングページの構成を見比べるならLand-bookとLanddding、Web全体の作例を広く見るならRecent DesignとGodlyを挙げている。ブランドのロゴで使われる書体を調べたいときはFont In Logo、スマートフォン上の画面遷移や動きを見たいときは60fps.designと、探したい要素に応じて使い分けられる。
用語を調べる
公開記事とWeb上の出典をもとに、Geminiが短く説明します。1日5回まで利用できます。