今週の気になるWEBサイト・アプリUI/UX＆デジタル広告・サービス 1.18〜1.24

2015/1/29 2015/2/12 UI/UX, 「気になる...」シリーズ

Mélanie F(WEBサイト)

http://melanie-f.com/en/

ローディングから始まり、スプライトシートアニメ、パララックスとクオリティーが高く素敵です。背景はcanvasでは無くcss3のtransformで動かしている模様。

Cubi(WEBサイト)

http://www.heycubi.com/

子供向けウェアラブルデバイスのサイト。動画とインタラクションが交互に商材を彩ります。コナミコマンド「上上下下左右左右ＢＡ」を入力するとおまけがついてますのでぜひお試しあれ

humavox(WEBサイト)

http://www.humavox.com/

タッチデバイスも考慮したパララックスサイト。
途中で横移動に変わったり、movie、svgアニメと細部にインタラクションが組み込まれてます。

vitosalvatore.com(WEBサイト)

http://vitosalvatore.com/

ロンドンを拠点にしているデザイナ・ディレクターのポートフォリオサイト。
woksの見せ方は参考になります。

Checkout Concepts(サンプルソース)

http://tympanus.net/Development/CheckoutConcepts/

ページ遷移無しで商品をカートへ入れるサンプルソース

Raphaël Malka(WEBサイト)

http://raphaelmalka.com/home

ポートフォリオサイト。メニュー、リスト、ローディングのアイディアが面白いですね。ロゴも好きです。

b&oplay(WEBサイト)

http://www.beoplay.com/products/beoplayh8?#at-a-glance

movieのスクリーンイン、アウトにcanvas要素をマスクに使っていますね。「b&oplay」のページこの他よく取り上げられてますが、プロダクトを中心にモノトーンでまとめたサイト構成もクールです。

Mr. Sketch(WEBサイト)

http://www.mrsketch.com/

遊び心のあるパララックス。最初に3つのフルーツを選択する事によってその後の表示に変化が出る。

Curved Cut(サンプルソース)

http://phpspot.org/blog/archives/2015/01/curved_cut.html

svg要素をスクロールイベントに応じて変化させるアイディア。

SUPERLIME(WEBサイト)

http://www.superlime.fr/

portfolioでサイトを操作している所をmovieキャプチャしています。インタラクションに自信があるからでしょうね。

Fontsmith(WEBサイト)

http://www.fsmillbank.com/#/fs-millbank

fontを紹介しているのですが、最初横向きパララックスか？と思いきや俯瞰→ズーム→回転と余すとこなく見せつけられます。

Richard Mille(WEBサイト)

http://www.richardmille.com/

高級時計「Richard Mille」のwebサイト。メイン画像をホバーするとその周辺がラグジュアリーにハイライトされるインタラクション。

enumblog