東京発!プロの視点で気になる、おしゃれでかっこいいホームページを紹介します

公開日:2018年04月04日 更新日:2018年05月09日 デザインに関する情報・ノウハウ

homepagedesign

東京では、どんなホームページが作られているのでしょう。そして、競合が多いはずの東京では、どんなホームページが光っているのでしょうか。デザインも使い勝手も優れているホームページを集めてみました。

おしゃれでかっこいいイメージの東京。ホームページのデザインもやっぱりすごい?

東京といえば、全国に世界に、東京を本拠地にしている企業様も少なくなく、情報の発信地として日本を代表する都市ですが…そんな大きな話は置いといて…

数え切れないくらいの東京をイメージさせる街があり、おしゃれなお店や会社がわんさかあります。
もちろん、おしゃれでかっこいい街ばかりではなく、情緒あふれる下町もたくさんありますが、そんな下町にも品があるといいますか、おしゃれさを漂わせているのが、東京のすごいところです。
小さい頃から、こんなかっこいいもの見てたら、おしゃれになるのかなーと地方出の私は感慨深く思わされる時があります。
さて、そんな東京では、どんなデザインのホームページを作られ、どんなデザインのホームページが光っているのでしょうか。

UIやUXにも注目して、プロの視点でじーっとみてみました!

東京発!見たら行きたくなるホームページ

表参道ヒルズ

青山を代表する、おしゃれな複合施設のホームページです。デザインはスタイリッシュでかっこいい!なおかつ使いやすい!

UI面の注目ポイントは、店舗検索のキーワードになりそうなカテゴリーが、パッと目に入るように並んでいるので、すぐにお店を探すことができます。
各お店の情報も、1店舗ごとに丁寧に掲載されており、レストランはぐるっと見渡せる360度カメラ付という徹底ぶり。お出かけ前に、かなり気合いを入れた情報収集ができそうです。

営業時間の情報がメインビジュアルのすぐ下に書かれているところもいいですね。
レスポンシブでスマホサイトもかなり使いやすいです。

表参道ヒルズ

東京都庭園美術館

目黒区に位置し、建物も重要文化財に指定されていて、見ごたえのある美術館です。

そんな歴史のある美術館ですが、数ある美術館のホームページの中でも、また、数多あるグリッドレイアウトの中でも、手の抜いたところがないなーと感じるデザインのホームページです。
特にかなりの情報量が無駄なく簡潔にまとめられており、痒いところに手がとどくといった感じがして、UI面も優れたデザインです。

東京都庭園美術館

ファミリーレストラン 100本のスプーン

二子玉川にあるレストランのホームページです。
カチッと音が聞こえそうなボタンがなんともキュート。

そのボタンによる切り替えで、大人の視点ではカジュアルでかっこよく、子供の視点ではとっても楽しそうに、言葉や背景が変更されるようになっていて、おしゃれな遊び心が満載です。

デザインだけでも、子供連れも歓迎してもらえそう・みんなで美味しい食事を楽しめそう等、お店のコンセプトがよくわかり、おしゃまな、おしゃれキッズ達が「わあ行ってみたい!」と声に出してしまいそうなホームページですね。

ファミリーレストラン 100本のスプーン

生活名所 池上線

「観光名所」ではなく「生活名所」と銘打って、池上線沿いの見所を紹介する、ローカル感を全面に押し出したホームページです。
シンプルにサクサク読めるブログのような感じですが、食べる・買うなどの行動のタグ別に「生活名所」を一覧表示にできたり、マップ表示で各駅から「生活名所」を見つけられるなど、検索の切り口に種類がある工夫が素敵です。

しかもそれぞれ可愛い。

ローカルなイメージだけだと野暮ったい印象になるところを、写真とフォントと色合いで、おしゃれにローカルさを表現しています。デザイナーのディテールへのこだわりが感じられるホームページです。

生活名所 池上線

 

東京発!見たら働きたくなる!?ホームページ

ものさす

渋谷にあるWebサイトの制作会社のブログ式ホームページです。

有名な制作会社さんだけあって、トップページ諸々、見やすさおしゃれさ、かっこよさ、UI面の使いやすさが満載なのですが、注目したいのは「会社のこと > 社内の様子」の部分です。

間取り図と一緒に
・どんな事業部があって
・どんな職種の人が集まっているか
・どんなところにお楽しみがあるのか
…がわかる紹介ページになっています。

自分たちを紹介するページとして、透明感があり、かなりグッとくるページだな!と思いました。
「自分も一員になりたい」「お仕事を通して、お近づきになりたい」という気持ちをくすぐる、深さを感じるページです。

ものさす

警視庁の採用サイト

