TIG comeerece(ティグコマース):触れる動画でリテール業界の次世代デジタルマーケを実現 TIG comeerece(ティグコマース):触れる動画でリテール業界の次世代デジタルマーケを実現

【HTML初心者向】おすすめリファレンスサイト8選!

  1. デジタルマーケティング

今回は、オリジナルサイトの作成を考えている方に向けてWEBサイト運営に関するアドバイスを交え、初級者から中級者まで、幅広くお役立ちできるリファレンスサイトのいくつかをご紹介いたします。

初心者向けのWEBイト制作講座や、WEBデザインの基礎、さらには収益化を目指す方へのその方法など、HTMLを学ぶ上で知っておいたほうがいい情報が詰まっています。自分でオリジナルサイトを運用したいという方は是非参考にしてください。

リファレンスサイトとは

そもそも、リファレンスとはどういう意味なのでしょうか?
アスキーデジタル用語辞典によると以下のように説明されています。

対象となるものの機能やしくみについて、一般のマニュアルよりも詳細に書かれた文書のこと。また、プログラミングの分野では、主に関数の使い方などが書かれた文書のことを指す。 

出典:ASCII.jpデジタル用語辞典

そのため、一般的にリファレンスサイトは、対象の機能や使用などを網羅的に開設した「リファレンスマニュアル」のことを示すことが多いです。「リファレンスコード」「リファレンスデザイン」「リファレンス実装」といった場合には、開発や実装の手本とすべき基準という意味で使われています。

プログラミングの分野においては、変数や関数などのメモリ空間上での所在を示すデータのにことを「リファレンス」ということがありますが、この場合の意味は日本語で「参照」という意味で使われることが多いです。

おすすめのリファレンスサイト

ここからは、Webサイト制作に役立つリファレンスサイトのいくつかを紹介いたします。是非、参考にしてみてください。

HTMLクイックリファレンス

引用:HTMLクイックリファレンス
http://www.htmq.com/

HTMLのリファレンスのほかにも、CSSやJavaScriptなどのWebデザインで使用されるリファレンスも掲載されています。サイト作成における全般で役立つサイトです。

初めてのホームページ講座

引用:初めてのホームページ講座
http://www.hajimeteno.ne.jp/index.html

Webサイト制作初心者向けのリファレンスサイトです。
リファレンスサイトと聞くと、言葉が難しく中級者向けのイメージがありますが、このサイトはそうではなく、初心者向けに分かりやすく書いています。特に、「何をしたいのか」という目的から必要なタグを選ぶことができる逆引きHTMLは、Webページ制作が初めての方にとって非常に便利です。ほかのリファレンスサイトがとっつきにくいという方にお勧めのサイトです。

TAGinex

引用:TAG index
https://www.tagindex.com/

基本的なリファレンスのほかにも、カラーチャートなど、色に関するリファレンスが多いのが特徴のサイトです。
更には、色の組み合わせチェックも行うことができるので、デザインに困ったときにも使用したいサイトです。図やソースコードとともに実際の表示を確認しながら学習することが可能なので、知らないタグが出てきてもイメージしやすいです。

HTML タグボード

引用:HTML タグボード
http://www.dspt.net/

初心者から中級者まで幅広く使えるリファレンスサイトです。
初心者向けのホームページ作成講座やWEBデザインの基礎、さらには収益化の方法など、HTMLを学ぶことができる優良サイトです。

MDN web docs

引用:MDN web docs
https://developer.mozilla.org/ja/

HTMLの隅から隅まで情報が載っているリファレンスサイトです。見やすいデザインもおすすめです。各タグごとに仕様やブラウザでの実装状況を確認することが可能なので、IEなど様々なブラウザを相手にする作業を行う場合にも役立ちます。

HTML5.jp

引用:HTML5.jp
http://www.html5.jp/

HTML5 の最新情報に加え、すでに利用可能な Canvas の使い方などを詳しく解説しているサイトです。W3CのHTML仕様を日本語訳しています。リファレンスのほかに具体例がたくさん載っているので、イメージがしやすいのが特徴です。

HTML リファレンス

引用:HTML リファレンス
http://www.webcreativepark.net/html/

mainなどの要素のほかにも、属性情報も多く掲載されています。階層毎に分かれた見やすいページデザインになっているのが特徴です。

しらぎくのウェブサイト作成入門

独特のキャラクターが迎えてくれるリファレンスサイトです。非常に見やすいサイトです。アルファベット順に各タグが並べられており、用語辞典のような仕様になっています。なんの要素を表しているかわからないタグがあれば、すぐに解決に導いてくれます。

Webサイト作成の際の注意点と心得

