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

Mélanie F(WEBサイト)

150129_01

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

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

Cubi(WEBサイト)

150129_02

http://www.heycubi.com/

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

humavox(WEBサイト)

150129_03

http://www.humavox.com/

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

vitosalvatore.com(WEBサイト)

150129_04

http://vitosalvatore.com/

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

Checkout Concepts(サンプルソース)

150129_05

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

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

Raphaël Malka(WEBサイト)

150129_06

http://raphaelmalka.com/home

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

b&oplay(WEBサイト)

150129_07

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

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

Mr. Sketch(WEBサイト)

150129_08

http://www.mrsketch.com/

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

Curved Cut(サンプルソース)

150129_09

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

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

SUPERLIME(WEBサイト)

150129_10

http://www.superlime.fr/

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

Fontsmith(WEBサイト)

150129_11

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

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

Richard Mille(WEBサイト)

150129_12

http://www.richardmille.com/

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

Share

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

Follow(SNSで定期購読)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>