株式会社コプロシステム

お問い合わせ

2012年1月23日

HTML5やCSS3を駆使した「次世代の可能性」を感じるサイト

  • このエントリーをはてなブックマークに追加

ここ2~3年の間で、HTML5/CSS3に関連するブログ記事のエントリーやセミナーなども増えて、これらのキーワードもすっかり定着してきました。
このブログをご覧いただいている方も、各々抱えられているweb系の業務案件で、大なり小なりHTML5やCSS3などの技術を取り入れている方、その可能性を体験している方がほとんどではないでしょうか?

今回のエントリーでは、HTML5/CSS3/jQueryなどを組み合わせることによってどんどん変化していっている"webサイトの表現"について、事例をご紹介したいと思いますが、まず始めに少しだけおさらいを書かせてもらいます。

HTML5とは?

今さらなのであまり詳しい説明は書きませんが、過去に弊社HP内で私が書いたコラム『次世代を担う技術「HTML5」について』から引用しますと、

"現在のwebコンテンツで、最も一般的に使われているHTMLの標準仕様は「HTML4(4.01)」ですが、この仕様は、W3C(World Wide Web Consortium)が1997年に勧告を出し、その後10年以上もの間使用されています。
途中、XMLをベースとした「XHTML」が導入され、現在ではそちらが主流になっているものの、10年以上使用されている「HTML4(4.01)」では、アプリケーションなどが台頭することで大きく変化している「webの使われ方」の新しい潮流に対応しきれなくなってきた"
"InternetExplorerやMozilla FireFox、Safari、Chrome、Operaなど、現在様々なwebブラウザがリリースされていて、ユーザーそれぞれが好みに合わせて使用し、必要に応じてプラグインをインストールして。。。というような利用をしていますが、「あるブラウザでは問題なく表示・動作していたレイアウトやプログラムが、別のブラウザでは正常に表示・動作しない」といったwebブラウザ間での互換性が低いことも問題点"

「アプリケーション機能の強化(拡張)」と「プラットフォームの安定性向上」を大きな目的とし、webが抱える様々な問題点を克服することで、次のステージへ進めようとしている新しい仕様のことです。

CSS3とは?

従来のCSS2に新しい要素や便利な機能が追加され、装飾・表現できることがパワーアップしたCSSです。

具体的には、

  • 従来の「RGB」などの色指定に加え、アルファ「A」(透明度)の指定が可能に。
  • 従来の単色指定に加え、グラデーションの色指定が可能に。
  • 背景画像の複数指定が可能に。
  • テキストやボックスにドロップシャドウ効果が追加。
  • ボックスを角丸にすることが可能に。
  • アニメーション効果の付加・制御することが可能に。

などが代表として挙げられます。

例えば、今まではボタン一つ一つを画像で作成し、管理が大変だったものが、CSSで制御・管理することが可能になったり、専門的な知識が必要だったFlashで表現しなければいけなかったアニメーションをCSSで制御することが可能になったり、CSSで表現できることが格段にパワーアップしました。

特に、最後に挙げた「アニメーション効果」については、
どんな種類があるのか、以下のサイトによくまとまっていました。

Animatablehttp://leaverou.github.com/animatable/

事例

上述のHTML5/CSS3や、jQueryなどを駆使した、次世代の可能性を感じるwebサイトの事例をいくつか集めたのでご紹介します。

1. 20 Things I Learned About Browsers and the Web

Google Chromeチームが提供する「20 Things I Learned About Browsers and the Web(ブラウザやウェブについて知っておきたい 20 のこと)」のwebサイト。HTMLの進化についても書かれていて、参考になります。
コンテンツは絵本形式になっていて、絵本の中のかわいいイラストが動きながらナビゲーションしてくれます。


2. Nike Better World

前回のエントリー「固定したナビゲーションメニュー」で書いた表現手法を使っています。
ページがスライドする時のエフェクトも、なんというか、立体感のあるエフェクトでかっこいいです。


3. Mickael Larcheveque - Interactive Designer

最近流行っているサークル(円)を使ったデザイン表現のサイト。マウスの動きやページの遷移の時の「もやもや~」という線が生き物みたい。


4. Portfolio Of Antoine Wette

ドイツのwebデザイナーのポートフォリオ。こちらも、サークル(円)を使ったデザイン表現をしていますね。


5. CARBON


6. Citicles :: an experimental HTML5 city data visualizator

世界中の各都市の情報を、独自のビジュアライズで閲覧することができるサイト。


7. HTML5 Fireworks

日本の夏の風物詩でもある「花火」を、HTML5で表現しているサイト。キレイです。すごい。

こんなツールもあります。

Sketchpad

HTML5のcanvas機能を利用したペイントツール。描いた絵は、保存することもできます。

CSS3を組むためのこんな便利サイトも。

CSS Text to Path Generator

ブラウザ上で描いたテキストを、HTML5/CSS3として書き出してくれる便利ツール。


Ultimate CSS Gradient Generator

前述の「CSSでグラデーションを指定」を、簡単にコード作成できる便利ツール。私はいつもここを使っています。


CSS3.0 Maker


「HTMLやCSSでこんな表現ができるんだ」という発見・再認識につながれば幸いです。
このような"表現の変化"を捉えて、これからのwebサイトやモバイルサイトの設計にも組み込んでいかないといけませんね。

参照したサイト



  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP