DHU ビジョンブックのOGP画像

DHU ビジョンブック

#Webサイト制作 #実装担当

デジタルハリウッド大学の2030年に向けた中長期構想サイト

概要

「DHU 2030 ProtoDesign」は、デジタルハリウッド大学が2030年に向けて策定した中長期構想を紹介するWebサイトです。 未来の生活と文化のデザインを促進するという大学のビジョンを、視覚的に分かりやすく表現することが求められました。

このプロジェクトでは、デザイナーとの協力のもと、フロントエンド実装を担当。 大学の革新的なビジョンを体現する、モダンで印象的なWebサイトを実現しました。

サイトの特徴

  • • 大学のビジョンを視覚化
  • • モダンで印象的なデザイン
  • • レスポンシブ対応
  • • スムーズなアニメーション
  • • 高いパフォーマンス

主要コンテンツ

  • • ミッション・ビジョン
  • • 3つのビジョン詳細
  • • 未来への取り組み
  • • 学長メッセージ
  • • プロトデザイン概念

担当

フロントエンド実装

HTML/CSS/JavaScript
レスポンシブコーディング

レスポンシブ対応

モバイル最適化
クロスブラウザ対応

パフォーマンス最適化

読み込み速度向上
SEO対策

フロントエンド実装担当として、デザイナーの意図を忠実に再現し、ユーザビリティを重視した実装を行いました。

詳細

プロジェクト背景

デジタルハリウッド大学が2030年に向けた新たな構想を発表するにあたり、 その革新的なビジョンを効果的に伝えるWebサイトが必要でした。

「ProtoDesign」という概念を中心に、大学の未来への取り組みを 視覚的に魅力的で分かりやすく表現することが求められました。

実装上の工夫

モダンなビジュアル表現

CSS Grid、Flexboxを活用したレイアウト設計で、 デザイナーの意図する革新的なビジュアルを忠実に再現。 大学のブランドイメージにふさわしい洗練された表現を実現しました。

レスポンシブデザイン

大学サイトという性質上、様々なデバイスからのアクセスを想定。 スマートフォン、タブレット、デスクトップすべてで 最適な表示・操作性を実現しました。

パフォーマンス重視

大学の公式サイトとして、高いパフォーマンスが要求されました。 画像最適化、CSS/JavaScript圧縮により、 高速な読み込みを実現しています。

技術的チャレンジ

アクセシビリティ対応

  • • WCAG 2.1準拠
  • • キーボードナビゲーション
  • • スクリーンリーダー対応
  • • カラーコントラスト配慮

SEO対策

  • • セマンティックHTML
  • • 構造化データ
  • • メタタグ最適化
  • • ページ表示速度向上