03 / LEVEL 02
JUNKBRANDING
Architecture Corporate
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
事務所紹介・業務案内・6件の設計事例を掲載した、建築設計事務所の企業サイト。
作品情報
- 想定業種
- Architecture
- 技術スタック
- HTML / CSS / Vanilla JS
- デザインコンセプト
- 建築写真と図面の補助線を使った複数ページ構成。事務所の業務、設計の手順、各事例の計画内容を具体的な文章で伝える。
- アニメーション
- CSSとIntersectionObserverによる見出し・画像の表示。動きを減らす設定に対応。
主な実装機能
- 用途とURLに連動する設計事例の絞り込み
- JSONから表示する6件の設計事例詳細
- 画像拡大と前後の画像への切り替え
- 問い合わせフォームの入力確認（送信・保存なし）
- PC・スマートフォンのナビゲーション
学習できる内容
- 事業紹介・会社情報・実績一覧・実績詳細の役割を分け、複数ページを行き来できるサイトマップを作る。
- 建築写真の縦横比と余白を揃え、一覧の比較しやすさと詳細ページでの写真の見せ方を設計する。
- 所在地・用途・竣工年などの実績情報を共通の項目に整理し、物件が増えても使えるページ構成を作る。
- ヘッダー・フッター・現在地表示を各ページで揃え、実績から問い合わせへ進める導線を実装する。
- ページごとの見出し・メタ情報・画像代替文を整え、リンク切れとスマートフォンでの読みやすさを点検する。
ソースコードについて
8つのHTMLページと共通CSS・JavaScriptで構成。設計事例の本文・建物概要・画像情報をJSONで管理し、共通の詳細ページに表示する。
ポートフォリオ制作のポイント
- 事務所紹介・業務・設計事例・問い合わせの役割を分け、回遊を設計する
- 事例データと表示処理を分離し、件数が増えた場合の更新方法を説明する
- 写真・本文・建物概要の整合性を確認する
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。