Webサイトのファイルの扱いでよくある3つのミスと解決法｜スクール卒のスキルチェック（確認問題あり）

Webデザインスクール卒業後のスキルチェックとしてWebサイトのファイルの扱いについてお伝えします。

私は、10年以上、日々、受講生の方の作品を添削しているのですが、
Webデザインスクール卒業後、間もない方から送られるWebサイトのデータで多いミスが次の3つです。

よくある3つのミス

ファイル名やフォルダ名に日本語を使っている
画像のファイルサイズが大きい
フォルダ内が整理されていない

ファイル名に関しては、最近のサーバーやブラウザなどでは対応されていることもありますが、
どんな環境でも問題なくWebページを表示させるには、こうしたらいいよ。
という視点で改善点を挙げています。

この記事の内容をチェックすることで、仕事で起こりがちなトラブルを避けることができます。

あなたは下図のようなファイル管理をしていませんか？

「あら、私のことだっ」と気づいた人は、この機会にチェックしてみてくださいね。

それでは、順番に説明していきます。

ファイル名やフォルダ名に日本語を使っている

ファイル名やフォルダ名に日本語を使用するのは、特別な理由がない限りやめましょう。
インターネット上にデータをアップした時、ローカル環境、それぞれでトラブルの原因になります。

インターネット上にアップした時に起きる問題

日本語ドメインもありますし、WordPressではパーマリンクを指定しないと日本語で記事が出力されるので、大丈夫なのでは？と思われるかもしれませんが、サーバーやブラウザなど、環境によっては正しくWebページが表示されなかったり、リンク切れを起こす場合があります。

日本語対応のブラウザでも、実はブラウザ側で日本語を半角英数字や記号に変換して表示しています。
これをURLエンコードと言います。

このような謎の記号が並んだURLは検索ユーザーにとっても検索エンジンにとっても認識しやすいとは言えませんね。

ローカル環境で起きる問題

WindowsとMac間でデータをやり取りする場合、文字コードの問題によりファイル名が文字化けすることもあります。

では、何を基準にファイル名をつければよいのか？
そこにはルールがありますので、確認してみましょう。

ファイル名のつけ方ルール

ファイル名は、必ず半角英数字でつける。
【基本の例】
example.html
example01.html
基本的に英小文字でつけることをおすすめします。
最近のサーバーは大文字でも問題ないようですが、どんな環境でも問題なく機能させるのは小文字で統したほうが安全です。

大文字と小文字は同じスペルでもWebの世界では別ファイルと認識されます。
ファイル名に使える記号はハイフン、アンダースコアのみです。
ファイル名の先頭にはハイフン、アンダースコアでも使うことはできません。
【利用可能な例】
example-page.html
example_page.html
ファイル名の先頭に数字を使うのは避けましょう。
HTMLファイルはOKですが、PHPやJavaScriptなど他のプログラミング言語では使えないこともあります。
【避けたい例】
5example.html
スペースや機種依存文字は使用禁止。

機種依存文字について
機種依存文字とは、パソコンやスマホなどの環境によりエラーや文字化けを起こす可能性がある文字のことです。

画像出典：機種依存文字について農林水産省ホームページより

よく見かけるのが丸囲みの数字をファイル名やフォルダ名に使ってしまっているケースです。

画像1枚のファイルサイズが大きい

Web用に最適化していない画像はファイルサイズが大きくWebで表示させるには不適切です。
特にフリー素材の画像はファイルサイズが大きことが多いので確認しましょう。

Webサイトに配置する画像はできる限り、画像ファイルのサイズが軽くなるように圧縮するのが基本です。

しかし、画像は圧縮するほど粗くなる（劣化する）のを考慮することも必要になってきます。

では1枚の画像ファイルのサイズはどのくらいを目安にすればよいでしょうか？

それは、そのWebページの中で何枚の画像を配置するか？何を優先するか？にもよります。

画像のファイルサイズの目安は？

Webページに配置する1枚の画像サイズは大きくても200KBまでがひとつの目安。
基本的には100KB以下に抑えておきたいところです。

画像サイズの目安を考えるとき、Webページ全体のデータサイズの知識も頭に入れておく必要があります。

Googleが推奨している1ページのファイルサイズは1.6MBです。
（この数字は、理論的には 3G 接続でダウンロードできるデータ量に基づいています。）
⇒ Google公式アナウンスページ

Webページ全体のデータサイズとは1つのWebページに使用しているHTML、CSS、JavaScript等のファイル、Webフォント、画像などのデータサイズを合計したものです。

データサイズが大きいほどページの表示速度が遅くなります。

ページの表示速度が遅くなると、SEOの評価が落ちる、ページに訪れたユーザーが離脱するなどの問題がおきます。

画像軽量化におすすめの便利ツール

Squoosh（GoogleChromeLabs開発）

SquooshはGoogleが提供している無料の画像圧縮アプリです。

ブラウザ上にパソコン側から画像をドラッグ&ドロップするだけの簡単操作で圧縮前後の画質を比較しながら検討することができます。
その場で横幅などのサイズ調整することができるもの嬉しいところ。

Squooshで扱える画像形式
jpg、png、gif、webpなどWebサイトで扱える形式が揃っています。
デフォルトはMozJPEGとなっています。
MozJPEGはMozillaのプロジェクトチームが開発した圧縮方法で、jpgをさらに高圧縮して軽量化されるので、jpgの場合はそのまま変更しないでダウンロードすればOKです。