ChatGPT と React を使用して見事な 3D カードを作成する (2)

前回の記事では、下の図に示すように、ChatGPT と React を組み合わせて基本的なカード レイアウトを作成しました。前回の記事をまだ読んでいない場合は、このリンクから「 ChatGPT と React を使用して見事な 3D カードを作成する (1) 」をすぐに確認できます。

これに基づいて、Figma ソフトウェアを使用してカードの最適化と設計を行いました。下の図は、私たちのデザインのレンダリングを示しています。この記事では、このデザインに基づいて上記のケースを改善し、このカードをさらにクールにします。早速、GPT4 でコーディングを始めましょう。

figma素材が必要な方は「フロントエンドマスター」の公開アカウント、プライベートメッセージで「カード素材」をゲットしてください。

ダークモード

次に、ChatGPT を使用して Web サイトをダーク モードに設定し、背景画像を追加します。AI は、これを実現するために、styled-components 内のコンテナーと関連するすべての要素を更新することを提案します。

プロンプトワード

サイトをダークモードにして背景画像を設定する

プロンプト ワードを入力する効果は、次の図に示すとおりです。

import React from "react";
import styled from "styled-components";

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #212121;
  background-image: url("https://via.placeholder.com/1920x1080");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
`;

const Card = styled.div`
  width: 300px;
  border: 1px solid #424242;
  border-radius: 5px;
  overflow: hidden;
  background-color: #424242;
  color: #ffffff;
`;

// ... (other styled-components, update colors for dark mode)

function App() {
  return (
    <Container>
      <Card>
        <CoverImage src="https://via.placeholder.com/300x180" alt="Cover" />
        <Title>Card Title</Title>
        <Divider />
        <Subtitle>Card Subtitle</Subtitle>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Text>
        <Author>
          <Avatar src="https://via.placeholder.com/40" alt="Author" />
          <AuthorName>John Doe</AuthorName>
        </Author>
      </Card>
    </Container>
  );
}

export default App;

次に、背景を URL として設定するのではなく、インポートとして使用するように指示します。

プロンプトワード

背景画像を card-background.jpg としてインポートすることはできますか

プロンプト ワードを入力する効果は、次の図に示すとおりです。

import React from "react";
import styled from "styled-components";
import backgroundImage from "./card-background.jpg";

const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #212121;
  background-image: url(${backgroundImage});
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
`;

const Card = styled.div`
  width: 300px;
  border: 1px solid #424242;
  border-radius: 5px;
  overflow: hidden;
  background-color: #424242;
  color: #ffffff;
`;

// ... (other styled-components, update colors for dark mode)

function App() {
  return (
    <Container>
      <Card>
        <CoverImage src="https://via.placeholder.com/300x180" alt="Cover" />
        <Title>Card Title</Title>
        <Divider />
        <Subtitle>Card Subtitle</Subtitle>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Text>
        <Author>
          <Avatar src="https://via.placeholder.com/40" alt="Author" />
          <AuthorName>John Doe</AuthorName>
        </Author>
      </Card>
    </Container>
  );
}

export default App;

上記のコードを codesandbox にコピーします。効果は次の図のようになります。

ChatGPT忘れを回避

ChatGPT を使用する過程で、この場合のカバー画像など、特定の要素が存在することを忘れることがあります。これが発生した場合は、質問をする前のステップに戻ってコードをコピーし、ChatGPT を更新してください。次に、コードを貼り付けて、もう一度質問することができます。下の図に示すように、コードをコピーしたところ、次の応答が得られました。

コードの変更のみに集中する

応答時間を短縮するために、リクエスト コードの変更のみに焦点を当てています。この場合、アバター画像の後に背景画像をインポートするように依頼し、URL の代わりにドル記号を使用して背景画像を設定しました。スタイル付きコンポーネントを使用すると、これらの値を小道具として使用できるため、変更が容易になります。背景画像を更新されたコードに置き換えました。次のプロンプト ワードを使用できます。

コードの変更のみに焦点を当てる

プロンプト ワードを実行した後の効果は、次の図のようになります。

スタイル セクションを手動で変更する

現在、Chat GPT では UI のデザインとスタイリングが少し難しい場合があります。サイズ、スタイル、色、グラデーションなど、非常に多くの詳細が含まれているため、Chat GPT がそれらをどのように実装するかを示すのは困難です。実際、これらの側面を手動で処理する方が速い場合があります。そのため、スタイルを効果的に操作できるように、CSS、HTML、JavaScript、および SwiftUI の基本的な知識を持っていることが推奨されます。

Figmaのカードをチェックしてください。

UI デザインに関しては、サイズ、スタイル、色、グラデーションなどのさまざまな詳細が含まれるため、Chat GPT に指示するのは難しい場合があります。通常は手作業でスタイルを設定する方が速いため、CSS、HTML、および JavaScript の知識が推奨されます。

幸いなことに、私たちは Figma のようなツールが存在する時代に生きています。デザインの各要素を調べることで、デザイナーは CSS コードを提供できます。たとえば、ボックスの影、背景色、ぼかしの設定を Figma からコピーして、Web サイトのカード要素に貼り付けることができます。これにより、デザインに必要な正確な影と不透明度を実現できます。

