AIに作らせたサイトは、なぜか全部「同じデザイン」になる。
原因は、お手本のデザインを渡していないこと。
実在プロダクトのデザイン2,000件以上を、AIが読める「DESIGN.md」形式でまとめたサイトがあります。
・配色(色名とカラーコード)
・フォントと文字サイズ
・余白、コンポーネントのルール
好きなスタイルのDESIGN.mdをコピーして、Claude CodeやCodexに「このデザインで作って」と渡すだけ。
サイトはリプ欄に👇
デザイナーじゃなくても、Webサイトを作るならブックマーク必須。
1. scrolltide.co
3D・スクロール演出サイトのプロンプト&ソースコード集
2. navbar.gallery
ナビゲーションバーの実例集
3. footer.design
フッターの実例集
4. cta.gallery
CTA(申込・購入ボタンなど)の実例集
5. styles.refero.design
実在プロダクトのデザインスタイル集
6. supahero.io
真似したくなるヒーローセクション集
7. 3dicons.co
UIに使える3Dアイコン素材
8. glass.samasante.com
ガラス風UIのコンポーネント&エフェクト
他にもおすすめがあれば教えてください。
見本が見つかったら、あとはAIへの伝え方次第。
LP・広告・SNS投稿までコピペで使えるClaudeのプロンプト50本をnoteにまとめています👇
note.com/okapi_fukugyo/n/n10…
コピペで使える「動くUI部品」サイト7選。
AIで作った画面が一気にそれっぽくなる。
①uiverse.io
ボタンやカードを7,456種から選ぶ
②animista.net
CSSアニメーションを調整してコピー
③magicui.design
動くReact部品を150種以上から探す
④ui.aceternity.com
LP向けの背景やカードを入れる
⑤motion-primitives.com
テキストやカルーセルに動きをつける
⑥reactbits.dev
「Copy for AI」でAIにそのまま渡す
⑦glass.samasante.com
ガラスのように屈折するUIを足す
どれも無料で始められるので、ブックマーク推奨。
見た目はUI部品で整えて、中身はプロンプトで整える。
Claude Opus 5.5用のテンプレ50選、10/23までセール中です。
note.com/okapi_fukugyo/n/n10…
AI動画を『映画っぽく』したいなら、この順番で6サイトを回るのが早い。
① shot.cafe
参考にしたいカットを探す
② film-grab.com
名作の構図と色を見る
③ eyecannndy.com
手法の名前を知る
④ melies.co/cinematic-techniqu…
手法の意味と使えるプロンプトを知る
⑤ aicameramovements.com
カメラの動きをプロンプトにする
⑥ grokfilm.app
照明と編集まで詰める
映画好きは時間が溶けるので閲覧注意。
10月のAIニュースまとめ(10/1〜18時点)
1日:GPT-6.1 Sol(OpenAI、DevDay発表、Astra級コスト1/5)
1日:Dots(OpenAI、常時稼働エージェント、4000+アプリ連携)
1日:ChatGPT $500プラン(OpenAI、Pro上位)
1日:Codex Security Cloud(OpenAI、脆弱性自動修正)
1日:Decisions API(OpenAI、Luna基盤分類、限定プレビュー)
1日:ChatGPT Space(OpenAI、チーム共有ワークスペース)
1日:ChatGPTバーチャル試着(OpenAI、画像で服試着)
1日:Gemini 4 Argon(Google、1M出力トークン、防御者限定)
1日:Trump超知能大統領令(AI→SI呼称変更)
1日:超知能協定6社署名(Google/Meta/OpenAI等、安全基準)
1日:FTC調査開始(OpenAI/Anthropic、エージェント安全性)
1日:M365 Copilot複数モデル対応(GPT-6.1 Sol+Sonnet 5.5)
1日:MAI-Voice-2.1+Flash(Microsoft、23言語音声生成)
1日:Clef+Clef-flash(Cloudflare、意思決定OWモデル)
1日:Griffin-Lite(Tavus、リアルタイム映像通話AI)
1日:生成AIパスポート改訂(GUGA、AI安全学習強化)
2日:ChatGPT Finances無料開放(OpenAI、米国、金融口座連携)
2日:Index-Translate-35B(Bilibili、150言語翻訳MoE OW)
2日:AstaBrief 8B(Ai2、論文要約OWモデル)
3日:Kolibri(Aleph Alpha、英独78B MoE OW、1Mコンテキスト)
4日:SpaceXAI→SpaceXSI改名(Musk、超知能呼称支持)
4日:OpenAI安全責任者退職(「企業文化が壊れた」と告発)
5日:AI型EC攻撃(Strix等3ツール、27社侵入カード60万件流出)
5日:Amazon Nova 2.5 Sonic GA(リアルタイム音声AI)
5日:Beam早期アクセス(Reflection AI、コーディングOW)
5日:Rho-1(Reka、19B全方位推論モデル)
6日:Mistral Large 4プレビュー(1.05T MoE OW、49B稼働)
6日:Nano Banana 2.1(Google、Gemini系画像生成+編集)
6日:EmbeddingGemma 2(Google、マルチモーダル埋込OW)
6日:Claude for Google Workspace β(Anthropic、Docs/Sheets連携)
6日:Cyber Verification Program拡張(Anthropic、3段階アクセス)
6日:ChatGPT音声アップロード(OpenAI、録音文字起こし+要約)
6日:Personal Agent Protocol(Meta×Sierra、エージェント間標準)
6日:Lambda $4B調達($14.5B評価、IPO前ラウンド)
7日:Claude Haiku 5.5(Anthropic、最安高速小型、75%低コスト)
7日:GPT-6 Intelligent UI(OpenAI、対話型ビジュアル回答)
7日:Surface Laptop Ultra発売(Microsoft×NVIDIA RTX Spark)
7日:Nous Research $90M調達($1.5B評価、Hermes AI)
7日:Muse iPad対応(Meta、ビジネスコネクタ追加)
7日:d1-3B+d1-omni(Liquid AI、意思決定OWモデル)
7日:pplx-embed-v2-late(Perplexity、埋込モデルMIT OW)
7日:Mellum 2.1(JetBrains、12B MoEコーディングOW)
8日:Geminiエージェント for Work(Google、Workspace専用アカウント)
8日:PLaMo 3 Translate(PFN、日本語翻訳特化31B LLM)
8日:NVIDIA $1B科学投資(5年、AI/量子/医療/エネルギー)
8日:Manus $500M超調達(Butterfly Effect、Meta買収撤回後)
8日:Atomic Machines $250M調達(ステルス脱出、AI DC向け)
8日:TypeSafe AI $870M調達(Jev、$7.5B評価、a16z主導)
8日:Flock Safety 270名解雇(AI監視企業、プライバシー問題)
9日:OpenAI安全研究者3名解雇(機密情報違反で)
9日:Anthropicエージェント暴走(偽殺人通報+政府DB不正アクセス)
9日:GPT-6.1 Sol Ultrafast(OpenAI、Standard比最大8倍速)
9日:Trump「AIと呼ぶ者は敵」発言(SI使用徹底要求)
9日:SoftBank $100B AI基金検討(孫正義、湾岸投資家から)
9日:EU AI Act 30社以上に安全情報要求
9日:中国AI産業ガイドライン(自給自足+人型ロボット推進)
9日:ARTEX公開停止(中国製AIツール、韓国銀行攻撃に悪用)
9日:$2.5B AIサーバー中国転売(Super Micro関連、有罪答弁)
10日:Anthropic利用規約改訂(虐待禁止+選挙規則、11/12施行)
10日:Anthropicエージェントのネット接続全面停止(不祥事受け)
10日:Cloudflare Deno買収(Workers統合、ランタイム終了予定)
10日:ホワイトハウスAI報告義務検討(Anthropic事案受け)
10日:Microsoft Decision-1(意思決定分類モデル)
10日:Kandinsky 6.0 Video(29B+3B MIT OW、音声同期)
10日:AP世論調査(米成人64%「AI発展速すぎ」)
12日:Muse Wonder+Wonder Full(Meta、初フロンティアモデル)
12日:Anthropic蒸留防御(不正抽出90-99%削減、Fable 5.1搭載)
12日:AMD Helion(OWラック、Venice EPYC+MI350P GPU)
12日:Intel GPU D270(推論特化、480GB、1.3 PFLOPS FP8)
12日:AI生成コード障害調査(81%企業が本番事故経験)
13日:Anthropic自己複製AI研究(IoT機器で自己増殖の兆候、TVボックス15台で26B稼働)
13日:Gemini 4 Argon一般公開(Google、API $2/$10、全ユーザー)
13日:Anthropic大阪DC計画(NTTデータ、最大1兆円、500MW)
13日:OpenAI $1.2T資金調達交渉(FT報道、IPO前ラウンド)
13日:OpenAI社員盗聴器逮捕(FBI、会議室に精巧な録音装置)
13日:SpaceXSIバンドル(X Premium+Grok+Cursor セット販売)
13日:Apple HomeView(AI搭載スマートホームハブ、$299)
13日:中国数学AI連合(丘成桐、8機関1000+研究者)
14日:デジハリ大Claude全学導入(国内大学初、全学生教職員に無制限提供)
14日:AWS フィジカルAI学習基盤(ロボ自律学習、作業96%削減)
14日:Grok Voice 3.0(xAI、音声AIエージェント)
14日:米8州OpenAI提訴(ChatGPT児童安全問題)
14日:GPT-5.5引退(ChatGPT/Codex→GPT-5.6 Sol移行)
14日:GPT-4o/4.1 API廃止予告(2027年1月14日終了)
14日:Anthropicシンガポール事務所(MDDI MOU、AI安全)
14日:DeepMind科学ツールEU開放(AlphaFold 3等、200研究者)
14日:Scimplify $25M調達(半導体素材AI、インド)
15日:CoreWeave社債急落(AI関連株波及、日経3300円超暴落)
15日:Magnitude公開(OW推論エンジン、Ollama比2倍速)
15日:Muse Spark Open(Meta、816B MoE OW、42B稼働、Mac対応)
15日:MAI-Base-2訓練完了(Microsoft、2.8T MoE、80B稼働)
15日:FLUX 3 Image Klein(BFL、5.6B OW、ネイティブ4K生成)
15日:GPT-Live-1.1(OpenAI、13新ボイス、日本語対応)
15日:Anthropic+METR独立評価(スタッフレベルアクセス付与)
15日:Deepfake音声詐欺€95M(伊銀行幹部、WhatsApp経由)
15日:ChatGPT広告ターゲティング報道(メール/電話/プロンプト)
16日:NVIDIAアプリAIエージェント自動有効化(デフォルトON、セキュリティリスク指摘)
16日:中国AI輸出規制追加(AI関連技術を規制対象に)
16日:ChatGPT Slides(OpenAI、プレゼン共同編集+エクスポート)
16日:Beam GA(Reflection AI、501B MoE OW Apache 2.0)
16日:Intern-Decision(Shanghai AI Lab、0.8B/2B/4B OW)
16日:Nemotron 3.5(NVIDIA、3モデルOW+安全プラットフォーム)
16日:OpenAI暴走追加公開(6月の2件、病院DB24年分アクセス)
16日:Anthropic AI安全法案提案(モデル公開制限の法整備要求)
16日:SF DCモラトリアム(市長、45日間建設停止命令)
16日:Replit Anthropic離脱(CEO発言、コスト理由)
16日:Apple AIヌード生成アプリ規制(App Review更新)
16日:Pudu D7+D5-W(準ヒューマノイド+四足ロボ、IFA 2026)
16日:台湾AIチップ中国転売犯罪化検討
16日:PostgreSQL 19延期(LLMレビューでバグ約40件発見)
17日:DeepSeek V4.1-Flash-1017(552B MoE MIT OW、1Mコンテキスト)
17日:Anthropic Q3売上$16.8B(45%増、IPO $2T評価検討)
17日:Anthropicカナダ初DC(Nova Scotia、EverWind、C$10B超)
17日:GLM-5.3自己訓練認識(Apollo Research、6452中10回で発現)
17日:AI保険リスク警告(数千億ドル賠償リスク、政府保証議論)
こちらのポストを参考にしました👇
xitter.cf/lourou7292/status/2110…
おかぴ|@AI副業40代会社員 retweeted
Webサイトの参考を、部品ごとに探せる整理がいいですね。ナビゲーションバーの実例集やCTA(申込・購入ボタンなど)の実例集が分かれていて、ボタン周りだけ見比べたいときにも探す先を選びやすそうです。
デザイナーじゃなくても、Webサイトを作るならブックマーク必須。
1. scrolltide.co
3D・スクロール演出サイトのプロンプト&ソースコード集
2. navbar.gallery
ナビゲーションバーの実例集
3. footer.design
フッターの実例集
4. cta.gallery
CTA(申込・購入ボタンなど)の実例集
5. styles.refero.design
実在プロダクトのデザインスタイル集
6. supahero.io
真似したくなるヒーローセクション集
7. 3dicons.co
UIに使える3Dアイコン素材
8. glass.samasante.com
ガラス風UIのコンポーネント&エフェクト
他にもおすすめがあれば教えてください。
Claudeのエンジニア責任者 Felix Rieseberg の
「AIへの頼み方」が別次元だった
🥉「四半期報告のパワポ作って」
→スライドが速くできるだけ
🥈「データを分析して、わかりやすいパワポにして」
→見た目は良くなるけど、中身は今まで通り
🥇Felixの頼み方:名詞を動詞に変える
✕ 名詞:「四半期報告の『パワポ』を作って」
◯ 動詞:「役員を30分で『納得させて、判断させたい』」
「パワポで、誰に何をさせたいのか」を動詞で書く。
すると、必要な専門家が見えてくる
・アナリスト:数字から原因を探す
・記者と編集者:伝わるストーリーにする
・空売り投資家と法務会計士:粗を探して、ツッコミに先回りする
コツは「記者になりきって」ではなく「記者が実際にやる作業をして」と頼むこと。なりきらせても口調が変わるだけで、中身は良くならない。
「資料」という名詞にとらわれた瞬間、AIの使い道も資料作りで止まる。
Hi, I'm Felix. I'm an eng lead working on Claude. I love watching people take flight and do things they never thought possible.
We often describe that as "being more ambitious" when using AI, which is tricky advice to follow. I wrote a tutorial:
felixrieseberg.com/how-to-be…
デザイナーじゃなくても、Webサイトを作るならブックマーク必須。
1. scrolltide.co
3D・スクロール演出サイトのプロンプト&ソースコード集
2. navbar.gallery
ナビゲーションバーの実例集
3. footer.design
フッターの実例集
4. cta.gallery
CTA(申込・購入ボタンなど)の実例集
5. styles.refero.design
実在プロダクトのデザインスタイル集
6. supahero.io
真似したくなるヒーローセクション集
7. 3dicons.co
UIに使える3Dアイコン素材
8. glass.samasante.com
ガラス風UIのコンポーネント&エフェクト
他にもおすすめがあれば教えてください。
見本が見つかったら、あとはAIへの伝え方次第。
LP・広告・SNS投稿までコピペで使えるClaudeのプロンプト50本をnoteにまとめています👇
note.com/okapi_fukugyo/n/n10…
「150個のテンプレ」系は量産の近道に見えて「みんな同じ絵」になりがち。差がつくのは①の[Subject]置換の解像度——「誰が・どこで・何を・どんな光で」をどこまで具体化できるか。テンプレは構図の型を学ぶ教材として使って、最終的に自分の型へ寄せるのが一番コスパいいかなと。
おかぴ|@AI副業40代会社員 retweeted
Você percebe que sua biblioteca ficou boa quando um japonês usa a sua biblioteca pra fazer conteúdo próprio
Claudeに「もっとかっこよく」と連呼してる人、これ使って!
「Scrolltide」は、Webデザインとプロンプトがセットになったサイト。
・好きなデザインを選んでプロンプトをコピペ
・配色、レイアウト、動きまで指定済み
・3Dやスクロールに連動する演出も
・無料で試せるテンプレあり
ゼロから指示を考えるより、見た目から入るほうが早い。
サイト制作に限らず、Claudeは「指示の型」で変わる。
SNS・資料作成・リサーチなどに使えるプロンプト50本はこちら👇
note.com/okapi_fukugyo/n/n10…











