株式会社サイズ コーポレートサイトをHTML5 でリニューアル。canvas + File API によるドローツール、縦書変換スイッチを実装

Web制作とCMS開発を行う株式会社サイズ（xyz）(代表：糟谷 博陸)は、自社コーポレートサイトを「HTML5 + CSS3 + JavaScript + SVG」でリニューアルいたしました。また、「レスポンシブWebデザイン」を採用し、PC、タブレット、スマートフォンの画面サイズに最適化された表示を実現。さらにcanvas + File APIによるドローツール、縦書変換スイッチを実装しています。

株式会社サイズ（xyz）
http://www.x-yz.co.jp/

■本Webサイトの特長

・HTML5 + CSS3 + JavaScript + SVG
HTML5ではHTML4の文書構造やコンテンツの意味づけとは違うタグを設置する必要があります。ページテンプレートに関する部分ではheader footer nav asideタグなどによりそれぞれのブロックが意味を持つようになりました。コンテンツ内部では記事全体 article タグとその一部分 section タグが存在し、コンテンツの粒度がページ単位から記事内の一部分 section にまで細分化されています。本サイトでは section タグまで含めてHTML5の文書構造に則ったタグ付けを行なっています。さらにその特長を引き出すコンテンツを用意しました。

study01 [draw]
http://www.x-yz.co.jp/lab/draw.html

「HTML5 canvas + File API + Facebook API」で実装しています。ローカル上にあるJPG などの画像をドラッグ＆ドロップで背景にアップロードし、その上にメッセージやイラストを描画することができます。作成したイメージは、facebook に投稿することができます。ぜひ、好きな画像にメッセージのせて投稿してみてください。

※画像のアップロード（ドラッグ＆ドロップ含む）は「File API」に対応しているOS、ブラウザで使用可能です。
Windows（IE10、Chrome、FireFox）、Mac（Chrome、FireFox）、iOS6 ～、android4 ～
PCのSafariではFileReaderオブジェクトに対応していないため、使用できません。

study02 [TATE]
http://www.x-yz.co.jp/lab/tate.html

「jQuery + CSS3 + SVG」で実装しています。通常、ヨコで表示される文字をタテに並べ直しています。これまで和文を表現するには、文字を画像化することが主流でしたが、これにより和文の読みやすさを維持しながら、文字の編集が簡単にできSEO 効果の高いサイト構築が可能になります。また、画像はSVG で作成することで１つの画像に対してタテとヨコで違う見せ方を実現しています。

※HTML5というテクノロジー
W3C は2012 年12月17日、HTML5 とCanvas 2D に関する仕様策定完了を発表。これら2 つの仕様は勧告候補となり、実質的には仕様策定が完了したことになります。このバージョンでHTML5 は、2014 年に正式勧告される予定です。
高機能なブラウザ（モダンブラウザ）にはすでに実装され、実際に利用可能になったHTML5。その特徴はインタフェースがよりリッチになり、文書構造がよりセマンティックになるという2 点です。今後さらに発展していくWeb テクノロジーやマルチデバイス化を見据えたマークアップ言語です。


■株式会社サイズ（xyz） 制作のこだわり

株式会社サイズ（xyz）では 、HTML5 について「積極的に開発・実験を行う」ことで、新たな可能性を秘めたテクノロジーを探究し、Web をより便利に、豊かに、そして楽しくするための経験を蓄積し、最適化されたユーザー・インターフェース、実際に役に立つソリューションをお客さまに提供するため、こだわり続けます。
その一環として、xyz サイトの「xyz Design Lab.」にて、新たな可能性を秘めたテクノロジーを紹介していきます。随時コンテンツを増やしていきますので、たまに覗いてみてください。