Webデザインスクール卒業後のスキルチェックとしてWebサイトのファイルの扱いについてお伝えします。
私は、10年以上、日々、受講生の方の作品を添削しているのですが、
Webデザインスクール卒業後、間もない方から送られるWebサイトのデータで多いミスが次の3つです。
ファイル名に関しては、最近のサーバーやブラウザなどでは対応されていることもありますが、
どんな環境でも問題なくWebページを表示させるには、こうしたらいいよ。
という視点で改善点を挙げています。
この記事の内容をチェックすることで、仕事で起こりがちなトラブルを避けることができます。
あなたは下図のようなファイル管理をしていませんか?

「あら、私のことだっ」と気づいた人は、この機会にチェックしてみてくださいね。
それでは、順番に説明していきます。
ファイル名やフォルダ名に日本語を使っている
ファイル名やフォルダ名に日本語を使用するのは、特別な理由がない限りやめましょう。
インターネット上にデータをアップした時、ローカル環境、それぞれでトラブルの原因になります。
インターネット上にアップした時に起きる問題
日本語ドメインもありますし、WordPressではパーマリンクを指定しないと日本語で記事が出力されるので、大丈夫なのでは?と思われるかもしれませんが、サーバーやブラウザなど、環境によっては正しくWebページが表示されなかったり、リンク切れを起こす場合があります。
日本語対応のブラウザでも、実はブラウザ側で日本語を半角英数字や記号に変換して表示しています。
これをURLエンコードと言います。

このような謎の記号が並んだURLは検索ユーザーにとっても検索エンジンにとっても認識しやすいとは言えませんね。
ローカル環境で起きる問題
WindowsとMac間でデータをやり取りする場合、文字コードの問題によりファイル名が文字化けすることもあります。

では、何を基準にファイル名をつければよいのか?
そこにはルールがありますので、確認してみましょう。
ファイル名のつけ方ルール
機種依存文字について
機種依存文字とは、パソコンやスマホなどの環境によりエラーや文字化けを起こす可能性がある文字のことです。

よく見かけるのが丸囲みの数字をファイル名やフォルダ名に使ってしまっているケースです。
画像1枚のファイルサイズが大きい
Web用に最適化していない画像はファイルサイズが大きくWebで表示させるには不適切です。
特にフリー素材の画像はファイルサイズが大きことが多いので確認しましょう。

Webサイトに配置する画像はできる限り、画像ファイルのサイズが軽くなるように圧縮するのが基本です。
しかし、画像は圧縮するほど粗くなる(劣化する)のを考慮することも必要になってきます。
では1枚の画像ファイルのサイズはどのくらいを目安にすればよいでしょうか?
それは、そのWebページの中で何枚の画像を配置するか?何を優先するか?にもよります。
画像のファイルサイズの目安は?
画像サイズの目安を考えるとき、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です。
EWWW Image Optimizer(WordPressプラグイン)
EWWW Image Optimizerは、WordPressの画像最適化ができるプラグインです。

WordPressに画像をアップロードする際、自動でファイルサイズを小さくしてくれます。
すでにアップロードされている画像も一括で圧縮することもできます。
フォルダ内が整理されていない
ひとつのフォルダの中にWebサイトで使用するファイルからpsdやaiファイル、利用しない素材などがごちゃっと保存されているパターンです。
フォルダ内が整理されていないと起きる問題
Webサイトで使用するファイルと他のファイルがごっちゃになっていると、
などといった事故がおこりがちです。
フォルダ内のデータ整理の例
フォルダ内の整理の仕方は、それぞれ違うと思いますが、私は下記のように整理しています。

頭の中の整理が必要なように、フォルダ内もしっかり目的や種類別に整理しておく習慣をつけましょう。
最後に練習問題です。これができればスキルチェッククリアです。
確認問題
※ 各項目をクリックすると回答例が表示されます。
特にスクールでは、ローカル環境でWebサイトを作成することがほとんどです。
また、データをインターネット経由で人に送るという体験をするケースも少ないでしょう。
そのため、ファイル名について授業で学習していても、ついやってしまいがちなのだと思います。
実際に現場に出て仕事をするとなった時、困らないように。
クライアントに送ったデータが文字化け、表示されない、、なんてことならないように。
ファイルの管理について見直してみて下さいね。