TYPE
バニラJavaScriptで実装したインタラクティブタイポグラフィ紹介ウェブサイト
HTML、CSS、JavaScriptで開発したタイポグラフィ紹介Webサイトです。 書体の歴史、字間と行間、サイズとウェイト、フォント紹介、書体デザイナーの5ページ構成でコンテンツを整理し、ライト/ダークモードの切り替えに連動して背景動画も切り替わるインタラクティブな環境を実装しました。 sessionStorageを活用してページ遷移間のダークモード状態を維持し、インラインスクリプトによりレンダリング前にダークモードを先行適用することでフリッカーを防止しています。 字間・行間スライダーとリアルタイムフォントタイピング機能により、ユーザーがタイポグラフィの概念を直接操作しながら探索できるよう設計しました。851pxをブレイクポイントとして、レスポンシブレイアウトとトグルナビゲーションを実装しています。
詳細内容
インタラクティブなインターフェースの実装
- ページごとに分離されたJavaScriptモジュール構造でコードの可読性と保守性を確保しました。global.jsで共通機能(ダークモード、ナビゲーション)を管理し、各ページ別の個別スクリプトで機能を分離して関心事を明確に区分しました。
- const、let、arrow function、template literalなどのES6+構文を積極的に活用してモダンJavaScriptを実装しました。
CSS Variablesベースのライト/ダークモード切替システム
•CSSカスタムプロパティ(--primary-color、--secondary-color)を活用した動的テーマ切替を実装しました。
sessionStorageでユーザーテーマ設定を保存してページ更新時にも状態を維持し、FOUC(Flash of Unstyled Content)防止のためDOM読み込み前のスクリプトでテーマを事前適用してユーザー体験を最適化しました。また、CSS transitionを活用してスムーズなテーマ切替アニメーションを適用しました。
リアルタイムDOM操作およびイベント処理
•addEventListenerとoninputイベントを活用してリアルタイムでスタイル属性を変更する機能を実装しました。range inputとselect boxの値変更時に即座にDOM style属性を更新し、正規表現を活用した入力値検証およびフィルタリングロジックを実装しました。
CSS3アニメーションおよびレスポンシブ実装
•CSS transformとperspectiveを活用したカードフリップアニメーションを実装し、keyframesを利用したタイピング効果とスライドイン/アウトアニメーションを制作しました。
FlexboxとCSS Gridを活用してレイアウトを構成し、480pxから2560pxまで様々なデバイスに対応するようメディアクエリを活用してレスポンシブウェブを実装しました。
ウェブ標準およびパフォーマンス最適化
•セマンティックHTML5要素(header、nav、main、section、article)を活用した構造的マークアップを実装し、ARIA属性とaltタグを通じてアクセシビリティを改善しました。
CSS正規化(normalize.css)とresetを通じたブラウザ互換性を考慮し、ウェブフォントpreloadを通じてレンダリングパフォーマンスを改善しました。背景動画preloadとともに初期ページ読み込み時に必要なリソースを事前に準備してユーザー体験を最適化しました。