既存のHTMLページの画像をコードを書かずに差し替える方法

見出しも配色も決まり、レッスンの日程と料金も入れました。それでも、どこかテンプレートっぽく見えます。写真だけなら、別の教室のサイトに載っていても違和感がないからです。

HTMLテンプレートに自分の写真を入れるのは、公開前の仕上げとしてよくある作業です。AIで作ったランディングページや、デザイナーから受け取ったページでも同じことが言えます。構成はそのまま使えても、写真は今の商品やサービス、季節の内容に合わせたい。ページを開いたまま作業すれば、新しい写真を見出しや説明文と並べて判断できます。

架空の陶芸教室「Claywell」を例に、役割の違う2枚を差し替えます。トップの白黒の静物写真は、作業台の写真に。素材を紹介する欄では、食器がいくつも並ぶ写真を、陶器の鉢を1つ描いたイメージ画像に替えます。

手元にあるHTMLページで画像を差し替える

まず、HtmlDragのオンラインHTMLファイルエディターを開き、「HTMLアップロード」から既存のファイルを読み込みます。Claywellのファイルには元の写真、フォント、スタイルが含まれているので、レッスン紹介ページ全体を見ながら編集できます。

候補を選ぶ前に、ページ上で写真がどう使われているかを見ておきます。Claywellのファーストビューには、陶器の静物写真、黄色のレッスン案内、手びねりの手元写真が並びます。左の写真だけを替えれば、見出し、料金、右の写真とのバランスをその場で比べられます。

訪問者に見てほしいものから写真を選ぶ

陶芸教室も器のショップも似た写真を使いますが、訪問者が知りたいことは違います。完成品の写真からは器の仕上がりが伝わります。粘土や道具のある作業台なら、自分で作っている場面を想像できます。初めての人に「自分にもできそう」と感じてもらうには、後者のような写真が向いています。

ページを読み進めて素材の話に入る頃には、訪問者は器をもっと近くで見たくなります。「完璧な形なんてない」という見出しの横なら、複数の食器より、鉢が1つ写っているほうが、ゆがみのある縁や釉薬の質感を確かめやすくなります。トップでは教室で何をするかが分かり、本文では器の細部を確かめられます。

素材を選ぶときは、縦横比、被写体の周りの余白、実際の表示サイズで見える細部を一緒に考えます。横長の写真でも、狭い枠では肝心な部分が切れることがあります。反対に、余白を取った縦長の画像なら、横長の枠でも使える場合があります。

手持ちの写真を選ぶときも、素材の準備を頼むときも、条件を短く書いておくと迷いません。

初心者向けの陶芸ページです。トップには作業台の風景を、素材紹介には鉢が1つはっきり見える画像を使います。手元と鉢の縁の周りには、パソコンとスマートフォンでトリミングできる余白を取ってください。確定済みのレイアウトとレッスン情報を使い、紹介内容に合う画像を選びます。

差し替え前のClaywellには、トップに静物写真、素材紹介に食器を並べた写真がありました。それぞれの位置と周りの文章を見ると、次に必要な写真が見えてきます。

レイアウトを生かしてメイン写真を替える

新しい作業台の写真には、道具や粘土とともに、制作する場所の様子が写っています。右に残した手元のアップからは、手びねりの細かな動きが伝わります。2枚を並べることで、教室の雰囲気と手を動かす場面の両方が見えてきます。

HtmlDragで差し替えたい写真を右クリックし、「画像を置換...」を選びます。写真と案内カードが近いレイアウトでは、変更したい写真そのものが選ばれているかを確認します。

置換画面では、「デバイスからアップロード」で手元のファイルを選べます。公開済みの画像を使う場合は、「オンライン画像を使用」で画像URLを指定します。今回は、用意しておいた作業台の写真を端末からアップロードしました。

差し替えたら、トップの印象がどう変わったかを見ます。情報量の多い写真には目が行きますが、レッスンの料金や主なボタンもすぐに見つけたいところです。素材一覧のサムネイルだけでは分からないことが、元のページに置くと見えてきます。

この例では、質感のある作業台の写真が、すっきりした黄色の案内カードと対照をなします。トリミング後も何の場面かが分かります。自分のページでも、状況が伝わるか、見出しから次の行動へ自然に進めるかを確かめてみてください。

細部を見せたいときは被写体を絞る

詳細画像では、見てほしい特徴を1つ決めると構図を選びやすくなります。陶器なら縁の形や釉薬、表面の模様。別の商品なら留め具や仕上げ、ラベルかもしれません。先に見せたいものを決め、それが分かる距離で撮った画像を選びます。

Claywellで2枚目に使ったのは、あらかじめAIで作成した陶器の鉢のイメージ画像です。淡い釉薬と不ぞろいな輪郭が、素材紹介で触れている器の形とよく合います。

トップと同じ置換機能で差し替えます。元画像は縦長ですが、デスクトップ表示の枠は横長です。鉢の周りに余白があるため、横長に切り取っても縁は欠けません。

アップで見ると、鉢全体が隣の説明と一緒に確認できます。商品や素材の画像でも、説明文に出てくる特徴が実際に見えるかを基準にできます。大切な縁が切れる場合は、レイアウトを変える前に、引きで撮った素材や別のトリミングを試します。

