サイト分析：NATOCO

2023年10月11日 08:03

●下層ページのフォーマット

・ディレクトリ構成：下層はメインのページは第二階層まで、ニュース記事など詳細ページも含めると第三階層まである。
・ニュース詳細や社員インタビュー詳細などCMSで量産するページは固有のレイアウトにしている。またニュース詳細のみパンクズがない。

第二階層は2種類のフォーマットがある。

第二階層フォーマット①
ビジュアルあり、アンカーリンクありのパターン
第二階層フォーマット②
ビジュアルなし、アンカーリンクなしのパターン

・H1の左端の位置（X座標）はアンカーリンクの有無によって異なる。
→アンカーリンクがない場合はその分、左に詰められている。
・頭の位置（Y座標）は全ページ統一されている。

・ぱんくずはフォーマットによって左端の位置（X座標）も頭の位置（Y座標）も異なる。
→H1、ぱんくずはページによってルールを持たせている。

・アンカーリンクの下側はパンクズの下側と揃っており、アンカーリンクの数が増えた場合はそのまま上に積み上がる。

●インタラクション

ハンバーガーメニューと動画の再生ボタンはマウスオンで円の中心から外に向かって色が変化する。

リンクボタンは背景が下から上に向かって色が変化＋矢印が左から右へループする。矢印は最初早くて段々遅くなる動き。

画面右下にある、問い合わせボタンもマウスオンで下から上に向かって色が変わる。

画像はマウスオンで画像が拡大＋若干赤くなる。

・ページを開いた時にH1が若干赤く光りながら下から上に向かって色が黒くなる。→ボタンのロールオーバーと統一感のある動き

・ページをスクロールした時にH2も英語→日本語の順に下から上に向かって表示される。

・PCドロワーを開閉した時は赤いオブジェクト？が上から下に向かって落ちてくる。

→様々な要素のインタラクションに統一感を持たせている。（中心から外に向かって変化する、下から上に向かって表示される、ジャカン色が赤くなる）

●実装メモ

トップFVの演出

1.画面中心から左右に向かって線が引かれる
2.線が上下に広がる
3.画面の上半分が明るくなる（若干白くなる）
4.コピーが下から上に向かって表示。若干後に左下から右上に向かって塗料のビジュアルが表示。
5.scrollボタン、言語切り替え、ヘッダーなど各ナビゲーションが一気に表示。
6.塗料のビジュアルが数秒ごとに左下から右上に向かって動く。

実装方法

塗料のビジュアルは左下と右上が画像、真ん中が動画になってる。

真ん中の動画は下記プロパティでマスクしている。

object-fit:cover;

object-fitプロパティは、置換要素の内容（コンテンツ）が、どのように収まるかを指定できる。

値
cover
期待される状態
コンテンツが、元々の縦横比を保ちながら、その要素内を完全に覆うように変形する。コンテンツの持つ幅と高さの短いものが要素にフィットし、長いものはその要素からはみ出る

マウスに合わせて背景が動くパララックス

・カーソルを上に動かすと写真が下に、カーソルを左に動かすと写真が右に動く。→カーソルの動きに対して逆の方向に要素が動く。
・カーソルの移動距離が短いと写真が少しだけ動く、長いと動く量も大きくなる。
→動く方向は逆で、動く量はカーソルに比例する。

実装方法

・マウスの位置と起点となる位置を計算してパララックスさせたい要素を動かす。

1.CDNからparallax.min.jsを読み込む。
2.重ねたい背景画像を、レイヤーの奥から順に読み込む。一番上にしたい画像はHTMLでは一番下になる。動きの大小はカスタムデータ属性の「data-depth」で設定する。数値が大きいほど画像の動きも大きく、数値が小さいほど画像の動きも小さくなる。
3.パララックスを動作させる。

CDN
「CDN」はContent Delivery Networkの略で、簡単に言うとインターネット経由でファイルを配信する仕組みのこと。特にjQueryなどで利用する場合は、ソースファイルをネット経由で使えるためファイルをダウンロードする必要がない。CDN経由で配信されているURLをscriptタグで読み込むだけ。

jQuery
JavaScriptのライブラリの一つ。ライブラリとはプログラムの処理をまとめたもの。JavaScriptで書くと何行にも及ぶ処理が、jQueryを使用することで短縮して記述することができる。