ここで触ってみる
言葉で説明する前に、質感を確かめてください。詳しく見る・動き・切り替えの3つです。
開いて、閉じる体験
別ページへ飛ばさず、その場で詳細を開けます。探したい情報にすぐ戻れる体験です。
意図のある動き
常に動かし続けず、必要なときにだけ印象づける。見ていて疲れにくい動き方です。
やわらかく現れる
再生 #1
切り替えて理解する
タブで視点を変えながら読めます。長い説明を一気に並べず、必要なところだけ開けます。
伝えたい順にセクションを並べ、読み手が迷わない流れをつくります。
こんなサイトが作れます
会社の顔になるサイトから、申込・会員まで。よくご依頼いただく型です。
コーポレート / ブランドサイト
第一印象と信頼性を伝える、高速で一貫したサイト。
LP / キャンペーン
伝えたい一点に絞った、コンバージョン設計のページ。
業務Web / 会員サービス
社内外の業務フローに合わせた、使えるWebアプリ。
どう作っているか
使っている技術と、このページでの使われ方を開けます。興味のある方だけどうぞ。
React / Next.js
開く →高速でインタラクティブなUIの実装基盤。
使用: 本サイト全体のページ構成・ルーティング・コンポーネント設計
ReactNext.jsTypeScript
Tailwind / Design Tokens
開く →デザインルールをコードに落とすスタイリング。
使用: 色・余白・タイポグラフィの統一（lib/design-tokens.ts）
Tailwind CSSDesign Tokens
Motion / Dialog
開く →ページ遷移・モーダル・Hero の動きの設計。
使用: ページ遷移、HeroReveal、このページの Interaction Showcase
framer-motionPremiumDialog
CMS / 運用
開く →更新しやすい構成と、公開後の改善。
使用: コンテンツ分離の設計思想。案件に応じて microCMS / WordPress 等を選定
Headless CMSWordPress運用
進め方
質感を先に合わせ、設計・実装、公開後の改善まで伴走します。
- STEP 1体験で方向を合わせる
- STEP 2設計して作る
- STEP 3公開後も育てる
1
体験で方向を合わせる
このページのような操作感や構成で、目指す質感を先に共有します。
2
設計して作る
情報の整理・画面・実装まで一気通貫で進めます。
3
公開後も育てる
計測・改善・更新まで。作って終わりにしない伴走です。