文章

次に、見出しのフォント スタイル、行の高さ、色を Figma ファイルから取得します。必要に応じて、このプロセスを他の要素に対して繰り返すことができます。適切な色を使用することは非常に重要であるため、すぐに入手できない場合は、これが適切な代替手段になります。

分割線

仕切りには、Figma の線形グラデーションを使用します。これは、最初から作成したり、Chat GPT に依頼したりするのが最も難しいことの 1 つです。Figma から CSS を抽出する方がはるかに効率的です。したがって、美しい線形グラデーションを含む CSS コードを Figma に保存します。

カードサイズ

幅 320 とカード幅 360 があるので、カード幅を 360 に調整する必要があります。また、カバー画像の幅は 320 ピクセルです。

充填

デザインの指示に従って、コンテンツのパディングを 16 から 0 に変更し、カードに 20 のパディングを追加します。カードのコンテンツから、margin-top を 20px に設定してスペースを作成します。また、画像の角に 10px の境界半径を追加します。

HTML コンテンツ

次に、各テキスト要素のコンテンツをデザインからコピーします。これは、Figma のデザインまたは独自のテキストをコピーするだけで実行できます。この例では、見出し要素のテキストを使用します。必要なテキストをすべてコピーしたら、それらを HTML ファイルに貼り付けます。カードは基本的に完成です。

最終的なコード

素晴らしい！プロジェクトを正常に完了し、Chat GPT を活用してコーディングを支援したようです。変更を加えた場合は、Chat GPT が更新を認識できるように、コードをコピーしてチャットに貼り付けることをお勧めします。また、バックグラウンド フィルターなどの機能を使用する場合は、すべてのブラウザーがサポートしているわけではないため、ブラウザーの互換性に注意してください。素晴らしい！

// Styles.css
.App {
  font-family: sans-serif;
  text-align: center;
}

html,
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

APP.JS

// App.js
import React from "react";
import styled from "styled-components";
import "./styles.css";

import coverImage from "./card-image.png";
import avatarImage from "./card-avatar.png";
import backgroundImage from "./card-background.jpg";

function App() {
  return (
    <Container>
      <Card>
        <CoverImage src={coverImage} alt="Cover" />
        <CardContent>
          <Title>Build beautiful apps with GPT4 and Midjourney</Title>
          <Divider />
          <Subtitle>40 sections - 5 hours</Subtitle>
          <Text>
            Hands-on course teaching about all the techniques for turning a
            Midjourney inspiration into a real working design with interactions
            in Figma.
          </Text>
          <Author>
            <Avatar src={avatarImage} alt="Author Avatar" />
            <AuthorName>Taught by Meng To</AuthorName>
          </Author>
        </CardContent>
      </Card>
    </Container>
  );
}

export default App;

const Card = styled.div`
  width: 360px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.1), 0px 30px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  /* Note: backdrop-filter has minimal browser support */

  border-radius: 10px;
  padding: 20px;
`;

const CoverImage = styled.img`
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 10px;
`;

const CardContent = styled.div`
  padding-top: 20px;
`;

const Title = styled.h2`
  margin: 0;
  font-size: 24px;
  font-style: normal;
  font-weight: 590;
  font-size: 17px;
  line-height: 20px;

  color: #ffffff;
`;

const Divider = styled.hr`
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  margin: 12px 0;
`;

const Subtitle = styled.h3`
  font-style: normal;
  font-weight: 510;
  font-size: 15px;
  line-height: 18px;
  /* identical to box height */

  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 8px;
`;

const Text = styled.p`
  margin: 0 0 12px;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 24px;
  /* or 185% */

  color: rgba(255, 255, 255, 0.7);
`;

const Author = styled.div`
  display: flex;
  align-items: center;
`;

const Avatar = styled.img`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
`;

const AuthorName = styled.span`
  font-style: normal;
  font-weight: 510;
  font-size: 13px;
  line-height: 16px;
  /* identical to box height */

  color: rgba(255, 255, 255, 0.8);
`;

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #333;
  background-image: url(${backgroundImage});
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
`;

最終的な効果は下の図のようになりますが、美しくありませんか？

関連資料

ChatGpt 初心者向けガイド: Prompt Words を使用した Web サイトとアプリの構築

Midjourney 入門ガイド: 高品質のアプリケーション設計を実現するための簡単なプロンプト ワード

ChatGPT と React を使用して見事な 3D カードを作成する (1)

終了

素晴らしい！ChatGpt4とFigmaというソフトを使ってすりガラスの透明感のあるクールな3Dカードが完成しました。次の記事では、このケースの紹介と改善を続け、ChatGpt4 の助けを借りて、マウスがカードに触れるインタラクティブな効果を実現し、カードがより立体的な効果を持つようにします。

記事の最後に、記事を作成するのは簡単ではないことをお伝えしたいと思います.私の共有が気に入ったら、必要としているより多くの人がそれを見ることができるように、気に入って転送することを忘れないでください. 同時に、フロントエンド技術の知識を深めたい場合は、「フロントエンドマスター」に注目してください。あなたのサポートが私が共有する最大の動機になります. これからもどんどんコンテンツを発信していきますので、お楽しみに。