AIでホームページ作成｜写真が崩れない画像プレースホルダー術

2026年のAIホームページ作成ツールについて、本当のところをお伝えします。 デザインは驚くほど得意ですが、あなたの写真の扱いは驚くほど苦手です。

ChatGPT、Claude、Geminiにレストランのサイトを作ってほしいと頼めば、見事なレイアウトを返してくれます。ふさわしいセクション構成、美しい配色、レスポンシブなタイポグラフィ、動作するお問い合わせフォーム。何から何までそろっています。デザインの部分は、ほぼ解決済みです。

ところが、自分の画像を使おうとした途端、話がおかしくなります。しかも急速に。午後いっぱいかけて撮影した、本物の料理、本物の店構え、本物のスタッフの写真のことです。

誰も語らない、画像の問題

AIへのプロンプトに写真を貼り付けて、ウェブサイトに組み込むよう頼んだことがあれば、おそらくこんな結果を見たことがあるでしょう。

• 画像が歪みます。AIが写真のサイズを変えたり、切り抜いたり、引き伸ばしたりして、元の写真とは似ても似つかない見た目になります。
• 顔が崩れます。スタッフの写真が不気味な仕上がりで返ってきます。指が増えたり、顔立ちがゆがんだり、顔が融合したりします。
• 料理がおいしそうに見えません。きれいに盛り付けた料理が、メニューではなくホラー映画に出てきそうな何かに描き直されてしまいます。
• ロゴの細部が失われます。グラデーション、細い線、透明部分といった繊細なブランド要素が、平坦になったり、間違って描き直されたりします。
• 画質が落ちます。画像が「正しく見える」場合でも、より低い解像度で再エンコードされていて、最近のどの画面でもノイズが見えてしまいます。

これは小さな不便ではありません。レストラン、サロン、ベーカリーなど、ビジュアルのイメージ そのものが商品である事業では、AIに崩された画像を使うくらいなら、画像を使わないほうがましです。看板メニューのぼやけた写真は、品質にこだわっていないというメッセージをお客様に伝えてしまいます。

なぜAIは画像が苦手なのか

ウェブサイトのコード（HTML、CSS、JavaScript）を生成するAIモデルは、言語モデルです。テキストで学習しています。「この画像を入れて」と頼まれても、画像そのものを編集しているわけではありません。画像を参照するコードを生成しているのです。そして場合によっては、別のビジョンモデルを使って画像を言葉で説明し直したり、作り直そうとしたりします。

その結果は、伝言ゲームです。

1. あなたが、レストランの高品質な写真を渡す。
2. AIが、写真に「見えているもの」を説明する（テーブル、何枚かのお皿、温かい照明）。
3. その説明から新しい画像を生成する。もっと悪い場合は、再処理したbase64エンコード版を埋め込む。
4. 出てくるのは、なんとなく似ているけれど、根本的に別の画像です。もうあなたの実際の事業を表してはいません。

AIは構造づくりが見事です。けれど、忠実な再現のためには作られていません。生成したウェブサイトの中であなたの写真をそのまま忠実に再現させるのは、小説家に肖像画を描いてもらうようなものです。道具が間違っています。

賢いワークフロー：デザインが先、画像はあと

問題がわかれば、解決策は明らかです。 AIには得意なこと（デザイン）を任せ、画像は自分で扱う。

実際にうまくいくワークフローは次のとおりです。

ステップ1：プレースホルダー付きでウェブサイトを生成する

SiteDropのプロンプトクリエイターを使って、ウェブサイト用のプロンプトを作ります。画像の方針を選ぶステップでは、プレースホルダー画像を選びます。こうすると、AIは本物の写真を生成したり組み込もうとしたりせず、説明的なaltテキストを付けた、サイズの正しいすっきりした仮のボックスを使います。

このツールが生成するプロンプトには、次のような指示が入ります。

全体を通して、説明的なaltテキストを付けたプレースホルダー画像を使ってください。ヒーローセクションには「レストランの店内、温かな間接照明」というラベルのプレースホルダーを使ってください。メニューのギャラリーには、各料理の名前を付けたプレースホルダーを使ってください。

AIは、美しくデザインされたサイトを作ります。レイアウトは完璧で、どのデバイスでもレスポンシブに表示され、配色はあなたが選んだとおり。写真が入る場所には、グレーのプレースホルダーのボックスが置かれています。

ステップ2：SiteDropにアップロードする

AIが生成したHTMLファイル（またはZIP）を受け取って、 SiteDropにドラッグします。プレースホルダーのままでも、サイトは数秒で公開されます。これで、スマホで開いたり、友人に共有したりできる本物のURLが手に入り、画像に時間をかける前に、レイアウトが実際に動く様子を確認できます。

ステップ3：プレースホルダーを本物の写真に置き換える

SiteDropのダッシュボードを開きます。すべてのプレースホルダー画像が、それぞれの説明のラベル付きで一覧表示されます（例：「ヒーロー画像 — レストランの店内」「メニュー — マルゲリータピザ」）。プレースホルダーをクリックして、自分の写真をアップロードします。サイズの調整、圧縮、公開は、SiteDropが自動で行います。

