*ポイント*
・サイト全体がピンクで統一されており、背景にボーダー画像を使用しているので女子が好みそうなデザインになっている
・画面の枠にborderの設定をしており、角は丸くなっている
・スクロールすると白黒のイラストにカラーがはいる(スマートフォンサイズだと最初からカラーで表示されている)
色々なサイトを調べ、デザインが気に入ったサイトを100個選びまとめました。
*ポイント*
・サイト全体がピンクで統一されており、背景にボーダー画像を使用しているので女子が好みそうなデザインになっている
・画面の枠にborderの設定をしており、角は丸くなっている
・スクロールすると白黒のイラストにカラーがはいる(スマートフォンサイズだと最初からカラーで表示されている)
*ポイント*
・全体的に優しい色合いをしている
・背景画像が和紙をイメージしており、丸いリンク画像も丸いだけでなく和紙のようなギザギザの縁にしている
・リンク画像をhoverするとテキストが表示される
・左側にあるナビゲーションメニューを含む部分が背景の透明度が薄いことによって上にかぶさっているように見える
*ポイント*
・文字をゴシック体で統一している
・サイト全体に桜が降ってくるようなアニメーションを設定している
・女性専用ということもあり色もピンクで統一されていて可愛らしい印象を持つ
・トップのスライド式の画像に推したい言葉(女性専用、駅近、アメニティが豊富)が入力してありファーストビューでお客さんを取り込むように工夫されている
*ポイント*
・画面の半分でコンテンツを分けており、左は固定されている
・商品紹介にいくと画面半分の右側に商品一覧が現れ商品の画像をhoverすると左側に拡大写真と商品の説明が表示される、スマートフォンサイズになると画像と説明文だけになり分かりやすくなっている
・お知らせ部分にtwitterを上手く活用し、ツイートしている焼き上がり情報や売り切れ情報を表示させるようにしている
*ポイント*
・お店自体のイメージカラーがピンクなのでサイトもピンクやピンクに合う色でまとめられている
・トップ画像の下に新商品がスライド式で見れるようになっており購買意欲が増す
・新商品の下に売れ筋ランキングがあり、商品一覧が表示されているよりも新商品や売れ筋ランキングのほうが何が良いのか分かりやすい
*ポイント*
・幼稚園のサイトということもあり、イラストをたくさん使用している
・トップの画像が内側から外側にかけて広がっているようになっていて真ん中の画像を見るように協調されている工夫がされている
・ナビボタンが旗のようになっていて棒の部分を背景画像、旗の部分を画像で表示して色を薄くしていてリアルに見える
*ポイント*
・リップとブランドなのでサイト自体もピンクで統一されている
・ヘッダーがグリッドレイアウトになっている
・基本的には画像や背景画像だが一部分だけアニメーションを使用していてうまくバランスがとれている
・ナビボタンのフォントカラーがスクロールすると背景色によって変わる
*ポイント*
・ヘッダーが全てスクロールされたらナビボタンがTOPに固定されている
・Instagramやyoutubeへのリンクも左に固定されていてリンク先に飛びやすい
・全体的にパステルカラーで統一されているので柔らかく、可愛い印象を持つ
・ヘッダー画像に商品だけをくり抜いて使用しており、このサイトに合っている