独学・フリーランス・在宅・SNS疲れのWebデザイナーさんへ、
ビジネス思考を磨いて「わたしの売りはコレ!」を作っていこう。

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

Webサイトのファイルの扱いでよくある3つのミス|Webデザインスクール卒のスキルチェック(練習問題あり)

こんにちは。フクモト学長(@WebcreatorsTips)です。未経験からフリーランス歴17年のWebデザイナーです。スクール運営 10年目になります。
詳しいプロフィールはこちら


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

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

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

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

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

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

Webサイトのファイル管理の間違い例

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

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

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

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

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

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

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

日本語ファイル名が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サイトの画像が大きすぎる例

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の使い方

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

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

EWWW Image Optimizer(WordPressプラグイン)

EWWW Image Optimizerは、WordPressの画像最適化ができるプラグインです。

EWWW Image Optimizerプラグインの紹介

WordPressに画像をアップロードする際、自動でファイルサイズを小さくしてくれます。
すでにアップロードされている画像も一括で圧縮することもできます。

フォルダ内が整理されていない

ひとつのフォルダの中にWebサイトで使用するファイルからpsdやaiファイル、利用しない素材などがごちゃっと保存されているパターンです。

フォルダ内が整理されていないと起きる問題

Webサイトで使用するファイルと他のファイルがごっちゃになっていると、

  • 間違って必要なファイルを削除してしまう。
  • 不要なファイルが増える。
  • 公開したくないファイルまでサーバーにアップロードしてしまう。
  • 仕事効率が落ちる。

などといった事故がおこりがちです。

フォルダ内のデータ整理の例

フォルダ内の整理の仕方は、それぞれ違うと思いますが、私は下記のように整理しています。

Webデザイナーのフォルダ内のデータ整理の例

頭の中の整理が必要なように、フォルダ内もしっかり目的や種類別に整理しておく習慣をつけましょう。

最後に練習問題です。これができればスキルチェッククリアです。

確認問題

※ 各項目をクリックすると回答例が表示されます。


特にスクールでは、ローカル環境でWebサイトを作成することがほとんどです。
また、データをインターネット経由で人に送るという体験をするケースも少ないでしょう。

そのため、ファイル名について授業で学習していても、ついやってしまいがちなのだと思います。

実際に現場に出て仕事をするとなった時、困らないように。
クライアントに送ったデータが文字化け、表示されない、、なんてことならないように。

ファイルの管理について見直してみて下さいね。

Webクリエイターズスクール 学長 フクモトトモコ

【Webクリエイターズスクール】
学長 福本 智子

Webもデザインも未経験からいきなりフリーランス歴16年。
『仕事は自分で創りだす』をモットーに生きてきた50代。
WordPress・Webマーケティングが得意。

独学・Webスクールを卒業したのに仕事に繋げられない学習迷子さん、在宅・フリーランス希望の人を対象に「マーケティング理論に基づいた、じぶん事業計画」をお伝えしてサポートしています。

関連記事

じぶんの売り方に集中できる。おひとりさま専用Webデザインスクール
フリーランスwebデザイナー個別相談

受講者の声