Works

工務店 Webサイト

  • 工務店サイトモックアップ
  • 工務店Webサイト PC
担当範囲: デザインカンプからのコーディング、およびサーバーへのデプロイ
制作時期: 2025年8月
制作時間: 119.5時間
使用ツール: Figma / Photoshop / Visual Studio Code / GitHub
使用言語: HTML / CSS(SASS)/ JavaScript
コメント: コーディングスキル向上を目的に、販売されているデザインカンプをもとに架空の工務店サイトを制作しました。
サイト全体で共通するヘッダー・フッター・ヒーローセクションなどは、PHPのinclude機能を使って部品化し、保守性を高めています。
また、ページごとのタイトル・説明文・OGP情報・ヒーロー画像などは変数で管理し、1ページ単位で柔軟に設定できる構造を採用。
これにより、1つのファイルの修正で全ページに変更を反映でき、デザインの統一性と更新作業の効率化を両立しました。

サイトの表示について: Basic認証をかけております。
ご確認いただく場合には、以下のユーザー名とパスワードを入れてください。

ユーザー名 : aobotanUser
パスワード:aobotanSiteYSys