元の画像は、AIの手を加えられずに、そのまま公開サイトに載ります。再エンコードも、歪みも、画質の低下もありません。あなたがアップロードした写真が、そのままお客様に見える写真です。

この方法のほうが優れている理由

プレースホルダーを先に使うワークフローは、単なる回避策ではありません。AIでウェブサイトを作る方法として、本当に優れたやり方です。

• スピード。画像の準備ができていなくても、デザインの整った公開サイトが10分以内に手に入ります。「写真をすべてそろえてから」と待ってから取りかかる必要は、もうありません。
• 品質。本物の写真が、撮影したままのフル解像度で表示されます。AIは写真の中を通すのではなく、写真のまわりにデザインします。
• 改善のしやすさ。画像はいつでも差し替えられます。季節のメニュー、新しいスタッフ、新しい店舗。ダッシュボードで画像を1枚更新すれば、公開サイトはすぐに更新されます。
• 役割分担。構造、レイアウト、文章、SEO、レスポンシブ対応はAIの担当。ビジュアルのイメージは、あなたにしか用意できないものとして、あなたの担当です。それぞれが、いちばん得意なことをします。
• 技術的なスキルは不要です。HTMLを開いて、画像タグを探して、ファイルパスを書き換えて、FTPで再アップロードして、キャッシュを消す必要はありません。クリックして、アップロードして、完了です。

実例：テイクアウト専門のレストラン

具体的な例で見てみましょう。マンチェスターでFlame & Spiceというテイクアウト店を営んでいて、ウェブサイトがほしいとします。

プレースホルダーのワークフローを使わない場合

1. 料理の写真をChatGPTに貼り付けて、ウェブサイトを作ってほしいと頼む。
2. AIが写真を再生成する。チキンティッカは、なんとなくオレンジ色のお皿を描いた油絵のようになってしまう。
3. 追加のプロンプトで画像を直そうとして、1時間かかる。
4. 歪んだ画像のままサイトを使うか、完全にあきらめる。

プレースホルダーのワークフローを使う場合

1. プロンプトクリエイターを使い、店名、メニュー、価格、色を入力して、「プレースホルダー画像」を選ぶ。
2. そのプロンプトをChatGPTに貼り付ける。ラベル付きのプレースホルダーを使った、すっきりしたプロらしいサイトが生成される。「ヒーロー — 店の外観」「チキンティッカマサラ」「ラムビリヤニ」など。
3. SiteDropにアップロードする。サイトは30秒で公開される。
4. ダッシュボードを開き、プレースホルダーを1つずつクリックして、自分の料理写真をアップロードする。完了。

所要時間は合計15分以内。サイトはAIがデザインしました。魂を吹き込んだのは、あなたです。

ストック写真ではだめなのか

プレースホルダーの代わりにストック写真を使えばいいのでは、と思うかもしれません。使うこともできます。ただ、ほとんどの事業にはおすすめしない理由があります。

ストック写真は、一般的なセクション（装飾的な背景や抽象的なパターンなど）には問題ありません。しかし、あなたの事業を表すもの、つまり料理、お店、スタッフについては、お客様にはわかってしまいます。カウンターの向こうで微笑む誰かのストック写真は、実際のカウンターの向こうに立つあなた自身の本物の写真ほどの信頼感を生みません。

プレースホルダーを使う方法なら、大切な場所では本物の画像を使うように自然に導かれます。しかも、ダッシュボードのおかげで、それがとても簡単にできます。

ウェブサイト用の写真をうまく撮るコツ

プロのカメラマンは必要ありません。最近のスマホは、驚くほどきれいに撮れます。いくつかコツをご紹介します。

• 自然光がすべてです。窓の近くか屋外で撮りましょう。頭上の蛍光灯は避けてください。料理は灰色っぽく、空間は無機質に見えてしまいます。
• 背景を片付けます。ごちゃごちゃしたものはフレームの外へ。美しい料理の後ろの散らかったカウンターは、写真を台無しにします。
• ヒーロー画像は横向きで。ほとんどのヒーローセクションは、幅が広く高さが低い形です。主要な写真は横向きで撮りましょう。
• メニューやギャラリーは正方形で。統一感が大切です。どの料理の写真もほぼ正方形にそろえると、グリッドが整って見えます。
• フィルターをかけすぎないこと。明るさとコントラストを少し上げるくらいなら問題ありません。Instagram風のフィルターは、本格的なウェブサイトでは古くさく見えてしまいます。

まとめ

AIは、ほとんどの小さな事業が手にできる中で最高のウェブサイトデザイナーです。きれいなコードを書き、レスポンシブなレイアウトを作り、SEOにも対応し、それを数分でやってのけます。けれど、あなたの写真を忠実に再現することはできません。そうでないふりをするのは、時間の無駄で、ブランドを傷つけます。

答えはAIを避けることではありません。AIには得意なことを任せ、画像は自分で扱うことです。

SiteDropなら、ワークフローはシンプルです。プレースホルダー付きで生成し、アップロードして公開し、ダッシュボードから本物の写真に差し替える。あなたのウェブサイトは、AIのデザインと、自分で撮った写真ならではの本物らしさの両方を手に入れます。いいとこ取りです。