ホームページの画像ファイル名の付け方｜IMG_1234のままでいい?

お店や会社のホームページに、ご自身で写真を追加されている方は多いと思います。スマートフォンやカメラから取り込んだ写真は、たいてい「IMG_1234.jpg」や「DSC00987.jpg」といった名前のままです。そのままアップロードしていて、何か損をしているのではないか——そう気になって検索された方もいらっしゃるかもしれません。

先に結論からお伝えします。IMG_1234.jpgのままでも、ホームページが壊れることはありませんし、ページが検索から消えることもありません。これまで追加してきた写真を、あわてて付け直す必要もありません。ただ、これから足す写真の名前を少しだけ分かる言葉にしておくと、検索から写真経由で見つけてもらえる可能性が生まれ、何より後から自分で探すのがぐっと楽になります。この記事では、その付け方のコツと、日本語・スペース・大文字といった迷いやすい点、そして代替テキストとの役割の違いまで、順にご説明します。

IMG_1234.jpgのままでも、悪いことは起きません

最初にはっきりお伝えします。ホームページに載せた写真のファイル名が「IMG_1234.jpg」のような英数字の羅列でも、悪いことは何も起きません。ページはきちんと表示されますし、検索に載らなくなることもありません。訪れた方の見え方もまったく同じです。ファイル名を直さなかったせいで検索の順位が下がった、という話は心配しなくて大丈夫です。

そして、これまでに載せた写真を全部さかのぼって付け直す必要もありません。何百枚もある写真を一枚ずつ名前を変えて、差し替えて……という作業は、手間のわりに得られるものが小さい作業です。この記事でお伝えしたいのは「これから足す写真から、気が向いたときに少しずつ」という程度の温度感です。

そもそも、なぜ勝手に連番がつくのか

カメラやスマートフォンで撮った写真に自動で名前がつくのは、機械の側の都合です。代表的なものに次のような決まりがあります。

• IMG_0001.jpg…IMGは「image（画像）」の略。iPhoneや多くのデジタルカメラで使われます
• DSC_0001.jpg…DSCは「デジタルスチルカメラ」の略。一眼レフなどでよく見かけます
• 20240115_103045.jpg…Android端末などで、撮影した日付と時刻がそのまま名前になるもの
• スクリーンショット 2024-01-15 10.30.45.png…パソコンの画面を撮ったとき

どれも「後から見分けがつくように、とりあえず重複しない名前をつけておく」という仕組みです。撮った人が何を撮ったかまで機械は知りませんから、こうなるのは当たり前のことで、そのまま載せてしまうのも無理もない話です。

ファイル名は「写真につけた荷札」のようなもの

では、ファイル名には何の意味もないのかというと、そうではありません。たとえるなら、荷物につける荷札のようなものです。中身が何かは箱を開ければ分かりますが、荷札に「書類」「食器」と書いてあれば、開けなくても見当がつきます。

検索エンジンは年々、写真そのものを解析して「これは店の外観らしい」「これは料理らしい」と見当をつけられるようになっています。ただ、それが100％正確とは限りません。ファイル名は、その見当を裏付ける手がかりの一つとして使われます。あくまで補助情報であり、決め手ではないという位置づけです。

この記事での前提

ですので、この先を読んでいただくときは、次の前提を置いてください。

1. ファイル名を直すのは、順位を動かすための作業ではなく、写真を見つけてもらいやすくし、自分でも管理しやすくするための作業
2. 過去分の一括修正は不要。これから追加する写真だけでよい
3. 完璧な命名規則を決めてから始める必要はない。今日の一枚から、分かる名前をつけるだけでよい

検索に関わる要素はたくさんあり、ファイル名はそのうちのごく小さな一つです。もし今、問い合わせが思うように来ていないとすれば、原因はもっと別のところにあることのほうが多いでしょう。たとえばスマホでの表示崩れのように、訪れた方が直接困る部分のほうが優先度は高くなります。そのうえで、手が空いたときにファイル名も整えておくと、後から自分が写真を探すときに助かる——その程度の気持ちで読み進めていただければ十分です。

分かる名前にしておくと、こんな利点がある

