トレインチ自由が丘 TRAINCHI JIYUGAOKA公式サイト(https://www.trainchi.com/)分析
トレインチ自由が丘 TRAINCHI JIYUGAOKAのwebサイトは、PCでは右側に画像が画面縦幅いっぱいに表示されていて、左にロゴなどが表示されています。スクロールすると各内容がふわりと表示されます。今回は勉強のために、デザインを分析しました。
font
yu-gothic-pr6n, sans-serif
黒系（#000000）
文章はfont-size: 2remくらい
color
白・オレンジドット・グレードット
ボタン:背景にドットとborder:1px solid #000、文字サイズ1.5rem
メニュー
PCもスマートフォンも右上にハンバーガーメニューがあります。ハンバーガーメニュー内は横幅を設定するのでは無く、リンクにpadding:25px 25px 0を指定しているので、一番長いリンクにpaddingがついた幅で表示しています。リンクは右寄せ、クリックするとふわっと開きます。
まとめ
トレインチ自由が丘 TRAINCHI JIYUGAOKAのwebサイトは、白い色使いでシンプルなサイトです。各内容・画像・文章の上下は62px・70px・80pxくらい開きがあります。各コンテンツの箇所は、スクロールすると左に横書きの文字が90度縦になったコンテンツのタイトルがふわっと表示され、スクロールにくっついて動いて表示され、次のコンテンツに移る前にふわっと消えます。サイトの横書きの文字が90度縦になって各コンテンツにくっついて表示されるデザインはとてもお洒落で、一度配置をしてみたいと思いました。
初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。
