たこすけのサイト100選

サイト100選です。ぼちぼちがんばります。

【No.21】企画展『昆虫』【昭和のヒーロ感】

www.konchuten.jp 【気がつきリスト】 ・ナビゲーションにホバーすると蝶のシルエットが背景に出る。こうやってモチーフを出しても役割を果たせるということに驚き。気がつかなかった。 ・キービジュアルの一部がクリックできる様になっている。手元がきにな…

【No.20】KOKUYO【カラーの統一】

www.kokuyo.co.jp 【気がつきリスト】 ・大企業のサイトでは珍しくグレーの背景。黒文字が少し見にくいけど、落ち着いた印象に見える。 ・注意喚起の広告は赤背景に黄色文字。色がパッと目に入って思わず読んでしまう。 ・フッターのサイズがかなり大きい。…

【No.19】nepia【やさしい感触】

ティシュ, トイレットペーパー, やわらかハート ネピア 【気がつきリスト】 ・青系の色使いにナビゲーションのピンクがアクセントになっている。 ・キービジュアルの上に乗っているリンク、はじめてみた。一目に入る情報が多くて、リンクになっているので便…

【No.18】Huawei Japan【枠からはみ出す】

www.huawei.com 【気がつきリスト】 ・ほとんど飾りがなく、商品の立体的な画像があるだけ。最近はこのパターンのシンプルな広告がよく目につく。 ・アイコンで表すだけじゃなく、商品画像をサムネイルとして使ってわかりやすく内容を表している。 ・ブロッ…

【No.17】小田急ロマンスカー【予約が一番】

www.odakyu.jp 【気がつきリスト】 ・ヘッダーに運行情報が速報形式ででている。一番知りたい情報が1番目にきているのはとてもありがたい。 ・白と青がメインで、オレンジと緑がアクセントで加わっている。画像部分までこの配色にこだわっているので統一感が…

【No.16】使い捨てコンタクト アキビュー【機能性重視】

acuvue.jnj.co.jp 【気がつきリスト】 ・コンタクトレンズ最大手なはずなのに、そんなに派手なデザインではない。コンタクト買いたいと思う人はメーカーの公式にあまり来ないのかな?目的のある人にはわかりやすいかもしれない。 ・オンラインストアと商品検…

【No.15】高倉町珈琲【店のカラーを出す】

takakuramachi-coffee.co.jp 【気がつきリスト】 ・シンプルで高級感ある、お手本のようなデザイン。 ・キービジュアルとナビゲーションがくっついている。 ・ナビゲーションのボーダーがホバーすると遅れてついてくる。 ・店舗画像の上でホバーすると住所が…

【No.14】珈琲所コメダ珈琲店【味のあるデザイン】

www.komeda.co.jp 【気がつきリスト】 ・キービジュアルが立体的になっている!これはすごい! ・和風テイストのお店なのでテキストコンテンツは縦書きになっている。とても目を引く。 ・レイアウトが斬新。画像がはみ出したり、横長と四角のバナーリンクで…

【No.13】本麒麟【目に止まるLP】

www.kirin.co.jp 【気がつきリスト】 ・なんといっても、赤い背景にビールの気泡。濃いめの赤なのに人物や文字が埋もれてしまわないようになっている。 ・ナビゲーションが下まで画面上部に固定されるようになる。 ・あしらいに金色が使われている。 ・ビー…

【No.12】ZOZOTOWN【探しやすいEC】

http://zozo.jp/ 【気がつきリスト】 ・セールの広告がヘッダーで帯のようになっている。クーポンも同じ。人が最初にきになるのは、「今どんなキャンペーンをやっているのか」ってことなのか? ・商品紹介の画像は、全部縦が長い長方形になっている。どうし…

【No.11】マクドナルド【動いて楽しい】