差し替えた画像の端が切れる、ぼやける理由

元画像とページ上の枠の縦横比が違うと、枠を埋めるために画像の端が切れることがあります。たとえばCSSのobject-fit: coverは、縦横比を保ったまま枠いっぱいに表示し、はみ出す部分を切り取ります。

写真フォルダーでは全体が見えていたのに、Webページに載せると一部が見えないのはこのためです。実際の枠に置いて輪郭を確認し、大事なところが残る構図を選びます。無理に引き伸ばして収めると、見せたいものの形まで変わってしまいます。

パソコン向けのプレビューでは、普段の閲覧サイズで第一印象を確認できます。どんな教室か、写真をじっくり見なくても分かるでしょうか。写真と見出しの内容が合い、主なボタンも見つけやすいでしょうか。

素材紹介では、隣の文章を読みながら鉢の形や表面を確認できる大きさが必要です。写真ごとに実際の掲載箇所まで移動して見ると、ページ全体を縮小表示したときには気づきにくい問題も見つかります。

端が切れているのではなく、ぼやけているなら、元画像の品質を確認します。小さなサムネイルを拡大しても、細部は増えません。表示サイズに合う元画像を選んでWeb向けに書き出し、閲覧時と同じ大きさで見比べます。ページ上で小さく表示しただけでは、ダウンロードする画像の容量は変わりません。

差し替えを保存し、スマートフォン表示も見る

2枚とも周りの内容と合ったら、「バージョン保存」で変更を保存します。サイトに反映するためのHTMLが必要なら、書き出し画面の「編集後の HTML」から「HTML をダウンロード」または「HTML をコピー」を選べます。

Claywellでは2か所の変更をプロジェクトに保存しました。素材紹介はその状態から編集を再開できます。日程や商品、季節の写真を次に変更するときも、この版を使えます。

スマートフォンの幅でも別に確認します。画像の枠が狭くなったり、補助写真が表示されなくなったり、案内の位置が変わったりします。その中でも被写体が分かるかを見ます。Claywellのモバイル幅では、新しい作業台の写真と黄色の案内カードが、狭いスペースに並んでいます。

写真を替えて初めて、そばに短い説明が欲しくなることもあります。材質の説明を挿入したり、商品画像に詳細ページへのリンクを付けたりできます。コースの比較が必要なら、HtmlDragで表を挿入し、セルや行、列を編集できます。

周りを調整するときは、仕上がった要素をロックすると、うっかり動かすのを防ぎやすくなります。終了したキャンペーンの要素は削除できます。こうした小さな修正で、写真と今の案内をそろえられます。

更新したページを使う前に、次の点を確認します。

• 意図した写真が差し替わり、主な被写体が見える。
• パソコンでもスマートフォンでも、必要な細部を確認できる。
• Web向けに用意した画像が、実際の表示サイズでも鮮明に見える。
• キャプション、代替テキスト、出典表記が新しい画像と一致する。
• リンク付き画像から正しいページを開ける。
• プロジェクトの保存版と、公開に使うHTMLに変更が入っている。

写真の内容が変われば、代替テキストも見直します。Googleの画像検索ガイドは、ページの文脈に沿った役立つ代替テキストを推奨しています。検索キーワードを並べるより、何が写っているかを具体的に伝えたほうが役立ちます。

HTMLページの画像差し替えでよくある質問

AIで生成したHTMLページでも画像を替えられますか？

HTMLファイルがエディターで正常に開けば、差し替えられます。スタイルや画像が読み込まれたことを確認し、対象の画像を選びます。新しい画像が手元にあれば、そのまま使えるので、AIにもう一度画像の生成を頼む手間も省けます。

画像ファイルをアップロードするか、画像URLを使うか、どちらがよいですか？

使用が決まった画像ファイルが手元にあればアップロードします。継続してアクセスできる場所に画像がある場合は、画像URLも使えます。ギャラリーやログイン画面のURLしかない場合は、画像ファイルを直接開けるURLを確認してください。

縦長の画像を横長の枠に使えますか？

被写体の周りの余白によります。この鉢のように背景に余裕があれば、横長に切り取っても大事な部分を残せます。被写体が端まで写っている画像は、実際の枠に置き、スマートフォンの幅でも確認してください。

画像を差し替えると、キャプションやリンクも変わりますか？

画像、キャプション、出典表記、クリック先はそれぞれ確認します。差し替え後は周りの文章を読み、リンクがある場合は開いて、新しい画像に合った説明とリンク先になっているかを見ます。

差し替え用の画像はどのくらいのサイズが適切ですか？

必要な解像度は表示領域によって異なります。トップの大きな写真は、小さなカード画像より細部が必要です。実際に表示したときの画質と、現在のアップロード上限を目安にして、Webで扱いやすいファイルを用意します。

差し替えを保存すると、公開中のサイトも更新されますか？

保存先はHtmlDragのプロジェクトです。別の場所で運用しているサイトを更新するには、編集後のHTMLをそのサイトの公開手順で反映します。

作業台の写真があれば、教室で手を動かす場面を想像できます。鉢が1つ写った画像なら、細部にも目が向きます。使っているHTMLに仮の写真や古い画像が残っていたら、ビジュアルHTMLエディターでファイルを開き、それぞれの写真を、元の位置に合う画像に差し替えてみてください。