はじめに

画像のファイル名なんて、正直どんな名前でも良いと思っていませんか？

私自身も以前はそう考えていました。

しかし、以前案件対応中に日本語のファイル名を使用した画像が正常に表示されず、原因調査に時間を使ったことがあります。

ファイル名を英語表記へ変更したところ問題なく表示されたため、それ以降は画像ファイル名を英語で統一するようになりました。

画像のファイル名は一見すると些細な部分です。

しかし、

• 画像が表示されない
• URLが文字化けする
• サーバー移行時に不具合が起きる
• 外部サービスとうまく連携できない

など、意外とバグやエラーの原因になることがあります。

特にHTML、CSS、PHP、WordPressを扱うWeb制作では、最初から命名ルールを統一しておくことが大切です。

この記事では、私が実際に経験したトラブルをもとに、画像ファイル名を英語にした方が良い理由と実務で使っている命名ルールを紹介します。

日本語ファイル名を避けるべき4つの理由

1. URLエンコードによる文字化け

画像をサーバーへアップロードすると、日本語ファイル名はURLエンコードされます。

例えば、

お問い合わせ.jpg

はURL上で

%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b.jpg

のように変換されます。

これをURLエンコードと言い、日本語や記号をWeb上で安全に扱うために別の文字列へ変換する仕組みです。

URLが非常に見づらくなり、管理もしにくくなります。

一方、

contact.jpg

であればそのまま表示されるため分かりやすいです。

2. リンク切れが発生することがある

日本語ファイル名は環境によって扱いが異なる場合があります。

例えば、

• サーバー移行
• FTPアップロード
• 外部サービス連携
• CDN利用

などのタイミングで文字コードの扱いが原因となり、画像が表示されなくなるケースがあります。

私が経験したトラブルもこれに近いものでした。

英語ファイル名に変更したところ正常に表示されるようになりました。

3. SEOへの悪影響

Googleは画像ファイル名も参考情報として認識しています。

例えば、

IMG_1234.jpg

よりも

contact-form.jpg

の方が内容を理解しやすいと考えられます。

日本語ファイル名でも認識されますが、URLエンコードによって可読性が下がるため、実務では英語ファイル名が一般的です。

4. 一部の漢字や記号がバグの原因になる

日本語ファイル名そのものが必ず問題になるわけではありません。

しかし、ファイル名に特殊文字や記号が含まれていると、環境によっては正常に動作しないことがあります。

例えば、

会社概要（最新版）.jpg

や

サービス紹介①.jpg

のようなファイル名です。

一見問題なさそうに見えますが、

• （）
• ①
• ＆
• スペース
• 全角記号

などは環境によって正しく認識されないことがあります。

補足：一部の文字は昔からトラブルの原因になることも

現在ではあまり見かけなくなりましたが、過去にはShift_JISという文字コードの影響で、一部の漢字やカタカナが正常に扱えないケースがありました。

例えば、

ソ
能
表
予

などの文字は、環境によってバックスラッシュ（\）として誤認識される問題が知られています。

現在のUTF-8環境では発生しにくいものの、こうした過去の経緯もあり、Web制作の現場では今でも

• 半角英数字
• 小文字
• ハイフン区切り

でファイル名を統一することが一般的です。

デザインカンプから画像を書き出したら英語へ変換する

デザイナーから受け取ったデザインカンプの画像が、

お問い合わせボタン.png
メインビジュアル.jpg
会社概要画像.jpg

のような名前になっていることがあります。

その場合はコーディング前に英語へ変更するのがおすすめです。

例えば、

contact-button.png
main-visual.jpg
about-company.jpg

のように変更しておくと管理しやすくなります。

日本語ファイル名から英語へ変更すべきチェックリスト

• 日本語が含まれている
• 記号が含まれている
• 丸数字が含まれている
• スペースが含まれている
• WordPressへアップロードする
• HTML/CSS/PHPで利用する

理想的な画像ファイル名の命名ルール

私が現在意識しているルールはこちらです。

半角英数字のみ

contact-form.jpg

小文字で統一

hero-image.jpg

ハイフンで区切る

service-webdesign.jpg

短く分かりやすく

about-company.jpg

命名ルールを統一する

例えば、

場所-中身-状態

というルールなら

top-cta-default.jpg
top-cta-hover.jpg

のように統一できます。

英語へ変換することをおすすめする理由

トラブルを回避できる

英語ファイル名にすることで、

• 文字化け
• リンク切れ
• 環境依存の不具合

を回避しやすくなります。

コードに書きやすい

例えばHTMLで画像を指定する場合、

<img src="images/contact-form.jpg" alt="">

の方が圧倒的に書きやすいです。

ファイル名から内容も予測できます。

つまり、

「どの画像だったかな？」

と迷う時間が減ります。

実務でよく使う画像ファイル名の例

メインビジュアル

main-visual.jpg
hero-image.jpg

ボタン

contact-button.png
download-button.png

バナー

cta-banner.jpg
campaign-banner.jpg

サービス紹介

service-webdesign.jpg
service-seo.jpg

会社情報

about-company.jpg
company-profile.jpg

フォルダ名も同様に英語がおすすめ

画像だけでなくフォルダ名も英語で統一することをおすすめします。

例えば、

images
css
js
assets

のように管理します。

逆に、

画像
スタイル
スクリプト

などは避ける方が安全です。

プログラミング関連では英語で統一するのが一般的です。

初心者向けまとめ

画像ファイル名は日本語でも動くケースが多いです。

しかし実務では、

• トラブル防止
• 管理しやすさ
• SEO
• チーム開発

の観点から英語ファイル名が推奨されています。

私自身も実際に画像が表示されないトラブルを経験してからは、英語で統一するようになりました。

今回のポイントまとめ

• 日本語ファイル名は文字化けの原因になる
• サーバー環境によってリンク切れが起きることがある
• SEOや管理面でも英語ファイル名が有利
• 英数字とハイフンで統一する
• フォルダ名も英語にする
• 実務では英語命名が一般的

まとめ

画像ファイル名は日本語でも動作することがあります。

しかし実務では予期しないトラブルを避けるために英語で命名するのが一般的です。

私自身も案件中に日本語ファイル名が原因と思われる表示トラブルを経験して以来、HTML・CSS・PHPで扱う画像はすべて英語ファイル名に統一しています。

後から変更するよりも、最初からルールを決めておく方が管理しやすくおすすめです。

一言

画像ファイル名を英語に設定すること、これは当たり前すぎて誰も教えてくれませんが、実は実務では重要なポイントです。

今のうちから英語で統一する習慣を付けておくと、将来のトラブル防止にもつながります。