# ヒーローセクション：全画面の枯山水写真を背景に
繊細なセリフ体テキストを中央配置する構成。
霧のグラデーションオーバーレイで幽玄な奥行きを演出。

## About

アバウトセクション：左カラムのテキストエリア。 ブランドの哲学と世界観を2〜3行の凝縮した文章で伝える。 細ウェイトの明朝体で静謐なリズムを構築し、 余白そのものがコンテンツとなるタイポグラフィレイアウト。

右側の正方形に近いモノクロ写真と左右対称に配置することで テキストと画像が互いを引き立て合うグリッド構造。 シンプルな2カラムレイアウトが本質を際立たせる。

## Services

自然/ Nature

サービスカード左：Font Awesomeアイコン・日本語ラベル・ 英語サブラベルの3層構造ヘッダー。ホバーで浮き上がる シャドウエフェクトを持つホワイトカードコンポーネント。

空間/ Space

サービスカード中央：3カラムグリッドの中央に位置し 水平方向のバランスを保つ役割。余白と間を設計の 根幹に置いたシンプルなカードレイアウト。

流れ/ Flow

サービスカード右：グリッド右端に配置され視線の流れを 左から右へ誘導。3枚並ぶことでサービスの全体像を 一覧性高く伝えるカード型UIパターン。

## Process

01
Analyze

プロセスセクション第1ステップ：霞がかった山岳写真を 低透明度で背景に敷き、縦罫線で3ステップを区切る 伝統的な和の構成美を持つレイアウト。

02
Design

プロセスセクション第2ステップ：大きな薄色の数字・ セリフ体の英語タイトル・短い水平線・本文テキストの 4要素で構成されたステップカードの中核部分。

03
Refine

プロセスセクション第3ステップ：細部の精度と一貫性を 示す最終工程。3ステップ構造で作業フローを 視覚的にわかりやすく整理するレイアウト設計。

## FAQ

FAQセクション：アコーディオン形式の質問一覧。クリックで回答が滑らかに展開します。
アコーディオン開閉エリアの回答テキスト。質問に対する簡潔で的確な説明を記載するエリア。 上部に細い水平線を持ち、本文との境界を視覚的に整理します。
第2の質問項目：プロジェクト開始から納品までのスケジュールに関する設問。
タイムライン・各フェーズの所要期間・マイルストーンの設定方法について わかりやすく説明するための回答テキストを配置するエリア。
第3の質問項目：サポート体制やアフターフォローについての設問。
納品後のサポート内容・修正対応の範囲・継続的なパートナーシップについての 詳細を記載する回答エリア。
第4の質問項目（デフォルト展開）：料金体系やお見積もりについての設問。
最後の項目はデフォルトで開いた状態で表示されるオープン項目。 重要度の高い情報を視認性高く提示するデザイン上の工夫として 初期状態から回答が展開しているアコーディオンパターン。 ご不明な点はお気軽にお問い合わせください。
Contact Us