きのこさんのサイト100選

いいサイトを作りたいから、いいサイトからたくさん学ぶ!

クロッカンシュー ザクザク 洋菓子 プロモーションサイト -30

クロッカンシュー ザクザク 洋菓子 プロモーションサイト -30 ザクザク切りのコンテンツ。下に下に向かいたくなる。 ザクザクとしたななめ切りのレイアウト モノトーンの中に水色のアクセント 黒縁の写真 zakuzaku.co.jp するすると一番下までスクロールした…

【29 サマージャンボ】大きくて、はっきりしてる

www.takarakuji-official.jp 夏だ! なんだろう、すこし昭和っぽさがある。 (想像の昭和) 下までざーっとみて思ったことが3つ。 1.文字が大きい。 2.リンクやボタンが大きい。 3.「詳しくはこちら」「→」など これより先にもコンテンツがありますよ…

【28 江戸川重工】浮世絵がどーん!このサイト、超好き。

www.edogawa-juukou.com このサイトデザイン、たまらなく好きだ! むつかしいレイアウトで作られたインパクトではない。 backgroundがfixedにして、スライドしてる構成。 わりと、よくある作り。 では何がインパクトあるかって、 それはもう背景の浮世絵! …

【27 リブセンス】手紙のようなトップページ

人材系のサイトって、印象がいちばんというか。 事業が、手に取れるモノではないから、 イメージ写真がほとんどを占めるようなサイトが多い。 そんなサイトが多い中で、ここは「文字」。 メッセージを前面に押し出す、手紙のようなトップページ。 ファースト…

【26 星のや】ドキッとするほどの特別感

hoshinoya.com ロード中のお月さまからもう、ドキッ。 特別感が満ち溢れてる。 大きな写真。ゆったりとしたスペース。中央寄せ。 シャドウを入れなくてもこれだけ白文字が目立つってことは けっこう写真の明るさを落としているんだな。 隙間なく写真を敷き詰…

【25 カウブランド 赤箱】イマドキ感、これでもか!!

www.cow-aka.jp え!?牛乳石鹸って青じゃないの…? と思ったら、関西は赤、関東は青が主流だそうです。へええええ。 昔からある牛乳石鹸。 グッドデザイン賞、アットコスメ、「〇〇女子」… 若い世代の女性にアピールするためのイマドキ感を これでもか!と…

【24 あいうえぶ】わくわくする。すごい。

aiweb.s5-style.com あー!わくわくする! 「あたらしい学びになれば」と立ち上げた 個人プロジェクトだという。すてき。 動きはJavaScriptを使っているそう。 画像の切り替えの部分の紙がちぎれた感じ? ほわっとした感じ、かわいいな。 方眼紙風の背景、使…

【23 阿蘇くまもと空港】すっきりしていて、使いやすい!背景色の視点なかった!

www.kmj-ab.co.jp 雲がもくもく。曲線づかいがおしゃれ。 空港=空のイメージにぴったり。 キャラクターも使っていながらガチャガチャしていないところがいい。 注目すべきは、このアクセシビリティの高さ! 多言語はもちろん、よくある文字サイズの変更に加…

【22 ハッピーターン】赤×黄色=元気でおいしそう。

www.happyturn.com あれ!ターン王子がフラットデザインになってる!前はもうすこし立体感ある感じだった。 流行に合わせてイメチェンしたのね、王子。 やっぱり赤×黄色の組み合わせは おいしさと親しみやすさがいい塩梅で表現される。「今日は〇〇の日」み…

【21 小玉醸造株式会社】とんがってる!ポジションレイアウト

とんがってる~~~!おもしろいデザイン。折り紙をぺたぺたはりつけてるみたい。 画像を引っ張ってみると水平な正方形がこんにちは。 CSSをみるとがっつりポジションで組んでる。 斜めに配置するのか、なるほど〜。 影はつけていないけど、のっぺりとなって…

【20 日本化学工業株式会社】このサイトに来る人は何を目的に来るのか?

www.nippon-chem.co.jp 緑 × 空の背景。親しみやすい感じ。左にメニューが固定されていて、情報へたどり着いた後も迷子にならない工夫がされている。 トップページに検索があるのは、この会社のこまかな情報を検索をしに来る人が多いからだろう。 このサイト…

【19 キリン#カンパイ展】青文字系っぽいポップなサイト

おー、女性ウケよさそう!! 線画っぽい、サブカルっぽいこの系統のイラスト、 なんていうんだろう? いわゆる青文字系雑誌っぽい感じ。(青文字系雑誌って死語…?) 直線的ではない視線誘導がおもしろい。 がたごとの並び。 ピンク系の写真にピンクの文字 …

【18 ハーゲンダッツ】動画<バニラの静止画

きれい。 典型的なグリッドレイアウトを使いつつ、 ラインナップ、ピックアップコンテンツ〜と 内容ごとでレイアウトを変えているから、 ぱっと見で情報のかたまりがわかりやすい。 グリッドレイアウトの中に動画っておしゃれだな〜。 動画もあるのに、一番…

【17 FRISK】またきたいブランドサイト

www.frisk.jp ふぉーかっこいい。フリスクのロゴにもあるブランドイメージ、スピード感がでてる!フリスクの粒のような丸のボタンがかわいい。ページを進むと、区切り区切りで止まる効果はどうやってつくるんだろう? コンテンツの話。「FRISK JOURNAL」、す…

【16 東邦チタニウム株式会社】なんかすごいことしてそう!

B to Bの企業はサイトってわかりにくいイメージがあったけれど、 ここは直感的にわかる!「なんかすごいことしてそう!」。はじめてみたのは、ナビゲーションの項目ひとつひとつに画像が設定されていること。 ホバーすると文字の色が変わって、画像も薄暗く…

