creatersnest110

HTML5で作られた動きのあるオシャレなサイトまとめ


HTML5に対応するブラウザが増えてきたことで、
様々なサイトがHTML5+CSS3で作られるようになってきました。

HTML5では様々な動きや効果が付けられるようになったので、
今回は動きのあるオシャレなサイトを紹介します。

Apple

apple2

http://www.apple.com/jp/

Apple Watchの発売でますます盛り上がるアップルサイトです。
アップルのサイトはwebデザインの基本が詰まっています。
ヘッダーメニューから各商品のページにリンクしていますが、
各ページでもメイン画像に商品にあった写真などを挿入しています。

ブルーボトルコーヒー

bluebottole2

https://bluebottlecoffee.jp/

最近話題のブルーボトルコーヒー。シンプルなデザインで
メインの画像にあるTwitterやfacebookアイコンからブルーボトルコーヒーの
SNSにリンクすることができます。
Cafesメニューから各国の店舗にジャンプでき、
リンク先には画像が切り替わるようになっています。

スターバックスコーヒー

starbucks

http://www.starbucks.co.jp/

右のカラムには商品のグッズや、オンラインショップの情報等が掲載されています。
コーヒーのメニューや会社の概要などは左側に設置しており、メニューを開くと
メニュー上部に切り替わる画像が表示されます。

コメダ珈琲店

komeda

http://www.komeda.co.jp/

落ち着いた雰囲気のデザインです。トップページの画像を切り替えることができます。
メニューや店舗の検索は縦書きになっており、和風をイメージしてます。
ページ下部には新商品やキャンペーン情報がわかりやすく画像でリンクされています。

スクウェアエニックス

sqex

http://an.sqexm.net/sp/site/Page/comm/sys/top

ゲーム会社だけあって各ゲームのコンテンツを見やすくしています。
ゲームタイトルの画像をクリックすれば各ゲームの詳細ページにリンクします。

アドビ公式サイト

adbe

http://www.adobe.com/jp/

Adobe社らしいオシャレなデザインです。
右上のメニューから製品の説明ページにリンクします。製品のページは
縦スクロールタイプで、メイン画像でどの製品なのかがすぐにわかるように
なっています。

プレイステーション® オフィシャルサイト

playstation

http://www.jp.playstation.com/

プレステの最新情報や最新ソフトの情報がメインの画面に
スクロール表示されています。
切り替わる画像をそれぞれクリックすると、関連するページにジャンプしたり
挿入されているPV動画が再生されます。

ドラゴンクエストヒーローズ公式サイト

DQ

http://www.dragonquest.jp/heroes/

大ヒットゲームの公式サイトです。モンスター達が動いて
今にも襲いかかってきそうです。
メニューで各ページにリンクしても、動きのある背景になっています。

無印良品

muji

http://www.muji.com/jp/

無印らしいシンプルなデザインですが、サイトは見やすくなっています。
縦スクロールタイプで、商品情報やイベントなどが、左右に切り替え
られるようになっています。
ページの一番下にはGooglemapで店舗を検索できます。

ZOZOTOWN

zozotown

http://zozo.jp/

探したい洋服がすぐに検索できるように左側のカテゴリ分けされていて、
欲しいものが探しやすいです。
メインのカラムでは人気アイテムがランキングされています。

CECIL McBEE

cecil

http://cecilmcbee.jp/

ファッションサイトなだけあって、シンプルかつオシャレに
デザインされています。
スクロールしていくと新商品の情報や、モデルさんの着こなしが
タイムラインで表示されています。

ユニクロ

uniqlo

http://www.uniqlo.com/us/

ユニクロの海外サイト。メインに動画を挿入している縦スクロールタイプのデザインです。
ユニクロらしいシンプルなサイト構成になっていますが、見たい商品が探しやすく、
男性女性、大人向けや子供向けなどわかりやすくカテゴリ分けされています。

Hermès

hermes2

http://www.maisonhermes.jp/

高級ブランドを感じさせないようなデザインです。
メインには文字が動く効果を出しています。
メインページをクリックすると下にスクロールして、商品の情報が
ポートフォリオのように表示されていきます。

CHANEL

chanel

http://www.chanel.com/#

高級感あふれるトップページ画像で、クリックすると
メインのメニューにページがジャンプします。
切り替わる画像ごとにリンクが異なっており、リンク先のページも
動きのあるデザインやシックな商品情報のページになっています。

NASA

nasa

http://www.nasa.gov/

科学技術の最高峰、NASAのオフィシャルサイトです。
宇宙をイメージしていて夢があります。
宇宙にかんする画像や動画が随所に挿入されています。

星野リゾート

hoshino

http://hoshinoresort.com/#home

縦スクロールで和風テイストのデザインになっています。
メインページの各画像をクリックすると星野グループのそれぞれの
宿泊施設ページにリンクします。
ページ下部には「今週の一枚」として、スクロールする画像が
埋め込まれています。

