安さの落とし穴?Webサイトにおけるクオリティとはどういうものか、特徴をつらつらと

安さの落とし穴?Webサイトにおけるクオリティとはどういうものか、特徴をつらつらと

MATEREATE(マテリエイト)会社ロゴ

あまり外に出ないので知らなかったのですが(笑)
鹿児島中央駅の隣におっきなヒルズができてました。

まぁ都会の方からしたら小さいのですが・・・。

上階は居住区になっているそうです。
最上階はいくらぐらいするんだろう・・・。

ということで、今回は

「安さの落とし穴?Webサイトにおけるクオリティの高いサイトの特徴をつらつらと」

述べていきたいと思います!!

Webサイトにおけるクオリティの高いサイトとは?

質が高いと言われるのはどのようなサイトなのか、その特徴を述べていくという内容となっておりますが、コーダーさんであれば自身のサイトの見直し程度に、発注前の方であれば発注前の参考程度、予算を組む際の目安程度にしていただければと思います!

※初めに断っておきたいのですが、これから書く内容は別に「高いものがいい。安いものはダメ。」という話ではないです。
前提として、「安い場合はクオリティが伴っていない可能性が高い」というだけのことであり、そういうこともあるかもしれないのかー程度に読んでいただければと思います!

サイトにおけるクオリティって何?

そもそも「クオリティの高いサイト」とはどういったものなのでしょうか。

効果的に写真が生かされたサイト?
レイアウトの整った素敵なサイト?

これら目に見える部分でのクオリティは、デザイナーさんのセンスによる側面が強いですね。

しかしながら、見た目の部分だけではセマンティックなコーディングがどれほどできているのか、Webパフォーマンスにどれほど優れているのか判断することはできません。
つまり、どれだけかっこいい見た目のサイトだとしても、もしかしたら質が伴っていないなんてことが往々にしてあり得ます。

本当にその外注先が依頼するに値するのか精査したいのなら、ポートフォリオなんかはあてにならないかもしれません。

大事なことは見た目よりも中身の部分。
セマンティックコーディングができているのかや、Webパフォーマンスをどれだけ考慮しているのかというのはデザインよりもコードに関係する部分が非常に多いです。

担当するコーダーさんがデザイン面以外の部分でどれだけの知識と技術を持っているのかで判断することができれば1番かと思います。

ここまででチラチラ言ってしまいましたが、Webサイトにおけるクオリティとはつまり「セマンティックコーディング」と「Webパフォーマンス」だと思います。

人によってどういうものがクオリティの高いものなのかという判断は様々かと思うのですが、こちらの記事ではそういうことだという認識で読み進めてください!(笑)

それでは、どのようなサイトがクオリティが高いと言えるのか、見ていきたいと思います!

まとめ:サイトにおけるクオリティは「セマンティックコーディング」「Webパフォーマンス」

文章構造化がしっかりとできている。

色々なサイトのソースコードを見ていると、たまに文章構造化ができていないサイトを見かけます。
文章構造化ができていないと、機械がそのページの情報を正しく、もしくは上手く読み取ってくれず、結果として伝えたいことを伝えることができていないサイトになってしまう可能性があります。

今後文章構造化に焦点をあて、詳しく解説した記事も投稿しようとは思いますが、ここでは一先ず「本の構造」のようなものをイメージしていただければと思います。

つまりは、一般的な本の構造にある

  • 表紙
  • 前書き
  • 目次
  • 本文(この中に各項目の見出しや詳細が繰り返されていく)
  • 後書き

これらの項目を、私たちは目で見て読み取ることができますが、コンピューターにはきちんと「ここが表紙だよ。」「ここが目次だよ。」と教えてあげなければなりません。
これが文章構造化だと、簡単に思っていていただければと思います。

極端な話をすると、サイトを構築するだけなら<div>タグや<p>タグのみで構成することも可能です。
しかしながら、コンピューターにサイトの内容を上手く伝えるには、HTMLにて適切なタグを付けなければなりません。

以下に基本的な文章構造化タグを記載しますので、ご確認ください。

基本的な文章構造化タグ

<head>ヘッドタグ
この中にページの設定等を記述します。基本的に人間の目には見えない部分となります。

<body>ボディタグ
この中に記載されたものが、目に見えるようになります。サイトに表示させる様々なコンテンツに関しては、以下のタグを利用し、基本的に<body>内に記載していきます。ヘッドタグの隣にいるイメージ。

<header>ヘッダータグ
この中にページ上部に表示する要素等(ロゴやナビゲーションなど)を指定する。アーティクルタグ内に記載すると本の表紙のような役割になる。

<nav>ナビタグ
この中にメニュー項目等を指定する。大体ヘッダータグの中に入る。

<main>メインタグ
そのページのメインコンテンツを指定する。ヘッダータグの隣にいるイメージ。

<article>アーティクルタグ
独立したコンテンツを指定する。ブログだとしたら、ここから記事が始まる。記事のタイトルはアーティクルタグ内のヘッダータグに記載する。

<section>セクションタグ
本で言えば章のようなもの。1つのコンテンツ内に複数個のコンテンツが並んでいるときは、このセクションタグが複数個並んでいる。

<aside>アサイドタグ
ページの補足情報を記載する部分。サイドバーなどに使用。

<footer>フッタータグ
本で言えば裏表紙のようなもの。ページの締めの部分を指定する。

基本的ではありますが、上記のような構造化タグを活用して、サイトが構築されていると、機械が何がどこにあるのかを把握してくれやすくなります。
もしめちゃくちゃ安くで構築してくれたサイトを所持していたとして、なかなかSEOが思わしくない際には、ソースコードを見てみるのもよいかもしれません。

各タグの階層についても、今後より詳しく記載した記事を投稿しますので、お楽しみに!

まとめ:機械が読み取りやすい構築を心がける。

画像の使用をできるだけ避け、CSSでの表現で構築されている。

例えばボタンやメニューなど、シンプルなデザインまで画像が使用されているのはWebサイトのページ読み込みに大きく影響が出てしまう可能性があります。

基本的にはWebサイトにおいて画像の使用は、避けることができるのであれば基本的に避けたほうが良いです。(画像よりも文字の方が容量が軽いので!)

他にも、ボタン上のテキストを変えたいとき、メニュー項目変えたいとき、また画像から作るという手間も省くことができるメリットもあります。

CSSで表現できていたら、カラーを変えるのもメニュー名を変えるのも、追加も削除もコードの書き換えのみですぐにやりたい放題です。
変更の際にデザイナーやコーダーに頼まなくても、該当箇所を自分で変更すればよいだけなので、コストも削減できます。

こちらに関して、たしかに画像を使うことは、サイト制作においての制作自体のスピードは上がり、納期が縮まるようなメリットがあります。また創造性溢れたオリジナルのボタンや見出しによりサイト閲覧者の目を引くことができる可能性もあります。

しかし長い目で見てしまえば、コンテンツの変更があった際に画像の作成から入らないといけないということや、そもそもWebパフォーマンスの低下がおきてしまう等、デメリットが多々おきてしまいます。
どのような形であれとりあえずサイトがほしい、ということであれば、それでも良いかと思います。

私どもも、お客様がお急ぎであればそのように対応して構築し、後々から画像をCSSでの表現に変えていくということも可能です!

ご予算や希望納期に合わせ、構築の形は変えられますので、お気軽にご相談ください^^

まとめ:CSSで表現できるものがあれば、なるべくCSSでの構築を努力する。

過剰なポップアップや、追尾式のナビゲーション(メニューなど)の使用が少ない。

こちらはどちらかというと「ユーザビリティ」に関する項目となりますので、クオリティが高いかどうかということは一概には言えませんが、紹介させていただこうかと思います。

例えばサイトを訪れた際に出てくるポップアップ広告や、スクロールと同時についてくる追尾式のナビゲーション等。
機能としては魅力的ですが、情報をもとめ訪れてくれたユーザーにとって不快感を与えてしまうような出力であると、SEOにおいて重要なサイト回遊率が下がり、離脱率が上がってしまう可能性があります。

あまりおすすめできないのは、記事を見ている途中に出てくる時間差でのポップアップです。
このような単純に広告をクリックさせるだけを目的としたポップアップに対して、ユーザーは不快感を覚えます。

こんなに頻繁に広告出るなら、このサイトの記事は読まないという思考からの即ブラウザバックからの別サイトへ、というのが基本的なユーザーの動きとなります。

そうなってしまうと、本来のコンバージョン率を上げるという目的は決して達成することはできません。

大事なのは、自ら押したいと思い、押させること
コンバージョン率を上げたいのであれば、騙し手のようなものを使うのではなく、良質なコンテンツを提供することや、信頼度の向上による能動的なお問い合わせを目指しましょう!

ちなみに紹介はしましたが、決して実装しないようにということではありません。
効果的に活用すれば、便利に感じるユーザーが多くいることもまた事実です。

実装する際は、例えばユーザーの視線を邪魔しないように出す等、何かしらの工夫を凝らした上で上手に活用しましょう!

まとめ:ユーザーにとって邪魔と感じるコンテンツはできるだけ避ける。

サイト管理者によるカスタマイズの利便性が高い

こちらに関しては外から判断することはできないですが、せっかくサイトを作り、育てていかなければならない上で重要な面ではないかと思い、含めさせていただきました。

よく既存サイトの修正や編集についてご依頼をいただくことが多いです。
中には非常に難しいご依頼もありますが、その多くは軽微であると言える修正がほとんどです。

こちらに関しては前サイト制作者様が管理面までを含め構築することができていれば、こうしてお頼みいただく必要もなかったのではないかなと思う案件がほとんどでした。

最近はWordPressによるサイト構築が主流となってきております。

WordPressは管理画面のカスタマイズや機能構築により、驚くほど簡単にカスタマイズがしやすいように構築することも可能となります。

こちらに関しては、今後WordPressのカスタマイズ性を向上させるために役に立つ記事も投下していこうかと思っていますので、お楽しみに!

もし今後の管理機能面でも良質なものをお求めの場合は、WordPressに精通しているコーダーさんを見つけるのも一つの手なのではないかと思います!

まとめ:管理者様がどこまでを求めているのかを考慮することも大事なこと。

総括

いかがでしたでしょうか?
自身のサイトに当てはまる項目はありましたでしょうか?

あったのであれば、それは「クオリティの高いサイト」「質の良いサイト」だと、胸を張って言えるのではないかと思います!

目で見るだけでは判断できない部分にこそ、サイトにおけるクオリティが詰まっていると思います。

  • セマンティックコーディング
  • Webパフォーマンス
  • ユーザビリティ
  • カスタマイズ性

あらゆる事項について考えていかないといけないですが、良質なサイトを量産していきましょう!!!

ちなみに、安さの落とし穴というわけではないですが、どうしても予算が厳しい場合には、上記の内容を妥協したようなサイトを制作することで、サイト制作費用を削減するという手段もあります。
逆に言えば、300,000円ほどで作成してもらったサイトが、上記の内容が含まれているものであったとしたなら、それは値段相応のクオリティだったと思われます。

クオリティを求めると時間は必ずかかってしまいますので、コストもかかるべくしてかかります。

とりあえず表示さえしてくれればそれでいいという場合であれば、上記の内容について細かく対応する必要もなくなってくるので、そういう面で制作費を削減していくことも出来るでしょう。

予算を工面する際は、クオリティについても考慮した上で発注先にお伝えすれば、制作までがスムーズに流れるかもしれませんね!

この記事が発注前に少しでもお役立ちいただければと思います!

ではでは!