デザインの再現
GridとFlexboxを使い、各要素の関係と余白を画面幅ごとに調整しました。
case study
DHU ビジョンブック
#Webサイト制作 #フロントエンド実装
大学の2030年に向けた中長期構想を伝える公式Webサイト
01 / overview
概要
デジタルハリウッド大学が策定した、2030年に向けた中長期構想を紹介するWebサイトです。
デザイナーと連携し、提供されたデザインをもとにフロントエンド実装を担当しました。
02 / challenge
課題
大学のビジョンを印象的に見せながら、デスクトップからスマートフォンまで内容を読みやすく保つ必要がありました。デザインの表現と実際の閲覧環境を両立させることが課題でした。
03 / scope
担当範囲
- デザインデータをもとにした画面実装
- HTML・CSS・JavaScriptによるコーディング
- 画面幅に応じたレスポンシブ対応
- 表示と基本操作の確認・調整
04 / implementation
実装・工夫
レスポンシブ対応
情報の優先順位を保ちながら、スマートフォンでも読みやすい配置へ切り替えました。
基本品質への配慮
HTML構造、代替テキスト、画像の扱いなど、閲覧時の基本品質に配慮しました。
05 / outcome
成果
大学の中長期構想を伝える公式サイトとして公開され、現在も実際のWebサイトを閲覧できます。
デザインの意図を読み取り、複数の画面幅で成立する実装へ落とし込んだ制作実績です。