前の章でお伝えしたとおり、IMG_1234.jpgのままでも困ったことは起きません。そのうえで、名前を分かるようにしておくと得られる利点が二つあります。正直に比重をお伝えすると、大きいのは「後から自分が探しやすい」ほうで、検索での効果は副次的なものです。順番にご説明します。

1. 検索での手がかりが一つ増える

検索エンジンは、写真そのものを人間と同じように見ているわけではありません。「この写真には何が写っているのか」を、いくつかの材料から推測しています。その材料というのが、写真の周りに書かれている文章、見出し、代替テキスト（画像の内容を説明する文字情報）、そしてファイル名です。

つまりファイル名が「gaiheki-nurikae-before.jpg（外壁塗り替え・施工前）」のように内容を表していれば、推測の材料が一つ増える、ということです。逆にIMG_1234.jpgでは、その一つぶんが空白になります。

ただし、ここは控えめに受け取ってください。ファイル名を直したから画像検索に出るようになる、順位が上がる、と言い切れるものではありません。写真の内容を伝える材料のなかでは、周囲の文章や代替テキストのほうがずっと重く見られます。ファイル名は「ついでに整えておくと材料が増える」程度の位置づけです。それでも、どうせ付ける名前ですから、分かる名前にしておいて損はない、というくらいの気持ちがちょうどよいと思います。

2. 数か月後、数年後の自分が助かる

こちらが本命です。ホームページの管理画面には、アップロードした画像が一覧で並ぶ場所があります。WordPressなら「メディア」→「ライブラリ」です。ここには検索窓があり、ファイル名の文字で絞り込めます。

「外壁」と打てば外壁の写真だけが並ぶ。「2024-06」と打てばその月に撮った写真が出てくる。これが、名前を付けておいたことの一番分かりやすい見返りです。IMG_4821とIMG_4822とIMG_4825が並んだ画面から、目当ての一枚をサムネイル（小さな見本画像）だけで探す作業と比べてみてください。

具体的に助かる場面を挙げます。

• 写真を差し替えるとき：店舗の外観が変わった、スタッフが入れ替わった。同じ種類の古い写真をまとめて見つけたいときに、名前で一発で絞り込めます。
• 同じ写真を別のページでも使うとき：以前どこかに載せたはずの写真を、再アップロードせずに使い回せます。同じ写真が何枚も重複して溜まるのも防げます。
• 人に伝えるとき：スタッフや制作会社に「トップページの真ん中あたりの、あの写真」と説明する代わりに、「shop-gaikan-02.jpg を差し替えてください」と一言で済みます。やりとりの往復が減ります。

もう一つ、小さな話ですが触れておきます。通信の調子などで写真がうまく読み込めなかったとき、その場所にファイル名や代替テキスト由来の文字が残って表示される場合があります。そこに意味のある言葉が出ていれば、見ている方に「ここには何の写真があるはずだったのか」が伝わります。頻繁に起きることではありませんが、整えておくと静かに効いてくる部分です。

こうした細かい整えは、一つひとつは地味です。ただ、ページを増やしていくほど効いてきます。施工事例を何件も載せていくようなページ構成なら、なおさら最初にルールを決めておく価値があります。

実際の付け方｜迷わない4つのルール

ここからは具体的な付け方です。難しい決まりはなく、覚えることは4つだけ。この4つを守っておけば、どんな写真でも迷わず名前が決まります。

1. 半角の英小文字を使う

「shop」「menu」のように、半角のアルファベットを小文字で使います。大文字でも表示はされますが、サーバーによって大文字と小文字を別物として扱う場合があり、後々の行き違いの元になります。最初から小文字でそろえておくのが一番安全です。

2. 単語の区切りはハイフン（-）

複数の単語をつなぐときは、半角のハイフンでつなぎます。「shop-entrance」のような形です。スペース（空白）は避けてください。アンダーバー（_）でも大きな問題はありませんが、ハイフンのほうが一般的で、見た目にも区切りが分かりやすくなります。

3. 内容が思い出せる2〜4語程度にする

長すぎる名前は、かえって読みにくくなります。「店の入口」「ランチのオムライス」のように、後から自分が見て思い出せる範囲で十分です。逆に、検索されたい言葉を詰め込んだ「seo-taisaku-tokyo-anka-saiyasu.jpg」のような名前は、不自然なうえに人が読んでも意味が取りづらく、おすすめできません。

