2014年をおさらい!印象的だったWebサイト 40選+1

名称未設定-1

こんにちは、デザイナーの小林です。

遅ればせながら今年最初のブログということで、復習も兼ねて、2014年に見たサイトで印象的だったwebサイトを個人的な感想を添えて、ご紹介させていただきます。
1年分全てのサイトを見たわけではありませんが、絞り込むのが難しく、気づいたらそこそこ多い数になってしまいました。。

過去は未来の指標、ご覧いただければ幸いです。(ランキングではありません。海外サイトと国内サイトで分けてあります。順不同)

海外サイト

1.Heineken City Symphony

Heineken City Symphony_02

http://heinekencitysymphony.com/

アルコールを扱うサイトのため年齢制限がかかっています。生年月日をDD→日にち、MM→月、RR→西暦の下二桁に入力すれば見れます。(未成年はみれません)

たぶん間違っていると思うのですが、とある街でのSNSの使用を視覚化させ、街に点在するハイネケンを置いてあるバーなどを一緒に見せることで、人々の生活にハイネケンがどのように息づいているかを示すプロモーションサイトと憶測しています。。
近未来的なデザインと独特なBGM、効果音が不思議な世界観を作っていて、最初見た時はなかなか衝撃的でした!テクノロジーを感じさせます。

 


 

2.Studio Brusco

Studio Brusco

 http://www.studiobrusco.com/

イタリアのベローナにある歯科病院のサイトです。 配色が今っぽく、写真も彩度を落としていてクールな印象。
背景に動画を盛り込むことで「人気(ひとけ)」を出して病院へ行こうという人に安心感を与えています。ページ遷移やマウスオーバーもひとつひとつアニメーションが施されていて触り心地が良いです。(←これ大事)
下部にある棒線状のメニューボタンはこのサイト独自のもの?これにより他との差別化+先進性が出ている気がします。
フォントは「museo sans」が使用されています。

 


 

3.Design Studio Manchester | Digital Studio | Nine Sixty

Design Studio Manchester   Digital Studio   Nine Sixty

 http://www.ninesixty.co.uk/

マンチェスターにある制作会社のコーポレートサイトです。 レイアウトや構成自体はシンプルですが、色味とフォントが特徴的です。
やや強めのブルーが昔のwebサイトへのオマージュのよう。 フォントはほぼ全て「Apercu」という視認性に優れたフォントを使用しています。
本文では等幅フォントを使っている?そのためかコードを彷彿とさせるデザインなのも面白いです。イラストアイコンも洗練されていて。個人的に大変ツボでした。


 

4.Exodus Group | Live What You love, Sports Coching, Heliski, Travels, Events, Vision …

Exodus Group   Live What You love  Sports Coching  Heliski  Travels  Events  Vision ...

http://www.exodus-group.com/heliski-and-travel/

海外のエキストリームスキーヤーが所属するイベント会社(?)のサイトだと思われます。 キャッチコピーをタイポグラフィックに見せたり、斜めの線を意識させたり全体的にクール&スタイリッシュなデザインです。
背景を動画にする手法が流行っていますが、このサイトにおいては抜群の効果かと。 フォントは見出しが「Didot」、本文が「FProBook」です。
 

 

5.R+Co – The Culture of Hairdressing

R Co   The Culture of Hairdressing_02
ページが読み込まれるたびに、フォントの色が変わるのが印象深く面白いです。
グレーの背景に写真とテキストだけというシンプルな構成ですが、レイアウトのバランスが抜群でスタイリッシュです!スクロールやマウスオンの仕掛けもこだわっています。ビビッドカラーの使い方の参考になりそうです。
フォントはお馴染みの「Futura」です。

 

6.INC Research: Your global CRO

INC Research  Your global CRO

 https://www.incresearch.com/

学術研究系のサイトかと思われます。絶妙な色相と明度に調整された背景と半透明のシェイプのバランスがとてもスタイリッシュです。

テキストの視認性が損なわれないギリギリの背景の調整具合がいいです。写真のクオリティも高いです。

 

7.Barbour Christmas | Barbour Christmas

