ブランドのティザーサイトですね！ 「これから何かが始まる」というワクワク感を演出するために、黒背景に白文字のシックでミニマルなデザインのベースを作成しました。

画面の真ん中にブランド名と、公開予定日（カウントダウンを意識した日付）、そしてメールマガジン登録用のシンプルなフォームを配置しています。

以下のコードをそれぞれ index.html と style.css という名前で同じフォルダに保存すれば、ブラウザでそのまま確認できます。


1. HTML (index.html)

HTML


<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Brand New Project - Coming Soon</title>

    <link rel="stylesheet" href=“css/style.css">

    <!-- Google Fonts から洗練されたフォントを読み込んでいます（任意） -->

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Sans+JP:wght@300;400&display=swap" rel="stylesheet">

</head>

<body>


    <div class="container">

        <!-- ロゴやブランド名 -->

        <header>

            <h1 class="brand-logo">BRAND NAME</h1>

        </header>


        <!-- メインメッセージ -->

        <main>

            <p class="tagline">新しい世界が、ここから始まる。</p>

            <p class="coming-soon">COMING SOON</p>

            <p class="date">2026.00.00 RELEASE</p>

        </main>




        <!-- フッター（SNSリンクなど） -->

        <footer>

            <div class="sns-links">

                <a href="#">Instagram</a>

                <a href="#">X (Twitter)</a>

            </div>

            <p class="copyright">&copy; 2026 BRAND NAME.</p>

        </footer>

    </div>


</body>

</html>