こんにちは、デザイナーの小林です。
遅ればせながら今年最初のブログということで、復習も兼ねて、2014年に見たサイトで印象的だったwebサイトを個人的な感想を添えて、ご紹介させていただきます。
1年分全てのサイトを見たわけではありませんが、絞り込むのが難しく、気づいたらそこそこ多い数になってしまいました。。
過去は未来の指標、ご覧いただければ幸いです。(ランキングではありません。海外サイトと国内サイトで分けてあります。順不同)
海外サイト
1.Heineken City Symphony
http://heinekencitysymphony.com/
アルコールを扱うサイトのため年齢制限がかかっています。生年月日をDD→日にち、MM→月、RR→西暦の下二桁に入力すれば見れます。(未成年はみれません)
たぶん間違っていると思うのですが、とある街でのSNSの使用を視覚化させ、街に点在するハイネケンを置いてあるバーなどを一緒に見せることで、人々の生活にハイネケンがどのように息づいているかを示すプロモーションサイトと憶測しています。。
近未来的なデザインと独特なBGM、効果音が不思議な世界観を作っていて、最初見た時はなかなか衝撃的でした!テクノロジーを感じさせます。
2.Studio Brusco
イタリアのベローナにある歯科病院のサイトです。 配色が今っぽく、写真も彩度を落としていてクールな印象。
背景に動画を盛り込むことで「人気(ひとけ)」を出して病院へ行こうという人に安心感を与えています。ページ遷移やマウスオーバーもひとつひとつアニメーションが施されていて触り心地が良いです。(←これ大事)
下部にある棒線状のメニューボタンはこのサイト独自のもの?これにより他との差別化+先進性が出ている気がします。
フォントは「museo sans」が使用されています。
3.Design Studio Manchester | Digital Studio | Nine Sixty
マンチェスターにある制作会社のコーポレートサイトです。 レイアウトや構成自体はシンプルですが、色味とフォントが特徴的です。
やや強めのブルーが昔のwebサイトへのオマージュのよう。 フォントはほぼ全て「Apercu」という視認性に優れたフォントを使用しています。
本文では等幅フォントを使っている?そのためかコードを彷彿とさせるデザインなのも面白いです。イラストアイコンも洗練されていて。個人的に大変ツボでした。
4.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
フォントはお馴染みの「Futura」です。
6.INC Research: Your global CRO
7.Barbour Christmas | Barbour Christmas
フォントは「Alex brush」と「Proxima Nova」を使用しています。
8.Google Night Walk
9.STYLEPIT SS14 Interactive Lookbook
10.World of SWISS
その後、この奥スクロールの動きはhttp://ohdeergames.com/など、たまに海外のサイトで見かけるようになりました。
11.Circle Internet Financial | Bitcoin Wallet, Bitcoin Payments, Bitcoin Insurance
こういったグラデーションも2014年、いろんなサイトで見られました。
12.Killing Kennedy | National Geographic Channel
国内サイト
13.FICC inc. デジタルマーケティングエージェンシー
優れた制作実績の多い制作会社FICCさんのリニューアルされたコーポレートサイトです。無駄を削ぎ落した洗練されたデザインになっています。フォントはほぼ全てデバイスフォントを使用し、レスポンシブに対応。文書構造もしっかりとしていそうな構成なので分かりやすく、おそらくSEOにも強そう。 DINのwebフォントが効いている、スタイリッシュなデザインです!
14.ARCHETYP Inc. | 株式会社アーキタイプ
こちらも高品質なキャンペーンサイトなどのクリエイティブを手がけている制作会社ARCHETYPさんのコーポレートサイトです。
ページ遷移やホバー時のアニメーションが気持よくひとつひとつにもこだわりが感じられ、サイト全体もクリーンで清潔感があって素敵です。
15.FORM::PROCESS
webに限らず様々な媒体で優れたデザインを手がける制作会社FORM::PROCESSさんのサイトです。ギャラリーサイト風の制作実績の並べ方が個人的には非常に良く感じられました。companyページでは見出しをあえてぼかして奥行きを作るなどしてデザインにアクセントを添えてます。社員のほぼ全員がデザイナーのようです…!
16.FOURDIGIT DESIGN Inc. | 株式会社フォーデジットデザイン
TOPページのメインビジュアルが制作風景の写真というのが新鮮な、制作会社フォーデジットデザインさんのサイトです。高品質な写真やアイコン、そしてページ遷移時のワイヤーフレーム風のアニメーションが大変印象的です。その他のポイントでは、こちらのサイト内のブログにあるWebデザインリンク集「中の人」に訊く掲載のポイントとは?にとても説得力のあるポイントが多数書かれております。
17.Tokyo Mild Foundation
http://tokyomildfoundation.com/
動画コンテンツ制作会社のサイトです。動画の会社の相応しい、動きにこだわりが見られるデザインです。モノクロでスタイリッシュ、雰囲気抜群です。国内外で高い評価を得ていました!
18.foton inc.
こちらはレタッチ界ではパイオニア的存在なフォートン社のコーポレートです。デザインは基本シンプルなのですが、TOPページをスクロールしてからの制作実績の現れ方が大変印象的です。
何よりさすがというべきか、実績の写真が全てハイクオリティでずっと見ていたくなります。
19.baqemono.inc. 株式会社バケモノ
実に名前がインパクト大なWEB制作会社バケモノさんのコーポレートサイトです。情報をなるべく中央に寄せているおかげで視線の移動が少なく、読むのが快適に感じられます。その分周囲に余白が生まれるので窮屈な感じも受けません。見出しなどは長体がかっておりアクセントになっています。さりげないアニメーションもスムースで良いです。
20.TREND COASTER – Yahoo! JAPAN
最新の視覚効果技術を使った(?)ジェットコースターを楽しめる「トレンドコースター」のスペシャルサイトです。 コンセプトに沿ったトレンドを表現するために3D、ポリゴンなど近未来的な雰囲気を出したクールポップなインパクトあるデザインです。
何よりすごいと思ったのは、キーワードを入力すると、ツイッターなどからそのキーワードを抽出して盛り上がり具合をジェットコースターのコースとして走ることができるところです!この「紅白」とかすごいことになっています…http://trendcoaster.jp/result/86706/
21.KENJI ENDO
ハウス・エレクトロDJのサイトです。ハウスらしいモード&スタリッシュなデザインです。 HTML5のcanvasを使用し、インタラクティブな仕掛けが多く、アニメーションも細かなところまでこだわりが見られます。TOPページのレイアウトが大胆でバッチリハマっています。
DJのサイトでは2013年にhttp://midoriaoyama.jp/が話題となりましたね。
22.夏井景子
手書きのフォントが上手く使われているシンプルナチュラルな料理研究家のサイトです。タイトルである「夏井景子」も飾らなくて自然体で良いです。微妙なパララックスで、スクロール後に余韻が残るひと工夫がより世界観をいいものにしています。あえて取り消し線をのこしておいたり落書きっぽいイラストも楽しげです。
23.amble| 沖縄作家を中心としたセレクトショップ アンブル
おしゃれなインテリア雑誌のようなレイアウトが印象的な雑貨店のサイトです。 ナビゲーション、コピーで縦の流れを作り自然と下への視線を作りつつ、ファーストビューで見せたいと思われる情報は全てクリアしているのではないでしょうか。 手作り感が伝わるフォントのチョイスも良いです!
24.coneri (こねり)
パイの専門店のシンプルページ完結型のサイトです。なんともほっとする優しさが伝わってくるナチュラルなデザインです。食材のオーガニック感が伝わってくるようなクラフト調のテクスチャ、写植したような見出しなど、世界観が明確でしっかりしています。 スクロールで要素、文字がふわふわとフェードインする効果がまたその雰囲気作りに一役買っています。 ロゴもかわいいです。
25.FOOTSTOCK ORIGINALS
http://footstockoriginals.com/
シューズブランドのサイトです。 基本的には靴を主役にしたシンプルなデザインですが、スライダーの動き、ページ遷移、下部のバナーなど、よく見ると「おっ」と思うこだわり・仕掛けがあり、 強く印象に残ったサイトです。 たっぷりとった余白が、ユーザーの想像をかきたてる働きをもたらしています。
26.バーチャル高校野球|朝日放送
今はもうデザインが変わったり機能がなくなってしまったのですが、公開当初は、自分で試合のハイライトが作れたり、コンテンツが充実していたスペシャルサイトです。 高校野球×SF的デザインという斬新な切り口が面白かったです。 空色をくすませることでSF的な重厚感とクールさを出しています。 ライブ配信画面ではゲーム画面のようなデザインでした。
弊社プランナーズブログ内記事「マルチデバイスで楽しむ高校野球・夏の甲子園」 でも紹介させていただきました。
27.ルンバ800シリーズ | iRobot ロボット掃除機ルンバ スペシャルサイト
http://www.irobot-jp.com/roomba/800series/
ルンバ新商品のスペシャツサイトです。製品のデザインを引き立たせるような、メタリックな質感とライテクングエフェクトが目を引く近未来的なデザインです。何よりルンバの動きを掛けあわせた3D的なページ遷移の動きに驚きました!
28.VéLO & vetica Hair Salon(ヴェロ・ベチカ ヘアーサロン)
2つの店舗からなる美容院のサイトです。 先進的で美容院らしいクール&モードなデザインです。 写真、アニメーションなど一つ一つも非常にハイクオリティです。
29.丸太運輸株式会社
運輸会社のコーポレートサイトです。メインビジュアルのイラスト・アニメーションでこの会社が生活の中でどのように回っているかを示しているようで、印象に残ります。青空を生かしたグロナビの並びの雰囲気も気持ち良いです。 全体はグリッドベースのデザインで整然とされて見やすく、英字と日本語の組み合わせ方が上手です。1pxのラインの使い方も丁寧で余白のバランスも良いです。
30.アニメ「PSYCHO PASS サイコパス」
昨年はハイクオリティなアニメのサイトがよく見受けられました。その中でもこちらのサイトが一番インタラクションにも富んでいたように感じます。Flashならではという気もします。
31.DODA CM 綾野剛×「キング牧師」篇・「チャップリン」篇
広告とからめたDODAのスペシャルサイトです。広告の空気感がダイレクトに伝わってくるデザインです。アンチゴチの文字組み、写真の加工、余白などどれも良いです。
32.映画『るろうに剣心 京都大火編 伝説の最期編』公式サイト
http://wwws.warnerbros.co.jp/rurouni-kenshin/index.html?oro=mile
前作のサイトも非常に良かったのですが前作のサイトの雰囲気は引き継ぎつつ、グリッドベースでより機能的になった印象でした。キャプチャーは当時の貴重なカウントダウンのページです。どのページも安定感があってカッコイイです。
33.ARDEN HOUSE
http://www.arden50.jp/pg785/recruit.html
ARDEN HOUSEの採用サイトです。かわいいイラストがハマっているポップなパララックスサイトです。色合いも北欧風で良い感じです。太めの罫線、破線、ストライプが上手に使われています。
34.やさい あまうま ル・クルーゼ
http://www.lecreuset.jp/yasai/index.html
調理器具ブランドのプロモーションサイトです。主婦向けの、オレンジを主体とした明るくナチュラルなデザインでベタ塗りじゃないイラストが温かみを感じさせます。情報の強弱がしっかりしていてわかりやすく見やすいです。野菜ソムリエ試食会ページの2階調化した顔のイラストもいいですね◎
35.大塚食品 ビタミン炭酸MATCHスペシャルサイト
ビタミン炭酸MATCHのスペシャルサイトです。高校生、青春をキーワードにした、甘酸っぱい雰囲気が上手に表現されている気がします。丸明のフォントや、ラインやボタンのかすれた感じがその甘酸っぱさを演出しているのではないでしょうか。 メインビジュアルの、本を型どったフレームも良いですね。円や吹き出しの使い方も上手く、隙が見当たらないデザインです。
36.あなたの想いを花火に託そう「つながる花火」メッセージ協賛&大会プログラム
http://www.tokachi.co.jp/hanabi/msgpartner/
1口1,000円の出資でメッセージを送ることができ、それがWEBだけでなく実際の花火大会でも打ち上がるという素晴らしいコンセプトのサイトです。BGMも地元の作曲家が作成しているようです。デザインはいうまでもなく、こういった従来のwebサイトの枠をはみ出たサイトをいずれ作りたいものです…!
37.RHODIA
80周年を迎えるフランス文房具のRHODIAのブランドサイトです。商品が引き立つレイアウト、カラーリングで、まさにブランドサイトという格調高い雰囲気です。TOPページではスクロールによりたくさん商品を揃えているのを上手にアピールしています。
38.音楽制作プロダクション|DONGURIミュージック
http://www.don-guri.com/music/
音楽制作プロダクションのシングルページ完結型のサイトです。フラットなイラストやアイコンが今っぽく、とても楽しげなポップなデザインです!メインビジュアルやミュージシャン、ナビをマウスオンすると音がなる遊びもプラスされていて好印象です。BGMも独特で大変印象的でした。
39.空想ラボラトリー | IHI
http://www.ihi.co.jp/brand/laboratory/
宇宙航空・エネルギー機器、建機など総合重機を扱う会社のスペシャルサイトです。大人向けの、童心に還るような楽しい雰囲気のサイトです。三角形と円の幾何でラボ的な雰囲気も出し、明朝体で大人らしさも損なっていません。カラフルですが明度と彩度が統一されていて上手くまとまっています。コンテンツも大変おもしろくて個人的に時々チェックしています!
40.#THISISJOKER
とにかくぶっとんだ感じが一度見たら忘れられません!どうやら周りのJOKERを見たら投稿してくださいというサイトのようです。アンチ的な雰囲気が独特で面白いです。
41.関西のおでかけWEBマガジン マイ・フェイバリット関西(マイフェバ)
関西の観光・旅行系ポータルサイトです。こちらのサイトは全体も良いのですがバナーや特集ページがどれも大変クオリティが高いです!あしらいの参考になります。
まとめ
いかがでしたでしょうか?それにしても一年間分はちょっとさすがにまとめにくいですね…もうちょっとコンスタントにやっていこうかなと思いました。
昨年はレスポンシブデザインとアニメーションを取り入れたサイトがかなり増えたので、今後も増えていく気がします。他にも2015年もトレンドが予想されています。(2015年に流行しそうな、注目Webデザイントレンド21個まとめ:http://photoshopvip.net/archives/72064)
トレンドを意識しつつも、あくまでデザインは手段のひとつなので、デザイナーのエゴにならないように気をつけながら良いサイトを作っていきたいですね。