ここでWEBサイト作成のポイントを解説していきたいと思います。WEBサイトを作成しようと考えている方は是非参考にしてみてください。

制作物の責任を放棄しない

WEBサイトはその特性として、誰でも簡単にWEB上に制限なく公開できてしまいます。それにより、著作物に対しての責任を放棄し、際限なく情報を発信してしまうことは一番避けなくてはならないことなのです。

つまり、製作者に悪意がるないは関係なく、結果として第三者を傷つけてしまったり、被害を与えてしまう、不愉快な気持ちにさせてしまう、ということがしばしば見受けられます。万が一、自分が制作したモノによって、このような事態が起きてしまった場合には、表現を変更する、即刻公開を中止する、誤解を解くための説明を掲載する、または謝罪する、といったように、誠意をもって迅速に対処する必要があるのです。

批判をするのではなく観察する

数あるWEBサイトの中には、あまり好ましくないものや、中には公序良俗に反しているものもあります。こうした良くないWEBサイトに出会ったときには、どんな態度を取るべきでしょうか。
「見て見ぬふりをする。」「自分のサイトの方がマシだなと安心する。」「SNSで拡散してみる」等々・・・。反応は人それぞれで様々です。
クイックリファレンスでは、そのようなサイトに出会った時に心構えとして以下のように述べています。

どのような態度をとるのが正解かということはありませんが、製作者の視点でホームページを見る場合、単に批判をしているのではなくて、もう一歩踏み込みたいものです 

引用:HTMLクイックリファレンス

つまり、ただ「これは駄目なWEBサイトだな」と批評家になるのではなく、「自分のWEBサイト作成にどう生かしていくのか」と、常に製作者の意識でいることが大切です。具体的には以下の項目に注目してみることです。

  • そのホームページはなぜ悪いのか?
  • 問題はなにでどこにあるのか?
  • 自分だったらどうその問題に向き合い解決するか?

何故そうするかというと、一見、悪いと思えるホームページの中にも、何かしら良いものに発展する可能性が少なからずふくまれているからです。製作者は、そうした部分を注意深く観察して、自分の制作に取り入れていく貪欲さとしたたかさを身に着けるべきなのです。

落ち込む必要はない

先ほどとは逆に今度は、自分が作成したWEBサイトを批判された場合は、どのような姿勢でいるべきでしょうか。
折角作ったものが批判されることは、悲しいものですし、時には徒労感すら感じるかもしれません。
しかし、批判されたことに落ち込んで、自身が作成したホームページを閉鎖してしまったり、批判に耳を塞いでしまうことは非常にもったいなく、むしろ、損ともいえます。

批判をされた時こそ、心を強く持って冷静に受け止める力が必要です。WEBサイトを批判する人の中には、親切心で、部分的な誤りを指摘してくれたり、率直で為になるようなアドバイスや意見を述べてくれている可能性があるからです。
そして、WEBサイトを改善するきっかけになると考えれば、そういった類いの批判をもらうことも、決して悪いことばかりではありません。

何がしたいのかを明確に

Webサイトを制作するとなれば、誰もが良質なWEBサイトにしたいと望むのは当たり前であると思います。
しかし、そう思ってはいても、行き詰ってしまうことはあります。実際にそういう状態に陥っているWebサイトはインターネット上に多く散見しています。

では、そういったWEBサイトは、一体なにが良くないのでしょうか。
例えば……

  • トップページが重く扱い辛い
  • タグやスクリプトの使用が間違っている
  • サイト全体の構成が悪い

上記のようなテクニック要素を含んだ問題というのは、実際はサイトの良し悪しとはあまり関係がないのです。
そういったテクニック的な部分において指摘を受けた場合にも、慌てずに、テクニックを学び、または、メンターといわれる相談者や上級者に相談するなどして対処していけば解決する問題がほとんどなのです。

むしろ厄介なのが、初心者が往々にして陥りがちな最も典型的な失敗である、「何を伝えたいのかわからない」サイトを作ってしまうことです。
このような状態になった場合は、制作したサイトの目的についてもう一度しっかりと検証し直すことがとても重要なのです。
なぜならば、「目的や狙いのないホームページ」は、ほぼ例外なく、「制作すること自体が目的」となってしまっているというのが殆どだからです。

こうした状態では、サイトがある程度に完了してしまうと継続、また存続しようとする意気込みが薄れ、やがて失い、せっかく作ったのに誰も見てくれないと落ち込んでしまうのです。
それは利用者サイドとしても意味をなさないWEBサイトということになってしまいます。

誰になにを伝えたいのか