4. 同じ種類の写真は接頭辞をそろえる

店舗写真は「shop-」、料理は「menu-」、スタッフは「staff-」、施工事例は「works-」というように、先頭をそろえておくと、ファイルを名前順に並べたときに種類ごとにまとまります。後から探すときの手間がかなり変わってきます。

良い例と、惜しい例

惜しい例	こうすると分かりやすい	理由
IMG_1234.jpg	shop-entrance-1.jpg	何の写真か名前から分かる
スクリーンショット 2024-05-01.png	price-table.png	日本語とスペースを避けられる
aaa.jpg	omelet-rice-lunch.jpg	後から探すときに見つけやすい
seo-taisaku-tokyo-anka-saiyasu.jpg	service-price.jpg	言葉の詰め込みは不自然になる

連番や日付の付け方

同じ場所の写真が何枚かあるときは、末尾に「-01」「-02」と連番を付けます。「shop-entrance-01.jpg」という形です。季節ごとに差し替える写真なら「menu-lunch-2024-05.jpg」のように年月を入れておくと、いつの写真かが一目で分かります。

なお、同じ名前のファイルを重ねてアップロードすると、多くの場合は自動で末尾に「-1」「-2」と数字が付きます。悪いことではありませんが、知らないうちに似た名前が増えていくので、差し替えのつもりなら最初から別の名前にしておくと混乱しません。

作業の流れは「名前を変えてからアップロード」

一番早いのは、パソコンの中で名前を変えてから、ホームページにアップロードする流れです。

1. 撮った写真をパソコンのフォルダにまとめる
2. ファイルを右クリックして「名前の変更」を選ぶ
3. 上のルールで名前を付ける（拡張子の .jpg や .png は消さない）
4. その状態でホームページの管理画面からアップロードする

反対に、すでにページに使っている画像の名前を後から変えるのは、基本的にやらないほうが無難です。画像の置き場所を示す住所が変わってしまうため、ページ上で写真が表示されなくなることがあります。過去の分は無理に直さず、これから追加する一枚から始めれば十分です。

画像ファイル名の4つのルール

• 半角英小文字大文字を混ぜず小文字でそろえておく
• 区切りはハイフンスペースを避け半角ハイフンでつなぐ
• 2〜4語程度にする後から自分が見て内容を思い出せる長さ
• 接頭辞をそろえるshop-など種類ごとに先頭を統一する

日本語ファイル名・スペース・大文字はどう扱う

ファイル名を考えるときに、多くの方がつまずくのがこの3点です。どれも「絶対にダメ」というものではなく、環境によっては問題なく表示されます。ただ、あとから困る場面が出てくることがあるので、これから付ける分だけ気をつけておく、という受け止め方で十分です。

書き方	起きやすいこと	おすすめ
日本語 （店舗外観.jpg）	表示自体はできることが多い。ただしURLに変換されると「%E5%BA%97…」のような長い文字列になり、メールやSNSに貼ったときにリンクが崩れたり、環境によって文字化け・不具合が起きることがある	英語の小文字で書く（shop-gaikan.jpg）
スペース （shop photo.jpg）	URL上で「%20」に置き換わる。リンクをコピーしたときに、スペースのところで途中で切れて見えることがある	区切りはハイフンに（shop-photo.jpg）
大文字 （Shop-Photo.JPG）	サーバーによっては大文字と小文字を別のファイルとして扱う。引っ越しや設定変更のときに「画像が表示されない」原因になりうる	拡張子まで含めてすべて小文字に

アンダースコアと記号、名前の長さ

アンダースコア（_）も問題なく使えます。ただ、画面上で下線と重なって見えにくいことがあるので、区切り記号としてはハイフンのほうが読みやすいでしょう。どちらかに決めて、サイト全体でそろえておくと迷いません。

• 避けたほうがよいもの：＃、％、＆、？、＋などの記号、絵文字、全角の英数字
• 長さ：単語3〜4つ、30文字前後まで。「店名-サービス名-撮影場所-2024年春-その2」のように詰め込むと、かえって何の写真か分かりにくくなります
• 連番：同じ種類の写真が並ぶときは、末尾に「-01」「-02」と付けると整理しやすくなります

