たこすけのサイト100選

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

性別なし

【No.43】株式会社ヘリオス【医療の赤使い】

www.healios.co.jp 【気がつきリスト】 ・医療関係の会社だけれども、赤とオレンジと紺がメインカラーになっている。信頼感を表す青系を使わないデザインには驚いた。しかし、先端医療の研究をエネルギッシュに表現することには向いている色使いだなあと感じ…

【No.37】おかやま丸の内法律事務所【安心安全清潔】

ok-maru.jp 【気がつきリスト】 ・右から30%くらいを固定にしたデザイン。スクロールするまで気が付けないので、とても驚いてしまう。 ・法律事務所を調べる人はどんなことを考えるのだろうか?ここの雰囲気は、誠実そうで清潔そうで感じが良い。最初の印象…

【No.34】京料理 六盛【歴史を感じる色使い】

www.rokusei.co.jp 【気がつきリスト】 ・イケサイにて発見。 ・サムネイルを眺めていた時に、圧倒的に綺麗な紫色に惹かれて思わずクリックしてしまう。調べて見るとどうやら『江戸紫』という伝統色らしい。文字色はその補色を使っている。 ・キービジュアル…

【No.31】レストランカラオケ シダックス【大きな画像でわかりやすく】

【気がつきリスト】 ・ファーストビューでスライドするキービジュアルが大きく見える。画像自体の文字も大きいし色数も少ないので情報がドーンと入ってくる。 ・ナビゲーションも大きめサイズで全部日本語表記されている。区切りはないけど、アイコンがある…

【No.30】ニュース速報:読売新聞【情報をレイアウトするということ】

www.yomiuri.co.jp 【気がつきリスト】 ・普段はSPから見ているニュースサイトのPC版でした。とにかく文字が多い。一瞬うわっ!と文字の多さに驚くけれど、自然と真ん中の最新ニュースに目がいく。なぜだろうか。 ・コンテンツがあまりにも多いので、ほとん…

【No.27】Procter&Gamble【世界の大企業デザイン】

http://us.pg.com/ 【気がつきリスト】 ・色が白と青の二色で統一されていて、赤やオレンジなどは画像で使われている。 とても綺麗な対比になっていて目を引く。 ・最新情報が一番下の段に来ている。基本はニュースリリースのはずだけど、ブログ記事がトップ…

【No.26】栃木レザー株式会社【迫力と熱意】

栃木レザー株式会社 【気がつきリスト】 ・横幅いっぱいでブロックを区切っただけのレイアウト。 ・あかとおれん ・黒とオレンジがテーマカラーになっている。全体が暗すぎて少し見にくい気がする。 ・画面をスクロールするとコンテンツが浮かび上がってくる…

【No.24】ドン・キホーテ【左メニューでみやすく】

www.donki.com 【気がつきリスト】 ・キービジュアルの上に出てくる矢印ボタンが、立体的な可愛いボタンになっている。 ・最新情報のボタンがフワフワと浮かんでいる表現になっている。 ・左側に縦のナビゲーションは初めてのパターン。なんだか違和感がある…

【No.23】コカ・コーラ【予想外のデザイン】

www.cocacola.jp 【気がつきリスト】 ・すごい。トップが画面サイズだけ。スクロールができなくて驚いた。コカコーラくらい載せるコンテンツが多いと、逆にトップページはシンプルな方がいいのかもしれない。どうせ載せきれないほど新商品も出ているしキャン…

【No.22】プラチナ万年筆【これぞグリッド】

プラチナ万年筆 【気がつきリスト】 ・グリッドレイアウト!大きさも大中小と揃っていて綺麗。だけどなんとなく見にくい気がする。文字が多いのと、各ボックスの中身に統一感がないからかもしれない。 ・ヘッダーに検索ボックスとSNSのボタンがついている。…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【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.1】東急セルリアンタワー【大人デザイン】

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