AI は Web デザイナーの相棒か？Gemini と作り上げたサイト制作の一部始終
「ほんの 1 年ほど前、私が AI に抱いた感想は『検索は賢いが、画像生成は運次第。使いどころは限定的だな』というものでした。
しかし、その後の AI の進化は凄まじく、あれよあれよという間に情報収集から動画制作まで、あらゆる分野をカバーし始めたのです。
最先端の AI は電話応対までこなすと聞き、私の興味は最高潮に達しました。『ならば、Web サイト制作では一体どこまでできるのか？』この探求心が、今回のプロジェクトの始まりです。」
結論：AI は Web 制作の強力なパートナーになり得る
結論から言うと、AI は Web 制作において非常に強力なパートナーになり得ます。
そして、その実力は「プロの仕事として通用するのか？」という問いにも、十分応えられるレベルにあるというのが私の見解です。
事実、この検証で作り上げたサイトは、自信を持って「売り物になる」と言える品質に仕上がりました。
ただし、AI は「コードを自動で書いてくれる魔法の杖」ではありません。
今回、私は VSCode の拡張機能「Gemini Code Assist」を使い、普段通り手打ちでの制作に近い形で作業を進めました。
その中で痛感したのは、AI にも得意・不得意があり、場面に応じて複数のモデルを使い分ける必要があるということです。
この記事では、「無料でどこまでできるか」というテーマを掲げつつ、デザイナーが AI をどう使いこなし、プロ品質のサイトを制作していくか、そのリアルな過程を報告します。
なぜ AI がパートナーになり得るのか？
Web サイト制作、特にフルスクラッチでの開発は、時に孤独な作業です。
従来、私は実装したい機能があれば、まず情報を探し、試してみて、失敗したら再検討する…というサイクルを一人で繰り返していました。
このプロセスは知識が身につく一方で、行き詰まった時にはネガティブな気持ちになることも少なくありません。
AI という相棒の存在は、この環境を大きく変えてくれました。
AI の得意なこと：ポジティブで疲れ知らずのメンター
AI をパートナーにして最も良かった点は、その圧倒的なポジティブさです。
私がアイデアを投げかけると「非常に良いアイデアです」「その着眼点は素晴らしい」と常に前向きな言葉を返してくれます。
このやり取りは、一人で作業していた時の孤独感や行き詰まり感を和らげる、大きな精神的支えとなりました。
また、疲れ知らずで、何時間でもこちらの思考に付き合ってくれる点も大きな魅力です。一部の AI モデルでは対話回数に制限がありますが、Gemini は非常に寛容で、心ゆくまで壁打ち相手を務めてくれました。
AI の不得意なこと：プロの「違和感」を察知できない
一方で、AI は万能ではありません。特にデザインの細部において、プロの目から見ると「違和感」のある部分をそのまま実装してしまう傾向があります。
例えば、レスポンシブ対応。AI はスマホやタブレットのレイアウトを自動で生成してくれますが、細かな文字の見やすさや、要素の微妙な位置ズレまでは気が付きません。PC 画面で見た時には気づかないような、枠線の太さのアンバランスなども同様です。
AI は自身の生成したコードを「正解」だと思っているため、こちらが「穴」や「クセ」を見つけ出し、「ここをこうして」と具体的に指示をしない限り、その間違いに自ら気づくことはありません。
この「品質管理」こそ、デザイナーが主導権を握るべき最も重要な部分だと感じました。
実録：Gemini と進めた Web サイト制作の具体的なプロセス
AI を用いた Web ページ制作のアプローチは多岐にわたります。
例えば、AI が得意とするのは、膨大なデータから「よくあるカフェデザイン」のように、構図や必要なセクション、それらしいタイトルや文章を生成するパターンです。
また、NotebookLM のように、関連するデジタルデータを与えて既存の情報を組み立てていく方法もあります。
しかし、今回私が試みたのは、ユーザー（私）と AI が納得できるまで「壁打ち」を繰り返しながら作り上げていく方法です。このアプローチは、従来のフルスクラッチでの制作と比べると、効率は大きく変わらないと感じました。特に、お客様との共同作業となると、さらに時間調整が必要となり、効率は低下するでしょう。
今回は自身のサイト制作であり、私と AI とのやり取りであるため、外部との調整がない分スムーズに進められましたが、試してみたいことが次々と出てきた結果、予想以上に時間を要しました。
今回のサイト更新のプロセスは、特にナビゲーション部分の欲しい機能をあらかじめ Markdown 形式に書き出し、それが希望通りに生成されるかのテストが主な目的でした。具体的には、上部固定のナビゲーションで、ロゴ、階層化されたメニュー、レスポンシブ対応（スマホ・タブレット完全対応）、ツールチップによるガイド機能、そしてライト・ダークモードの切り替え機能の実現を試みました。また、下部には簡単な著作権表示を設け、コンテンツエリアではヒーローエリアと多段組レイアウトのテストとして、1〜4 までの作成テストを行いました。
この試行錯誤こそが、AI との新しい協業の形を探る上で不可欠なプロセスだと考えています。
フェーズ 1：サイトの「受け皿」構築とナビゲーション設計
このフェーズで最初に行ったのは、いきなり AI との対話を開始することではありませんでした。
Web 制作者としてコンテンツの UI を何度も手掛けてきた経験から、欲しい機能やレイアウトを具体的に言語化できたため、まずはエディターを使って、希望する UI やレイアウトを Markdown 形式で詳細に書き出していきました。
これは、私のサイトの「AI ガイド・STEP4」でいうところの「目的を明確にする」ステップに当たります。同時に、この詳細な Markdown を Gemini がどこまで正確に理解し、反映できるかという、AI の理解度を測るテストの側面も持ち合わせていました。
この部分は、Gemini が比較的スムーズにコードを生成してくれました。特にナビゲーション部分は、ほぼ期待通りの動作で、レイアウトに関しても 1 段組から 4 段組までの等分割レイアウトは容易に作成できたようです。フッターもそつなく生成されたため、この初期の成功を受けて、さらに手を加えてみようという意欲が湧きました。
具体的には、英語のナビゲーションに日本語のガイドを付けるため、ツールチップを実装しました。これは AI にとっても難易度が低いタスクだったようで、比較的スムーズにコードが生成されました。ただし、ツールチップの表示位置が文字に重なるといった視覚的な判断は AI には難しいため、表示位置の微調整については Gemini とのやり取りを重ねて調整していきました。
また、サイトのライトモードとダークモードの切り替え機能も、数回のやり取りと動作確認を経て、比較的簡単に実装できました。コンテンツのレイアウトに関しては、バランス調整やマージン、パディング、文字の中央揃え・左揃えといった細かな調整が必要でしたが、これらも Gemini との対話を通じて進めていきました。
このフェーズを通じて、Gemini は Web サイトの基本的な骨格と、ナビゲーションやフッターといった共通パーツの構築において、非常に強力なアシスタントとなることが確認できました。特に、明確な指示があれば、期待通りのコードを迅速に生成する能力は、開発の初期段階における効率を大きく向上させると感じました。
フェーズ 2：さらなるコンテンツの追加と調整
「受け皿」となるサイトの骨格ができたところで、次のフェーズでは、中のコンテンツに合わせたレイアウトの生成に取り組みました。一般的なフォームページなどももちろん作成しますが、このフェーズでは特にブログとギャラリーページの作成です。この時、全く別のレイアウトを持つ「AI Service Guide」ページも同時進行で制作していましたが、そちらについては後述します。
特にブログについては、私にとって新しい試みでした。これまでの Web 制作では、お客様の更新頻度に応じて、外部ブログへのリンクを張るか、CMS を導入するか、あるいは業界特化型のツールを利用することがほとんどでした。CMS はプラグインの脆弱性や継続的なサポートが必須となるため、別の道を模索していたところでした。
そこで、最近注目を集めているヘッドレス CMS を使って、記事を Web ページに埋め込む方法を模索することにしました。ヘッドレス CMS も多種多様ですが、AI が勧めてきた海外製のものではなく、無料版でも十分に機能することを確認できた日本製の microCMS を選定しました。実装の目処が立ったため、いよいよ AI との本格的な壁打ちを開始です。
せっかく AI を使うのですから、ブログ記事の執筆にも協力してもらいたいと考え、今まさにこの記事を書いているように、`blog000.md` というテンプレートづくりから始めました。ブログとしての体裁に必要な「タイトル」「サブタイトル」「カテゴリ」「アイキャッチ」「タグ」といった項目をフォーマットとして定義し、さらにその下には、この「壁打ち」の記録を残すための中見出しと本文の書き出しエリアを作成しました。
ここまでは想定内でしたが、問題は VSCode で作成した Markdown を microCMS へ送り、ヘッドレス CMS 側で HTML に変換して完結するか、という点でした。ここではかなり難航しました。正しく読み込んでもらえるまでが第一段階、その次は正しく表示するかが第二段階です。アップロード用の JavaScript は正しく書けたと思ったのですが、エラーで止まってしまう状況が続きました。
何回かトライ・アンド・エラーを繰り返した後判明したのは、microCMS の Free 版だと下書き状態では送信エラーとなるという制約でした。これは有料版へと切り替えれば解決できると分かりましたので、次のステップへ進むことにしました。また、アイキャッチ画像は記事をアップロードする前に先にアップロードしていても認識してくれないため、記事をアップロードしてから microCMS 上での作業で行くことにしました。アップロード後の整形はまだうまく行っていない部分もありますが、今、このようにブログ記事を AI という相棒と作り上げることができるのは、思考をクリアにする意味でも十分意味のあることでした。
一方、ギャラリーページについては、これまで試行錯誤して出力してきた画像生成 AI の作品を効果的に表示するため、全く別のレイアウトを構築する必要がありました。フルスクラッチで作業していた頃は、様々なライトボックスやスライドショーを導入し、画像をダウンロードしてそれぞれのフォルダに入れ、それに対応するコードを手書きするという手間のかかる作業を行っていました。
今回、Gemini が提案してくれたのは、画像サイズによらずメイソンリーレイアウト（タイル状）で並べて表示するというものでした。これは、従来の煩雑な作業を簡略化し、効率的に画像を管理・表示できる可能性を示唆していました。
ギャラリーページの CSS レイアウト機能がうまく働かず、少しつまづきましたが、何回かトライ・アンド・エラーを繰り返すことで、最終的にはこちらの期待以上のものが出来上がったと思います。
このフェーズでは、ブログ記事のコンテンツ管理にヘッドレス CMS を導入し、その連携における課題と解決策を探りました。また、ギャラリーページでは AI からの新しいレイアウト提案を取り入れ、視覚的な表現の可能性を広げることができました。AI との壁打ちを通じて、技術的な課題を乗り越え、より洗練されたコンテンツ表示を実現する手応えを感じたフェーズでした。
フェーズ 3：AI Service Guide の制作
このプロジェクトでは、メインのブログやギャラリーページと同時進行で、全く別のコンテンツである「AI Service Guide」の制作も進めることができました。これも AI を活用する大きな利点と言えるでしょう。私自身、多種多様な大規模言語モデル（LLM）がそれこそ雨後の筍のごとく登場している中で、その情報を整理したいという強い思いがありました。
この AI Service Guide は、アルファベット順にそれぞれのサービスや LLM を並べ、それぞれの機能や特徴を一覧で確認できるようなページを目指しました。
現状でも 100 近く、まだ入力待ちのものを含めるともっと多くの LLM が存在します。これだけの情報をまとめるのには AI は最適だと考えたのですが、ここで思わぬ壁にぶつかりました。VSCode で利用しているアシスト機能はコード生成に特化している分、情報収集においてはハルシネーション（AI が事実に基づかない情報を生成すること）が頻繁に発生したのです。
結果として、私は 3 ～ 4 つの異なる LLM を使って情報を集め、それぞれを照らし合わせるという作業を行うことになりました。LLM の中には、後発のもので開発元や国籍があやふやで、情報として収集できないものもあり、さらに難易度は上がりました。特に中国製の LLM が躍進する中、ユーザーの信用度を上げるためかシンガポールに拠点を移し、立ち上げているところも出てきていると感じています。AI を使う上で、ハルシネーションはつきまとう問題ではありますが、どこまで情報を確認し、精査するかは、使う側の責任でもあると痛感しました。
このフェーズでは、AI がコード生成においては強力なアシスタントである一方で、事実に基づいた情報収集においては限界があることを痛感しました。複数の AI を使い分け、最終的には人間が情報の真偽を判断し、責任を持つことの重要性を再認識する機会となりました。
まとめ：デザイナーが AI と協業するために大切なこと
AI を Web サイト制作の相棒として活用する中で、無料の AI モデルでも多くのことが実現できる可能性と、同時にその限界の両方を感じました。特に、企画からコーディング、記事執筆に至るまで、AI と協力して作業を進めることができました。
無料の AI モデルは、初学者ユーザーにとって非常に有望な相棒となり得ます。特に Gemini は、対話回数の制限が比較的緩やかであり、壁打ち相手として心ゆくまで付き合ってくれる点は大きな魅力です。
しかし、AI は万能ではありません。各モデルには得意不得手があり、情報収集におけるハルシネーション（AI が事実に基づかない情報を生成すること）や、デザインの細部における「違和感」の指摘など、人間による最終的な判断と品質管理が不可欠です。また、反応の遅延、処理の停止、意図しない挙動（先走り）といった改善点も散見されました。
有料の AI モデルでは、これらの課題が軽減され、より高度な機能や安定性が期待できるかもしれません。しかし、すべてのモデルを有料契約することは現実的ではなく、各モデルの特徴やクセを理解し、目的に応じて使い分けることが重要だと感じています。
AI の進化は目覚ましく、日々新しい可能性が生まれています。無料の範囲でこれだけの協力が得られることは、AI 活用の第一歩として非常に価値があります。今後は、有料プランの検討も含め、様々な AI モデルを試しながら、それぞれの特性を見極め、より効果的な協業の形を追求していきたいと考えています。