2012年1月18日水曜日

これから作るサイトはHTML5で組むべきか否か



久しぶりにWEBネタを書いてみました・・・










WEBを作られている方なら必ず考える事だと思いますが、
今新しくサイトを作る場合、HTML5で作りますか?XHTML1.0で作りますか?

もちろん、既存サイトの部分改修などでは、さすがに文書構造を変えるわけにはいかないので、
既存踏襲になると思います。


ただ、最初に僕の考えを言うと、

「ゼロから作る、もしくはフルリニューアルの場合は絶対にHTML5で組む」

です。


なぜか?


もちろん、今HTML5で組む事のリスクもあります。
というか組む必要性がそこまで無い、とも言えます。

逆にHTML5で組むことのメリットはそこまで大きくないと思います。
(サイトの性質によりますが)


ちょっと僕なりにそれぞれのポイントを整理してみようと思います。
(2012年1月現在の、あくまで「僕の考え」ですのであしからず)



▼今HTML5で作る事にリスクってあるの?

基本、クリティカルなものはほとんどないと思っています。
ただ、HTML5はまだ勧告前なので、仕様に変更が入るかもしれません。
また、ブラウザの対応がまちまち(IE6,7はNG)という所でしょうか。

でもでも、googleがあれだけプッシュして、MSも本格導入して、
appleも非フラッシュ路線のためにデバイス革命(iphone,ipad)さえ起きている今、
今後大きく仕様が変わる事はないと思います。

あったらまた作り直せばいいんですよ。
そんな飛行機が落ちるくらいの可能性にビビって新しい事にトライしないのはもったいないです。

ま、ちょっと真面目に結論付けると、

・サイト内で統一してHTML5仕様に作っておけば、多少仕様が変わっても置換できる
 →つまり、中途半端に導入せず、真面目にキレイにマークアップしておくことが重要
・非対応ブラウザ(IE6,7)にはコンディショナルタグでHTML5対応用JSを無理やり読ませればOK
 →そんなブラウザで見ている人の閲覧快適さなどアウトオブ眼中

という感じです。


▼今HTML5で作るメリットは?

では逆にメリット面は何があるのだろうか。
もちろん、リスクが少ないって言っても、メリットが無いのであれば、
新しいタグを勉強しながらHTML5で組むよりは、XHTML1.0で組んだ方が、
慣れもあるし、ソースの統一もできるし、明らかに効率が良い。

でも、僕はHTML5で作る事は確実にメリットがあると思っています。
(というか信じています笑)

まず、世の中のサイトが紹介するHTML5のメリットには大きく分けて2つポイントがあります。

1、リッチコンテンツのプラグイン頼りからブラウザ×APIへの代替
2、マークアップの改善


正直な所、今HTML5が盛り上がっているのは、「1」の要因が大きいと思います。
目立つので。

フラッシュなどで頑張って作っていたリッチコンテンツが、
HTML5とJavascriptという、馴染みの深い技術で誰でも(語弊あるけど)作れる。
そんな所に魅力を感じる技術者さんや制作会社がうれしそうに飛びついているのです。

ただ、ここで温度差が発生するのが、
「んな事言っても、世の中のサイトのほとんどには、そんなリッチコンテンツいらないんだよ」
という現実的な制作屋さんの声だと思います。

例えば企業サイトをリニューアルする、ECサイトを立ち上げる、
といった際に、そんなリッチコンテンツ、使う所がないのです。

canvasタグでjs使ってインタラクティブにグラフ生成してvideoタグで動画を流しつつ、audioタグで音楽流す、
なんてサイト、あんまないよね、というのが現実です。

ただもちろん、今後確実にリッチコンテツは増えていきますし、
スマートフォンの爆発的な普及により、必ず広がっていきます。


でもここでは、今、実際の案件で、HTML5を導入するメリット、
という所に絞って考えたいので、であれば「2」の、
「マークアップの改善」だと思います。


マークアップの改善、というものは色々ありますが、

