AIを使ってらくらく個人サイト制作！

コードが書けなくても理想のWebサイトは作れる！AIを活用したサイト制作のコツとテクニック

はじめに

「理想のサイトのイメージはあるけれど、自分でコードを書く技術がない…」と諦めていませんか？

そんな方におすすめしたいのが、「AIにコードを出力してもらう」という方法です。

スライドギャラリーのあるWebページのスクリーンショット

スライドギャラリーを設置したトップページ

画像の上にDLボタンを配置した素材配布ページのスクリーンショット

画像の上にDLボタンを配置した素材配布ページ

こちらの画像は、私が実際に公開している個人サイトのスクリーンショットです。洗練されたおしゃれなデザインのサイトですが、実は9割以上をAIに作ってもらいました。

この記事では、このサイトを実際にどのように制作したのか、そして「理想通りのサイトをAIに作ってもらうためのちょっとしたコツ」をご紹介します！

AIに制作したいWebページのイメージを伝えよう！

AIにWebサイトのコードを書いてもらう際、一番大切なのは「具体的なイメージを伝えること」です。細かく希望を伝えるほど、理想通りのページが一瞬で完成します。

以下は、私がAI（Gemini）に提出した実際の指示文（プロンプト）です。

💬 実際に使用したプロンプト

Webサイトを制作し、コードを出力してください。Webサイトのイメージやデザインについての希望は以下の通りです。


【サイトの目的】
AI生成による二次創作イラストの展示、および画像素材の配布


【サイト名/管理人名】
Glis Studio / okojo


【全体的なデザインのイメージ】
「AIらしさ」をイメージした、近未来的でシャープな雰囲気。カラーリングは黒・青を多めに使用してください。ボタンやアイコンなどにメタリックな効果を入れてください。レスポンシブ対応にしてください。


【構成/レイアウトの希望】

  • 全体のレイアウト： 縦長スクロール形式ではなく、「ナビゲーションバー内にあるリンクを選択すると、そのセクションのみが表示される」という構成にしてください。
  • ヘッダー/ナビゲーションバー： サイト名（Glis Studio）と各セクションへのリンクを配置。スマホ閲覧時はハンバーガーメニューに切り替わるようにしてください。
  • ヒーローセクション（トップページ）： スライドギャラリーを設置し、「特に見せたいイラスト」3点を配置できるようにしてください。スライドは一定間隔（ゆっくり）で自動切り替えさせてください。
  • このサイトについて： 「AI生成イラストの展示および素材配布サイトであること」「二次創作であること」「プロンプト抽出には自作イラストを使用していること」を記述してください。
  • ギャラリー： 画像のサムネイルを並べて配置し、クリックするとモーダルで拡大表示できるようにしてください。縦長画像（2:3比率）の展示を前提とし、スマホ閲覧時は縦2列表示にしてください。
  • 利用規約： サイト内で配布している「ゲーム用イラスト素材」についての規約（詳細は後述）
  • 素材配布： キャラクターごとに項目を分け、手動操作のスライドギャラリー（3:5比率の縦長）で表示。スマホでも縦長を維持してください。

※以下、キャラ配置イメージや詳細な利用規約、管理人のプロフィール項目などを記述

【その他の希望】
上記の要望に対して「実現が難しい点」「デザイン面でおすすめできない点」「画像展示のより良い工夫」などがあれば、ぜひアドバイスや指摘も教えてください。

プロンプト作成のちょっとしたコツ＆体験談

AIはテキストだけでなく視覚的な指示も認識してくれるため、テキストでレイアウトを図形のように表現したり、手書きのラフ画像を添付したりしても理解してくれます。

💡 ここが驚きポイント！
実際に試して特に感動したのが、「指示していないのに、素材配布ページに自動でダウンロードボタンを設置してくれたこと」でした。
単にデザインの指示を出すだけでなく、「そのサイトやページを何の目的で使うのか」まで伝えておくと、AIが「なら、この機能もあった方が便利だな」と気を利かせて提案・実装してくれます！

細部のこだわりや調整もAIにおまかせ！

ベースを作った後は、気になるところを対話形式で修正していきます。実際に私が追加で行ったやり取りをご紹介します。

① 後から気づいた機能の追加やページの統合

『「HOME」タブに更新履歴を追加してください。また、「TERMS OF USE（利用規約）」は「ABOUT」タブ内に統合し、現在のABOUT文章の下に移動させてください』

実際に出来上がった画面を見ると、「あ、これも必要だった」「文章量が少ないから1ページにまとめよう」という点が見えてきます。後からの変更も一言伝えるだけでOKです。

