アマノ食堂

アマノ食堂

*ポイント*

・ファーストビューのヘッダーが屋根の背景画像が屋根のようになっており、スクロールするとナビゲーションボタンが画面上で固定され、のれんのようになっている

・ファーストビューの各コンテンツの紹介が一つ一つ形が異なっていて手書き風になっておりオシャレ

・トップページをスクロールして上下真ん中ぐらいの位置にアマノ食堂がある街並みのようなイラストが表示されており、人や犬だけが歩いているようなアニメーションになっている

・スマートフォンサイズになるとアニメーション等はないが、コンテンツ紹介も一列になり見やすい

HEART BREAD ANTIQUE

HEART BREAD ANTIQUE

*ポイント*

・アンティークという名前からサイト自体もアンティークをイメージさせるようなデザインになっている

・ファーストビューの画像がスクリーンのような劇場の舞台をイメージさせる中に表示されるようになっており一定の秒数を過ぎると切り替わるようになっている

・スクロールすると色々なイラストが現れるようになっている

・商品紹介のページでは商品の画像にhoverすると商品の説明が表示されるようになっている、スマートフォンサイズになるとクリックしないと説明文が表示されずレスポンシブでも見やすい

carborocco

carborocco

*ポイント*

・斜線で写真に影を表現している

・ボタンのところに影ではなくborderを入れて立体に見せている

・サイト自体は背景が白でテキストが黒でシンプルな作りになっているが、画像が台形になっていたりborderをうまく使用することによってオシャレに見える

etc.JOURNAL STANDARD

etc.JOURNAL STANDARD

*ポイント*

・ファーストビューの画像がだんだん縮小していくアニメーションになっている

・スクロールすると各コンテンツの見出しのテキストの枠だけ最初に表示され徐々に中の色が黒く塗られるようになっている、見出しの下に最初にイラストだけ表示されそのあと背景画像が出てきてイラストと背景画像がうまく重なるようになっている

・ハンバーガーメニューをクリックすると画面いっぱいにメニュー一覧のページになる

・フードのページにいくとサイズの異なる画像が並んでいる

ウフフドーナチュ

ウフフドーナチュ

*ポイント*

・アイコンや見出しが手書きのデザインになっている

・トップのキャラクターの画像をhoverするとウインクするようになっている

・他のページへ飛ぶリンクも楕円形だけど手書きで書いた風に見えるデザインでかわいらしい印象を持つ

・商品一つ一つの画像も同じ角度の画像なので統一感がある

そば処 庄司屋

そば処 庄司屋

*ポイント*

・シンプルなデザインだが、太い枠線で囲まれていて雑誌の記事を読んでいるように見える、レシポンシブになっても見やすい

・一番上に店舗と店舗の休業日が表示されていてこのお店に行きたくて検索した人には一番知りたい情報だと思うので分かりやすい

梅花酵母

梅花酵母

*ポイント*

・全体的に優しい色合いをしている

・背景画像が和紙をイメージしており、丸いリンク画像も丸いだけでなく和紙のようなギザギザの縁にしている

・リンク画像をhoverするとテキストが表示される

・左側にあるナビゲーションメニューを含む部分が背景の透明度が薄いことによって上にかぶさっているように見える

鯛茶STAND

鯛茶STAND

*ポイント*

・背景が黒なので写真が目立ち高級感がある

・スクロールすると一つ一つのコンテンツの画像とテキストが上下に揺れるアニメーションになっている

・ギャラリーの画像のサイズがすべて同じではなくサイズが少し違うものも並べている

ミツバチ博多

ミツバチ博多

*ポイント*

・ファーストビューでオシャレな雰囲気が分かり、行ってみたくなる

・ナビゲーションボタンをhoverすると文字の間隔が広くなるようになっている

・夜しか営業していないのでサイト全体が夜景をイメージして作られている

御菓子司 翠江堂

御菓子司 翠江堂

*ポイント*

・画面の半分でコンテンツを分けており、左は固定されている

・商品紹介にいくと画面半分の右側に商品一覧が現れ商品の画像をhoverすると左側に拡大写真と商品の説明が表示される、スマートフォンサイズになると画像と説明文だけになり分かりやすくなっている

・お知らせ部分にtwitterを上手く活用し、ツイートしている焼き上がり情報や売り切れ情報を表示させるようにしている