営業時間 9:30〜17:30(平日)
サイト内検索
- 文字サイズ +
印刷範囲
全体プリント
本文プリント

ウェブ担当者に HTML の知識は必要か?

投稿日:
  • このエントリーをはてなブックマークに追加
ウェブ担当部署に配属されたけど、HTML の知識は必要?

この春から、ウェブ担当の部署に新しく入ることになりました。ウェブの仕事といえば、やはり HTML の知識がないと、やっていけないんでしょうか?

ウェブ担当者にとって HTML は「常識」

企業のウェブ担当者として、ウェブサイトを運営する立場になられたわけですね。実際の制作作業を別の人 (社外の制作会社など) にお任せしたり、あるいは自社内で既に CMS (コンテンツ管理システム) が導入されていてそこに情報を入力するだけでウェブページが生成できるようになっている場合、HTML の詳細な知識は必要ないと思われるかもしれません。

しかし、質の高いウェブコンテンツを実現する (改善提案をしたり、発注者として制作会社をディレクションしたりする) ためには、HTML の知識はあったほうが絶対によい、というのが企業ウェブ担当者を長年経験してきたものの実感です。アクセシビリティ、SEO、ソーシャルメディア連携、など顧客のユーザーエクスペリエンス (UX) を下支えする諸側面で適切な判断をするうえでも、また、スタイルシートやJavaScriptといった上位規格を理解するためにも、CMSの使い方の上達のためにも、ウェブの基本となる HTML を理解していることは大きな強みになります。

とはいえ、いきなり HTML の全てを理解することは容易ではありません。なにから勉強するのが良いかで戸惑うかもしれません。私は、HTML のタグの使い方を覚えるのと並行して、以下のことを意識するのがよいのではないかと考えています。

普段から「情報構造」を意識するクセをつける

HTML とは、ウェブコンテンツの構造をマーキングする (意味的に印をつける) ものと考えることができます。もう少し具体的に言うと、コンテンツにおいて、どの部分が見出しなのか、どの塊がひとつの段落なのか、どの部分が箇条書きなのか…を (インターネット関連テクノロジーが共通に認識、解釈できるように) 明示的にするものです。

このことを念頭に、実際に HTML を書くことができないとしても、コンテンツを「見た目」で捉えるのではなく「情報構造」として意味的に捉えるクセをつけておくとよいと思います。

  • 見出し (大見出し、中見出し、小見出し)
  • 段落
  • 箇条書き (行頭番号なし/あり)
  • 強調
  • 表 (テーブル) における見出しセルとデータセル。およびそのテーブルの表題 (キャプション)
  • フォームの入力欄の種類 (テキストボックス、チェックボックス、ラジオボタン、セレクトメニューなど)。および各入力欄の項目名 (ラベル)
  • リンク (別のコンテンツに移動する機能)
  • ボタン (何らかの機能を実行する機能)
  • …など。

上記それぞれに、決まった記法つまり「タグ」があるということを理解しておきましょう。理想的には、実際に「タグ」を使ってコンテンツを書いてみるとよいですが、簡易的にマークダウンという記法で文章を記述することで「情報構造」を意識することに慣れる、というのもありかと思います。(ご参考 : 「日本語Markdownユーザー会」ウェブサイトの「Markdownとは」および「Markdown記法」)

基本的なメタデータを知っておく

また、ウェブコンテンツには、ブラウザ画面上にページとして表示される情報以外に、そのページに関する付帯的な情報 (メタデータと言います) もあります。メタデータも HTMLのルールに従って書かれていて、様々なところで活用されるので、ウェブ担当者としては、以下のようなメタデータがあることを理解しておく必要があります。

  • タイトル : ウェブページのHTMLソースコードの中で、<title>●●●</title> と記述される情報。そのページが検索エンジンやソーシャルメディア、キュレーション系サイトなどで採り上げられる際に、またブラウザのブックマーク登録の際に、この情報が引用される。
  • 概要文 : ウェブページのHTMLソースコードの中で、<meta name=”description” content=”●●●”> と記述される情報。そのページが検索エンジンやソーシャルメディア、キュレーション系サイトなどで採り上げられる際、概要文としてこの情報が引用される。
  • OGP (Open Graph Protocol) : そのページが Facebook などソーシャルメディアで掲載される際に、表示したいタイトル、概要文、アイキャッチ画像などを設定することができる。

HTML を学ぶ

さて、ここまでお読みいただいて (また日々の業務で意識することを通じて)、HTML への関心が高まってきたら、ぜひ HTML を学んでみて欲しいと思います。書籍や勉強会など、さまざまな学習機会がありますので、それぞれ、自分に合った手段でトライしてみるとよいでしょう。

以下、仕事の合間に簡単にできることをご紹介します。

  • マークダウン形式で文章を書くことを習慣化して、都度、それを HTML に変換してみる。(マークダウンエディターと呼ばれるアプリにはたいてい、HTML への変換機能が用意されています。)
  • ウェブページがら「見栄えの制御 (専門用語では「CSS」と言います)」を取り除いて、骨格となる「情報構造」を見る癖をつける。(Chrome や Firefox で使える「Web Developer」というアドオンがあるので、それを使うと簡単にできます。)
  • 関心あるウェブページ (もちろん自社のページでも結構です) のソースコードを見る癖を付ける。(たいていのブラウザでは、表示されているウェブページ上で右クリックすると、ソースを見ることができます。)

このようなことを通じて、少しずつ HTML に慣れていただければと思います。HTML を理解していることで、的確な制作ディレクションができたり、制作会社の質を見抜くことができるようになります。ぜひ頑張ってください。

ウェブ戦略の専門家がご相談を承ります。お問い合わせフォームはこちらをクリックしてください。
BtoB企業ウェブ担当者必見のお役立ち情報が満載のウェブ戦略ノウハウ資料が無料でダウンロードできます。

東京~大阪までご支援可能です。まずはフォームよりお問い合わせください。

BtoB企業のウェブ担当者必見!!売上アップに貢献するウェブ解析の活用方法
seminar-banner20170119

【無料】BtoB企業ウェブ担当者必見のノウハウ資料ダウンロード

戦略的ウェブ活用のエッセンス/事業戦略と同期した戦略的ウェブ活用のノウハウをギュッと凝縮!
失敗しないための戦略的ウェブサイト構築手順/リニューアルを成功させる秘訣は「作り始める前にやるべきこと」にある
ウェブマネージャーが身に着けておくべき7つのスキル/企業のウェブ担当者に求められる7つのマネジメントスキルとは?
セールスとマーケティングをつなぐウェブ解析/営業部門との連携を図り、営業員が活躍しやすいように後方支援をする
ページの先頭へ