Barbour Christmas   Barbour Christmas
アパレルブランドのクリスマス用スペシャルサイトです。近年流行っているシネマグラフを用いて他とは違った雰囲気を出しています。パララックスにより、時より「外」が見えることで世界観に奥行きを持たせています。
フォントは「Alex brush」と「Proxima Nova」を使用しています。
 

 

8.Google Night Walk

Google Night Walk
 
googleMap、ストリートビューを生かした、夜の町中の旅を疑似体験できるサイトです。道中様々なイベントが発生します。ヘッドホンをつけるとよりリアルに感じられます。

 

9.STYLEPIT SS14 Interactive Lookbook

Image
 アパレルブランドのルックブックページです。人々の日常の生活に溶け込むファッションを提案しているのでしょうか、とても面白い見せ方で新鮮でした!モノクロにすることで本サイトとの世界観を統一しつつ、クリックするポイントである「+」のアイコンも引き立っています。

 

10.World of SWISS

World of SWISS
スイス インターナショナル エアラインズのスペシャルサイトです。スイスの上空を飛んでいるかのような奥へのスクロールがとても新鮮でした!
その後、この奥スクロールの動きはhttp://ohdeergames.com/など、たまに海外のサイトで見かけるようになりました。

 

11.Circle Internet Financial | Bitcoin Wallet, Bitcoin Payments, Bitcoin Insurance

Circle Internet Financial   Bitcoin Wallet  Bitcoin Payments  Bitcoin Insurance
このサイトは、昨年の記事「刮目しよう、心惹かれるグラデーション in Webデザイン」でご紹介したサイトなのですが、やはり今見てもグラデーションの使い方がキレイでうっとりしてしまいます。(ただメインビジュアルは現在変わっているようです…)
こういったグラデーションも2014年、いろんなサイトで見られました。

 

12.Killing Kennedy | National Geographic Channel

Killing Kennedy   National Geographic Channel01
ナショジオのケネディ大統領暗殺についての特集サイトのようです。デザインもさることながら、たくさんの技術的なテクニックが散りばめられていて、かつボリュームもあるページなので、まさにドキュメンタリー番組を見ているかのようです。
 日本でもなにか、全然関係ないですが、例えばマツダのロータリーエンジン開発物語とかこういった見せ方で復活すると面白いなぁと思いました。
 
 

 国内サイト

 13.FICC inc. デジタルマーケティングエージェンシー

FICC inc. デジタルマーケティングエージェンシー

https://www.ficc.jp/

優れた制作実績の多い制作会社FICCさんのリニューアルされたコーポレートサイトです。無駄を削ぎ落した洗練されたデザインになっています。フォントはほぼ全てデバイスフォントを使用し、レスポンシブに対応。文書構造もしっかりとしていそうな構成なので分かりやすく、おそらくSEOにも強そう。 DINのwebフォントが効いている、スタイリッシュなデザインです!


 

14.ARCHETYP Inc. | 株式会社アーキタイプ

ARCHETYP Inc.   株式会社アーキタイプ

http://www.archetyp.jp/

こちらも高品質なキャンペーンサイトなどのクリエイティブを手がけている制作会社ARCHETYPさんのコーポレートサイトです。
ページ遷移やホバー時のアニメーションが気持よくひとつひとつにもこだわりが感じられ、サイト全体もクリーンで清潔感があって素敵です。


 

15.FORM::PROCESS

FORM  PROCESS

http://www.form-process.com/

webに限らず様々な媒体で優れたデザインを手がける制作会社FORM::PROCESSさんのサイトです。ギャラリーサイト風の制作実績の並べ方が個人的には非常に良く感じられました。companyページでは見出しをあえてぼかして奥行きを作るなどしてデザインにアクセントを添えてます。社員のほぼ全員がデザイナーのようです…!


 

16.FOURDIGIT DESIGN Inc. | 株式会社フォーデジットデザイン

FOURDIGIT DESIGN Inc.   株式会社フォーデジットデザイン

http://4dd.jp/

TOPページのメインビジュアルが制作風景の写真というのが新鮮な、制作会社フォーデジットデザインさんのサイトです。高品質な写真やアイコン、そしてページ遷移時のワイヤーフレーム風のアニメーションが大変印象的です。その他のポイントでは、こちらのサイト内のブログにあるWebデザインリンク集「中の人」に訊く掲載のポイントとは?にとても説得力のあるポイントが多数書かれております。


 

