効率的なWeb制作を行うために、Web制作初心者がまず気をつけるべき5つのこと

1.ファイル名は半角英数小文字にする

以前、お客様が自身で制作されたWebサイトのリニューアル案件を受けたことがありました。使える素材などあればと思い、そのWebサイトのデータを持ってきていただいたのですが、「なぜか表示されない画像があるんですよね〜」とのこと。確認してみると、画像のファイル名を日本語でつけられていました。

ファイル名に日本語を使ってしまっている

ファイル名に日本語を使ってしまっている

他にも、サーバによってはアルファベットの大文字と小文字を同じ文字とするか違う文字とするが異なる場合があったり、全角文字のファイル名が文字化けしてFTPで落とすのに一苦労したりなどなど、ファイル名のトラブルは意外と多いものです。

無用な混乱を避けるために、ファイル名は「半角英数小文字」、-(ハイフン)と_(アンダーバー)でつけるようにしましょう。

2.ファイル名は意味のわかるものにする

ファイル名がちゃんと半角英数小文字でつけられていたとして、まだそれでOKではありません。例えば、あるWebページの修正作業をするとして、「ここのロゴマークを差し替えたいなー」なんて思ったとします。画像ファイルを探すためローカルのディレクトリを開くとそこには

ファイル名が連番

…。探すのも嫌になりますね。ソースコードを見れば画像のファイル名はわかりますが、上記のようなファイル名の付け方をしていると探すのも一苦労、とても非効率です。効率を良くするために、ファイル名は意味のわかるもの、例えば「icon_A.jpg、icon_B.jpg、logo.jpg」などしておけば格段に見つけやすくなります。

3.フォルダ分けをする

はい、上記でファイル名は完璧です。これで効率的なファイル管理ができる…とお思いのあなた、まだ一つ足りないことがあります。フォルダ管理です。

Webサイトの制作というのは、思っている以上に多くのファイルを使用します。とあるクライアント様の案件を途中から手がけることになり、ローカルのフォルダを見て驚愕したことがあります。そこには、1つのフォルダの中に、HTML、画像、PDFなどの3,000個を超えるファイルが無秩序に詰め込まれておりました。フォルダを開くだけでパソコンがフリーズしたかのようなり、やっとファイルを選ぶためにスクロールバーを動かせるようになっても、目的のファイルを見つけるのも一苦労、しかも途中でまたフリーズ…。

整理されたWebサイトの例

整理されたWebサイトの例

こんなことにならないように、フォルダはカテゴリごと、ページごと、ファイルの種類ごとなど細かく分けて管理するようにしましょう。

4.不要なゴミファイルは削除する

例えばファイルのバックアップをとったりする場合、「元ファイル名+日付」のようなファイル名でそのまま同じフォルダに保存してしまうと、必要なファイルとバックアップファイルがごちゃまぜになるフォルダ内のファイルの可読性が落ちてしまいます。また、フォルダごと一気にアップロードしたい場合なども、不要なファイルまでアップロードしてしまわないように無駄に気をつけなければいけません。そのうちどれが必要なファイルでどれが不要なファイルなのかよくわからなくなり、整理することすらできないような状態に…。

不要なファイルが増殖した例

不要なファイルが増殖した例

もしバックアップなど必要な場合は、同じフォルダ内ではなく、全く別のフォルダに分けて残しておいたほうが良いでしょう。少し難しくなりますが、バージョン管理ツールなどを使うのも効果的です。

5.画像サイズに気をつける

デジカメなどで写真をとってWebページに載せる場合、リサイズせず、4,000*3,000pxほどの巨大な画像をimgタグのwidth属性・height属性で大きさだけ指定し掲載している方を見かけることがあります。これは限られたサーバの容量を無駄に埋めてしまうだけでなく、ページを閲覧しにきてくれた人に、ページがなかなか表示されない・重い、というストレスを与えてしまうことにもつながります。

簡単にリサイズを行えるツールもありますので、適切な大きさにリサイズを行なってから掲載するようにしましょう。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく