Webサイト担当者は必須!デザインに必要なHTMLの知識とは?

人差し指でポイントを強調する男性

更新日:2017年05月31日 | 公開日:2016年06月03日

HTMLという単語を聞いたことがないWeb担当者の方はいないでしょう。
でも実際にコーディングするわけでもないので、「自分にはあまり関係ないかな?」 と思っている方も多いと思います。
しかしHTMLの浸透や検索エンジンへの内部対策の重要性の高まりなど、実はHTMLは非常にホットな話題で制作会社との打ち合わせなどでもキーワードとして登場することが多くなっていきます。

この記事では、Web担当者がサイトデザイン時に最低限知っておくべきHTMLの基礎知識をおさらいします。

HTML5でウェブサイトデザインの何が変わったかおさえておこう

タイピングする人

HTMLという言葉がウェブ制作の現場でホットな理由の一つとして、HTML5の浸透があげられます。
これまでのHTMLはウェブ制作の基本中の基本だったわけですが、「5」がついたことでいったいどんな変化があったのかまとめました。

【HTML5でできるようになったこと】
■ Flashに代わって動画や音声データをHTML言語で埋め込めるようになった
■ JavaScriptのお世話になっていた機能が標準で使えるようになった
■ CSS3と連携してよりリッチな表現ができるようになった

順番に見ていきましょう!

■ Flashに代わって動画や音声データをHTML言語で埋め込めるようになった
FlashはiOSがサポートしなかったこともあって、急速に標準規格の座から滑り落ちていきました。
実際にiPhoneでFlashが使えないというのは致命的で、「スマホでリッチなページを表現するにはどうしたらいいの?」という雰囲気がありました。
HTML5はそんな空気を一掃してくれました。
HTML5では、これまで画像を<img>タグで扱ったのと同じやりかたで<video>や<audio>タグで、動画や音声を扱えます。

■ JavaScriptのお世話になっていた機能が標準で使えるようになった
これまでHTMLではできなかった「ドラッグ&ドロップ機能」「ユーザー位置情報」「オフライン使用」「ファイル操作」「履歴操作」などが、jQueryなどのJavaScriptを使わずとも実装できるようになりました。
ファイル操作などはブラウザにデータを保存できるので、JavaScriptですらできなかったことができるようになったと言えるでしょう。

■ CSS3と連携してよりリッチな表現ができるようになった
「透過処理」「角丸」「ドロップシャドウ」「線形グラデーション」「円形グラデーション」「回転」「縮小」「傾斜」「アニメーション」などは、これまでスタイルシートと連携しても表現に限界がありました。
HTML5ならこうした処理もらくらくこなせるようになっています。

SEO対策に強いデザインを志向するなら必須のHTMLタグ

プログラミング言語

さて、HTMLの話題でもう一つweb担当者が見逃せない話題が、「SEO」です。
検索エンジン最適化がアクセスアップのために必須だということは言うまでもありませんが、その対策には大きくわけて「外部対策」と「内部対策」があります。

「外部対策」とは簡単にいうと、外部から質の高いリンクをたくさん張ってもらうという対策になります。
このため、アクセスアップを図りたいサイトへのバックリンクを有料で買ってくるという手法が幅を利かせていた時代がありましたが、グーグル自体がこうした方法を問題視していることもあり、最近ではこの方法は下火になってきました。
現在では読者にとっての問題解決につながる質の高いコンテンツを作成し、SNSなどで拡散してもらい、自然な被リンクを獲得していく手法が主流になっています。

一方「内部対策」というのは、タイトルタグ、メタディスクリプション、見出しタグ、alt属性、階層化された内部リンクの設置、XMLサイトマップなどを適切に記述することで、具体的にはすべてHTMLのタグを適切に活用するということになっています。
適切なHTMLタグで適切なコンテンツを挟むことで、検索エンジンにサイト構成やコンテンツ内容を正確に理解させることが可能になります。

Web担当者としては、最低限下記のHTMLタグ周りできちんとした内部対策ができているかチェックできるスキルと身につけておく必要があります。

1. ページタイトル名は短く簡潔に、かつキーワードを含める
<title>タグで囲まれた部分は検索エンジンが最も重視する個所の一つです。
いまだにタイトルページが「トップページ」であったり「名称未設定」というページを見かけることがありますが、SEO的に言うと非常にもったいない状況です。
キーワードは2文字程度を入れ込んだほうが効果的と言われています。

2. descriptionタグは内容を簡潔に124文字以内で要約する
<description>はページ内容の要約と考えればよいでしょう。
検索結果にダイレクトに表示される部分なので、丁寧に作る必要があります。検索エンジンはページ全体を自動的に要約してくれるのではなく、この<description>で囲まれた部分を表示していることを忘れないようにしましょう。

3. <h1>~<h6>は内容にそって階層的に使う
まず<h1>タグはページの見出しとなるので、かならずキーワードを入れるようにしましょう。
またHTML5での重要な変更点として、<h1>タグはHTML4.01では1ページに1回が目安だったが、何度使っても順位を下げることはなくなったので、内容に従って適宜使うようにしましょう。

4. 画像にはalt属性を必ずつける
画像自体にいくら表現力があっても検索エンジンはその画像をSEO的には認識してくれません。
その画像がどんな意味合いを持つのかはalt部分に記述できますので、しっかりと検索エンジンにアピールしましょう。

5. 強調を表すstrongタグはHTML5では「重要性」も表すようになった
<strong>はこれまでのHTMLでは単に強調を表す要素でしたが、HTML5では「重要性」という意味が付与されました。したがって、ユーザーへの視認性だけでなく、検索エンジンにアピールしたい部分に対しても<strong>タグを使うことが有効です。

その他、階層化された内部リンクの設置、XMLサイトマップなどについては、チェックしてすぐに改善できるというものでもないので、次回のサイトリニューアルの時に最適化するとして、今挙げた1-5についてはWeb担当者としてさっそく自社サイトの内部対策のレベルをチェックしてみましょう。

【まとめ】外注する前にデザインの知識を最低限持つ!

最低限の知識があるかどうかで、Web担当者が発注をかける際の効率や交渉力は大きく変わってきます。
当然ながら、サイトができあがってから「思っていたものとは違う!」といったトラブルを防げる可能性もぐっと高まります。

ビジネスマッチングサイト『アイミツ』ではホームページ制作業者に関する専門知識を持ったコンシェルジュが、信頼のおける業者を完全無料で紹介することができます。

まずはお気軽にお問い合わせください。
すぐれたコンシェルジュが、あなたの会社に合った企業選びを全力でお手伝いさせていただきます。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