to pagetop
:)
spec5zigen Creator's Lab.

    パララックス効果(視差効果)など、スクロールして面白い海外サイトデザイン:まとめ 1

  • 2012.9.5
  • ,

『教育向けコンテンツ』ページを追加しました。

学校教育に特化した『教育向けコンテンツ』


8月23日に、弊社業務の柱のひとつでもある「教育向けコンテンツ」に対する取組みを弊社Webサイトの「サービス」ページ内に追加しました。 2008年から取り組んできた「教育コンテンツ」のデジタル化について、図や実績をもとにお話させいただいていますので、よかったら覗いてみてください。

と、会社PRはここまでにしておいて。。
『日々勉強』ということでいろいろなサイトを見ていると、「このサイトのこのデザイン好きだな、この動き好きだな」というサイトに出会います。では「なぜ」好きなのかを分析して、勉強ネットサーフィンをさらに充実したものにしていこうと思います。そのメモとして。。。

K&L Advertising (Shanghai) のコーポレートサイト

K&L Advertising


中国の上海に拠点をおくコミュニケーション・エージェンシー K&L のサイトです。

ポイントとなる大きな円にビビッドな黄色をもってくるデザインですが、ポイントを補足する箇所に同じトーンのピンクをもってくる派手さとは反対に、ベースとなる背景は紙素材の土台に手書きっぽいデザインというギャップがうまく合わさっているな〜、というところが好きポイントです。

フォントは3種類(HelveticaNeue, Rockwell, URWBaskerville)のWebホントを使い分けていますが、フォントサイズのジャンプ率が高くメリハリがあって見やすいです。その分上下に十分なマージンが配置してあり、参考にしたいバランスだなーっと見ています。

上に隠してあるメニューがツルッと出てきたり、スクロールするたびにポイントの円がストンと落ちてきたり、動きのある面白いサイトになっていますね。背景の飛行機の軌跡に沿ってスクロールして「ついていってる感」が面白いと思います。

そして最後に、最下部まで来た時に「ページの上部へ戻る」意味合い飛行機ボタンを押すとフワッと飛行機が飛んでページ上部まで連れて行ってくれる、このこだわりようが素敵です。

K&L Advertising



海外のサイトをいろいろと見ていると、こういったユニークな動きをするサイトを見かけます。昨年から続いている流行りの「パララックス効果(視差効果)」や、その他にも面白い見せ方ってたくさんあるんだなと勉強になるものばかりなので、最近見つけたサイトでいくつかメモしておこうと思います。

Gatwick Express

Gatwick Express

Gatwick Express


イギリスのサイト。線路に見立てたヘッドホンケーブルを赤い電車(?)が辿り、YOUTUBEの動画が見れるサイト。進む途中に鳥が群れをなして飛んでいたり、飛行機が通過したり。

SuperChemical

SuperChemical

SuperChemical


サカナクションのオフィシャルサイトなどを手がける「SuperChemical」のポートフォリオサイト。デザイナーさんがうさぎ好きとのことで、ウサギがところどころ出没して可愛いサイト。深海に潜っていく系ですね。

Intacto 10 Years

Intacto 10 Years

Intacto 10 Years


制作会社「inTacto」の10年を知るための宇宙の旅。2001年からスタートし、2012年までのデジタル世界の移り変わりと共に宇宙船がゆっくり上へと飛行する。Autoモードボタンを押すとゆっくーり飛行して上昇していきます。

LandeeJob

LandeeJob

LandeeJob


これもまた飛行機が登場する、制作会社「Intracto」のサイト。飛行機の着陸時の影や飛行中の浮遊感がリアルで、とってもかわいい。

以上、海外デザインブログ「Medley WEB」より。

RED

RED

RED


LAにある制作会社「RED」のサイトで、NEWSやWORKSのソートの仕方が面白い。

DISPLAY CREATIVE

DISPLAY CREATIVE

DISPLAY CREATIVE


イタリアの制作会社「DISPLAY CREATIVE」のサイト。ページ遷移の仕方やスクロールの読み込み方が個性的。

Les Evades

Les Evades

Les Evades


カナダの制作会社「Les Evades」のサイト。ダイナミックな絵がスライドしていったり、画面いっぱい使って見せるレイアウトがいい。

Piccsy

Piccsy

Piccsy


ハートのロゴがかわいい「piccsy」のサイト。人物が瞬きをしたり、円が大きくなったり細かい動きが丁寧で面白い。

以上、海外デザインブログ「WDL」より。

LGBT Museum

LGBT Museum

LGBT Museum


アメリカのLGBT博物館のキャンペーンサイト。左右に分けられたページが上下逆にスクロールする面白い動きで、ポップなカラーとレイアウトもポイントに。

Me We

Me We

Me We


オランダの制作チーム「Me We」のサイト。背景の読み込みが印象的。

以上、海外デザインブログ「speckyboy」より。

その他にもまだまだあります。

Mercedes Benz Class A

Mercedes Benz Class A

Mercedes Benz Class A


メルセデス・ベンツの新世代Aクラスを紹介するサイト。道を走る臨場感が伝わってくるよう。

Bagigia

bagigia

bagigia


カラフルなバッグ「Bagigia」のブランドサイト。
スクロールに合わせて製品を360°の角度から見ることができます。日本の湯たんぽみたいです。

neotokio

neotokio

neotokio


たくさんのタイポグラフィがダイナミックに飛び出してくるイタリアのデザイン会社「neotokio」のラボ「TokioLab」のサイト。

The Art of FLIGHT

The Art of FLIGHT

The Art of FLIGHT


ダイナミックに動くスノーボード映画「The Art of FLIGHT」のサイト。

グラフィックも素敵。Trailer必見!

Reverend Dnger

Reverend Dnger

Reverend Dnger


ReverendとDangerのどちらかを選ぶかによってグラフィックが変化するイラストもかわいいデザイン会社「Reverend Dnger」のサイト。どちらも試してみてください!

以上、スクロールして面白い海外サイトデザインまとめでした。
いろいろ見ていると面白いし、アイディア満載で関心しきりですが、傾向としては大きな画像や写真やタイポグラフィを大胆に使っているデザインが多いですね。ダイナミックな動きが画面いっぱいに広がるサイトに、今後も注目です。