メッキのサイトと言われないために:webサイトを正しく作る必要性と機能性

デザインのあれやこれ

Posted on 2015/1/20 by Kentaro

メッキのサイトと言われないために:webサイトを正しく作る必要性と機能性

画像だけで組まれたサイトと、しっかりコーディングされたサイト、見た目は同じなのに一体何が違うのか?正しいマークアップの必要性や機能性をざっくりまとめてみました。

衣服の機能性は、見た目以外にも通気性や暖かさ・肌触り・動きやすさ・洗濯のしやすさなど様々な機能性があるように、Webサイトにも見た目以外の様々な機能性がありますが、表立って目につきにくいものが多く、認知の差もまちまちのように感じています。

例えばWebデザインのデモなどでは、コーディングはせずにカンプ画像をそのまま貼付けたデモページなどを使用する事もあると思いますが、しっかりとhtml・cssで組まれたサイトとの違い、機能性や必要性って何だろう?というポイントをまとめてみました。

『ハリボテページ』が敬遠される所以

『ハリボテページ』が敬遠される所以

上記で述べたような、カンプ画像をそのまま貼付けただけのデモページなどは、ハリボテのようなページなどと言われることもあります。その名の通り、見た目だけつくろって中身が無いという意味で言われてしまうんです。

画像は「情報無し」とみなされる

Google等の検索エンジンは、そのサイトに含まれるテキストを解析して内容やキーワードを判断しますが、画像の場合はただの『画像』としか見られないんですね。
ゆえに、全ページ全要素を画像で作ったサイトなどは『全く内容が謎』=『全く内容が無いサイト』とみなされ、サイト評価も最低になり、キーワードで検索をしてもヒットしないような状態になってしまうんです。

データ容量が大きくなるデメリット

htmlやcss等のテキストデータに比べて、画像データは圧倒的にデータ容量が大きく、容量が大きくなれば当然読み込みに時間がかかります。(ざっくりと、小さな画像1つでブログ記事1〜2ページ分って考えていいと思います)
のろのろと表示されるサイトに苛立ちを覚えたユーザーはページから離れていっちゃいますし、ページ表示速度はGoogleのサイト評価基準にもなっているので、読み込みの遅いサイトは検索結果も下位になってしまうんです。

管理・運営にかかるコスト

言わずともがなですが、テキストデータに比べて、画像データは編集・作成に数倍の手間がかかります。
例えばロゴやメニューなど、今後頻繁に更新をすることは無いという前提のものならば、画像データにしても運用性は損なわないでしょうけど、例えば商品にかかる説明文や料金表なども画像にしてしまうと、更新が発生する度にデザイナーへ依頼をしなければならず、テキストに比べ手間も時間もコストもかかってしまいます。

プログラムの世界には『スパゲティプログラム』なんて呼ばれるものがあります。
その名の通りスパゲティのようにこんがりからまりまくったプログラムで、変更や修正をするのが恐ろしく困難、作った本人すら直せないような難解プログラムのことを言うんですね。
Webサイトにも似たような事が言えて、構造化がなされてないサイトは運用や管理が恐ろしく面倒で手間がかかるんです。納品後の管理運用が地獄絵図です。
例えば、ビニールとペンキで作られた服を想像してみてください。見た目は他の服と同じでも、蒸れるし動きづらいし洗濯もできない…続けて着れたもんじゃないと思います。
ビニール服のようなサイトは作っちゃいけません、絶対に。

運用性・管理・拡散効果などの機能性を備えるためのコーディング

運用性・管理・拡散効果などの機能性を備えるためのコーディング

コーディングは、先に述べたデメリットを解決させるためだけではなく、Webサイト運用にかかる様々な機能性を備えるために行うものなんですね。

構造化による管理性の向上

Webサイトを構成する要素の構造化は、運用・管理をするうえで大切な要素です。
基本的なhtml+cssの組み合わせも『情報としての文章』と『見た目のデザイン指定』を分離させて、個別に管理することで管理しやすくする目的がありますね。
本文とヘッダー・メニュー・フッター等を明確に区分けさせれば、後の更新・変更時にも迷わずに済みますし、引き継ぎも簡単になります。

画像とテキスト処理:構造化と操作性の向上

画像とテキストをレイアウトする際には、画像データは必要最小限に抑え、容量も小さくする為に効率の良い画像圧縮形式を選択していきます。
文字がテキスト化されていれば読み込み速度も早くなり、修正・更新も簡単になります。また、ユーザーはその文章をコピーペーストして使うことが可能になるので、住所や商品名などはテキスト化した方が良いでしょうね。

正しいマークアップはSEO対策に有効な手段

タイトル・大見出し・小見出し・本文・引用・強調などを正しくマークアップすれば、検索エンジンがそれを解析して重要な要素をキーワードとして認識し、検索の際にヒットするようになります。
また、先に述べた画像データにもalt要素で説明文を設定すれば『○○○という意味をもつ画像』として判断されるようになり、検索エンジンの評価も高まります。

障害者への配慮:読み上げブラウザに対応

正しく構造化されたWebページは、例えば視覚障害者向け読み上げブラウザへの対応にも繋がるんです。
タイトル・見出し・本文等が整頓されており、画像にも正しく説明が添付されていれば、読み上げブラウザで再生した際にも違和感無く聞き取ることが出来ます。

今日のWeb制作は数々の課題点をクリアしてきた集大成

Web黎明期、その当時はWebサイトと呼ばずにホームページと読んでいましたが、今日のWebサイトは全く別モノに進化したと感じるんですね。

今でこそhtmlとセットが当然になっているcssですが、当時はhtmlだけで全てのページを組んでいましたね。レイアウトのtable組みや、色や背景画像の指定はhtmlタグに直書きするのが当然でした。
のちに文章とデザインを個別管理し、管理性の向上を図る事がうたわれ、今のようなhtml+cssの姿が標準になったように思います。
xhtmlの頃からでしょうか、ページの管理・運用性の向上を図るための構造化、具体的にはヘッダー・コンテンツ・フッター等の大分類の明確化、見出し・本文・引用等の明確な指定による情報の検索性や再利用性などを図るようになっていきましたね。
今日のWordPress等にみられるコンテンツのデータベース管理も、このような構造化による運用性向上が目的のように思えるんですよ。

今後もWebに『必要といわれる要素』は増える一方だと思いますし、今カンペキと思える作り方も数年後にはハリボテと呼ばれるかもしれませんよね。かといって全ての要素を網羅していくようなゴリゴリしたやり方は往々続きませんし、いつかブッ倒れてしまいます。
何故この要素が必要なのかという理由を明確にして、大切なものを取捨選択した結果、シンプルで精密なサイトを作っていく事が重要でしょうと考えています。

Thank you for reading! 読んでくれてありがとう!