Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページに挑戦します。
視線を惹きつける大胆なヒーロー画像、ストリーミングサービスの導線、シンプルなフォーム、バンドツアー告知まで、シンプルな構成ながらも“魅せる技術”が求められるデザインです。
今回のFigmaデザイン見本
今回の模写対象は、次のような構成を持つアーティストLPデザインです。
- Heroセクション（大きな人物写真＋SNSリンク）
- アルバム紹介セクション（テキスト＋配信サービスアイコン）
- ミュージックビデオ紹介（画像＋ボタン）
- メール登録フォーム（名前・メールアドレス）
- BANDINTOWNプラグイン風エリア
- フッター（コピーライト・SNS）
カラーは濃紺 × 白 × アクセントブルー、フォントはゴシック系の太字と可読性の高いテキストが使われています。
模写ルールと前提条件
| 項目 | 内容 |
|---|---|
| 使用技術 | HTML / CSS（JS不要） |
| 難易度 | 準中級 |
| デバイス対応 | PCメイン（レスポンシブは任意） |
| アニメーション | 自由に実装OK（フェードインなど） |
| その他 | 動画再生や動的フォームは実装対象外 |
💡補足：
Heroセクションの色味はbackground-blend-modeやfilter: grayscale + contrastを組み合わせて再現できます。
アニメーションやスライダーは各自で自由に拡張してOKです！
HTML/CSSの構成と設計方針
本模写では以下のような構成を意識して作成しました。
セクション構成
<header class="hero">
– 背景画像＋アーティスト名＋SNSリンク
<section class="album">
– アルバム紹介テキストと各種配信サービスのロゴ
<section class="music-video">
– 画像と動画紹介用リンクボタン
<section class="subscribe">
– 名前とメールのフォーム（静的）
<section class="band">
– BANDINTOWNなど外部情報表示用のエリア
<footer>
– コピーライトとSNSリンク
セクションごとの実装ポイント
Heroセクション
background-image＋linear-gradientで色味調整z-indexとpositionでテキストの重なりを制御- SNSリンクはアイコンフォントやSVGで再現可能
アルバム紹介セクション
- 2カラム構成（左：テキスト、右：動画サムネ）
- ストリーミングアイコンを横並びに配置
ミュージックビデオセクション
- ボタンの位置調整、ホバー時のカラー変化
- スマホでは縦並びに切り替え可
メール登録フォーム
- 名前／メールアドレス／ボタンを中央揃えで配置
inputの見た目調整にpadding／border-radius
BANDINTOWN風セクション
background-color＋テキストのみで再現可- 大きな文字を中央に配置
フッター
- アイコンは横並びで配置
- 小さなフォントと余白でバランス調整
レスポンシブ対応（任意）
必要に応じて、以下のような対応を追加しましょう。
- 768px以下でHero画像のトリミングやフォントサイズ調整
- アルバム・MVセクションは縦並びに切り替え
- フォーム幅を狭める、SNSリンクを中央寄せに
アニメーションは自由に追加OK！
模写の目的はHTML/CSSの構造理解ですが、アニメーションや動きを加えることでより魅力的に仕上がります。
以下のようなライブラリ・APIの利用もおすすめです：
- AOS.js / ScrollReveal.js（スクロールアニメーション）
- GSAP（自由な動き）
- CSS transition / animation（ボタンやリンクのエフェクト）
おわりに：構造理解と“魅せるUI”の両立を目指して
今回のFigma模写は、初級を卒業した方向けの「構造＋見せ方の練習」に最適です。
HTML/CSSだけでも十分に再現性が高く、なおかつ
「どこにどれだけ余白を取るか」「フォントに強弱をつける」といったUI設計の本質が学べる内容になっています。