Skip to content

Latest commit

 

History

History
93 lines (75 loc) · 4.06 KB

File metadata and controls

93 lines (75 loc) · 4.06 KB

仕様書

ウェブサイト概要

サイトマップ

  • WORKS(ホーム)- /
  • ABOUT - /about
  • CONTACT - /contact
  • ライセンス情報 - /licenses
  • エラーページ (404) - /404
  • エラーページ (500) - /500

デザイン

  • カラーパレット(このパレットの微調整版)
    • #302d2d
    • #1b1919
    • #e16428
    • #f6e9e9
  • フォント
    • Noto Sans JP(日本語メインフォント)
      • Regular: 400
      • Medium: 500
      • Heavy: 900
    • Special Gothic Expanded One(aboutページタイトル用)
      • Regular: 400
    • Montserrat(英語テキスト用)
      • Regular: 400
      • ExtraBold: 800

使用技術

  • Astro v5
    • TypeScript
    • SCSS
  • Three.js
  • Cloudflare Workers

その他要件

  • SPA?
  • 作品のカルーセル
  • 3D ロゴの配置
    • ドラッグ可能なウィンドウの中に入れる。
  • 音楽再生機能
    • プレイヤー
    • 波形表示
  • レスポンシブデザイン対応
  • 日本語のみの対応

音楽再生の機能

  • MusicPlayer (svelte) (状態をまとめて管理)
    • ControlPanel (svelte)
    • WaveDisplay (svelte)
  • Desktop
    • 画面下部に横全画面で波を表示
    • 画面右下にコントロールを表示(title, artist, play/pause, next, prev)
  • Mobile
    • 画面右側に波を表示
    • 画面下部に横全画面で小さめ(低め)のコントロールを表示(title, artist, play/pause, next, prev)

z-index

z-index エンティティ パス
1030 MusicPlayer ControlPanel 最小化ボタン src/components/music/MinimizeButton.svelte>style>.minimize-btn
1020 MusicPlayer ControlPanel MobileProgressBar src/components/music/MobileProgressBar.svelte>.mobile-progress-bar
1010 MusicPlayer ControlPanel src/components/music/ControlPanel.svelte>style>.control-panel
1010 MusicPlayer ControlPanel 閉じるボタン src/components/music/ControlPanel.svelte>style>.close-button
1000 MusicPlayer 本体 src/components/music/MusicPlayer.svelte>style>.music-player
255 ヘッダー src/components/header/Navbar.astro>style>ul
224 画面追従リンク群 src/components/FixedLinks.astro>style>ul
10 WorkCard オーバーレイ src/components/works/WorkCard.svelte>style>.work-overlay
1 WorkCard アイコンサムネイル src/components/works/WorkCard.svelte>style>.icon-thumbnail

音声ファイルについて

  • public/music/ 以下に配置
  • wavファイルはffmpegを使用してmp3に圧縮
  • ビットレートは基本的に192kbpsに設定 (サイズが大きすぎる場合は下げるのも可)
ffmpeg -i input.wav -c:a libmp3lame -b:a 192k output.mp3