MENU
  1. ホーム
  2. Gallery
  3. FV01

FV01

Gallery
目次

カンプ画像（Figma）

実装画面（ブラウザ）

デモページを見る

実装のポイント解説

プロポーショナルな画面設計：パーセント指定とCSS Gridによる比率維持レイアウト

ポイント: メインビジュアルの左右分割レイアウトにCSS Gridを採用。テキストエリアと画像エリア（.kv-img）の横幅を固定値ではなく「1fr と 48%」という相対的な比率で制御し、画面幅が変わっても要素同士が衝突しない、レスポンシブ構造を構築しています。

.kv-inner {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 48%; /* 左側は残り全部、右側は48%の横幅を確保 */
  gap: 5%;                          /* 要素間の隙間を5%に固定 */
  align-items: center;              /* 👑 左右のコンテンツの「縦位置中央」を自動で揃える */
  height: 828px;
}

解説: Webサイトの第一印象を決めるファーストビュー（KV）では、PCのモニターサイズによって要素が重なったり、画像がテキストを押し潰してしまったりするレイアウト崩れは許されません。
このコードでは、親要素（.kv-inner）にCSS Gridを適用し、右側の画像エリアに 48%、中央の余白（gap）に 5% を割り当て、左側のテキストエリアが残りのスペース（1fr）を自動的に埋めるように設計しています。これにより、画面が縮小しても拡大しても、Figmaが指定する「およそ5:5」の比率が論理的に保たれます。さらに align-self などに頼ることなく、コンテナ全体の align-items: center; だけで、高さが変わるテキスト群と巨大なグラフィック画像の縦軸が常に正確な中央で連動するレイアウト手法です。

動的な幾何学装飾：絶対配置（absolute）とインラインSVGによる波形カットアウト

ポイント: KVの最下部にある波形のセクション区切りを、画像の書き出しではなくインラインの <svg> タグと position: absolute; で実装。ブラウザの横幅に合わせて波の曲線がなめらかに伸縮し、解像度を問わず常に鮮明で美しいグラデーションとの境界線を描き出しています。

.kv {
  position: relative; /* 基準点に設定 */
}

.kv-wave {
  position: absolute;
  left: 0;
  bottom: 0;          /* 👑 KVエリアの最下部にピタッと貼り付ける */
  width: 100%;
}

.kv-wave svg {
  width: 100%;        /* 画面横幅がどれだけ広がっても100%追従させる */
  height: auto;       /* 比率を崩さずに伸縮させる */
}

解説: モダンなWebサイトで多用される「セクション間の波型や斜めの切り替えデザイン」を実装する際、背景画像（PNG/JPEG）として配置してしまうと、拡大されたときに曲線がぼやけたり（ジャギーの発生）、画面幅によって波の形が急激に歪んだりする問題が発生します。
ここでは、ベクターデータであるSVGコードを直接HTMLに埋め込み（インラインSVG）、.kv-wave をKVコンテナの最下部に絶対配置しています。SVG内の viewBox="0 0 1440 128" の比率を保ったまま、width: 100%; height: auto; で伸縮させることで、4Kの巨大なモニターからノートPCまで、あらゆる解像度において「境界の曲線が絶対にぼやけない」というコーディングを実現しています。

予測可能なボタンスタイリング：BEM手法とborder-radius（100vh）によるカプセルボタン

ポイント: 2つの主要なCTAボタン（お問い合わせ・資料ダウンロード）の骨組みを .kv-cta で共通化し、線の有無や背景色といった装飾ディテールだけをModifierクラス（--contact / --download）で切り分け。さらに、角丸に 100vh を指定することで、将来的に文字数やパディングが変更されても形状が崩れない「カプセル型」を維持させています。

.kv-cta {
  padding: 12px 40px;
  border-radius: 100vh; /* ✨ 文字量やサイズが変わっても絶対に真円の角丸を維持する */
  font-weight: bold;
  line-height: 1.6;
}

.kv-cta--contact {
  border: 2px solid var(--color-nord10);
  background-color: var(--color-white);
  color: var(--color-nord10);
}

.kv-cta--download {
  border: 2px solid var(--color-nord10);
  background-color: var(--color-nord10);
  color: var(--color-white);
}

解説: コンバージョン（成果）を高めるために、2つのボタンに「白背景に青枠（反転型）」と「青背景（塗り潰し型）」という明確な視覚的優先度（プライマリ・セカンダリ）を与えています。
技術的な注目点は border-radius: 100vh; の採用です。角丸の半径に固定値（例えば 30px など）を指定してしまうと、将来のテキスト修正や運用の過程でボタンのサイズや文字数が大きく変わった際、楕円のように歪んだ不格好な形状になってしまうリスクがあります。ビューポート高さを表す 100vh という極端に巨大な値を指定しておくことで、ブラウザは「ボタンの高さの半分」を上限として完全な半円を両端に合成するため、どのような状況下でもラグビーボール化しない、常にFigmaの意図通りのカプセル形状が約束されます。

Gallery
目次