こちらはびっくりでした。
警視庁の採用サイトが、こんなにかっこいいとは…!こんなにおしゃれで親しみやすく作られていたなんて!
お堅いイメージとは裏腹に、エンブレムをfaviconに、アクセントにビビットカラーを使用、使われいる画像(おそらく実際に実在する警察の方だと思うんですが)も少しユニークで、か、かっこいい…!

かなり作りこまれたデザインだなと思いますが、浮かれてはおらず、お仕事の厳しさや素晴らしさが伝わってきます。
ちなみに上記の画像は平成29年度版で平成30年度版もあります。これまたガラリと違うデザイン!優秀な人材を得るためには、リクルートサイトにかけるお金も惜しむことはできないのかも…!

警視庁の採用サイト

東京発!見たら買いたくなるホームページ

泉岳寺のテイクアウト専門店 フォレストスタンド

1ページで構成された、シンプルなホームページですが、シンプルさ故のわかりやすさが光っています!
背景が白で、食事の写真が絶妙に映えており、コーヒー一杯の写真で、もう美味しそう。
お店を選ぶときに、フォトジェニックな部分にも注目される(むしろそれを目的に行く人も多数)な現代人にはたまらない写真が並んでいて、写真自体もかなりおしゃれで素晴らしいですが、さらにその写真の使い方が上手です。無敵です。

テイクアウトして、公園ランチやホームパーティをしているおしゃれな自分を想像させてくれる、ワクワク感たっぷりのホームページです。

フォレストスタンド

翠江堂

最近では、渋くてうっとりする和菓子屋さんのホームページが増えてきましたが、こちらのホームページは、もう、トップページを見るだけで、しっとりとしたあんこの上品な甘さが…口に広がるようです。
和菓子の可愛さがギュっと凝縮されたキャッチーな商品画像が印象的で、贈り物にご褒美に…そっと添えたくなりますね。
上品に購買意欲を誘ってきます。
2カラムで、あまりスクロールしなくても、欲しい情報は視界に入ってくるのように設計されており、上に下に探しに行かなくてもいいところが、ご年配の方にも見ていただきやすそう。

翠江堂

スープストックトーキョーのオンラインショップ

おしゃれなオンラインショップの決め手になるところは、お店に行って気持ちよくお買い物した気分させてくれるところ。
お店の雰囲気をそのままプレゼントできる気持ちになる、ECサイトです。

オンラインショップで必要不可欠なUI面はどうでしょう。
左カラムにある検索のカテゴリーもわかりやすく、わかりやすいと想像力を掻き立てられやすい。
小さな子供から年配の方にまでプレゼントしたくなるような、上手なカテゴリーわけになっています。
凝ってデザインされたアイコンも、欲しくなる気持ちに一役買っていますね。

スープストックトーキョー オンラインショップ

プロの視点で分析...ワクワクする理由はUI・UXにあり!

「デザイン性が高い=見た目がすごくいい」だけではないのです。
「おしゃれなホームページだなあ」の先にある、「行ってみたいな」「連絡してみようかな」「これ欲しいな」「あの子にプレゼントしたらいいしれない」には、ユーザーが製品・サービスを通じて実体験を得られていることが大切です。
それがUX(ユーザーエクスペリエンス)と呼ばれるものです。

そして、それを、写真やフォント、構成など、全体のデザイン面でサポートしているのが、UI(ユーザーインターフェイス)。
こんなことは今更かもしれませんが、UIが優れているからと行って、UXが優れているとは限りません。その逆も然り。

今回見てきたホームページは、そのどちらも優れているように思え、紹介しました。
最強なのは、最先端であるだけではなく、ただ伝えたい想いを溢れさせるわけではなく、ユーザー目線で作られたおしゃれなホームページです。

まとめ

いかがでしたでしょうか。
単純にかっこいいだけではなく、心を引っ張られるような、アクションを起こしたくなるようなホームページをピックアップしてみました。

トレンドが盛り込まれているデザインのホームページや、使い勝手を研究尽くされているなと思うホームページ、会社の一部として大切に作っていることが伝わるホームページもありました。
商品や会社の価値を、ワンランクあげてくれるツールであることを、改めて思い知らされました。

また、今までかっこいいな〜と思っていただけでも、自分はどうしてこのホームページを気に入っているのだろうと考えるだけで、大変勉強になります。
東京発!詠いましたが、東京に限らず世の中にはイケてるホームページがゴロゴロしています。
今回はテーマが大きかったので、またテーマを変えてご紹介したいと思います!

きたみ
Btiesのフロントエンド担当です。

 

こちらもおすすめ

 

きたみ
Btiesのフロントエンド担当です。

PAGE TOP