サイトレビュー #1

こんにちは。
 ご縁があって、友人のお母さんのカフェのHPを作成できることとなりました！とってもうれしく思う反面、不安も少しあるのが本音。…でもそんなこと言ってられないので、絶対よろこんでもらいたいし、役に立ちたい！
まだその計画が動き出すまで時間がありそうなので、その間になにができるかなと考えまして。同じ様にカフェ系のHPにはどんな種類があるのか、サイトレビューとして記しておこうと思いました。
本日からとりあえず25日まで毎日更新する…！のを目標と設定してみます。それでは、やってみよう！

【コパン　ドゥ　フロマージュさん】
https://www.copain-f.com/

■サイトの目的
集客（＆オンラインでの注文受付）→売上アップ

■ターゲット
チーズに興味がある人
素材にこだわったチーズが好みな人
クチコミやテレビでこのお店を知った人


■ページ構成
①Home　★で構成されている

②About　★　
お店について、店主のプロフ
こだわり、チーズの管理方法、チーズの魅力
下部にはレシピ、注文フォームのバナーあり

③Cheese&Others　★
チーズとチーズに合う品物の紹介
→画像が並び、商品名・金額記載
→注文フォームへのリンク

④How to buy
注文フォーム

⑤Shop
店舗情報
お店の外観
住所・営業日のわかるカレンダー
Googleマップ

⑥Contact
お問い合わせフォーム

⑦Information&Journal　★
ブログメイン


■気付いた点
・メインビジュアル
６枚ほどの画像が切り替わる
Scrollを押すとナビとお店紹介の箇所へ下にスライドする

・線は擬似要素でbackgroundでimgを指定しているからチョークで囲ったような雰囲気が出ている

・ナビの文字は繊細でやわらかい雰囲気
→すべてimgだった

・ナビはfixedで下まで付いてくる！

・筆記体の部分は文字だった
→飾り文字のような役割

・ボタンの四角もimg
→それ以降に使用されている区切り線も同じ


・カレンダー
枠はimg
内部は全部文字だった…！すごい。
<table> タグが使われているみたい
<tr>→曜日の一列、１週間
<th>→曜日
<td>→数字
細かい！

・footer
住所だけでなく「カーナビコード」も記載
→住所だけでは辿り着けなく、お問い合わせが多かったのかな

・hover
ゆっくりホバーがかかる

・フォント
YuMincho ／#271a00


・まとめ
食を楽しむ人＝丁寧に生きている、余裕を持って暮らしている、というイメージにぴったりなサイトだった。手書きのイラストや線などはすべてimgでHPの中にこんなにたくさん使われているんだと認識できた。
見た目だけで無く、ホバーの仕方やリンク先の写真のゆっくり表示がかかる動きもやわらかく、商品を食べたときの満足感や落ち着きを想起させられた。