⚫︎ デザイン意図

このサイトは、デザインカンプからのコーディング課題を元に制作した作品で、レイアウトやセクション構成は課題の内容を踏襲しています。デザインのオリジナル化にあたり、建築会社の「信頼感」と「技術力」を軸に据え、環境への配慮や自然との調和を感じられるビジュアルを意識しました。

コーディングには HTML5、SCSS、jQuery を使用し、スタイル設計はFLOCSSをベースに構築。Foundation・Layout・Objectの各階層を明確に分け、サイト固有のUIと汎用パーツを分離することで再利用性を確保しました。特にボタンやカード、見出しなどはコンポーネント化し、複数ページで流用できる形にすることで修正時の影響範囲を最小限に抑えています。配色やタイポグラフィは変数化し、テーマカラー変更や新規ページ追加にも柔軟に対応できる構造を採用しました。

jQueryでは、ホバー時やスクロール時に発火するアニメーションを実装。動きは0.3〜0.6秒程度に抑え、全体の落ち着いたトーンを損なわない範囲でアクセントとして加えました。object-fitによる画像トリミングやタップ領域の最適化なども行い、主要ブラウザ（Chrome / Safari / Edge）での表示検証を経て、各デバイスで快適に閲覧できる状態を実現しています。

緑を基調にすることで、持続可能な建築やエコフレンドリーな取り組みを視覚的に表現し、白との組み合わせで清潔感と洗練さを両立。木目や自然素材の質感をデザイン要素として取り入れることで、温かみのある雰囲気を演出しました。施工実績やサービス内容は大きなビジュアルで見せ、会社の強みを直感的に伝えられる構成としています。直感的なナビゲーションとレスポンシブデザインを採用し、スマートフォンやタブレットからも快適に閲覧・問い合わせができるサイトに仕上げました。