拡張子（.jpg・.png・.webp）の選び方

ファイル名の最後に付く「.jpg」などの部分を拡張子といい、画像の形式を表します。ざっくり次のように覚えておけば十分です。

• .jpg：人や風景、店内などの写真向き。色数の多い画像をほどよい容量におさめられます
• .png：ロゴ、図解、文字入りの画像向き。背景を透明にできます
• .webp：比較的新しい形式で、同じ見た目でも容量を小さくしやすいもの。ページの表示を軽くしたいときの選択肢です

なお、拡張子は名前の一部を書き換えるだけでは形式そのものは変わりません。.pngの写真を手で「.jpg」と打ち直すと、表示できなくなることがあります。形式を変えたいときは、画像編集ソフトやスマホのアプリで「書き出し」「変換」を使ってください。

すでに上げてある写真は、そのままで大丈夫です

ここまで読んで「うちは全部日本語の名前だ」と気になった方もいるかもしれません。でも、今あるページが問題なく表示できているなら、無理に直す必要はありません。公開済みの画像のファイル名を変えると、そのページだけでなく、別の記事に貼った同じ画像まで表示されなくなることがあります。手間のわりに起きることが地味で、崩れたときの修正のほうが大変です。

直すとしたら、ページそのものを作り直すときや、写真を差し替えるときのついでで十分。日々の更新でスマホでの表示崩れが起きていないかを見ておくほうが、よほど実りがあります。これから追加する一枚から、小文字・ハイフン・短めの名前。それだけ覚えておけば困りません。

ファイル名と代替テキスト、役割はどう違う

画像まわりでいちばん混同されやすいのが、ファイル名と代替テキスト（altテキスト）です。名前が似ているわけでもないのに混ざってしまうのは、どちらも「画像に言葉を添えるもの」だからです。役割はまったく別なので、ここで一度整理しておきます。

ひとことで言うと、ファイル名は機械と自分に向けた整理用の荷札、代替テキストは人に向けた説明文です。代替テキストは、通信の不調などで写真が表示できないときに代わりに出る文章であり、目の見えない方が読み上げソフトで聞く文章でもあります。つまり読む相手が生身の人なので、日本語の自然な文で書きます。

二つの違いを項目ごとに

• 書く場所：ファイル名は写真そのものの名前（パソコン上で付ける）／代替テキストはホームページの管理画面で後から入力する欄
• 使う言語：ファイル名は半角英数字とハイフンが無難／代替テキストは日本語でそのまま
• 主な目的：ファイル名は整理と、検索エンジンが画像の中身を推測する手がかり／代替テキストは画像が見えない人・見えない状況でも内容が伝わるようにすること
• 読む相手：ファイル名は検索エンジンと自分／代替テキストは訪問者と読み上げソフト、そして検索エンジン
• 長さの目安：ファイル名は30文字前後まで／代替テキストは20〜40文字程度の一文
• 空欄でもよいか：ファイル名は必ず何かしら付いている（空にはできない）／代替テキストは装飾だけの飾り画像なら空のままで構わない
• 入れ忘れたときの影響：ファイル名がIMG_1234のままでも表示や閲覧に支障はない／代替テキストが空だと、読み上げソフトの利用者には何の画像か伝わらない

ワードプレスでの入力場所

1. 投稿や固定ページの編集画面で、入れたい画像をクリックして選びます。
2. 画面の右側に設定パネルが開き、その中に「代替テキスト」という入力欄があります。
3. そこへ日本語で一文書いて、ページを更新すれば完了です。
4. メディアライブラリから画像を開いた場合も、同じ名前の欄が右側に並んでいます。

代替テキストの書き方のコツ

• 見たままを素直に書く。「木製カウンターのある店内」「施工後の玄関アプローチ」で十分です。
• 検索されたい言葉を詰め込まない。地域名やサービス名を羅列すると、読み上げで聞いたときに意味の通らない文章になります。
• 「〜の写真」「〜の画像」と書き添える必要は基本的にありません。画像であることは機械側が分かっています。
• 区切り線やアイコンなど、内容に関係のない飾りは空欄のままが正しい扱いです。

