スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

初めてWEBサイトを作る時にしがちな6つの失敗

記事タイトル枠

明けましてけましておめでとうございます!
初心者のためのWEBデザイン教室、細々と第10回目の授業です。今年も細々と更新していきますので、どうぞよろしくお願いします。

記事も少しずつ増えてきたので、右の「最近の授業」の下の部分からこれまでの記事一覧へリンクするようにしました。どうぞご利用ください!

さて、スクールでは初めてWEBサイトを作る方がほとんどなのですが、その過程でよく見られる、特にファイル管理に関する失敗について書きたいと思います。

これからサイトを作るという方は、ぜひ目を通してみてくださいね!

[インデックス]

  1. ファイルが整理されていない
  2. ファイル名に日本語や全角文字を使う
  3. ファイル名が分かりにくい
  4. トップページが「index.html」以外の名前
  5. 編集用データがサイトのフォルダ内にある
  6. 動画ファイルが重すぎる

1.ファイルが整理されていない

  • 使わない画像がフォルダ内にたくさん残っている
  • cssファイルがimagesフォルダの中にある
  • imagesフォルダの中にまた別のimagesフォルダが入っている

…というようなことはありませんか?

これでは作成中にも後々の更新の際にも、どれが必要なファイルなのか分かりづらく、またいちいちファイルを探さなくてはいなけない手間が生じてしまいます。

新規ファイルを作って保存する際には、どのフォルダに管理するのかをきちんと確認してから保存するようにしましょう。

フォルダの適切な分け方というのは、サイトの規模などによって違います。

以下に3通りの方法を挙げておきますので、ご自分で分かりやすく管理のしやすい方法を見つける参考にしてみてください。

例1:ファイルの種類別に、css、images、jsフォルダを設ける

ファイルの種類別に、css、images、jsフォルダを設ける

例2:コンテンツ(ページ)ごとにフォルダに分ける

コンテンツ(ページ)ごとにフォルダに分ける

例3:htmlファイルと、それ以外の他ファイルをまとめたフォルダを設ける

htmlファイルと、それ以外の他ファイルをまとめたフォルダを設ける

2.ファイル名に日本語や全角文字を使う

ファイル名に「トップ.html」とか「service2.html」、「メインイメージ.jpg」など、日本語や全角英数字を使っていませんか?
ファイル名は、「index.html」「service.html」「main.jpg」など、必ず半角英数字を使うようにしましょう。

また、多くのサーバでは「service.html」と「Service.html」は違うファイルとして認識します。大文字・小文字は統一するようにしましょう。小文字での統一が一般的です。

フォルダ名についても同じです。

参考ページ:仕組みを理解しよう:ファイル名の決め方 - HTMLタグボード

3.ファイル名が分かりにくい

htmlファイルの名前が「page1.html」「page2.html」だったり、画像のファイル名が「top-01.jpg」「top-02.jpg」「top-03.jpg」のような規則のないただの連番だったり、まさか「名称未設定.gif」…だったりしませんか?

サイトの作成中や後の管理のしやすさの面で、ファイル名を見ただけで大体どのような内容かが分かるように付けておくと、それだけで作業効率が上がります。
「service.html」「access.html」「logo.jpg」「map.gif」「title-news.png」「banner-campain.jpg」などなど。

タイトルやバナー、ボタン等は、ttl、bnr、btnのように略すこともよくありますが、その場合も同一サイト内ではルールを統一しておきましょう。

4.トップページが「index.html」以外の名前

例えば、ブラウザのアドレスウィンドウに「http://www.example.com/」と入力して確定した場合、表示されるのは自動的に「http://www.example.com/index.html」のファイルになります。

これを、「top.html」などのファイル名で作成した場合、サイトのトップページにアクセスするためには「http://www.example.com/top.html」と、htmlファイル名まで入力しなければいけません。

サイトにアクセスして一番初めに表示させたいページには「index.html」と付けましょう。

もし、フラッシュ等のスタート画面(扉ページ)を初めに表示させて、そこからサイトのトップページに入るような作りにする場合には、スタートページを「index.html」にして、そこから「top.html」などにリンクするようにするといいです。

5.編集用データがサイトのフォルダ内にある

htmlファイルやcssファイル、画像など、サイトに必要なファイルを一つのフォルダにまとめていると思いますが、その中にフォトショップ(.psd)、イラストレーター(.ai)、フラッシュ(.fla)など、編集用のファイルは混ざっていませんか?

これらは、サイト用の素材を作るために使ったファイルであって、サイトの表示には必要ありません。サーバにアップロードしても意味が無く、また容量も重たいので、サイトのフォルダ内には含まないようにしましょう。

編集用データがサイトのフォルダ内にある

編集用のファイルは、サイトのフォルダとは別に一まとめにしておくといいです。

6.動画ファイルが重すぎる

初めてホームページを作る時には、有料のレンタルサーバではなくてまずは無料のサーバで、という方も多いですね。

無料サーバに限りませんが、自分の使おうとしているサーバはどれだけの容量が使えるのか、また一つのファイルの容量制限はどうか、などあらかじめ確認しておきましょう。

例えばFC2ホームページの無料版を利用する場合、全体では1GB、一つのファイル容量の上限は1MBです。特にフラッシュ動画を入れたい場合などは、パブリッシュしてできたswfファイルが1MBを超えないように調整しましょう。

また、せっかく動画を作ったのにswfはアップロード不可、pdfもアップロード不可、などアップロードできるファイル形式に制限がある場合もありますので、それも確認が必要です。

【まとめ】

  • ファイルはきちんと整理整頓!
  • ファイル名は半角英数字で付ける!
  • ファイル名は、見ただけで内容の分かるものに!
  • トップページのファイル名は「index.html」に!
  • 編集用データはサイトのフォルダの外に!
  • サーバにアップロードできるファイル容量・形式をまず確認!

いかがでしたか?

ソフトの使用方法だけでなく、サイトを公開するにはこういった知識も必要になりますので、この機会に覚えてくださいね。

お疲れさまでした!

関連記事
このエントリーをはてなブックマークに追加
ページトップへ戻る

コメントの投稿

非公開コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。