おはようございます！マネジメントオフィスいまむらの今村です。
いま、AIコーディングで自社のホームページ見直しを自力でやっているのですが、デザインセンスのないぼくはGUIの作成にいつも戸惑います。これを生成AIでなんとかしてみました。
まずはデザイン案を作るためのプロンプト案を作ってもらう
まずはデザイン案を作るためのプロンプト案を作ってもらいます。
TailwindCSS CDNを使って、ブログのデザイン案を作りたい。異なるブログのデザインを試せるように、プロンプト案を10個作って。
人間にこういうお願いをすると100%嫌な顔をすると思いますが、AIなら気兼ねなく頼めますね！（このあとターミネーターのような世界になること必至）
この結果、以下の10個のアイデアが20秒くらいででてきました。
1. ミニマリスト作家のブログ
2. スタートアップ向けテックブログ
3. フォトグラファーのポートフォリオブログ
4. ニュース・マガジンサイト
5. 80年代レトロPC風ブログ
6. ライフスタイルVloggerのブログ
7. サイバーパンク風ガジェットレビューブログ
8. オーガニックカフェのブログ
9. 研究者・学術論文ブログ
10. 個人の日記・趣味ブログ
AIはいろいろ苦手分野もあるので万能ではないのですが、このように多量のアイデアを作らせる（しかもそれを即捨てても嫌な顔されない）という「物量で殴る」のが、いまのところ最も得意なんじゃないかと思います。
じゃあ、これらがどのようにアウトプットされるのかを見ていきましょう
ミニマリスト作家のブログ
まずはミニマリスト作家のブログです。これは具体的にはこういうプロンプト案が提示されました。
Tailwind CSSを使い、文章そのものに集中できるミニマリストなブログをデザインしてください。シングルカラムレイアウトで、余白を贅沢に使います。背景はオフホワイト、テキストはダークグレー。フォントは本文に可読性の高いセリフ体（
font-serif）を、見出しにはモダンなサンセリフ体（font-sans）を使用してください。
これをGemini 2.5 Proで作ってもらいました。Canvasで作ってもらうとプレビューが楽でいいですよ。
ミニマリストのデザインはつまらないですね。まあミニマリストだから仕方ないですが。（ここでアイデア即捨て）
スタートアップ向けテックブログのデザイン
Geminiにもう一つ作ってもらいました。今度はスタートアップ向けテックブログ。
先進性と信頼性を感じさせる、スタートアップ企業向けのテックブログをTailwind CSSで作成してください。レイアウトは、記事一覧ページはカード型グリッド、記事ページは本文とサイドバーの2カラム構成で。配色は白を基調に、テキストはネイビー、アクセントカラーに鮮やかなブルーを使用し、ボタンにはグラデーションを適用してください。
テックブログというとダークテーマっぽいイメージがありましたが、意表をついてきましたね。
今度は違う生成AIに作ってもらいましょう。
サイバーパンク風ガジェットレビューブログ(ChatGPT O3)
O3はどんなのを出してくれるでしょうか？プロンプトは以下のとおりです。
近未来的でエッジの効いた、サイバーパンク風のブログをデザインしてください。黒い背景にネオンカラー（シアン、マゼンタ）が映える配色で。レイアウトは非対称にし、斜めの線やシェイプを取り入れてください。UIにはガラスモーフィズム（
backdrop-blur）やテキストのグロー効果（shadow）を多用してください。
サイバーパンクっぽいですが、Geminiと違ってブログ記事本体ではなく、投稿のフロントページっぽいのを作ってきましたね。このあたりはプロンプトでちゃんと指定をしてあげないといけないな。
オーガニックカフェのブログ(Claude)
最後はClaudeに作ってもらいました。個人的にはClaudeが一番センスがあるものを作ってくれるような印象があります。（個人の感想です）
ナチュラルで温かみのある、オーガニックカフェの公式ブログをデザインしてください。アースカラー（ブラウン、グリーン、ベージュ）を基調とし、手触りのある紙のようなテクスチャを背景に薄く敷きます。フォントは温かみのあるセリフ体を選び、手書き風のSVGアイコンをアクセントとして使用してください。
これはブログというか、もはやカフェの公式サイトですな。
とにかく数を出させて、気に入らないものは即捨てをして、気に入ったものをブラッシュアップしていくという贅沢な物量作戦でいく、という人間相手にはできなかったことができるというのは本当にいいですね（そしてちょっと良心の呵責もある。人間ですので💦）