なお同じ設定パネルには「タイトル」「キャプション」「説明」という欄も並んでいます。キャプションは画像の下に実際に表示される文章、タイトルは管理上の呼び名で、どちらも代替テキストの代わりにはなりません。見える位置に説明を出したいときだけキャプションを使う、と覚えておけば迷いません。

両方そろっていれば丁寧ですが、どちらか一つを先にと言われたら代替テキストです。ファイル名は自分の整理が楽になる話ですが、代替テキストは実際にページを見ている人に届く話だからです。写真を追加するときは、代替テキストを一文、ファイル名は余裕があれば。この順番で十分です。

ファイル名と代替テキストの違い

ファイル名

• 機械や自分に向けた整理用の荷札
• 半角英小文字とハイフンで記述
• アップロード前にパソコン上で設定

→

代替テキスト

• 訪問者や読み上げソフト向けの説明文
• 自然な日本語の一文で記述
• アップロード後に管理画面から入力

まとめ｜ファイル名は「一要素」、焦らず今日の一枚から

ここまで、画像のファイル名の付け方を見てきました。最後に、いちばん大事なところをもう一度はっきり書いておきます。IMG_1234.jpg のままでも、ページが壊れたり検索から外されたりすることはありません。カメラやスマホが自動でつける名前は、世の中のホームページに無数にあります。これまでのやり方が間違っていたわけではないので、過去の写真を一枚ずつ直しに戻る必要もありません。

ファイル名はあくまで判断材料の一つ

検索する側のしくみから見ると、ファイル名は「この画像は何が写っているのか」を推測する材料のうちの、ごく小さな一つです。名前を分かりやすくしたから順位が上がる、という単純なものではありませんし、そう約束できるものでもありません。むしろ効果がはっきり出やすいのは、次のような部分です。

• 写真の軽さ（表示の速さ）：スマホのカメラで撮った写真は一枚で数メガバイトあることも珍しくありません。長辺1200〜1600ピクセルほどに縮めてから載せるだけで、ページの開く速さが変わります。見ている人が待たずに済むことは、名前の付け方よりずっと大きな差になります。
• 写真の周りに文章があるか：同じ施工写真でも、前後に「どこで・何を・どうしたのか」が書いてあるページと、写真だけが並ぶページでは、伝わり方がまるで違います。検索する側も、周りの文章を手がかりにしています。
• 代替テキスト（画像が表示されないときに出る説明文）：こちらは人にも読まれる説明です。ファイル名より先に整えて損はありません。

今日からできる、無理のない運用

過去をさかのぼらず、これから足す一枚から変えれば十分です。手順は次の三つだけで足ります。

1. 写真を長辺1200〜1600ピクセルほどに縮める
2. ファイル名を英小文字＋ハイフンで、中身が分かる言葉にする（例：gaikou-carport-before.jpg）
3. アップロードしたら、代替テキストに一文で説明を入れる

慣れれば一枚あたり十数秒です。迷ったら「半年後の自分が、この名前でファイルを探し出せるか」だけを基準にしてください。検索のためというより、まず自分の仕事が楽になります。写真が増えるほど、この差は効いてきます。

シロツメWebを運営するSHIROTSUME GRASS株式会社は、もともと法人向けの中古スマートフォン・パソコンの買い取りと販売を本業としています。その集客を外に出さず、自分たちでSEO記事を書いて行ってきました。そこで結果が出たので、同じやり方を他のお店や会社にもお渡ししています。ですので、画像の扱いのような細かい話も、机の上の理屈ではなく自分たちの手で続けてきた範囲でお伝えしています。

もし「うちのページは写真ばかりで文章が少ないかもしれない」「どこから手をつければいいか分からない」と感じられたら、無料のホームページ診断をご利用ください。ホームページのURLとメールアドレスだけでお申し込みいただけます。順位や成果をお約束するものではありませんが、今のページを拝見して、先に直すと効きそうなところと、後回しでいいところを分けてお返しします。売り込みはいたしませんので、気楽にお使いいただければと思います。

よく読まれている関連ガイド

• 何年か触っていないホームページを、作り直さずに動かし直す手順
• robots.txtとは？検索の機械に渡す案内書きをやさしく解説