Pocket

 

2015年1月25日に行われたHTML5 Conferenceに参加してきましたので、自分が参加したセッションについて、要点や個人的に感じたことなどをまとめておきます。

  1. 「HTML5マークアップについて矢倉先生に聞いてみよう」
  2. 「Web Componentsのアクセシビリティ」
  3. 「2015年これからの日本のWebサイトパフォーマンスについて」

の3つのセッションに参加しました。

 
 
 

HTML5マークアップについて矢倉先生に聞いてみよう

 

「HTML5マークアップについて矢倉先生に聞いてみよう」のセッションは、W3Cの勧告となったHTML5について、実用の面でどのように使っていけば良いのかについてのトークセッションとなっていました。

 

自分的に要点をまとめると、

  1. ・勧告されているもの(タグ)などは基本的に使用して問題ない(ただしメンテナンスしやすい範囲で)
  2. ・CSSのベンダープレフィックスはプリプロセッサなどのツールで付ける
  3. ・iPhoneなどにはすでに、音声読み上げ機能が実装されているので、目の不自由な人に関わらず使う人が増えてくる?→今後WAI-ARIAやmicrodataなどの使用する機会が増えてくる
  4. ・WebComponentsのような典型パターンを作成し、共有していくことで誰でも一定の基準で制作を行うことができる→みんな幸せになれる??

こんな感じになりました。

 

HTML5のタグは実案件で使っていいのか?どこまでセマンティックにコーディングすれば良いのか?など、まだまだ判断が難しい部分がありますが、もしうまく動かなくなってしまったときにすぐに取り外せるようにしておくなど、ある程度メンテナンスがしやすいようにはしておき、新しい要素を取り入れていくのが良さそうです。

 
 
 

Web Componentsのアクセシビリティ

 

続いて「Web Componentsのアクセシビリティ」のセッションでは、WebCompornents自体についての使いどころなど聞けたらなと思い参加しましたが、内容はアクセシビリティが中心となっていました。

 

このセッションでの要点は、こんな感じにまとめました。

  1. ・キーボードの有無、音が出せない環境などでも情報を読み取ることができるか
  2. ・代替コンテンツは準備されているか
  3. ・色だけに依存したつくりになっていないか
  4. ・動いたり点滅しているものは止められるか

 

このあたりを注意して制作を進めることで、「アクセシビリティが高くなる=コンテンツの質が下がらない」といった具合になるようです。
逆にアクセシビリティが低いと、コンテンツが良くても全体的な質は下がってしまうのでアクセシビリティも大事な要素である、ということでした。

 
 
 

2015年これからの日本のWebサイトパフォーマンスについて

 

自分が参加したセッションのなかでは、一番おもしろかったセッションでした。

まず、国内の現状のサイトパフォーマンスの問題点として、

  1. ・海外と比べてページ表示速度に大きな差がある(意識の面でも)
  2. ・ページ速度解析の方法があいまい
  3. ・制作時にそこまで意識して作っていない→クレームがきてから速度を調べて、対応していくことになるので対応までに時間と工数がかかる
  4. 表示に2秒以上かかるのはバグである(アメリカでは0.5秒が基準)

といったことが挙げられていました。

 

これらを解決していくための高速化の手法として、

  1. ・イメージファイルの最適化=jpg等の圧縮化(どのレベルまでやるかが定まっていない?70%くらい落とす?)
  2. ・CSS、javascriptファイルの最適化をする(ConCAT、UGLIFYなど)
  3. ・CSSスプライト、もしくはWebフォントでアイコン作成し、ネットワークの負担を減らす
  4. ・日本語のWEBフォントに関しては重いので使い方を考える
  5. ・画像を少なくしたレイアウトを組む(アメリカでは画像を減らしているサイトが増えているそう)

といったことを行うとともに、

「あえて機能を捨てていく→1画面でなんでもできるようにすると、それだけ重くなる!」
「デスクトップは1MB,モバイルは100KBの容量を守る!」

の2点も重要なポイントだということでした。

正直いままではそこまでページの表示速度に対して考えていませんでしたが、力を入れていかなければいけませんね…

 
 
 

まとめ

 

HTML5が勧告となりましたが、現状では、必ずしもセマンティックにしたり、新しい要素を取り入れていく必要はないようです。
ただ、今後はアクセシビリティの面、デバイスの進化を考えてもセマンティックが必須となってくる可能性はあるので、実装できるようには準備していく必要はあるようです。

また、サイト制作時に、表示に時間がかかるのはバグなんだ!という意識を持つことで、公開後に対応に追われることも少なくなるのではないでしょうか?

長文お読みいただきありがとうございました。

それでは!

Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.