【15 三井住友建設】橋っぽさ、でてる!

信用の濃紺。 建設会社の企業カラーは圧倒的に青が多い。 ヒーローイメージがムービーなのも目をひくけど、 私がおっとなったのは、ヒーローイメージの右上の欠け方、 それから、四角の組み合わせのデザイン。 「もの」「ひと」「はしも、まちも、ひとも。」…

【14 ミノン】ちょこん、ちょこんと

ほんわか、かわいい。 真っ黒(#000000)がない。 まじめさや、和の雰囲気のときの他に、 こんな風にやわらかさを出す時も、明朝体の出番なのだな。 淡い色で明朝を使うと、線の細さも手伝ってかわいくなる。 スカルプDのときとちがって、商品もちょこん、ち…

【13 ラムネ/森永製菓】単色でポップ。ボタンの動き、まねしたい!!

スーパーかわいい!!! 白地に、まる、さんかく、てんてん… 色は青みどり?水色?の青系のラムネカラーに、 ロゴの赤色。のみ。 「ポップさ≠カラフル」なんだな〜。 森永のHPにブランドサイトはこちらってあって、 このページに飛んだけど、 このページでブ…

【12 江戸東京博物館】縦書きナビゲーションで、和!

www.edo-tokyo-museum.or.jp 縦書きナビゲーション!和! 「注目の展覧会」「お知らせ」…見出しも縦書き。 ソースをみてみると、imgで入れている様子。 CSSではむつかしいよね… 白の背景でも、うっすらと和柄が入っているところも。 うっすら、というのがお…

【11 スカルプD】堂々とした強さを感じる

黒だけど、暗くない!クール。 「LINE UP」「CONTENTS」「NEWS」と 太めのゴシック英字の下に、 ちょこんと添えられたカタカナが親切。 お!でました! コンテンツのimg、ななめ切り! 堂々とした強さを感じる。

【10 プーシキン美術館展】さすが美術展のサイト。美しい!

pushkin2018.jp すごい!絵画が踊ってる! 左右にあるドアボタンを押すと、絵画を動かせる。 ポチポチポチポチ…わわわ、たのしい!! どうやってこの動きをつくるのかな。 ドアのノブも含めて、ファーストビュー全体が アシンメトリーになっていて、調和がき…

【09 青森県庁webサイト】実用的で、おしゃれ。曲線と余白とアイコン。

きれい! 特におしゃれに感じたのはヘッダーの切り替えの曲線、 フッターの背景に線で入った青森県の地形。 47都道府県庁のサイトをみくらべてみて、 文字も画像もぎゅうぎゅうのところが多かった。 この青森県庁のサイトは、 余白が多めで、コンテンツの…

【08 instax SQUARE SQ 10】主人公は商品。商品を投影しているサイト

CMでみた、「正方形の写真が取れるチェキ」。 instax.jp このサイトでの主人公は、もちろん「商品」。 商品をひきたてるための、文字。 商品で撮った写真を引き立てるための、色。 こんなにすごい綺麗な写真が撮れます、ドーーーン!! という種類のカメラと…

【07 森永 甘酒】和風でイマドキ 秘密はどこにある?

www.morinaga.co.jp 「和風で古い・ダサい」と、 「和風でイマドキ・おしゃれ」のちがいはどこにあるのだろう。 和の雰囲気ってどうしても古めかしさがついてきてしまう。 そこをいまっぽくする秘密は、どんなものなのだろう。 すご〜〜〜く、おしゃれ! い…

【06 スキマスイッチOFFICIAL WEBSITE】スイッチを押すと…

www.office-augusta.com みごとなまでの、THE・グリッドレイアウト! シンプルだな〜と思ったら、 一番下のボックスにある「スキマ・スイッチ」を押すと… スキマがあく!!!!! おとずれたひとをくすっとさせる仕掛け、すてき! (ちなみにスイッチつなが…

【05 うんこ漢字ドリル】おふざけだけど、中身はまじめ。

unkokanji.com なんてゆかいな世界なの!ポップ〜! ネオンのような黒×原色の次は、柄、そして原色の背景がずっと続いて、 それはそれはポップな世界。 だけど文字は黒一色。しかも、教科書体。まじめ! ぱっと見はおふざけだけど、コンテンツはすご〜くまじ…

【04 ACTIVE! IBARAKI】色の淡さで春らしさ

春の茨城の観光を紹介するサイト。 ブルーとイエローの淡さと、白で、春のやわらかさがたっぷり。 ネモフィラのブルーがよく映える。きれいだな。 春といえばピンク?黄緑?と色でのイメージしか持っていなかったけれど、 なるほど色の淡さで春っぽくなるの…

【03 ポカリスエット】白と、青の濃淡。何よりも先に画像がどーん!

さわやか〜〜!! 色は白と青の濃淡だけ。 ナビゲーションの背景にがフラットデザインというのだろうか、 影やグラデーションのない単色でイマドキ感がつよい。 社名より商品名よりナビゲーションより上に、キービジュアルがどーん。 ブランド力に対する自信…

【02 ゼスプリ キウイフルーツ】元気!明るい!ポップ!

www.zespri-jp.com 開いた瞬間の印象は「元気!明るい!ポップ!」。 左上から右下へ、右上から左下へと斜めの角度がついていることで、 視線が自然と下へ下へと向かっていく。 全体的にリズムがあっておもしろい! キービジュアルは平行四辺形でとがってい…

【01 HERZ 】革色全開、細部までカワイイ

www.herz-bag.jp ブラウン、キャメル、ホワイトの同系色をあしらった、ザ・革なサイト。 コテコテしないところがすごい。 フルサイズと中央寄せのコンテンツで、めりはりがある。 鉛筆画風の手書きの絵などがあることで、ハンドメイド感がでていてきれい。 …