きのこさんのサイト100選

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

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

 

f:id:szkmw:20180715181809p:plain

 

きれい!

特におしゃれに感じたのはヘッダーの切り替えの曲線

フッターの背景に線で入った青森県の地形。

 

47都道府県庁のサイトをみくらべてみて、

文字も画像もぎゅうぎゅうのところが多かった。

この青森県庁のサイトは、

余白が多めで、コンテンツの区切りが非常にわかりやすい。

 

f:id:szkmw:20180715182502p:plain

 

ページに入ると、ヘッダーの中心が県のシンボルだけになる。

トップに戻るがアイコンなの、すてき!

リンクのホバーが赤色なのは、りんご色だろうか。

 

実用的で、おしゃれ。

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

CMでみた、「正方形の写真が取れるチェキ」。

 

f:id:szkmw:20180715094213p:plain

 

instax.jp

 

このサイトでの主人公は、もちろん「商品」。

商品をひきたてるための、文字。

商品で撮った写真を引き立てるための、色。

 

こんなにすごい綺麗な写真が撮れます、ドーーーン!!

という種類のカメラとは違う見せ方をしているな。

 

instaxのアイコンを受け継ぎながら、新たなスタンダードとしての普遍性を意識した
シンメトリーな造形とシンプルな操作性を追求。

 

 

普遍性、シンメトリー、シンプル。

サイトはベーシックな色(普遍性)、

コンテンツの配置も中央寄せ・シンメトリー、

シンプルな構成。

 

商品の持っている特性をサイトに投影する手法は、

うんこ漢字ドリルのときにも気づいたことだ。

 

for-myself.hatenablog.com

 

みればみるほどこだわりが詰まっている!!!

 

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

f:id:szkmw:20180714232201p:plain

www.morinaga.co.jp

 

「和風で古い・ダサい」と、

「和風でイマドキ・おしゃれ」のちがいはどこにあるのだろう。

 

和の雰囲気ってどうしても古めかしさがついてきてしまう。

そこをいまっぽくする秘密は、どんなものなのだろう。

すご〜〜〜く、おしゃれ!

 

 

いま持っている知識の中で分析するに、

 

・色をしぼっていること

 

・レイアウトがイマドキなところ

 特にインスタのぞろぞろの正方形の枠はおしゃれ度高い!

 

空間がゆったり

 コンテンツの余白、ちいさめの文字

 

…あたりがミソなのかな、と思った。

 

 

正方形の枠について余談。

たまたまテレビで、正方形型の写真が取れるチェキのCMをみた。

正方形=イマドキ、おしゃれはかなりきていると思う。

アプリのアイコンなんかも、正方形。

もちろんInstagramの投稿画像も。

 

秘密探索中!


 

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

f:id:szkmw:20180713100742p:plain

 

www.office-augusta.com

 

 

みごとなまでの、THE・グリッドレイアウト!

 

シンプルだな〜と思ったら、

一番下のボックスにある「スキマ・スイッチ」を押すと…

スキマがあく!!!!!

 

おとずれたひとをくすっとさせる仕掛け、すてき!

 

(ちなみにスイッチつながりで、やる気がでるという某学習塾のサイトにも

スイッチを探しに行きましたが、サイト上にはありませんでした

そう簡単には行かないものです)

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

f:id:szkmw:20180712105823j:plain

 

unkokanji.com

 

なんてゆかいな世界なの!ポップ〜!

ネオンのような黒×原色の次は、柄、そして原色の背景がずっと続いて、

それはそれはポップな世界

 

だけど文字は黒一色。しかも、教科書体。まじめ!

 

ぱっと見はおふざけだけど、コンテンツはすご〜くまじめ

商品の内実をサイトでも表現したのかな。

 

ファビコンもカワイイ。

 

 

 

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

f:id:szkmw:20180711112620j:plain

 

春の茨城の観光を紹介するサイト。

 

ブルーとイエローの淡さと、白で、春のやわらかさがたっぷり。

ネモフィラのブルーがよく映える。きれいだな。

 

春といえばピンク?黄緑?と色でのイメージしか持っていなかったけれど、

なるほど色の淡さで春っぽくなるのか〜という発見。

 

淡い色にゆるゆるな文字・イラストで、ほわほわしてしまいそうなのに、

要所で濃紺を使っていることで、メッセージがキリッとしてる。

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

f:id:szkmw:20180711111834j:plain

 

さわやか〜〜!!

色は青の濃淡だけ。

 

ナビゲーションの背景にがフラットデザインというのだろうか、

影やグラデーションのない単色でイマドキ感がつよい。

 

社名より商品名よりナビゲーションより上に、キービジュアルがどーん。

ブランド力に対する自信を強く感じる。