2015/6/22

Canvasを使ったハイクオリティなサイト 10選

区切り線

Canvasを使ったハイクオリティなサイト10選

Webを取り巻く環境がどんどんモバイルデバイスへの最適化へと進んでいます。俗にモバイルゲドンと呼ばれたアルゴリズム変更が象徴的です。
それでも、ボクはやっぱりデスクトップ上のWebデザインが大好きです。

過去のエントリーChart.jsの円グラフを使ってリッチコンテンツを作るで紹介のあったCanvas。
Canvasは上手に使えばとてもリッチな表現が可能で、その滑らかで心地よい動きは見る人の心をつかみます。
当然、これらの表現はモバイルデバイスに対応しているものの、やっぱりデスクトップの大きな画面で閲覧してこその表現です。

今回はいつもとは趣向を変えて、Canvasを取り入れたサイトをデザイナー目線で10個ピックアップしました。
どれもCanvasの動きを上手く採用して、一つの良質な「コンテンツ」になっています。
スマホでご覧になっている場合はぜひご自宅のPCでもう一度ご覧ください。


1.株式会社サイバー・バズ

株式会社サイバー・バズ
http://www.cyberbuzz.co.jp/

画像をCanvasで動かすことによって、インパクトと訴求力を高めています。
こういったサイトを見ると、動きだけでなく演出力というかアニメーションのセンスも大切だなあーと感じますねえ。

2.ぷるぷるスパークリングゼリー | 白鶴酒造株式会社

ぷるぷるスパークリングゼリー
http://www.hakutsuru.co.jp/purupuru/

ゼリーのぷるっとした心地よい感触を見事に表現してます。背景の炭酸も効いてますね。
CanvasをWebデザインのコンセプトに落とし込んだ好例です。

3.LETTERS, INC.

LETTERS, INC.http://letters-inc.jp/

今更紹介するまでもないかもしれません。
Canvasを効果的かつふんだんに取り入れています。
SVGとの組み合わせも見事です。

4.株式会社ボンドインク

株式会社ボンドインクhttp://bondinc.co.jp/

こちらもSVGとCanvasの組み合わせ。
この二つの要素は使い分けが大切です。

5.ASITANOSIKAKU アシタノシカク株式会社

ASITANOSIKAKU アシタノシカク株式会社http://www.asitanosikaku.jp/

Canvasをウインドウに見立てたアイデア。
ふわふわとした動きも、サイトデザインとマッチした美しさ。
技術的ないやらしさが無く、とても好感度の高い使い方です。

6.POWER | KOWA

POWER | KOWAhttp://www.poweredcoffee.jp/

缶コーヒーから出るスモークを表現。
Canvasに限らず、こういった湯気やしずくなどのリアルな動きの表現は食品系に活かしやすいですね。

7.STITCH.Co.,Ltd

STITCH.Co.,Ltdhttp://www.stitch.co.jp/

ふんだんにjsを採用した、賑やかかつ洗練されたサイトです。
ページを開いてスクロールした際の、ヘッダーメニュー部分の動きにもCanvasが使われています。

8.株式会社ホムンクルス

株式会社ホムンクルスhttp://homunculus.jp/

Canvasによるギミックが散りばめられ、リッチなインタラクティブにあふれています。
いろいろ動かしてみたくなりますね。

9.LAMDASH DNA

LAMDASH DNAhttp://panasonic.jp/shaver/lamdash/dna/

Canvasのパーティクルの組み合わせは、流行というかCanvasのモデルケースのような感じ。
このサイトはその中でもとても洗練されていて、商品のコンセプトとのマッチングも完璧です。
パーティクルによる顔の3Dモデリング、かっこいいです。

10.株式会社フォーデジットデザイン

株式会社フォーデジットデザインhttp://4dd.jp/

サイトに訪れた際に一瞬見える細くて正確な線や、各ゴーストボタンのカーソルホバー時のアニメーションをCanvasで表現。
正確で繊細な印象を一発で与えられます。ブランディングに一役買ってます。


商品やサービスをアピールするときの表現として、「動き」という方法はとてもインパクトがあり、魅力を伝えることに一役買っています。

クリエイターとして気をつけなきゃいけないのは、新鮮な技術や表現はどんどん試していくべきであるものの、作り手側の技術力をひけらかす目的で、むやみやたらに使ってはいけません。特にサービスや商品のサイトの場合は上手く落とし込めていないと、こんなアニメーションは無くていいのにってなっちゃいます。すっごくもったいない。
個人的にぷるぷるスパークリングゼリーなんかはCanvasがドンピシャにはまっていると感じます。

要は演出力、そして知識と技術のストックです。自分の引き出しから、いつでも取り出せる状態にしておくことが大切です。
商品やサービスを主役と捉えて、「デザイン」を「コンテンツのひとつ」として考えたとき、CanvasにしろSVGにしろ、続々と生まれる表現方法の使い方やポイントをきっちり見極めて、魅力あるサイトを制作するための演出要素にしていかなければいけませんね。

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

区切り線

コメントをどうぞ

メールアドレスが公開されることはありません。