Zen garden

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

About

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

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

Stone on sand

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