G-SHOCK – CASIO

cacsio

http://g-shock.jp/

メインの画像がスクロールで切り替わり、ページ下部にシリーズの
詳細情報などが掲載されています。
切り替わるメイン画像をクリックするとその商品の詳細ページにリンクしており、
商品の詳細を動画で解説したり、時計の色を選択すると強調される
効果を付けたりと、こだわったデザインになっています。

ナイキジャパン

nike

http://www.nike.com/jp/ja_jp/

メインページの画像が切り替えられて、動画も挿入されています。
ヘッダーメニューから各商品へリンクもできますが、メインの画像クリックでも
その画像に関連する商品へジャンプすることができます。

PUMA

puma

http://www.puma.jp/

トップページにスライド画像、下にスクロールすると商品メニューが出てきます。
ページ真ん中にあるカテゴリを左右に選択することで、カテゴリ商品のページに
リンクできます。
カテゴリの下にはPUMA製品の紹介動画が挿入されています。

株式会社CONTENTS

contents

 

http://www.contents.ne.jp/

FLASHを使っているかのような動きのあるデザインです。
左のメニューからそれぞれのページにリンクしますが、
リンク先のメニューページでも画像が動いたり写真をスライドさせるような
効果が付いており、本当にHTML5で作られているのかと関心してしまいます。

テレビ東京

tvtokyo

http://www.tv-tokyo.co.jp/

各コンテンツの画像にマウスオーバーすると拡大したり虫眼鏡の
アイコンが出たりと、凝った作りになっています。
ヘッダーメニューにマウスを当てると展開されてさらに細かい
コンテンツメニューが表示されるようになっています。

東映アニメーション

toei

http://www.toei.co.jp/anime/index.html

ヘッダー画像は東映ロゴを表示して、メイン画像はおなじみのアイコンです。
左上にメニューを設置しています。
メニュータブのホームをクリックするとポートフォリオのように番組紹介画像が
紹介されています。

組曲ジュエリー

kumikyoku

http://www.kumikyoku-jewelry.jp/

トップページのメイン画像が切り替わります。
アクセサリーを際立たせるために無駄な色をなくしてシンプルなデザインに
なっていますので、商品が探しやすくなっています。

サントリー

sunotry

http://www.suntory.co.jp/

メインの画像がスライドで切り替わりCM動画が挿入されています。
商品のページにはそれぞれ個別のデザインになっており、
画像が動いたり音声が流れる効果を出しています。

カルティエ

cartier

http://www.cartier.jp/

高級ブランドらしいシックなデザインです。
ヘッダーメニューにマウスを当てるとタブが開いて各商品ページへリンクします。
商品の詳細ページでは画像の拡大などの効果を取り入れいます。

ティファニー

tiffany

 

http://www.tiffany.co.jp/

縦型のポートフォリオ風のデザインです。メインの画像が切り替わります。
商品ページは画像がサムネイル表示されており、マウスを当てると
拡大され商品の詳細が表示されるデザインになっています。

HTML5 花火大会

hanabi

http://jsdo.it/event/html5hanabi

JavascriptやCSS3を使った花火が次々と打ち上がります。
web上でリアルに花火大会をみている気分になります。
表示されている花火をクリックすると、コードが書かれているページに
ジャンプします。

NISSAN GT-R

nissan

http://www.nissan.co.jp/GT-R/

縦スクロールのデザインになっています。
メインの画像が切り替わり、ページ下部にはフォトギャラリーと
ムービーが挿入されています。
車の性能などの紹介ページも見やすく高級感があります。

千葉工業大学 工学部

citech

http://www.it-chiba.ac.jp/technology_plus/index.html

工学部らしいデザインとエフェクトがかかっています。
縦スクロールタイプで学部紹介ページではマウスオーバーで
様々なアクションをつけて学部ごとの特色を出しています。

早稲田大学

waseda

http://www.waseda.jp/top/

縦スクロールで背景が動く画像が挿入されています。
トピックスから下の背景画像は常に動いており、学内の様子がわかります。
左のメニューからリンクしている各ページはサムネイル画像を使用し、
マウスオーバーで拡大するなどの効果を出しています。

まとめ

今回紹介したサイトは企業のものが多いです。
やはり現段階では個人サイトより企業サイトのほうがHTML5を早く
取り入れていますね。

また、ファッションやジュエリーなどのサイトもデザインが重視されています。
オシャレを先取りしなければいけないので、デザインも自然とオシャレになりますね。

大手メーカーやブランドなどは、主力商品の画像を動かしたり切り替えたりと、
見る人に関心を持ってもらえるような工夫がなされています。

多くの人がサイトを訪れるために、HEML5でのデザインや効果などは積極的に
取り入れて行きたいですね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【効率アップ!】photoshopのレイヤー操作が早くなる小技まとめ