インターネット・アカデミー オフィシャルブログ
About

HTML5を使ったクリスマスデザインのWebサイトまとめ

2014年12月 9日

20141209.jpg

もうすぐクリスマス!
渋谷や新宿の街並みも、すっかりイルミネーションで彩られてなんだかウキウキする季節になって来ましたね。
今日のブログは、最新技術のHTML5を使ったクリスマスデザインのオシャレなWebサイトをご紹介します。(HTML5ってなあに?という方は、「HTML5徹底リポート」をご覧下さい!)

ではさっそく見てみましょう!



Tiffany & Co

Tiffany & Co

ティファニーのブランドサイトがクリスマス仕様のWebデザインに変わっています。 HTML5のvideoタグの技術でアニメーションを表示しているのですが、そのアニメーションが秀逸。長くても、スピード感があってちっとも見ていて飽きません。



PARCO

PARCO

こちらもHTML5のvideoタグの技術で動画が表示されています。 動画はCMと同じテーマのため、見たことがある人にとってはイメージを持ちやすいですね。



HeartLink Christmas

pic03.jpg

横浜のジョイナス&ザ・ダイヤモンドのクリスマスイルミネーションのための特設サイト。 背景の画像がちょこちょこ動くのと、スクロールに合わせてアニメーションが動くのがなんとも可愛くてステキです。



ROPPONGI HILLS ARTELLIGENT CHRISTMAS 2014

ROPPONGI HILLS ARTELLIGENT CHRISTMAS 2014

六本木ヒルズのクリスマス特設サイト。
videoタグのアニメーション効果がイルミネーションを彷彿とさせて楽しいです。リンクのマウスアウト時のグラデーションを使った変化や、スクロールするとヘッダーが変化するなど、細かいところに工夫が見られます。



ChristmasCollection 2014 | agete(アガット)

agete

HTML5とJavaScriptを活用した特設サイトに仕上がっています。
上記特設ページだけでなく、本サイトのトップページもクリスマス仕様になっているのですが、そちらはvideoタグで動画が表示されています。



Christmas Selection 2014 | FRANCK MULLER

pic06.jpg

まるでFlashのような滑らかなアニメーション!
しかも、パララックス効果(複数の画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出すアニメーション効果)を使って、よりクリスマスらしい雰囲気が演出されています。



HTML5を活用したクリスマス仕様のWebデザイン、いかがでしたでしょうか?

季節限定のWebサイトデザインを見れるのは今だけ。
楽しみながら、Webデザインのスキルアップに役立てちゃいましょう☆

本ブログは、日本初Web専門スクールのインターネット・アカデミーの講師が運営するWebメディアです。 スクールの情報はもちろん、最新のWebデザイン・プログラミング・Webマーケティングについて役立つ情報をご紹介しています。

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

現在、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発とインターネット・アカデミーのカリキュラム開発を担当する。

海外支店責任者として、アメリカとインド、日本を行き来する。5年間、マサチューセッツ工科大学のW3C本部に在籍し、HTML開発と普及活動を行ってきた経歴を持つ。

日本の新宿校、渋谷校インストラクター。主にWebマー ケティングとクリエイティブ系の授業を担当。

バンガロール校インストラクター。デジタルマーケティング が専門分野。

Google認定Webマーケティング講座の企画・開発に携わる。「PHPカンファレンス2011」で講演。「PHP公式資格教科書」の執筆など

バンガロール校支店長。Webプロデューサー、インストラクター、エリアマネージャを経て、現在はグローバル展開のビジネスディベロップメントを担当。

「W3C"HTML5 Tour"」での講演や、インド校にてWebデザイナーおよびチーフインストラクターを勤めた経歴を持つ、人気キャリアプロデューサー。

フランスにあるW3CのEUホスト、ERCIM(欧州情報処理数学研究コンソーシアム)に常駐し、Webの研究を行うインド人インストラクター。Webマーケティングに精通している。

テーマテーマ

最新の記事最新の記事

スタッフ別ブログスタッフ別ブログ