きのこさんのサイト100選

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

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

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

ザクザク切りのコンテンツ。下に下に向かいたくなる。

  • ザクザクとしたななめ切りのレイアウト
  • モノトーンの中に水色のアクセント
  • 黒縁の写真

f:id:szkmw:20180725192248j:plain
zakuzaku.co.jp


するすると一番下までスクロールしたくなる、ななめ区切り
同一方向のななめ切りが多い中で、
このサイトでは右へ、左へとななめ切り。
ザクザクという店名通りのザクザクとしたレイアウト


ごくごくわずかなところに使われている
アクセントカラーの水色が映える。


ほとんどの写真は切り方が工夫されていたり、切り抜かれている中で、
NEWSの写真はただの長方形型。
その写真に黒縁があることで統一感が出てる!


for-myself.hatenablog.com
for-myself.hatenablog.com
for-myself.hatenablog.com

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

f:id:szkmw:20180725192253j:plain

www.takarakuji-official.jp

 

夏だ!

なんだろう、すこし昭和っぽさがある。

(想像の昭和)

 

下までざーっとみて思ったことが3つ。

 

1.文字が大きい。

2.リンクやボタンが大きい。

3.「詳しくはこちら」「」など

これより先にもコンテンツがありますよ~と併記されている。

more」とか、英語じゃない!

 

ターゲット層は高齢の方

もちろん高齢の方が使いやすくなくちゃね。

 

pandafam.hatenablog.com

 

この記事、すごく勉強になった。

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

f:id:szkmw:20180727091314j:plain

www.edogawa-juukou.com

 

このサイトデザイン、たまらなく好きだ!

むつかしいレイアウトで作られたインパクトではない。

 

backgroundがfixedにして、スライドしてる構成。

わりと、よくある作り

では何がインパクトあるかって、

それはもう背景の浮世絵

あとは、黒の使い方。うっすら文字を入れたり。

 

イケてるサイトって、

自分が知らない魔法の技術が使われているんだ!

(=だから手が届かないプロのもの)

って少し前まで思っていたけれど、

3ヶ月学んだだけである程度の作り方は想像できて。

つまり何が自分に足りないかって、技術とは違うもの。

デザインの知識と、その組み合わせなのかもしれない。

「アイデア」とか「センス」じゃないのよね〜。

 

f:id:szkmw:20180727092420p:plain

 

黒のGoogleマップ

GoogleマップのカスタマイズはjQueryでできるという!

マップまで雰囲気をそろえる。

すごい!惚れる!超好き!

 

rmtmhome.com

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

f:id:szkmw:20180725192313j:plain

人材系のサイトって、印象がいちばんというか。

事業が、手に取れるモノではないから、

イメージ写真がほとんどを占めるようなサイトが多い。

 

そんなサイトが多い中で、ここは「文字」。

メッセージを前面に押し出す、手紙のようなトップページ

 

ファーストビューの手書き文字と、

フッターの手書き文字。

はじめと最後の、ここぞ!というところで手書き文字を使っている。

 

あれもこれも手書き文字のサイトをみるけど、

特に信用サービス系でカチッとした感じを崩さず

手書き文字を使うのは、このくらいがちょうどなのだろう。

 

手書き文字、イマドキだし、なによりあたたかさがでるな~。

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

f:id:szkmw:20180725192249j:plain

hoshinoya.com

ロード中のお月さまからもう、ドキッ。

特別感が満ち溢れてる

 

大きな写真。ゆったりとしたスペース。中央寄せ。

シャドウを入れなくてもこれだけ白文字が目立つってことは

けっこう写真の明るさを落としているんだな。

隙間なく写真を敷き詰めるの、きれいだな~。

 

最低限の文字で、写真が主人公。これこそ特別感。

でもこれが、「軽井沢」「京都」…と

地名だけだとだめなんだよな。

これより文字は削れない、極限まで引き算したトップページ

 

英語切り替えがフッターに追いやられてる。

そんなに縦長でないサイトなら、それもアリなんだな~。

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

f:id:szkmw:20180725102418p:plain

www.cow-aka.jp

 

え!?牛乳石鹸って青じゃないの…?

と思ったら、関西は赤、関東は青が主流だそうです。へええええ。

 

昔からある牛乳石鹸

グッドデザイン賞アットコスメ、「〇〇女子」…

若い世代の女性にアピールするためのイマドキ感

これでもか!と取り入れてる。

 

せっけんといえば、泡。泡といえば、ドット!

柄ひとつとっても、どうしてそうしたかが明快

角丸のコンテンツの枠に、見出しも石鹸のフォルム。

こただわりすごい…!

f:id:szkmw:20180725103522p:plain

 

 

ヘッダーの位置に会社名がなく、フッターのところに「牛乳石鹸」。

牛乳石鹸パッケージの知名度があるからなせる技だなあ。

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

f:id:szkmw:20180724090617p:plain

aiweb.s5-style.com

 

あー!わくわくする

「あたらしい学びになれば」と立ち上げた

 個人プロジェクトだという。すてき。

 

動きはJavaScriptを使っているそう。

 

画像の切り替えの部分の紙がちぎれた感じ

ほわっとした感じ、かわいいな。

方眼紙風の背景、使えそうだな〜。

f:id:szkmw:20180724090644p:plain

個人プロジェクトか…!

なんかすごく触発された。

私もなにかやってみたくて、うずうずしてきた。

とってもとっても素敵なサイト。