コーポレートサイト

ゴールは「相談ハードルを下げること」

Flarely は神奈川・東京の中小事業者と並走するスタジオ。**「サービスがふわっとしていても大丈夫」**と言える状態の窓口を作るのが、サイト最大のミッションだった。

そこから逆算して切ったのが、

ページ数は最小に。Top / Privacy / Terms の 3 ページ構成
/contact は独立ページにせず、Top 内の #contact アンカーに集約
メインコピーは 「事業という火種に、灯りをつける。」
サブは「デザイン / 開発 / AI のスペシャリストが、事業を成長させるために伴走します。」

/contact を独立ページにしてしまうと、それだけで「正式な問い合わせ」感が出てしまう。スクロールしきった先にフォームがあるくらいの距離感を狙った。

技術構成

レイヤー	採用
Framework	Astro 5
UI	React 19 + Tailwind v3 + shadcn/ui
Animation	GSAP (ScrollTrigger pin)
Visual	`@paper-design/shaders` で WebGL grain-gradient
Form	shadcn (`input` / `textarea` / `label` / `select`) + Radix
Package	pnpm

shader は最初 paper-design/shaders の MeshGradient + feTurbulence film grain で重ねていたが、FV のコピーをじゃまするのでパラメータを詰めた。最終的に speed: 0.7、mix-blend-overlay、opacity 0.22 で**「火種が動き続けている」気配**だけ残す形に落ちた。

サービス横スクロール

サービス 6 種類は、デスクトップでは GSAP の pin + ScrollTrigger で横方向にスライドする。最後のカードの右端が wrap の右端に揃うように、offsetLeft + paddingLeft ベースで距離を計算している。

Flarely services section

スマートフォンでは縦並びの 1 カラムに切り替え。同じ情報量を、視点の動かし方だけ変える。

ヘッダーの一貫性

下層ページ（Privacy / Terms）のヘッダーを、Top の FV ヘッダーと 配置・サイズ・色まで完全一致させた。sticky / border-b / backdrop-blur も意図的に撤廃して、透明な軽量レイヤーとして振る舞わせる。

絶対配置 left-0 top-0 / right-4 sm:right-6 lg:right-10
高さ h-[58px] sm:h-[100px]
wordmark h-[32px] sm:h-[54px]
CTA は graphite 背景 / 白文字に反転（下層側のみ）

「ページが切り替わっている」感覚を最小化したくて、ヘッダーが揺らがないことが最優先になった。

試して落としたもの

追従ヘッダー（fixed wordmark + nav）: 後続セクションと衝突するため断念して FV 内蔵に戻し
5 ページマルチ構成 (Top / Services / Works / Company / Contact): 情報密度が分散してしまい、3 ページに統合
「つくるから、回すまで。」というメインコピー: 響くがやや業界寄り → 「事業という火種に、灯りをつける。」に差し替え

シンプルにするための減らし方は、増やしてみて初めて精度が出る。

学び

「問い合わせのハードルを下げる」という単一ゴールに対して、ページ構成・コピー・ヘッダー・シェーダの動き・フォーム単体の幅まで、全部の意思決定がぶら下がる構造で進められたのは大きい。ブランドステートメントが先にあると、サイトの判断スピードが体感 2 倍速になる。