2026年現在、私たちの目の前にある「サムネイル」「Webサイト」制作の景色は、数年前とは劇的に変化しました。 Adobeのデザインツールや、HTMLやCSSを記述するエディタ画面と睨めっこする時間は、もう過去のものです。 今、求められているのは「手で作る技術」ではありません。 「言葉で指揮する技術」です。 本記事では、Googleの最新AIモデル「Nano Banana Pro」と、「Gemini Canvas & AIエージェント」を組み合わせた、ノンデザイナーのための革命的なワークフローを解説します。 これは、デザイン業務の内製化に悩むマーケターや、表現の幅を広げたいすべての人に贈る、Web構築の最適解です。
かつてサムネイルやWebサイトを作るには、専門的なコーディング知識か、複雑なデザインツールの操作スキルが必要でした。 しかし、今は違います。 必要なのは「良い素材」と、それを「並べるセンス（指揮）」だけ。 極端に言えば、現代のデザイン制作は高度なエンジニアリングではなく、洗練された「コラージュ」作業に近いです。 このパラダイムシフトを受け入れることが、全てのスタートライン。 「自分で作らなきゃ」というプレッシャーを捨ててください。 あなたの役割は、優秀なAIという部下に指示を出し、上がってきた成果物をジャッジする「指揮者（コンダクター）」へと変わったのです。
「AIで作った画像が、なんだか安っぽい」 「指示した通りのレイアウトにならない」 多くのノンデザイナーが抱えるこの悩み。 原因はAIの性能ではなく、指揮者であるあなたの「言語化（プロンプト）」にあります。
かっこいいビジュアルを作る前に、まず立ち止まってください。 「誰に、何を伝えたいのか？」 これを言語化できていない状態でAIに指示を出すのは、行き先を告げずにタクシーに乗るようなものです。
最も重要なのが「12歳でもわかるメタファー」です。 AI（Nano Banana Pro）は非常に優秀ですが、抽象的な指示（例：「いい感じで」「おしゃれに」）は苦手です。 一方で、具体的な比喩や状況描写には驚くほど正確に反応します。
× 悪い指示 かっこいい近未来的な背景 ◎ 良い指示（翻訳後） 2040年の東京、深夜の首都高を走る電気自動車の窓から見える、ネオンが反射する雨のアスファルトのような質感 このように、あなたの頭の中にあるイメージを、誰にでも伝わる言葉に「翻訳」して伝える。 これこそが、指揮者に求められる唯一にして最大のスキルです。
ここで、AIへの翻訳精度をさらに高めるためのコツをお伝えしましょう。 究極的に言えば、あらゆるデザイン画像は「文字」と「図」という2つの要素だけで構成されています。 AIへの指示がうまくいかないときは、漠然と全体像を伝えるのではなく、これらを細かく指定（因数分解）してみてください。 === 文字要素（Text）===
ここで紹介した思考法は、単なる1枚の画像生成だけでなく、プレゼンスライドやWebサイト構築にもそのまま応用できます。 なぜなら、スライドは「1枚画像の連続」であり、Webサイトは「1枚画像を縦に並べた巻物」に過ぎないからです。 「文脈」という横糸を通す必要はありますが、基本構造は同じ。 まずは「文字」と「図」を指定する。 このシンプルな「因数分解」の視点を持つだけで、あなたの指揮能力は劇的に向上するはずです。
指示の出し方を理解したところで、実際にGoogleの最新モデル「Nano Banana Pro」を使ってサムネイルを生成していきましょう。 https://gemini.google/jp/overview/image-generation/?hl=ja-JP
AI生成の最大の弱点は、生成するたびにテイスト（画風）が変わってしまうことでした。 これを解決するのが「縛りプロンプト」です。 ブランドカラー（例：#0052FF）や、デザインのトーン＆マナー（例：フラットデザイン、マットな質感、余白多め）を定義したプロンプトを固定し、それを「憲法」としてAIに守らせます。
縛りプロンプト例 以下のブランドルールを厳守せよ：メインカラーはテックブルー、背景は白、影は落とさないフラットスタイル。この条件で、〇〇のアイコンを生成して このように制約（縛り）を与えることで、Nano Banana Proは統一感のある、まるで一人のデザイナーが描いたような素材セットを出力してくれます。
一発で完璧な画像が出なくても焦る必要はありません。 Nano Banana Proの真骨頂は、対話型の修正能力にあります。 「右上の光をもう少し強く」「アイコンの角を丸くして」と、部下に修正指示を出す感覚で微調整を行い、素材のクオリティを120点まで引き上げてください。
多くのノンデザイナーが、いきなりAIツールを開いて「どんな色にしようか」「文字をどう配置しようか」と考え始めます。 しかし、結論から言います。 その時点で失敗はほぼ確定しています。 なぜなら、サムネイルやバナーの成否は、デザインスキルやAIの性能ではなく、制作前の“思考プロセス”で9割決まるからです。 AIという優秀な部下に指示を出す前に、指揮者であるあなたが決めておくべき「7つのチェックリスト」を伝授します。 これを知らずに進めるのは、地図を持たずに航海に出るようなものです。 なぜ失敗するのか？ 「作品」を作ろうとしているから、 「見た目」を作ろうとして、 「役割」を定義していないからです。 サムネイルやバナーは“作品”ではなく“装置”です。
STEP 1｜「何のための画像か？」を1文で定義する まず最初に、「このサムネイルの目的は何か？」を言語化します。 「認知獲得」や「ブランディング」といったふわっとした言葉はNGです。
思考プロセスが完了したら、いよいよNano Banana Proに指示を出します。 ここでは、前項の「7つの掟」をクリアした上で、実際にどのようなプロンプトを入力すればいいのか、実務で使えるテンプレートを公開します。 AIへの指示は、情報を構造化して渡すのが鉄則です。 私が推奨する「構造化プロンプト」は、以下の3つの階層で構成されています。 この形式はNano Banana Proが最も理解しやすい構文（シンタックス）であり、再現性を高めるための「型」です。
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "KAWAI BOOKS"
- メインコピー（2行）: "人気noteランキング"
# アイキャッチ:
- スマートフォンを見ている笑顔の女性と男性、フラットベクターイラスト、日本人
# 背景画像:
- 記事やAIを表現したアイコンが少数浮いている、単色グラデーションの3Dアイコン
=== デザイン（ここのセクションの要素は画像に配置しない） ===
# フォント:
- サンセリフ体（通常・太い）
# アスペクト比:
- 16:9（横長）
# 配色:
- メインカラー: レッド
- 文字: 黒
- 背景: 白
# レイアウト:
- メインコピーはサブコピーの3倍以上の大きさ
- メインコピー、サブコピーの文字間は0.3px広める
- ダイナミックで目を引くビジュアル
- 男性と女性は画面の両端に配置
# スタイル:
- 楽しく、わかりやすい
# 禁止事項:
- 光彩、エフェクト、シャドウ、フチ文字【出力結果】 事例2：採用・リクルート用バナー（応用） 次は同じ構成を使って、「採用」に特化したバナーを作ります。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "WANTED 2027"
- メインコピー（2行）: "未来を創る\nエンジニア募集"
# アイキャッチ:
- 自信に満ちた表情で未来を見据える若い女性、ビジネススタイル、写真、強い日差し
# 背景画像:
- 幾何学模様のラインアート、上昇志向を感じさせる矢印のあしらい
=== デザイン ===
# 配色:
- メインカラー: 信頼感のあるディープブルーからシアンのグラデーション
- 文字: 白とアクセントの黄色【出力結果】 事例3：ウェビナー集客用バナー（応用） 最後は、緊急性と学びを強調する「ウェビナー告知」です。 ここでは人物ではなく「文字」を主役に据え、アカデミックな雰囲気を狙います。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "緊急開催"
- メインコピー（2行）: "AIデザイン革命\n完全講義"
- 補足: "開催日時: 1月19日 20:00~21:00"
# アイキャッチ:
- 脳と電球を融合させた抽象的なアイコン、ミニマルデザイン
# 背景画像:
- デジタルノイズ、グリッド線、テクノロジーを感じさせるドット
=== デザイン ===
# 配色:
- メインカラー: 黒に近いダークグレー背景に、ネオンイエローの文字
- 文字: 太めのゴシック体でインパクト重視
# レイアウト:
- メインコピーはサブコピーの3倍以上の大きさ
- メインコピー、サブコピーの文字間は0.3px広める
- ダイナミックで目を引くビジュアル
# スタイル:
- 先進的、衝撃的、プロフェッショナル
# 禁止事項:
- 光彩、エフェクト、シャドウ、フチ文字【出力結果】 事例4：新機能リリース・アップデート告知 SaaSやアプリの運用で欠かせないのが「新機能」のお知らせです。 ここでは「新しさ」「先進性」「ワクワク感」を演出するため、寒色系の明るいグラデーションと、機能性を象徴するモチーフを組み合わせます。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "UPDATE v2.0"
- メインコピー（2行）: "自動生成機能\nついにリリース"
# アイキャッチ:
- 魔法の杖を持ったロボットハンド、または輝く歯車と光の粒子、3Dアイソメトリックイラスト
# 背景画像:
- デジタル回路やネットワークを抽象化したラインアート、浮遊する幾何学立体
=== デザイン（ここのセクションの要素は画像に配置しない） ===
# フォント:
- 和文: Noto Sans JP Bold
- 欧文: Roboto Mono Bold
# アスペクト比:
- 16:9（横長）
# 配色:
- メインカラー: エメラルドグリーンからターコイズブルーのグラデーション
- 文字: 白
# レイアウト:
- メインコピーは画面中央に大きく配置
- アイキャッチはコピーの背後または周囲に配置し、奥行きを出す
- 近未来的でクリーンな印象
# スタイル:
- 革新的、スマート、テック感
# 禁止事項:
- 古臭い表現、手書き風フォント、過度な装飾、暗い色【出力結果】 事例5：導入事例・インタビュー（BtoB向け） BtoBマーケティングで最も重要なコンテンツの一つが「導入事例（ケーススタディ）」です。 ここでは信頼感と成果（数字）を強調するため、落ち着いたネイビー基調の配色と、成功をイメージさせる人物イラストを指定します。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "CASE STUDY"
- メインコピー（2行）: "導入3ヶ月で\n成果200%UP"
# アイキャッチ:
- 握手を交わすビジネスマンとビジネスウーマン、または右肩上がりのグラフを指差して喜ぶチーム、フラットベクターイラスト
# 背景画像:
- オフィスの窓ガラスのような透明感のある背景、または薄い方眼紙（グリッド）パターン
=== デザイン（ここのセクションの要素は画像に配置しない） ===
# フォント:
- 和文: Noto Sans JP Regular/Bold
- 欧文: Helvetica Neue Bold
# アスペクト比:
- 16:9（横長）
# 配色:
- メインカラー: ネイビーからロイヤルブルーのグラデーション
- 文字: 白、強調部分はゴールドまたは黄色
# レイアウト:
- メインコピーは左側に配置、アイキャッチは右側に大きく配置（視線誘導Z型）
- 数字（200%）を最も大きく強調する
- 余白を十分に確保し、信頼感を演出
# スタイル:
- 誠実、プロフェッショナル、高品質
# 禁止事項:
- 派手すぎる色、子供っぽいイラスト、カオスな配置【出力結果】 事例6：期間限定キャンペーン・セール 最後は、ECサイトやスクール事業で必須の「期間限定キャンペーン」です。 緊急性とインパクトを最大化するため、ビタミンカラー（暖色系）を使用し、要素を大胆に配置して「お祭り感」を出します。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "SPECIAL WEEK"
- メインコピー（2行）: "春の学習応援\n全講座 50%OFF"
# アイキャッチ:
- 開いたギフトボックスから星やハートが飛び出すイラスト、または「%」記号の3Dバルーン
# 背景画像:
- 紙吹雪（コンフェッティ）が舞っている、放射状の集中線（サンバースト）
=== デザイン（ここのセクションの要素は画像に配置しない） ===
# フォント:
- 和文: M PLUS 1p ExtraBold（太くて丸みのある元気なフォント）
- 欧文: Futura Bold
# アスペクト比:
- 16:9（横長）
# 配色:
- メインカラー: 明るいオレンジからサンシャインイエローのグラデーション
- 文字: 白（ドロップシャドウなし）、または濃い赤
# レイアウト:
- メインコピーを画面いっぱいに最大化
- アイキャッチはコピーを邪魔しない程度に周囲に散りばめる
- 賑やかでエネルギーに満ちた構成
# スタイル:
- 元気、ポップ、緊急性、お得感
# 禁止事項:
- 地味な色、細いフォント、寂しい空間、静寂【出力結果】
ビジネス色を完全に排除し、「美味しそう」「温かそう」という感覚（シズル感）を最優先にします。フォントや配色もオーガニックで優しいものを選定します。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "EASY RECIPE"
- メインコピー（2行）: "10分で作れる\n絶品パスタ"
# アイキャッチ:
- 湯気が立っているトマトソースパスタのクローズアップ写真、鮮やかなバジルが乗っている、高解像度、フォトリアリスティック
# 背景画像:
- 木製のテーブル（ウッドテクスチャ）、散らばった新鮮な野菜やスパイス、ボケのあるキッチン背景
=== デザイン（ここのセクションの要素は画像に配置しない） ===
# フォント:
- 和文: Yu Mincho or 筑紫A丸ゴシック（上品または親しみやすい明朝・丸ゴシック）
- 欧文: Playfair Display
# アスペクト比:
- 16:9（横長）
# 配色:
- メインカラー: 食欲をそそるオレンジ、赤、暖色系のブラウン
- 文字: クリーム色または白（視認性を確保するための薄いドロップシャドウは可）
# レイアウト:
- メインコピーは手書き風やあしらいを加えて「カフェのメニュー黒板」のような雰囲気に
- 写真の魅力を最大化するため、テキストエリアは画像の余白（例：左上や右下）に寄せる
# スタイル:
- ナチュラル、オーガニック、温かい、家庭的
# 禁止事項:
- デジタル的なノイズ、冷たい色（青・紫）、ビジネスライクな直線的なアイコン【出力結果】
YouTubeやTwitchなどのサムネイルを想定し、若年層に向けた「サイバーパンク」「ハイコントラスト」な世界観を作ります。既存のプロンプトにはない、暗闇で光るネオン表現を用います。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "LIVE STREAM"
- メインコピー（2行）: "神回確定\nボス攻略配信"
- 補足: "🔴 NOW PLAYING"
# アイキャッチ:
- 光るゲーミングヘッドセットを装着したアニメ調のキャラクター（シルエット気味でも可）、またはネオン色に発光するゲームコントローラー
# 背景画像:
- サイバーパンクな都市の夜景、グリッチノイズ（デジタルな乱れ）、レーザービームのような光線
=== デザイン（ここのセクションの要素は画像に配置しない） ===
# フォント:
- 和文: 装甲明朝 or けいふぉんと（エッジの効いたデザイン書体）
- 欧文: Orbitron (SFチックなフォント)
# アスペクト比:
- 16:9（横長）
# 配色:
- メインカラー: ブラック背景に、ネオンパープルとネオンピンク、シアンの差し色
- 文字: 白に強い光彩（グロー効果）またはネオン管のような縁取り
# レイアウト:
- メインコピーは画面中央または斜めに配置し、勢いをつける
- 画面全体を暗くし、文字とアイキャッチだけが強烈に光るようにする
- 没入感を高めるため、奥行きのある構図
# スタイル:
- クール、激しい、未来的、ゲーミング、カオス
# 禁止事項:
- パステルカラー、自然風景、真面目すぎる明朝体、余白の多すぎる静かな画面【出力結果】
「余白」と「空気感」を重視した、情緒的なサムネイルです。情報を詰め込むのではなく、雰囲気でクリックさせる「映え」を意識した構成です。 ▼ Nano Banana Pro 入力プロンプト
=== 掲載する内容 ===
# 掲載するテキスト:
- サブコピー: "Morning Routine"
- メインコピー（2行）: "整える時間、\n私の一日。"
# アイキャッチ:
- 窓辺から差し込む柔らかな朝の光、コーヒーカップを持った手元のアップ、または読みかけの本。顔は見せず「雰囲気」を重視したシネマティックな写真
# 背景画像:
- リネン（布）の質感、または白から淡いベージュのミニマルな空間、観葉植物の影
=== デザイン（ここのセクションの要素は画像に配置しない） ===
# フォント:
- 和文: 游明朝体 or しっぽり明朝（細身で美しい明朝体）
- 欧文: Montserrat Light
# アスペクト比:
- 16:9（横長）
# 配色:
- メインカラー: グレージュ（グレーとベージュの中間）、生成り色、ペールトーン
- 文字: ダークグレーまたはチャコール（黒だと強すぎるため）
# レイアウト:
- 余白（ホワイトスペース）を画面の50%以上確保する
- 文字サイズは控えめにし、洗練された雑誌の表紙のように配置
- 縦書きのテキスト配置も検討（日本語の美しさを強調）
# スタイル:
- センチメンタル、静寂、丁寧な暮らし、ミニマリスト
# 禁止事項:
- 太すぎるゴシック体、彩度の高い原色（赤・黄・青）、派手な装飾、ごちゃごちゃした要素【出力結果】 このように、「構造」さえ決めてしまえば、あとは変数を入れ替えるだけで、Nano Banana Proは無限のバリエーションを生み出してくれます。 「どう作るか」に悩む時間はゼロ。 あなたは「何をどう伝えるか」を定義し、このレシピを書き換えるだけでいいのです。
ここからは、実際にWebサイトを構築し、全世界に公開するフェーズに入ります。 通常、私たちプロの現場では、コードを書いてgit pushし、VercelやCloudflareで公開するのが最も高速です。 しかし、ノンデザイナーの方にとって「Git」や「ターミナル（黒い画面）」は恐怖の対象であり、サーバー契約やドメイン設定は大きなハードルです。 そこで私は、「Gitコワイ勢」のために、最も楽に「Webサイト生成→公開」まで完結させる裏ルートを開発しました。 名付けて「AIエージェント・ドリフト」。 Googleの「Gemini Canvas」で爆速でコードを書き、そのコードを「AIエージェント」に渡してサーバーを一瞬で用意させる。 このバケツリレーなら、知識ゼロでも約10分あればWebサイトを公開できます。 どんなデザインにするか迷ったら「参考サイト集」をご覧ください。
このワークフローに必要なのは、高度な知識ではなく「コピペ」の技術だけです。 🚩 STEP 1：「プロンプトを作るためのプロンプト」を投げる まず、Gemini（脳）に「Webサイトの設計図」を書かせます。 いきなり「サイト作って」と言うのではなく、「Webサイト専用の完璧な指示書（プロンプト）を作る」のが、AI時代の品質管理です。 以下のテキストをコピーし、{ } の中身をご自身の情報に書き換えて（あるいはそのままで）、Geminiに入力してください。 ▼ Geminiへの入力プロンプト
# ワークフロー
- 以下の{私のプロフィール}{ルール}{出力フォーマット}を理解する
- 今回作成するWebサイトの参考事例を調査する
- 資料と参考事例を基に、AIに入力するための「Webサイト構築プロンプト」を作成してください。
# 私のプロフィール
- 名前: 川合 卓也
- 職業: AI駆動デザインコンサルタント
- ターゲット: AI導入に悩む中小企業の経営者
- キャッチコピーに入れたい想い: AI×デザインでビジネスを楽しむ
- 提供サービス: 社内研修、AIデザインツール導入支援、プロンプト設計
- お問い合わせ先リンク:https://forms.gle/z5SUXRtvry5jkopc9
# ルール
- AIが理解しやすいよう、以下のフォーマットに則って英語と日本語を交えたマークダウン形式で出力してください。
- 解説は不要です。コードブロックのみを出力してください。
- 日本人向け
# デザイン仕様書
- ファーストビュー: 人物写真を大きく配置するよう指示してください。
- ファーストビュー: キャッチコピーを大きく配置するよう指示してください。
=== 出力フォーマット（中身は「私のプロフィール」「ルール」」「デザイン仕様書」に合った指定に変更してください） ===
# 指示
Webサイトをデザインし、HTML/CSS/JavaScriptで作成してください。
# デザイン
- 基本的にはTailwindCSSに準ずる
## 配色
- ベースカラー: #ffffff
- テキストカラー:#333333（10段階）
- メインカラー: #ff0000（10段階）
## タイポグラフィとスタイル
- 和文フォント: Noto Sans JP（Regular/Bold）
- 欧文フォント: Avenir（Regular/Bold）
## アニメーション
- ホバー、スクロールでフェードイン・アウト
- パララックス（視差効果）･スクロールエフェクト･スクロールテリング
## レイアウト
- 要素と要素の間隔は24px以上開ける
- 各セクションに写真やアイコンを入れる
- レスポンシブ対応
- セクションごとに背景の色、ニュアンスを変える
# セクションごとの要素
## ヘッダーナビゲーション
- テキスト
- 画像
- レイアウト
…ファーストビュー、ビジョン、サービス、プロフィール、お問い合わせフォーム（Google Form）も同様に記述してください。
===出力結果
# Role / Task
Act as a world-class Web Developer and UI/UX Designer. Create a modern, high-end, global corporate-style website for an "AI-Driven Design Consultant" based on the following specifications.
# Design System
## Color Palette
- Base Color: #ffffff
- Text Color: #333333
- Main Color: #ff0000 (Accent for CTAs and highlights)
## Typography and Style
- Japanese Font: Noto Sans JP
- English Font: Inter
- Aesthetic: Modern, Stylish, High-end Global Tech Enterprise (e.g., Apple, Stripe, or Adobe)
## Animations & Effects
- Interactions: Hover and scroll fade-in/out effects.
- Advanced Effects: Parallax scrolling, scroll-triggered animations, and scrollytelling to maintain engagement.
## Layout
- Spacing: Maintain a minimum of 24px between all elements to ensure a clean, breathable interface.
# Sections
## 1. Header Navigation
- Elements: Logo (Text: Takuya Kawai), Navigation Links (Service, Vision, Profile, Contact).
- Layout: Sticky header with a transparent-to-solid background transition on scroll.
## 2. Hero Section (First View)
- Visual: Large-scale high-quality portrait photo of the consultant (Takuya Kawai) positioned prominently.
- Copy:
- Main Catchphrase (Large scale): "AI×デザインでビジネスを楽しむ" (Enjoy Business with AI & Design)
- Subtext: AI-Driven Design Consultant / Helping SMEs navigate the AI era.
- Layout: Split layout or overlay typography on the portrait with a sophisticated parallax effect.
## 3. Vision
- Concept: "AI×Design for Business Transformation."
- Content: Explain the philosophy of transforming AI challenges into creative business opportunities.
- Animation: Reveal text line-by-line using scroll-triggered effects.
## 4. Services
- Items:
1. Corporate Training (社内研修)
2. AI Design Tool Implementation (AIデザインツール導入支援)
3. Prompt Engineering (プロンプト設計)
- Layout: Three-column card layout with 24px+ gaps. Modern hover states on cards.
## 5. Profile
- Content:
- Name: 川合 卓也 (Takuya Kawai)
- Title: AI-Driven Design Consultant
- Bio: Dedicated to supporting SME owners in integrating AI and design to foster business growth and enjoyment.
## 6. Call to Action (Contact)
- Text: AI導入に関するご相談はこちら
- Link: https://forms.gle/z5SUXRtvry5jkopc9 (Google Form)
- Style: Large, prominent button using the Main Color (#ff0000).
# Deliverables
- Provide the complete code in a single-file structure (HTML/CSS/JavaScript) or separated clean code.
- Ensure the design is fully responsive (Mobile/Tablet/Desktop).**
例：モダンコーポレート
# デザイン仕様書
## 1. レイアウト構成
### ファーストビュー
- **高さ**: 100vh（画面全体）
- **背景画像**: オフィスシーンの笑顔の人物写真を全画面表示
- 画像の配置: center center
- サイズ: cover（画面全体をカバー）
- オーバーレイ: 半透明の黒（rgba(0,0,0,0.3)）で可読性を確保
- **コンテンツ配置**: 画面中央、縦横中央揃え
- **タイポグラフィの扱い**:
- 大見出しを画面幅の70-80%程度で配置
- 行間: 1.3-1.5（ダイナミックな印象）
- 文字サイズ: 48-72px（デスクトップ）、32-48px（モバイル）
### セクション構成
- **コンテナ幅**: 最大1200px、左右に余白
- **セクション間の余白**: 120px（デスクトップ）、80px（モバイル）
- **内部余白**: 上下80px、左右40px
## 2. 配色パレット
### 基本色
- **背景**: `#ffffff`
- **テキスト**: `#333333`
- **メインカラー**: `#0062ff`（CTA、リンク、アクセント）
- **セカンダリカラー**: `#1d00ff`（ホバー、強調要素）
### 応用色
- **薄いグレー背景**: `#f8f9fa`（セクション区切り用）
- **ボーダー**: `#e0e0e0`
- **メインカラー薄め**: `rgba(0, 98, 255, 0.1)`（背景装飾用）
## 3. タイポグラフィ
### フォント指定
- **フォントファミリー**: 'Noto Sans JP', sans-serif
- **ウェイト**:
- Regular (400): 本文
- Bold (700): 見出し、強調
### 文字サイズシステム（デスクトップ）
- **H1**: 64px / Bold / 行間1.3 / letter-spacing: -0.02em
- **H2**: 48px / Bold / 行間1.4 / letter-spacing: -0.01em
- **H3**: 32px / Bold / 行間1.5
- **本文**: 16px / Regular / 行間1.8
- **小テキスト**: 14px / Regular / 行間1.6
### 文字サイズシステム（モバイル: 768px以下）
- **H1**: 40px
- **H2**: 32px
- **H3**: 24px
- **本文**: 15px
- **小テキスト**: 13px
### 改行ルール
- 1行の文字数: 30-40文字を目安
- 意味のまとまりで改行（助詞の直後を避ける）
- 英数字と日本語の間に適切なスペーシング
## 4. インタラクション
### ボタン
- **デフォルト**: 背景#0062ff、テキスト#ffffff
- **ホバー**: 背景#1d00ff、軽く上に移動(translateY(-2px))
- **パディング**: 16px 32px
- **ボーダーラジアス**: 8px
- **トランジション**: 0.3s ease
### リンク
- **デフォルト**: #0062ff
- **ホバー**: #1d00ff、下線表示
### アニメーション
- フェードイン: スクロールで要素が現れる際に使用
- スライドイン: 左右から要素が入る演出
- 速度: 0.6s ease-out
## 5. レスポンシブ対応
### ブレークポイント
- **デスクトップ**: 1200px以上
- **タブレット**: 768px - 1199px
- **モバイル**: 767px以下
### モバイル調整
- タイポグラフィサイズを20-30%縮小
- 余白を50%程度に縮小
- ファーストビューの画像: object-position: 60% center（人物を中央に）https://youtu.be/Dqk1QbCvSx4 🚩 STEP 2：「Gemini Canvas」でコードを生成・確認する STEP 1を実行すると、Geminiが詳細な「Webサイト構築プロンプト」を出力します。 その出力されたプロンプトをコピーし、今度は「Gemini Canvas」に入力・実行してください。 生成されたHTML/CSSのコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>川合 卓也 | AI駆動デザインコンサルタント</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
:root {
--brand-red: #ff0000;
}
body {
font-family: 'Avenir', 'Noto Sans JP', sans-serif;
color: #333333;
overflow-x: hidden;
scroll-behavior: smooth;
}
.text-brand-red { color: var(--brand-red); }
.bg-brand-red { background-color: var(--brand-red); }
/* スクロールアニメーション用 */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 1.2s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* パララックス効果 */
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* カスタムユーティリティ */
.section-spacing { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) {
.section-spacing { padding-top: 9rem; padding-bottom: 9rem; }
}
.hero-gradient {
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.1) 100%);
}
.card-hover {
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
</style>
</head>
<body class="bg-white">
<!-- Header Navigation -->
<header id="header" class="fixed top-0 w-full z-50 transition-all duration-300 bg-white/90 backdrop-blur-md border-b border-gray-100">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="w-8 h-8 bg-brand-red flex items-center justify-center rounded-sm">
<span class="text-white font-bold text-xl">K</span>
</div>
<h1 class="text-lg font-bold tracking-tighter hidden md:block">
川合 卓也 <span class="text-gray-400 font-normal mx-2">|</span> <span class="text-sm font-medium text-gray-600">AI駆動デザインコンサルタント</span>
</h1>
</div>
<nav class="hidden md:flex space-x-10 text-sm font-bold uppercase tracking-widest">
<a href="#vision" class="hover:text-brand-red transition-colors">Vision</a>
<a href="#service" class="hover:text-brand-red transition-colors">Service</a>
<a href="#profile" class="hover:text-brand-red transition-colors">Profile</a>
<a href="#contact" class="hover:text-brand-red transition-colors">Contact</a>
</nav>
<button class="md:hidden text-gray-900">
<i data-lucide="menu"></i>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center overflow-hidden pt-20">
<!-- 背景画像プレースホルダー (パララックス風) -->
<div class="absolute inset-0 z-0">
<div class="absolute inset-0 bg-gray-50 flex items-center justify-end">
<!-- 人物写真イメージ領域 -->
<div class="w-full md:w-1/2 h-full bg-cover bg-center opacity-80"
style="background-image: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=1974&auto=format&fit=crop');">
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-r from-white via-white/80 to-transparent"></div>
</div>
<div class="container mx-auto px-6 relative z-10">
<div class="max-w-3xl reveal">
<p class="text-brand-red font-bold tracking-[0.3em] uppercase mb-6">Innovation & Design</p>
<h2 class="text-5xl md:text-8xl font-bold leading-tight mb-8">
AI × デザインで<br>
<span class="relative inline-block">
ビジネスを楽しむ
<span class="absolute bottom-2 left-0 w-full h-3 bg-brand-red/10 -z-10"></span>
</span>
</h2>
<p class="text-xl text-gray-600 mb-12 max-w-xl leading-relaxed">
最新のAIテクノロジーと、本質を突くデザイン思考を融合。
経営の最前線に「効率」以上の「興奮」を実装します。
</p>
<div class="flex items-center space-x-8">
<a href="#contact" class="bg-brand-red text-white px-10 py-5 rounded-full font-bold hover:bg-black transition-all duration-300 transform hover:scale-105">
ご相談を開始する
</a>
<a href="#vision" class="flex items-center text-sm font-bold tracking-widest uppercase hover:text-brand-red transition-colors">
Scroll Down <i data-lucide="arrow-down" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Vision Section -->
<section id="vision" class="section-spacing bg-gray-50 overflow-hidden">
<div class="container mx-auto px-6 text-center">
<div class="max-w-4xl mx-auto reveal">
<span class="text-brand-red text-sm font-bold tracking-[0.5em] block mb-10">VISION</span>
<h3 class="text-3xl md:text-5xl font-bold leading-snug mb-12">
効率化の先にある、<br class="hidden md:block">
創造的なビジネスの楽しさを。
</h3>
<p class="text-lg md:text-xl text-gray-600 leading-loose mb-16">
多くの中小企業経営者様がAI導入に不安を感じています。<br>
私の役割は、AIを単なるコスト削減の道具としてではなく、<br>
人間がより人間らしく、創造的に働くための「最高のパートナー」に変えることです。<br>
テクノロジーがビジネスの「遊び心」を取り戻す。そんな未来を共に創ります。
</p>
<!-- 抽象的イメージ -->
<div class="relative h-[400px] md:h-[600px] rounded-2xl overflow-hidden shadow-2xl">
<div class="absolute inset-0 bg-brand-red/10 mix-blend-multiply"></div>
</div>
</div>
</div>
</section>
<!-- Service Section -->
<section id="service" class="section-spacing bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-end mb-24 reveal">
<div>
<span class="text-brand-red text-sm font-bold tracking-[0.5em] block mb-6">SERVICES</span>
<h3 class="text-4xl md:text-6xl font-bold">提供サービス</h3>
</div>
<p class="text-gray-500 mt-6 md:mt-0 max-w-sm">
AIのポテンシャルを最大限に引き出し、実務に即したデザイン・ソリューションを提供します。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<!-- Service 1 -->
<div class="p-12 border border-gray-100 bg-gray-50 card-hover reveal">
<div class="w-16 h-16 bg-brand-red flex items-center justify-center mb-8 text-white rounded-lg">
<i data-lucide="users" class="w-8 h-8"></i>
</div>
<h4 class="text-2xl font-bold mb-6">社内研修</h4>
<p class="text-gray-600 leading-relaxed">
AIを使いこなす文化を組織に定着させます。経営層から現場まで、フェーズに合わせた実践的ワークショップを提供。
</p>
</div>
<!-- Service 2 -->
<div class="p-12 border border-gray-100 bg-white card-hover reveal" style="transition-delay: 100ms;">
<div class="w-16 h-16 bg-brand-red flex items-center justify-center mb-8 text-white rounded-lg">
<i data-lucide="layout" class="w-8 h-8"></i>
</div>
<h4 class="text-2xl font-bold mb-6">AIツール導入支援</h4>
<p class="text-gray-600 leading-relaxed">
数あるAIツールの中から、貴社のビジネスに最適なツールを選定・カスタマイズ。デザインワークフローを劇的に進化させます。
</p>
</div>
<!-- Service 3 -->
<div class="p-12 border border-gray-100 bg-gray-50 card-hover reveal" style="transition-delay: 200ms;">
<div class="w-16 h-16 bg-brand-red flex items-center justify-center mb-8 text-white rounded-lg">
<i data-lucide="zap" class="w-8 h-8"></i>
</div>
<h4 class="text-2xl font-bold mb-6">プロンプト設計</h4>
<p class="text-gray-600 leading-relaxed">
AIから高品質なアウトプットを引き出すための「思考の言語化」。独自のプロンプト開発で、属人化しないクオリティを実現。
</p>
</div>
</div>
</div>
</section>
<!-- Profile Section -->
<section id="profile" class="section-spacing bg-black text-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row gap-20 items-center">
<div class="w-full md:w-1/2 reveal">
<div class="relative">
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-brand-red/20 -z-10 rounded-full blur-3xl"></div>
</div>
</div>
<div class="w-full md:w-1/2 reveal">
<span class="text-brand-red text-sm font-bold tracking-[0.5em] block mb-6">PROFILE</span>
<h3 class="text-4xl font-bold mb-2">川合 卓也</h3>
<p class="text-brand-red text-lg mb-10 font-bold">AI駆動デザインコンサルタント</p>
<div class="space-y-6 text-gray-300 leading-loose text-lg">
<p>
デザインとテクノロジーの境界線で、新しいビジネスの形を模索し続けてきました。
</p>
<p>
これまで100社以上の中小企業に対し、AIを活用したクリエイティブ戦略を提供。
単なる技術導入ではなく「経営者の想いをどうAIで増幅させるか」を追求しています。
</p>
<p>
国内外のカンファレンスでの登壇や執筆活動を通じ、AIとデザインがもたらす新しい社会のあり方を提唱。
日本から世界へ、次世代のビジネススタンダードを発信しています。
</p>
</div>
<div class="mt-12 flex space-x-6">
<a href="#" class="text-white hover:text-brand-red transition-colors"><i data-lucide="twitter"></i></a>
<a href="#" class="text-white hover:text-brand-red transition-colors"><i data-lucide="linkedin"></i></a>
<a href="#" class="text-white hover:text-brand-red transition-colors"><i data-lucide="globe"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section-spacing bg-white">
<div class="container mx-auto px-6">
<div class="bg-gray-50 rounded-[3rem] p-12 md:p-24 text-center reveal">
<div class="w-20 h-20 bg-brand-red/5 flex items-center justify-center mx-auto mb-10 rounded-full">
<i data-lucide="mail" class="text-brand-red w-10 h-10"></i>
</div>
<h3 class="text-4xl md:text-6xl font-bold mb-10">ビジネスに、新しい風を。</h3>
<p class="text-xl text-gray-500 mb-16 max-w-2xl mx-auto leading-relaxed">
AI導入の第一歩、またはデザインによる組織変革について。<br>
まずはカジュアルにお話を聞かせてください。
</p>
<a href="https://forms.gle/z5SUXRtvry5jkopc9" target="_blank"
class="inline-block bg-brand-red text-white text-xl px-16 py-8 rounded-full font-bold hover:bg-black transition-all duration-500 shadow-xl shadow-brand-red/20 transform hover:-translate-y-2">
コンタクトフォームを開く
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-gray-100 bg-white">
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center">
<div class="text-sm text-gray-400 mb-6 md:mb-0">
© 2024 Takuya Kawai. All rights reserved.
</div>
<div class="flex space-x-12 text-sm font-bold tracking-widest uppercase">
<a href="#" class="hover:text-brand-red transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-brand-red transition-colors">Terms of Service</a>
</div>
</div>
</footer>
<script>
// Lucide Icons Initialization
lucide.createIcons();
// Reveal animations on scroll
const reveals = document.querySelectorAll('.reveal');
const revealOnScroll = () => {
const triggerBottom = window.innerHeight * 0.85;
reveals.forEach(el => {
const top = el.getBoundingClientRect().top;
if (top < triggerBottom) {
el.classList.add('active');
}
});
};
// Header scroll effect
const header = document.getElementById('header');
const handleHeader = () => {
if (window.scrollY > 100) {
header.classList.add('py-2', 'shadow-sm');
header.classList.remove('py-4');
} else {
header.classList.remove('py-2', 'shadow-sm');
header.classList.add('py-4');
}
};
window.addEventListener('scroll', () => {
revealOnScroll();
handleHeader();
});
// Initial check
window.addEventListener('load', () => {
revealOnScroll();
handleHeader();
});
// Smooth reveal for Hero on load
setTimeout(() => {
document.querySelector('.reveal').classList.add('active');
}, 300);
</script>
</body>
</html>↓Webサイト生成結果例（私の写真はManusで差し替えました。） https://x.com/i/status/2011365035487195390
なぜGemini Canvasなのか？ 最新モデル「Gemini 3」なら、非常にスピーディーにコードを生成してくれるため、確認と改善（PDCA）のサイクルを早く回せるからです。 いきなり重いAIエージェントを使うと生成速度が遅く、ストレスになります。Canvasのプレビュー画面で「文字を大きく」「色を変えて」などの微調整を済ませ、コードを完成させます。 🚩 STEP 3：コードを「AIエージェント」へ移植する デザインが確定したら、Gemini Canvas上のコード（HTML/CSS/JS）をすべてコピーします。 そして、サーバー機能と公開機能を持つ、以下の「AIエージェントツール」のいずれかにペーストします。 【推奨ツール】
**🔽 Manusで実行した際のデモ **Gemini Canvas が出力したコードをそのままManusにペーストし、「このコードを基にサイトを構築してください。」という指示でWebサイトを生成 https://youtu.be/5Ofda5mN410 🔽 **Manusで実画像を反映するデモ **画像を添付し、「ファーストビューとプロフィールの人物写真を添付画像に差し替えてください。」と入力。 https://youtu.be/OImY1fRf4xY 🚩 STEP 4：公開ボタンを押す エージェントツール上でプレビューを確認します。 必要であれば画像の差し替えなど（任意）を実行してください。 準備ができたら、画面上にある「公開（Publish）」ボタンを押します。 これだけで、ユニークURLが発行され、あなたのWebサイトが全世界に公開されます。 ドメインやページ階層に強いこだわりがなければ、サーバー契約もFTPも不要。このプロセスでWebサイト生成から公開まで完了します。
今回は「AIエージェントのサーバー」に頼る最短ルート（AIエージェント・ドリフト）を紹介しました。 Google CloudやCloudflare経由での公開も検討しましたが、環境構築のハードルが高いため、今回は割愛しました。 しかし、もしあなたが「AIエージェントのクレジット（課金）を節約したい」「独自ドメインで本格運用したい」と思うなら、次のステップとしてGitHubの習得をおすすめします。 GitHubさえ使えてしまえば、GitHub Pages、Cloudflare Pages、Vercelなど、無料で高性能なホスティング先の選択肢が一気に増えます。 「Gitは怖い」と思うかもしれませんが、今はCursorなどのAIエディタを使えば、「この変更をGitHubにアップして」とAIに聞くだけでコマンドを教えてくれます。思うほど難しくはありません。 まずはエージェントで「公開する楽しさ」を知り、慣れてきたらGitHubという大海原へ漕ぎ出す。 知識を得ることで選択肢を増やしていくのが、AI時代の正しい歩き方です。
「Nano Banana Pro」でサムネイルや広告を作り、「AIエージェント」でWebサイトを公開する。 この2つのツールによる二刀流（デュアル・ウィールド）ワークフローがあれば、もはや「技術がないから作れない」という言い訳は通用しません。