・文書型宣言やtypeなどの記述が簡潔になった
 →ソースがスッキリする
・section,article,header,footer,aside,nabタグなどの新たなタグが増えた
 →より文書構造が本質的になる
・フォームタグ(特にinput)の機能が増えた
 →jsにさえも頼らなくて良い

という点が大きいかと思います。


僕は以前はガンガンコーディングをしまくっていたのすが、
その際にも、ソースをいかに簡潔に、シンプルに、美しく書くか、
という美学を持っていました笑。

3年前くらいに初めてHTML5/CSS3のセミナーに行った時に、
テンションが上がって作ったサイトが
なのですが、
「No Images, No Javascript, No Class, No ID, No Flash」
と書いてあるように、
気合で画像もJSもClassもIDもFlashもなーんも使わず作ってみたりもしました。

ま、これは確実にやりすぎですし、美学ってのはただのエゴなので、
目的を持ってソースを簡潔に、文書構造的に本質的にする必要があります。

ではその目的とは何か、

まずは、僕は制作時の効率性を重視するので、
ソースがシンプルである事は、ミスも少なくなるし、
チームで制作する時にも効果を発揮すると思います。
(ただそのためには関わる人が全てHTML5を習得する必要あり)

それよりも、重要な目的というのが、

・SEO上適切である事

だと思います。
(SEOってブラックボックスなので触れたくないテーマなんですけどね・・・)

SEOって、どんなサイトを作るにしても、成果を出すためには必須な事だと思います。
その手法は様々です。

ただその一つとして、内部施策というものがあり、それってつまり簡単に言うと、
「ページのソースをシンプルに、文書構造をしっかり作り、サイトパフォーマンスを高める事」
だと思います。
(もちろんキーワードを散りばめるとかサイト内リンクとかありますが割愛ご容赦)

結局は、SEOなんてgoogleさんとyahooさんに気に入られること、が重要なのです。
彼らのクローラがサイトを見に来て、情報を集めて、サイトを評価し、検索結果に反映するのですから。

で、ここで重要なのが、googleさんはhtml5が大好きです。
また彼らは本質的なサイトが検索結果に現れる事を日々試行錯誤しています。

つまり、上に挙げたような内部施策の要点に対して、
HTML5で貢献できる事は確実にあるのです。

・ページのソースをシンプルに
 →HTML5でhead内をシンプルに書こう!
・文書構造をしっかり作ろう
 →余計なタグは減らし、ここはタイトル、ここはナビゲーション、ここは補足情報、
  という、情報の優劣を明確にしてあげよう!
・サイトパフォーマンスを高める
 →ソースがシンプルになればサイトも軽くなるし、
  下手なプラグインを使わずHTML/CSS/JS/で作って、
  マルチデバイスでの最適なパフォーマンスを実現しよう!




このような事かな、と思います。



(ああやばいここまで書いて1時間かかってしまった・・・)


▼今HTML5で作る必要性は?

という訳で、最後に今HTML5で作る必要性、という事なのですが、
これまでだらだら書きましたが、結論がふわっとしていて申し訳ないのですが、

・どうせ将来的にデファクトスタンダードになるんだから今のウチに慣れておかないと!
・新規サイト立ち上げ、フルリニューアルできるチャンスなんだから導入しろよ!
・導入してから課題が出るくらいじゃないと、知見は溜まらないよ!(経験至上主義)


という感じです笑。



ちなみに、僕としては、無印さんのソースは結構好きです。
(というか無印のサイトが好きです)






ふぅ。
ちょっと思いつきで昼飯を食べながら書こうと思っていたのですが、
調べてから書いたら1時間ちょいかかってしまった・・・
もっと速く調べて速く書けるようになりたいな。




#追記
以前めちゃめちゃお世話になった(かなり勉強させてもらった)中山さんから、
「これから作るサイトはutf-8で必ず作れ」と追記しておくように言われたので載せときます笑


-------------------------------------------------------------------
■ 以下、参考にしたサイト