HTML5 CMS - Web Meister プロダクトサイトをHTML5でリニューアル。 トップページに波紋のエフェクト、4種類のナビゲーションを実装。
2015年1月5日
Web制作とCMS開発を行う株式会社サイズ（xyz）(代表：糟谷 博陸)は、HTML5 CMS - Web Meister プロダクトサイトを「HTML5 + CSS3 + JavaScript」でリニューアルいたしました。コンセプトは「美しいHTML5をすべての人に」。2014年10月に正式勧告されたHTML5をより美しくより多くの人に届けたい。そのような思いで制作いたしました。
そのため、「レスポンシブWebデザイン」を採用し、PC、タブレット、スマートフォンの画面サイズに最適化された表示を実現しているのはもちろんのこと、さらにPCではトップページにWebGLによる波紋のエフェクトを実装、4種類のナビゲーションを選択できる設定ボタンを用意しています。
このサイトの特長
WebGLによる波紋のエフェクト（PCのみ）
WebGLでWebページを水面にし、リアルな波紋を生み出すスクリプト「jQuery Ripple」を使用し、カーソルの動きに合わせて波紋が発生するエフェクトを実装しています。背景画像が波紋に合わせて揺れる演出をお楽しみいただけます。HTML5 CMS - Web MeisterがWeb制作とCMSに波紋を呼ぶことを願っております。
4種類のナビゲーションを選択できる設定ボタン（PCのみ）
グローバルナビゲーションの位置を上横、左右、4種類選択することができます。
グローバルナビゲーションが上の場合
ローカルナビゲーションはハンバーガーボタンとしてページ下部に常時存在し、クリックで開閉します。（ハンバーガーボタンの表示位置は左右の選択も可能です。）ローカルナビゲーションが固定で存在しないため、コンテンツは横幅最大エリアで表示することができます。現状のユーザビリティにおいては認知度の低いナビゲーション手法ですがHTML5によるより良いナビゲーションをみなさんと考えていきたいと思い、あえてこの手法を採用しています。
グローバルナビゲーションが横の場合
ナビゲーションは横の位置に固定、コンテンツのみスクロールします。下層ではローカルナビゲーションはグローバルナビゲーションの上に乗る形で表示され、×ボタンで上位のナビゲーションに戻ります。これまでグローバルナビゲーションが横の場合の問題点として、深い階層のコンテンツを表示する場合に情報設計が破綻しているナビゲーションが多く見られました。この手法の場合、かなり深い階層でも破綻しないナビゲーションを実装することが可能です。
コンセプト「美しいHTML5をすべての人に」
本サイトのコンセプトである「美しいHTML5をすべての人に」をご理解いただくために「HTML5 + CSS3 + JavaScript」ならでは特長を体感していただけるエフェクト、ナビゲーションを用意いたしました。先進的なHTML5の技術を効果的に活用したいとお考えのみなさんに思いが伝われば幸いです。また、より良いWebサイトをみなさんと生み出していければと思います。
HTML5というテクノロジー
W3C は2014年10月28日、HTML5 とCanvas 2D に関して正式勧告いたしました。今後のWeb制作はHTML5で記述することになります。高機能なブラウザ（モダンブラウザ）にはすでに実装され、実際に利用可能になったHTML5。その特徴はインタフェースがよりリッチになり、文書構造がよりセマンティックになるという2 点です。
リッチインタフェースとしてCanvas 2Dや今回使用しているWebGLなどのような技術。文書構造としてテンプレートに関する部分ではheader footer nav asideタグなどによりそれぞれのブロックが意味を持つようになりました。コンテンツ内部では記事全体 article タグとその一部分 section タグが存在し、コンテンツの粒度がページ単位から記事内の一部分 section にまで細分化されています。
今後さらに発展していくWeb テクノロジーやマルチデバイス化を見据えたマークアップ言語です。
HTML5 CMS - Web Meister について
HTML5 CMS - Web Meister は、W3C(World Wide Web Consortium)のホスト機関である慶應義塾大学湘南藤沢キャンパス(SFC)に導入するために2004年に開発されました。※1そのため、W3Cが提唱するXMLに基づくアーキテクチャーで開発を行い、ユーザインターフェースとコンテンツの分離、コンテンツの構造化を実現しています。
Web Meisterは元々の コンテンツ管理構造がWeb標準に則しているので容易にHTML5での管理が実現可能です。
※1：Web Designing 2011年6月号毎日コミュニケーションズ特集1＜Webクリエイティブの10年−記憶に刻むべき21世紀最初のディケード−誌面を彩ったサイトで振り返る10年「あらためて振り返る、“新しさ”を作りだしたサイト」＞に慶應義塾大学 湘南藤沢キャンパスサイトが掲載され、「CSSを実装し、スイッチでデザインを切り替えられる仕組みを採用して話題となった。CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」と記載されています。
HTML5 CMS - Web Meister の特長
W3C の理想を体現する HTML5 CMS - Web Meister はXMLと XSLTというWeb標準技術をベースにJavaアプレット上で動作するWeb CMSです。
- 分かりやすく使いやすいインターフェース
インターフェースのコンセプトは「マニュアルを必要としない使いやすさ」。簡単な操作でコンテンツの編集・変更ができます。 - リッチコンテンツのCMS化
Flash、Ajax、HTML5などのXMLデータ管理を考えたユーザインターフェースとコンテンツが分離したWebサイトの構築ができます。 - マルチデバイス対応
「レスポンシブWebデザイン」により、PC、タブレット、スマートフォンの画面サイズに最適化された表示を実現。
HTML5 CMS - Web Meisterは「コンテンツの作成・編集」「リポジトリ・バージョン管理」「ワークフロー管理」「ファイル公開管理」という4つの基本サブセットで構成されています。その他の機能としてマルチドメイン・マルチランゲージサイト対応、日本語と英語の2ヶ国語インターフェース、IE、Firefox、Chrome、Safari など複数のブラウザでのマルチブラウザプレビューなどの機能を備えています。
株式会社サイズ（xyz） 制作のこだわり
株式会社サイズ（xyz）では 、HTML5 について「積極的に開発・実験を行う」ことで、新たな可能性を秘めたテクノロジーを探究し、Web をより便利に、豊かに、そして楽しくするための経験を蓄積し、最適化されたユーザー・インターフェース、実際に役に立つソリューションをお客さまに提供するため、こだわり続けます。
お問い合わせ先
＜株式会社サイズ 会社概要＞
本店所在地：東京都渋谷区上原1-1-8代々木公園セントウエストテラス3F
代表者：糟谷 博陸
設立年月日：2008年7月1日
ウェブサイト：→http://www.x-yz.co.jp/ →http://www.web-meister.jp/
資本金：4600万円（2015年3月末現在）
