NATURAL KITCHEN & 公式サイト(https://www.natural-kitchen.jp/)分析
NATURAL KITCHEN &のサイトは、ページを開くと画像が動き、中央の画像は切り替わります。イラストが使われていて、画像にマウスを乗せると画像が表示されたり、かわいらしいサイトです。
今回は勉強のために、デザインを分析しました。
font
-apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,”Noto Sans”,”Liberation Sans”,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”,”Noto Color Emoji”
茶系（#965e0c・#af8c5e）・グレー系（#57533f）
color
背景色：茶系（#af8c5e）・白系等
メニュー
ヘッダーはスクロールすると上部に固定されるタイプ。マウスオーバーでリンクが表示される箇所があります。
フッターは横4列でリンクが並んでいます。
ページによっては、モーダルウィンドウで文章が開いたり、画像にマウスを乗せると、アイコンが表示されます。
まとめ
イラスト使いや動きを参考にしたいサイトです。かわいらしく、表示の仕方も参考にしたいサイトです。
初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。
