SueokaAkira

音楽サイトは 「世界観 → 音源 → 情報 → 行動」
の順にユーザーが情報を求めるため、以下の流れに設計しました。
1. WORLDVIEW（世界観）
ビジュアル中心のセクションで、バンドの個性を直感的に伝達。
2. MUSIC（音楽紹介）
楽曲をイメージしやすいコピーで特徴を解説。
“聴いてみたくなる” 気持ちを誘発する構成に。
3. LIVE（ライブ情報）
ライブハウスを連想させる背景とメリハリのある見出しで臨場感を演出。
4. MOVIE（動画セクション）
MV／ライブ映像を印象的なフレームに配置し、視線誘導を強化。
5. PROFILE（メンバー紹介）
キャラ・役割・音楽性が分かるよう、
テキスト量と余白のバランスを調整。
→ 情報を “理解しやすい順番” に並べることで離脱を防止。

デザイン：
テーマ：デジタル×エモーション（感情のある電子的世界）
•黒背景にネオンカラーを合わせ、サイバーロックな世界観を構築
•タイポグラフィ（見出しの縦間・余白）でリズム感を演出
•写真とテキスト比率を調整し、視覚と情報のバランスを最適化
•メンバー写真には光の粒子（抽象表現）を混ぜ、音楽ジャンルの雰囲気を加味
•スマホ閲覧を想定し、上から下に“音の流れ”のように遷移するスムーズな構成

当初の目的として、SassではなくCSSのネスト構造の記述を試したかったのと、バニラJSでの記述を復習することを念頭にしておりましたが、双方今後の学習がもっと必要だと感じました。
サイトテーマとしては、プログラミング用語としてのハローワールドにちなみ、記譜（コード）とコーディングのコードのダブルミーニングで、サイバーと音楽の融合をイメージしました。カラーモードの切り替えを実装し、ダークモードでは、これまで使ってこなかったネオン主体の表現に挑戦し、サイト全体としても電脳感を出せるように意識しています。
自作のテーマとして作成しましたが、ワードプレスの投稿からphpを用いて、情報を取ってくる場合に、カードレイアウトを揃えると余白が生まれてしまうなどの問題点も生まれているため、今後改善を図っていきたいと考えています。