17.Tokyo Mild Foundation

Tokyo Mild Foundation

http://tokyomildfoundation.com/

動画コンテンツ制作会社のサイトです。動画の会社の相応しい、動きにこだわりが見られるデザインです。モノクロでスタイリッシュ、雰囲気抜群です。国内外で高い評価を得ていました!


 

 18.foton inc.

foton inc.

 

http://www.foton.jp/

こちらはレタッチ界ではパイオニア的存在なフォートン社のコーポレートです。デザインは基本シンプルなのですが、TOPページをスクロールしてからの制作実績の現れ方が大変印象的です。
何よりさすがというべきか、実績の写真が全てハイクオリティでずっと見ていたくなります。


 

19.baqemono.inc. 株式会社バケモノ

baqemono.inc. 株式会社バケモノ   WEB制作・設計・提案   WEBクリエイティブカンパニー

 

http://baqemono.jp/

実に名前がインパクト大なWEB制作会社バケモノさんのコーポレートサイトです。情報をなるべく中央に寄せているおかげで視線の移動が少なく、読むのが快適に感じられます。その分周囲に余白が生まれるので窮屈な感じも受けません。見出しなどは長体がかっておりアクセントになっています。さりげないアニメーションもスムースで良いです。


 

20.TREND COASTER – Yahoo! JAPAN

TREND COASTER   Yahoo  JAPAN

 http://trendcoaster.jp/

 最新の視覚効果技術を使った(?)ジェットコースターを楽しめる「トレンドコースター」のスペシャルサイトです。 コンセプトに沿ったトレンドを表現するために3D、ポリゴンなど近未来的な雰囲気を出したクールポップなインパクトあるデザインです。
何よりすごいと思ったのは、キーワードを入力すると、ツイッターなどからそのキーワードを抽出して盛り上がり具合をジェットコースターのコースとして走ることができるところです!この「紅白」とかすごいことになっています…http://trendcoaster.jp/result/86706/


 

21.KENJI ENDO

KENJI ENDO

http://kenjiendo.com/

ハウス・エレクトロDJのサイトです。ハウスらしいモード&スタリッシュなデザインです。 HTML5のcanvasを使用し、インタラクティブな仕掛けが多く、アニメーションも細かなところまでこだわりが見られます。TOPページのレイアウトが大胆でバッチリハマっています。 
DJのサイトでは2013年にhttp://midoriaoyama.jp/が話題となりましたね。


 

22.夏井景子

夏井景子

http://natsuikeiko.com/

手書きのフォントが上手く使われているシンプルナチュラルな料理研究家のサイトです。タイトルである「夏井景子」も飾らなくて自然体で良いです。微妙なパララックスで、スクロール後に余韻が残るひと工夫がより世界観をいいものにしています。あえて取り消し線をのこしておいたり落書きっぽいイラストも楽しげです。


 

23.amble| 沖縄作家を中心としたセレクトショップ アンブル

amble| 沖縄作家を中心としたセレクトショップ アンブル

http://amble-shop.com/

おしゃれなインテリア雑誌のようなレイアウトが印象的な雑貨店のサイトです。 ナビゲーション、コピーで縦の流れを作り自然と下への視線を作りつつ、ファーストビューで見せたいと思われる情報は全てクリアしているのではないでしょうか。 手作り感が伝わるフォントのチョイスも良いです!


 

24.coneri (こねり)

coneri (こねり)

http://coneri.jp/

パイの専門店のシンプルページ完結型のサイトです。なんともほっとする優しさが伝わってくるナチュラルなデザインです。食材のオーガニック感が伝わってくるようなクラフト調のテクスチャ、写植したような見出しなど、世界観が明確でしっかりしています。 スクロールで要素、文字がふわふわとフェードインする効果がまたその雰囲気作りに一役買っています。 ロゴもかわいいです。


 

25.FOOTSTOCK ORIGINALS

FOOTSTOCK ORIGINALS

http://footstockoriginals.com/