www.mcdonalds.co.jp 【気がつきリスト】 ・背景に黄色が使われている部分がある。食品系で派手な色が使えるのはイメージが浸透しきっているマクドナルドの強み。 ・商品は切り抜いて、影をつけてというスタイルが多い。 ・動きが多く、見ていて飽きない。 …

【No.10】東武百貨店 池袋店【統一感を重視】

www.tobu-dept.jp 【気がつきリスト】 ・キービジュアルが特徴的。二分割して二種類の宣伝が目に入るようになっている。 ・2番目のコンテンツは動画。音無し自動再生。上側は動きのあるものが集まっている。 ・百貨店だけあって、取り扱っている商品が多いの…

【No.9】サカゼン【バナー推し】

【気がつきリスト】 ・とにかく見やすいデザイン ・白と濃紺がメインカラー、合わせる色は黄色と赤 ・キービジュアルは目を引くタイプではなく広告的。季節商品、セール品情報と最後に就活商品。 ・縦の列として数えると偶数になっている。奇数の方が選ばれ…

【No.8】ロート製薬株式会社【信頼の青】

www.rohto.co.jp 【気がつきリスト】 ・キービジュアルがおしゃれ。幅が1:2くらいになっているのか。空欄に手書きで文字を書き込むデザインが目を引く。 ・大きめのサムネイル、見出しに短い下線というボックス内のデザインは、前に調べたセルリアンタワ…

【No.7】JetStar【テーマカラー重視】

www.jetstar.com 【気がつきリスト】 ・コーポレートカラーのオレンジを基準に作っている ・ヘッダーにフライト検索がある。ここにあったら下の方のコンテンツはあまり見られない気がする。だけど、ここで最初に検索されなかったら別の会社に流れてしまうか…

【No.6】三菱鉛筆【カラフルでも良い】

www.mpuni.co.jp 【気がつきリスト】 ・キービジュアルのペンを並べる表現、どんな意味があるのだろうか? 円を描くようにして、カラフルに並べている。 ・ヘッダーに文字サイズを三段階で変えることができるボタンがある。文房具は受ける年齢層が幅広いから…

【No.5】丸亀製麺【おしゃれな縦書き】

www.marugame-seimen.com 【気がつきリスト】 ・キービジュアルに少し大きめのサムネイルが付いている ・Gナビに公式アプリのページがある。よっぽどDLしてほしいようだ。 ・商品単体の切り抜き画像で統一されている。陰影や光が強調されている。 ・店舗検索…

【No.4】福砂屋【スタイリッシュな和の心】

福砂屋オフィシャルサイト 【気がつきリスト】 ・キービジュアルに動きがあってそこがナビゲーションも兼ねている ・動画が用意されている。職人『芸』は言葉よりも動画の方がよく伝わる。 ・日本向けページは最新情報がメイン ・背景が単色じゃなくてうっす…

【No.3】サンマルクカフェ【シンプルに】

www.saint-marc-hd.com 【気がつきリスト】 ・すごくシンプルでわかりやすいレイアウト ・なぜか余白が多い ・キーヴィジュアル、次の画像が少しだけ見えている(わざと?) ・ツイッター、インスタ。訴求したいのは若者なのか?その割にデザインはお堅い大…

【No.2】資生堂 MAJOLICA MAJORCA【妖艶とはこのことだ】

www.shiseido.co.jp 【気がつきリスト】 ・ベースが黒でも見やすいレイアウト ・メインカラーは黒、金、紫、濃いピンク ・画像の遷移時間が見える(少し早めの時間かもしれない) 遷移が遅くてイライラすることが自分は多かった ・画像の切り替わり枚数が見…

【No.1】東急セルリアンタワー【大人デザイン】

www.tokyuhotels.co.jp 【気がつきリスト】 ・幅のあるコンテンツに、画面幅のキーヴィジュアル ・白が基調 ・見出しなどは明朝体(黒)、それ以外やナビゲーションはゴシック体(グレー) ・画像をホバーすると薄く白になる ・ボックスには薄く影がついてい…