Hero Section

# ヒーローセクションは、ファーストビューで訪問者の注意を惹きつける大見出しとサブコピーの2段組レイアウト

左カラムにキャッチコピーとCTAを配置し、右カラムにビジュアルイメージを対比させる2カラムグリッド構成で、ブランドの世界観を瞬時に伝える

Scroll Down
About Section

### Our Mission

アバウトセクション左カラムには「ミッション」と「ビジョン」の2ブロックが縦積みで配置され、ブランドのストーリーと価値観を文章で伝える。見出しと本文のタイポグラフィ階層が明確に設計されている。

### Our Vision

右カラムに対比する建築・空間のイメージを配置することで、テキスト情報と視覚情報のバランスを最適化。グリッドラインの背景パターンが全体に統一感を与え、プロフェッショナルな印象を演出する。

Services Section
UI/UX Design

サービスカードは3列グリッドでアイコンとサービス名を並べ、個々の提供価値を均等なボックスレイアウトで整理する

Learn More
Web Development

各カードはボーダーで区切られ、ホバー時に背景色が変化するインタラクションでユーザビリティを高める

Learn More
SEO Optimization

サービスアイコンは角形の枠線付きボックスに収め、ブランドトーンと一致する統一感のある視覚表現を実現

Learn More
E-Commerce Solutions

2段目の3カードも同様のグリッドレイアウトを踏襲し、スクロールによる自然な情報の展開をサポートする

Learn More
Brand Strategy

カード下部の「Learn More」リンクはシェブロンアイコンを伴い、次のアクションへの導線を明快に示す

Learn More
Data Analytics

グリッドの罫線が各カードの境界を視覚的に整理し、情報密度が高い中でも可読性を確保するデザイン

Learn More
Scroll to Explore

### Workflow

Step 01 Research
Step 02 Planning
Step 03 Development
Step 04 Testing
Step 05 Launch
Project Showcase
Scroll to Explore
Achievements
250+
実績数・達成プロジェクト件数を大きな数字で視覚的にアピールするKPIカウンター表示エリア
98%
クライアント満足度やパフォーマンス指標をパーセンテージで示す実績の可視化エリア
1M+
コードライン数などの技術的規模感を数値で伝え、信頼性と実力を訴求するセクション
FAQ
Q. プロジェクトを開始するにはどうすればよいですか？よくある質問をアコーディオン形式で整理したFAQセクション
FAQ各アイテムは質問行と回答行で構成され、トグルボタンをクリックすることで回答が展開・収納される。質問の前に「Q.」プレフィックスを付け、視認性を確保する。
Q. 料金体系はどのようになっていますか？展開状態では回答テキストがスムーズなアニメーションで表示される
料金はプロジェクトの規模・要件・期間によって異なります。初回コンサルテーションを通じてお客様のニーズを詳しくヒアリングした上で、カスタマイズされたお見積りをご提案いたします。アコーディオンUIにより、必要な情報だけを選択的に表示できる使いやすいデザインです。
Q. 納期はどのくらいかかりますか？FAQはSEOにも効果的で、ユーザーの疑問解消と離脱防止に貢献する
プロジェクトの複雑さによりますが、標準的なウェブサイト制作は4〜8週間を目安としています。詳細なスケジュールはキックオフミーティングで確定します。