シューズブランドのサイトです。 基本的には靴を主役にしたシンプルなデザインですが、スライダーの動き、ページ遷移、下部のバナーなど、よく見ると「おっ」と思うこだわり・仕掛けがあり、 強く印象に残ったサイトです。 たっぷりとった余白が、ユーザーの想像をかきたてる働きをもたらしています。


 

26.バーチャル高校野球|朝日放送

バーチャル高校野球|朝日放送

http://koshien.asahi.co.jp/

今はもうデザインが変わったり機能がなくなってしまったのですが、公開当初は、自分で試合のハイライトが作れたり、コンテンツが充実していたスペシャルサイトです。 高校野球×SF的デザインという斬新な切り口が面白かったです。 空色をくすませることでSF的な重厚感とクールさを出しています。 ライブ配信画面ではゲーム画面のようなデザインでした。
弊社プランナーズブログ内記事「マルチデバイスで楽しむ高校野球・夏の甲子園」 でも紹介させていただきました。


 

27.ルンバ800シリーズ | iRobot ロボット掃除機ルンバ スペシャルサイト

ルンバ800シリーズ   iRobot ロボット掃除機ルンバ スペシャルサイト

http://www.irobot-jp.com/roomba/800series/

ルンバ新商品のスペシャツサイトです。製品のデザインを引き立たせるような、メタリックな質感とライテクングエフェクトが目を引く近未来的なデザインです。何よりルンバの動きを掛けあわせた3D的なページ遷移の動きに驚きました!


 

28.VéLO & vetica Hair Salon(ヴェロ・ベチカ ヘアーサロン)

VéLO   vetica Hair Salon(ヴェロ・ベチカ ヘアーサロン)

http://velovetica.com/

2つの店舗からなる美容院のサイトです。 先進的で美容院らしいクール&モードなデザインです。 写真、アニメーションなど一つ一つも非常にハイクオリティです。


 

29.丸太運輸株式会社

丸太運輸株式会社|創業1914年。ロジスティクス、コンストラクション、プロダクション、ライフサービスを事業展開しております。

http://www.maruta.co.jp/

運輸会社のコーポレートサイトです。メインビジュアルのイラスト・アニメーションでこの会社が生活の中でどのように回っているかを示しているようで、印象に残ります。青空を生かしたグロナビの並びの雰囲気も気持ち良いです。 全体はグリッドベースのデザインで整然とされて見やすく、英字と日本語の組み合わせ方が上手です。1pxのラインの使い方も丁寧で余白のバランスも良いです。


 

30.アニメ「PSYCHO PASS サイコパス」

アニメ「PSYCHO PASS サイコパス」

http://www2.psycho-pass.com/

昨年はハイクオリティなアニメのサイトがよく見受けられました。その中でもこちらのサイトが一番インタラクションにも富んでいたように感じます。Flashならではという気もします。


 

31.DODA CM 綾野剛×「キング牧師」篇・「チャップリン」篇

DODA CM 綾野剛×「キング牧師」篇・「チャップリン」篇 |転職ならDODA(デューダ)

 http://doda.jp/brand/ad/

広告とからめたDODAのスペシャルサイトです。広告の空気感がダイレクトに伝わってくるデザインです。アンチゴチの文字組み、写真の加工、余白などどれも良いです。


 

32.映画『るろうに剣心 京都大火編 伝説の最期編』公式サイト

映画『るろうに剣心 京都大火編 伝説の最期編』公式サイト

 http://wwws.warnerbros.co.jp/rurouni-kenshin/index.html?oro=mile

前作のサイトも非常に良かったのですが前作のサイトの雰囲気は引き継ぎつつ、グリッドベースでより機能的になった印象でした。キャプチャーは当時の貴重なカウントダウンのページです。どのページも安定感があってカッコイイです。


 

33.ARDEN HOUSE

ARDEN HOUSE

http://www.arden50.jp/pg785/recruit.html

ARDEN HOUSEの採用サイトです。かわいいイラストがハマっているポップなパララックスサイトです。色合いも北欧風で良い感じです。太めの罫線、破線、ストライプが上手に使われています。


 

34.やさい あまうま ル・クルーゼ

やさい あまうま ル・クルーゼ

