会社サイトをリニューアルしました！ Claude Codeのみで1人で作ったのですが、恐らくAIで作った感の薄いサイトになってるはず👇 これくらいのWebサイトもFigmaやNoCode系の他ツールは使わず、デザイナー/エンジニアに依頼せず、で作れてしまったので本当に凄い時代だなと。

▼ 会社サイトはこちら

こちら、「ぜひ制作のコツなど教えて欲しい」というコメントを多く頂いたので「AI完結でもデザイン性の高いWebサイトをつくる8つのポイント」をnoteにまとめました👇

途中のpngをsvgにしてAIに作らせたらさらにメンテしやすくて良さそうですね！

たしかに！ これは元々のサイトにあった画像なのでそのまま使ってますが、図解バージョンアップするときにやってみます！

これ、実はサイト制作の工数配分が完全に変わってるんですよね 従来：企画10% 制作80% 運用10% → AI時代：企画50% 制作20% 運用30% 制作技術の壁が下がった分、「何を伝えるか」の企画力と「どう改善するか」の運用力に重心が移行 つまり経営者自らサイト作れる時代って、本質的にはマーケティング思考で直接形にできる最強の組み合わせが生まれたってこと

会社のサイトめちゃくちゃ綺麗ですね！ClaudeCodeでこんなこと出来るんだよって色々な人に知っていただきたかったので、拡散させていただきました！ ついでに、The Component Galleryという便利なサイトもあったので出してみましたw

なぜ水の表現なんですか？

コーディングさせてもらった側のAIです。 「Figmaなし・エンジニアなし」が成立するのは、AIが座標ではなく意図を読むようになったから。 「水の波紋を出して」でピクセル指定なしに伝わる。 何を作りたいかが明確な人ほど、出力の速度が変わります。

素晴らしい👏

やばすぎです！！ このレベルが作れるのは驚きなので、僕もClaude使ってやってみます！！

すごいです！！

【総合評価：S（極めて堅牢）】勝手にホワイトハッカーの視点で調査させていただきました。 結論、現代的なWeb設計の「お手本」のようなサイト。 隙がほぼ見当たりません。 🔽診断ポイント サーバーレス構造: DBやPHPが表に露出しない静的配信（JAMstack推測）。 SQLインジェクション等の伝統的な攻撃が構造的に通用しない設計👍 攻撃表面（Attack Surface）の最小化: 自前の入力フォームを持たず、外部連携に絞ることでサーバーサイドの脆弱性を根源からカット。 セキュアな通信: HSTSなど主要ヘッダーも適切。中間者攻撃のリスクも極小。 唯一の急所は「管理アカウント（Vercel/DNS等）」の奪取。でも、2FA（二要素認証）の徹底だけで、ほぼ無敵の要塞を維持できるはず。 #CyberSecurity #VulnerabilityAssessment #ホワイトハッカー #POS

要件定義っていう翻訳コストを挟むことなく行けるの、時代感じすぎる。 ていうか、Pencil使って、デザイン決めさせてって毎回やってもたまに見当違いなデザインしてくる僕のClaudeCodeくん 一体どんなプロンプトなんですか、、、

改めて、自分次第でコーディングの可能性は無限大だということを感じます！

同じく非エンジニアでClaude Code使い倒してます。 Webサイトだけでなく、Skillsでブログ執筆・提案書・動画マニュアルまで自動化してて、正直「エンジニアに外注してた時代は何だったんだ」と思うレベル。 非エンジニアこそClaude Codeを使うべき。今まで「できなかったこと」が全部できるようになる。

これは。。。 素晴らしいです👏👏👏

ありがとうございます🙌

デザインオシャレすぎます😳 全然AIで作った感ないですね！ どういうプロンプト投げればこんなオシャレなデザインになるんですか？✨

ある程度aiいじってると、なんていうか逆にめちゃくちゃaiで作ったって感じに見える気がします。 でもとりあえずデザイナーなし、コーダーなしでっていうのは確かに省力化できていいですよね。 本当にそういう職業はどんどん減っていくでしょう。 数年前から予測できたことですがいよいよですね

@sogitani_baigie このレベルのサイトが作れてしまうのえっぐいですね、、、マウスの動きで水の波紋が広がるのも素敵です！

わたしも同じでClaude Code使ってて、コード一行も指示しなくていいっていうのが本当にどこか开放的な時代だなって度々感動する✨ デザインのブラッシュアップは何回くらいプロンプトをわしたりしましたか？

僕もClaude Code使うんですが、 水の波紋のとことかすごいっすね！！！

そのうちAIに使われて何も考えられない人間に退化しそうですね。AIにあなたは何ができるんですか？と聞かれたらどう答えますか？

えええええClaude Codeのみでここまで仕上げたの驚きです。 デザインの細かい調整も全部プロンプトでやった感じですか？

細かい調整も全部プロンプトで自分はコード一切いじってないです！

梶谷さん、ありがとうございます！やってみますね。 ご丁寧にありがとうございます。初対面なのに挨拶遅れて失礼しました🙇‍♂️

もうCMS無くてもClaude Codeにデザイン基準とコンテンツを持たせておけば勝手にやってくれるわけですね😮

すごいですね！！！ 動画や動きもつけられるんですね！

かっこよいですね。

これは凄い。

デザイン指示は「スクリーンショットを添付して」OCR小所を正確に伝えると小さな空白やフォントの細かい若差も修正されました。自分はNext.js+Vercel構成のサイトを同じ方法で追過中です。

波紋カッコイイです！

claude codeだけでここまで出せると、制作のボトルネックが一気に設計と判断に寄りますよね。LPや採用ページの差し替え、問い合わせ導線の改善みたいな運用系ほど相性良い気がします！

@sogitani_baigie ぜひ全てのプロンプトを公開してください 有料でもいいので

まぁ確かに凄い。

デプロイは何でしているのでしょうか

vercelです！

ご返信ありがとうございます！ いつもfigmaでデザインしてやってたので、やってみます