こんにちは。ゲームUIデザイナーの「はなさくの」です。

Photoshopで、音楽再生画面のデザインを作成したので、そのデータを配布します。ソーシャルゲーム内でも、ゲーム内で使用されているBGMを再生できる画面があるため、そちらをイメージして作成しました。

Photoshop 2024を使用して、解像度72pixel/inchで作成しています。
（有料版は、ページ最下部からPhotoshopデータをダウンロードできます）

01｜音楽再生画面デザイン

Photoshopデータですが、レコードの中にあるキャラや背景素材についてはあくまで仮素材としてぼかした状態で入れていますので、そちらは使用せずに、ご自身で用意した画像に差し替えてください。

ジュークボックスをイメージしたデザインにしているため、上部に見えている円形はレコードに見立てています。左右にスワイプ、または左右の矢印ボタンをタップすることで、レコードを切り替える形で考えています。

1つのレコード中に複数のトラックが存在しているため、そのトラック数は画面中央右側に表示しています。

選択されているトラックは、リストの下地を白で光らせて目立つようにしています。また、再生中の場合は、右側の停止ボタンの外周が音楽再生時間のゲージになっており、青いゲージが停止ボタンを一周囲むと音楽が1曲終わるイメージです。

ちなみにレコードのタイトルは、レコード左下にフキダシとして表示しています。

次の記事では、このデザインをAfterEffectsを使用してアニメーションをつけていきますので、そちらも合わせてご確認ください。

02｜データダウンロード

02-01｜許諾事項

データは、Adobe Photoshop 2024で作成したものになります。古いバージョンを使用している場合は、エラーが発生する場合がありますので、ご了承ください。

02-02｜禁止事項

• 二次配布、再配布、素材の販売、無断転載、シェア利用等は禁止します。

• 個人・商用ともに、ご自由にお使いください。

• 著作権は放棄しておりませんので、素材データの複製譲渡や再配布、販売等著作権を侵害する行為は禁止します。

• データ販売になりますので、返品返金はご遠慮ください。