http://www.lecreuset.jp/yasai/index.html

調理器具ブランドのプロモーションサイトです。主婦向けの、オレンジを主体とした明るくナチュラルなデザインでベタ塗りじゃないイラストが温かみを感じさせます。情報の強弱がしっかりしていてわかりやすく見やすいです。野菜ソムリエ試食会ページの2階調化した顔のイラストもいいですね◎


 

35.大塚食品   ビタミン炭酸MATCHスペシャルサイト

大塚食品   ビタミン炭酸MATCHスペシャルサイト

http://www.matchnews.com/

ビタミン炭酸MATCHのスペシャルサイトです。高校生、青春をキーワードにした、甘酸っぱい雰囲気が上手に表現されている気がします。丸明のフォントや、ラインやボタンのかすれた感じがその甘酸っぱさを演出しているのではないでしょうか。 メインビジュアルの、本を型どったフレームも良いですね。円や吹き出しの使い方も上手く、隙が見当たらないデザインです。


 

36.あなたの想いを花火に託そう「つながる花火」メッセージ協賛&大会プログラム

あなたの想いを花火に託そう「つながる花火」メッセージ協賛&大会プログラム

http://www.tokachi.co.jp/hanabi/msgpartner/

1口1,000円の出資でメッセージを送ることができ、それがWEBだけでなく実際の花火大会でも打ち上がるという素晴らしいコンセプトのサイトです。BGMも地元の作曲家が作成しているようです。デザインはいうまでもなく、こういった従来のwebサイトの枠をはみ出たサイトをいずれ作りたいものです…!


 

37.RHODIA

RHODIA

http://www.bloc-rhodia.jp/

80周年を迎えるフランス文房具のRHODIAのブランドサイトです。商品が引き立つレイアウト、カラーリングで、まさにブランドサイトという格調高い雰囲気です。TOPページではスクロールによりたくさん商品を揃えているのを上手にアピールしています。


 

38.音楽制作プロダクション|DONGURIミュージック

音楽制作プロダクション|DONGURIミュージック

http://www.don-guri.com/music/

音楽制作プロダクションのシングルページ完結型のサイトです。フラットなイラストやアイコンが今っぽく、とても楽しげなポップなデザインです!メインビジュアルやミュージシャン、ナビをマウスオンすると音がなる遊びもプラスされていて好印象です。BGMも独特で大変印象的でした。


 

39.空想ラボラトリー | IHI

空想ラボラトリー   IHI

http://www.ihi.co.jp/brand/laboratory/

宇宙航空・エネルギー機器、建機など総合重機を扱う会社のスペシャルサイトです。大人向けの、童心に還るような楽しい雰囲気のサイトです。三角形と円の幾何でラボ的な雰囲気も出し、明朝体で大人らしさも損なっていません。カラフルですが明度と彩度が統一されていて上手くまとまっています。コンテンツも大変おもしろくて個人的に時々チェックしています!


 

40.#THISISJOKER

THISISJOKER

http://thisisjoker.com/

とにかくぶっとんだ感じが一度見たら忘れられません!どうやら周りのJOKERを見たら投稿してくださいというサイトのようです。アンチ的な雰囲気が独特で面白いです。


 

41.関西のおでかけWEBマガジン マイ・フェイバリット関西(マイフェバ)

関西のおでかけWEBマガジン マイ・フェイバリット関西(マイフェバ)

http://www.my-fav.jp/

関西の観光・旅行系ポータルサイトです。こちらのサイトは全体も良いのですがバナーや特集ページがどれも大変クオリティが高いです!あしらいの参考になります。

 

まとめ

いかがでしたでしょうか?それにしても一年間分はちょっとさすがにまとめにくいですね…もうちょっとコンスタントにやっていこうかなと思いました。

昨年はレスポンシブデザインとアニメーションを取り入れたサイトがかなり増えたので、今後も増えていく気がします。他にも2015年もトレンドが予想されています。(2015年に流行しそうな、注目Webデザイントレンド21個まとめ:http://photoshopvip.net/archives/72064

トレンドを意識しつつも、あくまでデザインは手段のひとつなので、デザイナーのエゴにならないように気をつけながら良いサイトを作っていきたいですね。