サイトレビュー#10

7日目
今回はスプリットレイアウトでまとめられていたデザインの中から選びました。ほかのサイトも魅力的でした。
まとめサイト↓
https://webdesignday.jp/inspiration/web-design/3867/

レビューサイト：ハンドメイド紙雑貨 minico様↓
http://minico.handmade.jp/shop

スプリットレイアウトとは
【split：(縦にまたは木目にそって)割る,縦に裂く
weblioより抜粋：https://ejje.weblio.jp/content/split 】
その名の通り、縦に分割したレイアウトだそうです。勉強になりました。
個人的に、スプリットと聞くと、映画のイメージが強いですが。。

デザイン
・フォント：font-family: 游ゴシック体, "Yu Gothic", YuGothic, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;　游ゴシックって意外とやわらかい印象。
・ナビフォント：font-family: "Montserrat", sans-serif;
・紙雑貨屋さんということで、クラフト紙のような背景。
・topは左右対称に分割され、右側だけがスクロールできるようになっている。全体のレイアウトも左右対称なデザイン。
・幅を狭めると、縦レイアウト。ハンバーグナビのアニメーションもおもしろい。シュッと横から出てくる感じ。
・ナビが左横で珍しい。別のページにうつると、そのナビ名が拡大し、文字色が変わったりするため、ユーザーがどこを閲覧しているのか分かりやすくなっている。
・トップから他のページに移動するときに、真ん中でパカッとひらくようなアニメーションがすてき。扉が開いたみたい。

コーディング
・ブレイクポイント：w768
・最初開いたとき、全体がクラフト紙だったのが、widthを50%に変化させて左によるようなアニメ―ション。javascriptで動かしてそう。中身をみてもさっぱり。
・右側はpositionで配置。単位は%にすることで、画面の幅が変わってもレイアウトが崩れないようになっている。ブレイクポイント以下になると、widthを100%にし、positionのleftを0にして縦レイアウトに可変している。
・footerはpositionで左側の一番下に配置。
・ナビの文字は訪れたページの文字が大きくなる。ブレイクポイント以下では、単位をvwにして画面幅に応じて変化。

li.nav_about a {
   font-weight: 100;
   font-size: 105px;
   top: 13%;
   letter-spacing: -0.05em;

width768px以下のとき↓
li.nav_about a {
   letter-spacing: 3px;
   top: 0;
   font-size: 10vw;
   font-weight: 200;

・商品一覧で商品をhoverすると、imgにshadowをつけて、左上にちょっとずらすようになっている。浮かび上がって、立体的に見える。

transform: translate(-5px, -5px);
webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.35));

感想
・単位の使いどころが大事だな。rem、emとかがごっちゃになってしまう。%も親がどこになるかによって変わるから悩みどころ。。
・Javascriptでやられると分からん。ちょっとかじってみようかしら。
・いろんなクリエイターさんがいらっしゃるんだな。剥きりんごカードかわいい！！友達のメッセージカード用に買おう。