魅力的で、見(jiàn)た目も美しく、機(jī)能的なニュースレター登録フォームを作成するのは簡(jiǎn)単な作業(yè)ではありません。このプロジェクトでは、典型的なデザインから脫卻し、真に革新的なもの、つまり未來(lái)的なタイムマシンにインスピレーションを得たサインアップ フォームを目指しました。これを?qū)g現(xiàn)する方法をご紹介します。

ビジョンとコンセプト
目標(biāo)はシンプルで、次のようなニュースレターの登録フォームを作成することでした。

• すぐに注目を集めます。
• 楽しく、インタラクティブで、プレミアムな印象を與えます。
• クリエイティブな UI/UX デザインの力を?qū)g証します。

私たちは、ユーザーが購(gòu)読するときにタイムマシンに乗っているような気分になってほしいと考えました。輝くネオン効果、アニメーション化されたトランジション、完全にレスポンシブなレイアウトを備えたデザインは、機(jī)能的でありながら目立つ必要がありました。

ステップ 1: コア構(gòu)造

私たちは HTML でフォームを構(gòu)築することから始めました。これには以下が含まれます:

ヘッダーセクション:

• テーマ (タイムトラベル!) を設(shè)定するためのタイトルとサブタイトル。

フォームボディ:

• 電子メール入力フィールド。
• インタラクティブなアニメーションをトリガーする「購(gòu)読」ボタン。

フッターセクション:

• フィードバック用のステータス メッセージ。
• 送信後の進(jìn)行狀況を視覚的に確認(rèn)できる読み込みバー。

より魅力的なものにするために、右上隅に「コーヒーを買(mǎi)って」ボタンを追加し、ユーザーにプロジェクトのサポートをさりげなく促しました。

<div>



<p>Step 2: Styling for a Futuristic Look</p>

<p>The design needed to feel high-tech, so we focused on:</p>

<ul>
<li>Neon Colors: Bright, glowing colors for a sci-fi vibe.</li>
<li>Smooth Transitions: Subtle animations to make the UI feel alive.</li>
<li>Responsive Design: Ensuring the form looked great on all devices.</li>
</ul>

<p>Key styles included:</p>

<p>A glowing neon effect using text-shadow.<br>
Background animations with @keyframes to create a dynamic atmosphere.<br>
Button hover effects for an interactive feel.</p>

<p>CSS Code<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Orbitron', sans-serif;
  background: radial-gradient(circle, #1b2735, #090a0f);
  color: #fff;
  margin: 0;
  padding: 0;
  overflow: hidden;
  animation: backgroundGlow 10s infinite alternate;
}

@keyframes backgroundGlow {
  0% {
    background: radial-gradient(circle, #1b2735, #090a0f);
  }
  100% {
    background: radial-gradient(circle, #202d42, #0d0f1a);
  }
}

.newsletter-container {
  position: relative;
  width: 80%;
  max-width: 500px;
  margin: 100px auto;
  background: linear-gradient(135deg, #2b5876, #4e4376);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.1);
}

.coffee-button {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.coffee-button img {
  width: 150px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.coffee-button:hover img {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(255, 223, 0, 0.5);
}

ステップ 3: インタラクティブ性を追加する

フォームに生き生きとした応答性を持たせたかったので、JavaScript を使用して次のことを行いました。

• メールフィールドを検証します。
• 動(dòng)的メッセージ (エラー、成功、読み込み) を表示します。
• 視覚的なフィードバックのために読み込みバーをアニメーション化します。

JavaScript コード

const subscribeBtn = document.getElementById('subscribe-btn');
const emailInput = document.getElementById('email');
const statusMessage = document.querySelector('.status-message');

subscribeBtn.addEventListener('click', () => {
  const email = emailInput.value.trim();

  if (!email) {
    statusMessage.textContent = '?? Please enter a valid email address!';
    statusMessage.style.color = '#ff4d4d';
    return;
  }

  statusMessage.textContent = '? Calculating time coordinates...';
  statusMessage.style.color = '#ffc107';

  setTimeout(() => {
    statusMessage.textContent = '? Coordinates verified! Welcome to the future.';
    statusMessage.style.color = '#00ff99';
    emailInput.value = '';
  }, 3000);
});

ステップ 4: テストと展開(kāi)

スムーズなエクスペリエンスを確保するには:

• さまざまなブラウザとデバイスで応答性をテストしました。
• パフォーマンスのためにコードを最適化しました (CSS と JS を最小限に抑えます)。

最後に、コミュニティに紹介するためにプロジェクトを CodePen で公開(kāi)しました。

重要なポイント

• 革新的なデザインの売り: タイムトラベルのようなユニークなテーマは、単純な形を特別なものに高めることができます。
• インタラクティブ性が鍵: 魅力的なアニメーションと動(dòng)的なフィードバックにより、ユーザーの集中力が持続します。
• プレミアムな感觸: 輝くネオン効果とスムーズなトランジションがフォームに高級(jí)感を與えます。

チェックしてください!

ここでライブデモをご覧ください: https://codepen.io/HanGPIIIErr/pen/oNKKXqg の未來(lái)ニュースレター登録フォーム

よりクリエイティブなデザインや楽しいプロジェクトについては、https://gladiatorsbattle.com/ にアクセスし、剣闘士をテーマにしたミニゲームやプレミアム デザインの世界に飛び込んでください。 ?

以上がプレミアム UI/UX を備えた未來(lái)的なニュースレター登録フォームの作成方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。