クロッカンシュー ザクザク 洋菓子 プロモーションサイト -30 ザクザク切りのコンテンツ。下に下に向かいたくなる。 ザクザクとしたななめ切りのレイアウト モノトーンの中に水色のアクセント 黒縁の写真 zakuzaku.co.jp するすると一番下までスクロールした…
www.takarakuji-official.jp 夏だ! なんだろう、すこし昭和っぽさがある。 (想像の昭和) 下までざーっとみて思ったことが3つ。 1.文字が大きい。 2.リンクやボタンが大きい。 3.「詳しくはこちら」「→」など これより先にもコンテンツがありますよ…
www.edogawa-juukou.com このサイトデザイン、たまらなく好きだ! むつかしいレイアウトで作られたインパクトではない。 backgroundがfixedにして、スライドしてる構成。 わりと、よくある作り。 では何がインパクトあるかって、 それはもう背景の浮世絵! …
人材系のサイトって、印象がいちばんというか。 事業が、手に取れるモノではないから、 イメージ写真がほとんどを占めるようなサイトが多い。 そんなサイトが多い中で、ここは「文字」。 メッセージを前面に押し出す、手紙のようなトップページ。 ファースト…
hoshinoya.com ロード中のお月さまからもう、ドキッ。 特別感が満ち溢れてる。 大きな写真。ゆったりとしたスペース。中央寄せ。 シャドウを入れなくてもこれだけ白文字が目立つってことは けっこう写真の明るさを落としているんだな。 隙間なく写真を敷き詰…
www.cow-aka.jp え!?牛乳石鹸って青じゃないの…? と思ったら、関西は赤、関東は青が主流だそうです。へええええ。 昔からある牛乳石鹸。 グッドデザイン賞、アットコスメ、「〇〇女子」… 若い世代の女性にアピールするためのイマドキ感を これでもか!と…
aiweb.s5-style.com あー!わくわくする! 「あたらしい学びになれば」と立ち上げた 個人プロジェクトだという。すてき。 動きはJavaScriptを使っているそう。 画像の切り替えの部分の紙がちぎれた感じ? ほわっとした感じ、かわいいな。 方眼紙風の背景、使…
www.kmj-ab.co.jp 雲がもくもく。曲線づかいがおしゃれ。 空港=空のイメージにぴったり。 キャラクターも使っていながらガチャガチャしていないところがいい。 注目すべきは、このアクセシビリティの高さ! 多言語はもちろん、よくある文字サイズの変更に加…
www.happyturn.com あれ!ターン王子がフラットデザインになってる!前はもうすこし立体感ある感じだった。 流行に合わせてイメチェンしたのね、王子。 やっぱり赤×黄色の組み合わせは おいしさと親しみやすさがいい塩梅で表現される。「今日は〇〇の日」み…
とんがってる~~~!おもしろいデザイン。折り紙をぺたぺたはりつけてるみたい。 画像を引っ張ってみると水平な正方形がこんにちは。 CSSをみるとがっつりポジションで組んでる。 斜めに配置するのか、なるほど〜。 影はつけていないけど、のっぺりとなって…
www.nippon-chem.co.jp 緑 × 空の背景。親しみやすい感じ。左にメニューが固定されていて、情報へたどり着いた後も迷子にならない工夫がされている。 トップページに検索があるのは、この会社のこまかな情報を検索をしに来る人が多いからだろう。 このサイト…
おー、女性ウケよさそう!! 線画っぽい、サブカルっぽいこの系統のイラスト、 なんていうんだろう? いわゆる青文字系雑誌っぽい感じ。(青文字系雑誌って死語…?) 直線的ではない視線誘導がおもしろい。 がたごとの並び。 ピンク系の写真にピンクの文字 …
きれい。 典型的なグリッドレイアウトを使いつつ、 ラインナップ、ピックアップコンテンツ〜と 内容ごとでレイアウトを変えているから、 ぱっと見で情報のかたまりがわかりやすい。 グリッドレイアウトの中に動画っておしゃれだな〜。 動画もあるのに、一番…
www.frisk.jp ふぉーかっこいい。フリスクのロゴにもあるブランドイメージ、スピード感がでてる!フリスクの粒のような丸のボタンがかわいい。ページを進むと、区切り区切りで止まる効果はどうやってつくるんだろう? コンテンツの話。「FRISK JOURNAL」、す…
B to Bの企業はサイトってわかりにくいイメージがあったけれど、 ここは直感的にわかる!「なんかすごいことしてそう!」。はじめてみたのは、ナビゲーションの項目ひとつひとつに画像が設定されていること。 ホバーすると文字の色が変わって、画像も薄暗く…
信用の濃紺。 建設会社の企業カラーは圧倒的に青が多い。 ヒーローイメージがムービーなのも目をひくけど、 私がおっとなったのは、ヒーローイメージの右上の欠け方、 それから、四角の組み合わせのデザイン。 「もの」「ひと」「はしも、まちも、ひとも。」…
ほんわか、かわいい。 真っ黒(#000000)がない。 まじめさや、和の雰囲気のときの他に、 こんな風にやわらかさを出す時も、明朝体の出番なのだな。 淡い色で明朝を使うと、線の細さも手伝ってかわいくなる。 スカルプDのときとちがって、商品もちょこん、ち…
スーパーかわいい!!! 白地に、まる、さんかく、てんてん… 色は青みどり?水色?の青系のラムネカラーに、 ロゴの赤色。のみ。 「ポップさ≠カラフル」なんだな〜。 森永のHPにブランドサイトはこちらってあって、 このページに飛んだけど、 このページでブ…
www.edo-tokyo-museum.or.jp 縦書きナビゲーション!和! 「注目の展覧会」「お知らせ」…見出しも縦書き。 ソースをみてみると、imgで入れている様子。 CSSではむつかしいよね… 白の背景でも、うっすらと和柄が入っているところも。 うっすら、というのがお…
黒だけど、暗くない!クール。 「LINE UP」「CONTENTS」「NEWS」と 太めのゴシック英字の下に、 ちょこんと添えられたカタカナが親切。 お!でました! コンテンツのimg、ななめ切り! 堂々とした強さを感じる。
pushkin2018.jp すごい!絵画が踊ってる! 左右にあるドアボタンを押すと、絵画を動かせる。 ポチポチポチポチ…わわわ、たのしい!! どうやってこの動きをつくるのかな。 ドアのノブも含めて、ファーストビュー全体が アシンメトリーになっていて、調和がき…
きれい! 特におしゃれに感じたのはヘッダーの切り替えの曲線、 フッターの背景に線で入った青森県の地形。 47都道府県庁のサイトをみくらべてみて、 文字も画像もぎゅうぎゅうのところが多かった。 この青森県庁のサイトは、 余白が多めで、コンテンツの…
CMでみた、「正方形の写真が取れるチェキ」。 instax.jp このサイトでの主人公は、もちろん「商品」。 商品をひきたてるための、文字。 商品で撮った写真を引き立てるための、色。 こんなにすごい綺麗な写真が撮れます、ドーーーン!! という種類のカメラと…
www.morinaga.co.jp 「和風で古い・ダサい」と、 「和風でイマドキ・おしゃれ」のちがいはどこにあるのだろう。 和の雰囲気ってどうしても古めかしさがついてきてしまう。 そこをいまっぽくする秘密は、どんなものなのだろう。 すご〜〜〜く、おしゃれ! い…
www.office-augusta.com みごとなまでの、THE・グリッドレイアウト! シンプルだな〜と思ったら、 一番下のボックスにある「スキマ・スイッチ」を押すと… スキマがあく!!!!! おとずれたひとをくすっとさせる仕掛け、すてき! (ちなみにスイッチつなが…
unkokanji.com なんてゆかいな世界なの!ポップ〜! ネオンのような黒×原色の次は、柄、そして原色の背景がずっと続いて、 それはそれはポップな世界。 だけど文字は黒一色。しかも、教科書体。まじめ! ぱっと見はおふざけだけど、コンテンツはすご〜くまじ…
春の茨城の観光を紹介するサイト。 ブルーとイエローの淡さと、白で、春のやわらかさがたっぷり。 ネモフィラのブルーがよく映える。きれいだな。 春といえばピンク?黄緑?と色でのイメージしか持っていなかったけれど、 なるほど色の淡さで春っぽくなるの…
さわやか〜〜!! 色は白と青の濃淡だけ。 ナビゲーションの背景にがフラットデザインというのだろうか、 影やグラデーションのない単色でイマドキ感がつよい。 社名より商品名よりナビゲーションより上に、キービジュアルがどーん。 ブランド力に対する自信…
www.zespri-jp.com 開いた瞬間の印象は「元気!明るい!ポップ!」。 左上から右下へ、右上から左下へと斜めの角度がついていることで、 視線が自然と下へ下へと向かっていく。 全体的にリズムがあっておもしろい! キービジュアルは平行四辺形でとがってい…
www.herz-bag.jp ブラウン、キャメル、ホワイトの同系色をあしらった、ザ・革なサイト。 コテコテしないところがすごい。 フルサイズと中央寄せのコンテンツで、めりはりがある。 鉛筆画風の手書きの絵などがあることで、ハンドメイド感がでていてきれい。 …