例えば、なんでもいいからみんなに見てもらえるホームページにしたい、よくわからないけどとにかく格好いいホームページを作りたい、というような、あいまいな制作動機からは優良なコンテンツは生まれ難いものです。
やる気や情熱を否定しているのではなく、制作意欲が強いからと言って、必ずしも良質な制作物ができるとは限りません。

  • パソコンは持っていないけど、自分が作ったレシピを知ってほしい
  • ホームページの作り方は詳しくないけど、旅行の写真を公開したい
  • 誰かの役に立つ自分のサバイバル術の情報や知識を発信したい
  • インターネットである必要はないけれど、サークル活動のメンバーを募りたい

このような明確な動機や目的があったほうがより良いサイトにつながります。
「●●なひとたちに▲▲を伝えたい。その結果、■■になると良い」
上記の●●や▲▲の部分に当てはまるものを構想としてもって置くことは非常に大切なことです。しかし、基本的なこの部分で躓いてしまっているWebサイトが多いというのが現状です。

優良コンテンツができるまで

そのWEBサイトやコンテンツの良し悪しを判断するのはあくまでもユーザーです。
ターゲットユーザーを意識することはとても大切ですが、かといって、ユーザーの言いなりになったり、媚を売るということではありません。相手の一歩先を見越して、思い通りにユーザーを動かすという積極的な姿勢を心がけるということが大切です。

ターゲットを決めることで、実際に制作するコンテンツについてもその方向が決定されます。ターゲットとコンテンツはどちらが後でも先でも構いませんが、この二つは必ずセットになっていなくてはならないということを念頭に置きます。

「小学校低学年くらいまでの子供たちをターゲットにした童話コンテンツ」
「ダイエットをしている中高年をターゲットにしたエクササイズコンテンツ」

といった具合です。
そして、ターゲットとコンテンツが決まれば、今度は表現手段が決定できます。
例えば、以下のような手段が挙げられます。

  • 子供がターゲットなので、漢字を少なく文字数を少なく、明るい色を使う
  • クリックが苦手かもしれないので、ボタンを大きく設定する
  • 両親に読み聞かせをしてもらう為に、あえてナレーションを入れない

この際には、ターゲットがどのように利用するかなど、具体的なイメージを膨らませることが大事です。
以上のように、ターゲット、コンテンツ、表現手段の3つが滞りなくイメージすることができれば、この時点でホームページ作が半分成功しているといえます。

仮に物語や絵の表現が苦手だったとしても、ターゲット・コンテンツ・表現手段の3つに矛盾がないということだけで、優良なホームページ制作に近づくのです。

WEB制作に向いているタイプの例として

当たり前のことですが、人にはそれぞれ個性があり、適正も異なります。Web制作においても、やはりそれに適したタイプというのがあります。

WEB制作というのは、多岐に渡るいろいろなアプローチ方法があり、どんな人でも関わることができます。
特に、以下のタイプに当てはまる人は、Web制作に非常にむいているといえます。

打たれ強い人

失敗から学べる人という意味合いが強いです。上手くいかないことのほうが多いのがWEB制作なのです。

合理的で現実的な人

WEB作成の基本として、事実を正しく認識して次に活かせるように対処できる人。

イベント・旅行などの企画や立案が好きな人

WEB制作では発想力・立案力・計画性はとても重要です。

人付き合いが上手な人

共同作業でもグループ活動でも良いですし、必ずしも自分ひとりで取り組むというような決まりはなく、すべては自由なのです。

一つ一つの物事・事柄に深く精通(専門的)している人

狭く深い人はWEBでは特に強い兆候にあります。中途半端は良くない。

絵・文章・音楽・ダンスなど、何か一芸に秀でた人

こういった特技がある人は、WEBでも大成する例が多いようです。

会議・宴会、またそれ以外の集まりなどで、場を仕切れる人

計画、立案、判断における能力は重要です。

物覚え・要領の良い人

意外と重要なのは、あまり深刻に悩まず、そこそこのモノをサクサクと作る能力のある人は向いて言えます。

地味な作業や、地道な作業に耐えられる人

特に、大規模なWEBサイト制作をする際には必ず必要となる力です。

面倒なことが嫌いな人

手数や手間をできるだけ省いて、効果の高い方法を探せる人。

もちろん上記の特徴に当てはまらなくても、WEB制作に向いていないということではありませんので、ぜひチャレンジしてみてください。

色々お伝えしましたが、WEBサイト制作において一番大切なことは楽しんで行うことです。楽しみながら作ったWEBサイトは、きっと訪問者にもその熱量が伝わるはずです。先に紹介したようなリファレンスサイトも利用しながら、自分に合った方法を見つけて、根気よくWEBサイト制作に取り組んでみてください。

関連記事