コーポレートサイトCorporate

機能紹介

• 静的サイト生成による高速表示

  ビルド時にすべてのページを HTML として事前生成します。ページを開いた瞬間から表示が始まり、JavaScript の読み込みや実行を待つ必要がありません。インタラクションを必要としないページには JavaScript を配信しない方針のため、余分なスクリプトが表示速度に影響しない構成になっています。

  ビルド時

  デプロイ前に1回だけ実行

  • HTML を事前生成
  • 生成済みファイルをサーバーへ配置

  → アクセス時

  ブラウザ

  レンダリングなしで即返却

  • HTML をそのまま返す
  • JavaScript の実行なし

• スクロールアニメーション

  各ページの要素は画面内にスクロールされたタイミングで順番にフェードインします。要素が画面内に入ったことをブラウザが検知し、CSS アニメーションを適用します。要素ごとに遅延を設定でき、複数の要素を時間差で表示することで視覚的なリズムを生み出します。

  スクロール検知

  ブラウザが位置を監視

  • 対象の要素を監視
  • 画面内に入ったら発火

  → アニメーションを付与

  CSS アニメーション

  フェードイン

  • 要素ごとに時間差を設定
  • GPU を使った滑らかな描画

• レスポンシブデザイン対応

  PC・タブレット・スマートフォンのどの画面幅でも崩れることなく表示します。画面の幅に応じてレイアウトのカラム数を切り替えつつ、文字サイズは画面幅に連動して滑らかに拡縮します。

  レイアウト

  幅に応じて切り替え

  • 画面幅に応じてカラム数を変更
  • 各デバイスで最適化

  文字サイズ

  連続的に変化

  • 画面幅に連動して拡縮
  • 最小・最大サイズを保証