② 表示の違和感を調整する

『ヒーローセクションのスライドギャラリーで、縦長画像を表示する際に「中央」ではなく「やや上寄り（キャラクターの顔が映りやすい位置）」を表示するように調整できますか？』

最初は画像の中央がトリミングされてキャラクターの顔が切れてしまっていたのですが、このように伝えることでCSSをスマートに修正してくれました。

③ コードの差し替えパーツを作ってもらう

『素材配布用のダウンロードボタンを「PNG用」「WebP用」の2つ並べたいです。現在のボタン横にもう一つ追加するための差し替え用コードを教えてください』

一部だけ変更したい時も、該当箇所のコードだけを出力してもらえるので修正がラクラクです。

④ デザインや仕様に迷った時は相談してみる！

『「GALLERY」内の画像をカテゴリ分けしたいです。「1つのタブ内で切り替える」のと「新しくタブを増やす」のでは、デザイン的にどちらがおすすめですか？』

『ネタバレやセンシティブな画像を「ALL」一覧には表示せず、該当カテゴリを選んだ時だけ表示させる構造は可能ですか？』

デザインに迷った時や、「こんな技術的に難しそうなことできるのかな？」と思うような仕様も、とりあえずAIに相談してみるのがおすすめです。メリット・デメリットを踏まえた最適な提案をしてくれます。

ここまで具体的に書かなくても大丈夫！

「こんなに長いプロンプトを書くのは大変そう…」と思った方もご安心ください。ここまで細かく指示しなくても、AIはおしゃれなWebページを作ってくれます。

たとえば、当サイトで配布しているテンプレート「KICK BACK」は、以下のようなシンプルな指示から生まれました。

💬 シンプルなプロンプト例

「KICK BACK」という楽曲をイメージしたWebページのHTML/CSS/JavaScriptコードを作成してください。


【デザインの方向性】

  • 雰囲気： 退廃的、疾走感
  • カラー： 赤をメイン、アクセントに黒。機械的で無機質なフォント。サイトタイトルは斜体で疾走感を出す。
  • 構成： 大きく表示したメイン画像の上にサイトタイトルを配置。
  • コンテンツ： MENU / UPLOAD（更新履歴） / GALLERY（イラスト展示） / ABOUT

【技術的条件】

  • ページ内スクロールは滑らかに動かす
  • GALLERYのサムネイルをクリックでモーダル拡大表示
  • レスポンシブ対応（スマホ・PC両対応）

これだけの指示でも、雰囲気をしっかり汲み取ったクオリティの高いページを出力してくれます！

【番外編】AIにスクリプトを作ってもらって作業効率アップ！

Webサイトのデザインだけでなく、サイト制作にまつわる「面倒な裏方作業」もAIに助けてもらっています。

特に重宝しているのが、画像処理用の「Python（パイソン）スクリプト」の作成です。

💡 ワンポイント解説
・Pythonとは？：初心者にも扱いやすいシンプルなプログラミング言語。
・バッチファイル（.bat）とは？：Windowsで複数の命令をまとめて一瞬で自動実行してくれるファイルのこと。

私が日々のサイト更新で頻繁に使っているのは、以下の2つの自動処理スクリプトです。

どちらも元のファイルを上書きしないよう「出力用フォルダ」に別保存される仕組みになっています。

使い方も超簡単で、画像の入ったフォルダを「バッチファイルのアイコン」にドラッグ＆ドロップするだけ！ これだけでフォルダ内の画像が一括処理されます。

サイト内に大量にある「サムネイル画像」や「ギャラリー用画像」を一瞬で最適なサイズや軽さに加工できるため、作業時間が大幅に短縮できました。

知識ゼロでも大丈夫！💡
実は私自身、プログラミングの知識はほぼゼロです。専門知識がなくても、AIに「こういう処理をするスクリプトと、簡単に動かせるバッチファイルを作って！」と頼むだけで、強力な便利ツールが手に入ります。

「難しそう…」と感じる方は無理に試す必要はありませんが、作業を少しでも効率化したい方はぜひ挑戦してみてください！

おわりに

ハードルが高く思えるWebサイト制作ですが、AI技術を活用すれば驚くほど手軽に、そして楽しく形にすることができます。

同じプロンプトを使っても、使用するAI（GeminiやChatGPTなど）によってデザインの個性が変わるのも面白いところです。ぜひあなたに合った「相棒AI」を見つけて、理想の個人サイトを作ってみてくださいね！