FigmaとChatGPTでウェブサイトを作る：AI03のヒントと手順

HTMLとCSSでのカルーセルシステムの設計

• まずは、Figmaで中間設計で生成した画像を開きます。

• 次に、モバイルUI用のフレームを作成し、UIの一部をトレースします。

• 完璧な円を描画するために、OptionキーとShiftキーを押しながら楕円ツールを使用します。

• 各円からグラデーションを引き出し、ドロップシャドウを適用します。

• 最後に、テキストを配置して、色やフォントなどを整えます。

HTMLとCSSでのカルーセルシステムの設計

UIデザインの画像編集手順

• UI内のテキストサイズを調整し、ピル状や境界線の形状をトレースしていく

• ヘッダー用に長方形を描画し、グラデーションを適用する

• 左側にもグラデーションをつけるために別の長方形を描画し、シャドウを使用する

• ヒーローイメージを修正するため、Photoshopで画像を開き、ヒーローイメージを選択してコピーし、新しいドキュメントに貼り付ける

• 画像サイズを1024に拡大し、スタビライズPhotoshopプラグインを使用して画像を処理する

• 他のヒーローイメージにも同様の手順を繰り返す

UIデザインの画像編集手順

画像処理とCarousel作成

• 最初に、コンテンツにシームレスにフィットするマスクを作成します。

• ペンツールを選択し、希望の部分を囲むパスを引きます。

• パスを右クリックし、「ベクターマスクを作成」を選択します。

• レイヤーパネルでマスクボタンをクリックし、マジックワンドツールを使用して画像の境界のコンテンツを選択します。

• 次に、マスクを選択し、ブラシツールを使用して黒で塗りつぶします。

• すべて選択を解除し、マスクレイヤーを選択し、大きなブラシを使用して画像の周りにグラデーションを描きます。

• これにより、画像がコンテンツにシームレスに溶け込むようになります。

• 最後に、PNGとして保存して、Figma内に画像を配置します。

• 次に、Carouselの作成に取り掛かります。

• もう1つの画像を配置し、右にオフセットします。

• その後、フレームを複製し、その2つのアイテムを選択し、左に移動させます。

• それにより、新しいヘッダー画像が表示されるようになります。

• 最初のヘッダー画像を選択し、プロトタイプモードに移行し、ドラッグ時に他のフレームに移動するように設定します。

• 逆にするために、もう1つのヘッダーフレームにも同様の設定を行います。

画像処理とCarousel作成

Figmaプロトタイプの作成

• Figmaを使用してプロトタイプを作成しました。

• ヘッダー画像をスワイプできるように設定しました。

• 色の一致を確認してプレビューしました。

• 自動アニメーションを使用して色の遷移をプレビューしました。

• ペンツールを使用してベクターシェイプをトレースし、SVGとしてエクスポートしました。

• HTMLとCSSを構築して、画面でテストしました。

Figmaプロトタイプの作成

Green Sock Animation Platformを使用したカルーセルの作成

• まず、Green Sock Animation Platformを使用してカルーセルを作成するために、チャットGPTに質問します。

• 次に、HTMLをHTMLドキュメントにコピーし、CSSを追加してカスタマイズします。

• その後、JavaScriptを追加します。

• それから、個々のカルーセルアイテムにスタイルを追加して、違いが分かるようにします。

• Green Sock Animation Platformのインポートを忘れていたことに気づきました。スクリプトタグを取得するために、再度チャットGPTに質問します。

• ここで、自動でナビゲートするカルーセルが表示されますが、ユーザーがスワイプして選択できるようにしたいと思います。

• しかし、この結果は私の望んでいたものではなく、スワイプ方向を使用してアニメーションを前方または後方に再生する方法を説明していました。

• 私は1つのカルーセルアイテムをスワイプしたいということを明確にしたかったのです。

• 結果は、デスクトップとモバイルの両方で動作するポインタイベントを使用していました。

• それから、このコードをJavaScriptファイルにコピーして貼り付けるだけです。

• 左右にスワイプすると、2つのアイテム間を移動することができるようになります。

• 次に、HTMLに入って、カルーセルアイテムをヒーローイメージに置き換えます。また、画像を選択できないようにCSSを微調整し、レイアウトも少し調整しました。

Green Sock Animation Platformを使用したカルーセルの作成

JavaScriptを使用してページのスタイルを更新する

• 次に、私たちのbodyタグにクラスを追加したいと思います。

• 現在表示しているカルーセルアイテムに基づいて、私たちがいるページにクラスを追加することで、特定のクラスに基づいてページ内のすべてのスタイルを更新できるようになります。

• このようにすれば、ページが切り替わるたびにクラスが変わるので、次に行うのはFigmaに移動して、背景用のCSSグラデーションをコピーして各ページのクラスに貼り付けることです。

• これにより、カルーセルの遷移時に背景が変わります。

• それから、残りのビューにも同じ作業を繰り返します。

• 次に、flexboxを使用してこれらの円形アイテムを配置し、各ページのクラスにそれぞれのグラデーションをコピー＆ペーストし、マークアップを作成し、CSSレイアウトを調整し、Figmaから変数をコピー＆ペーストしてCSSに戻します。

• 最後に、GitHubにソースコードを公開したので、リンクは説明にあります。

JavaScriptを使用してページのスタイルを更新する

Conclusion:

FigmaとChatGPTを駆使してウェブサイトを構築する手順とヒントを学びました。これらのスキルを活用して、魅力的なウェブサイトを開発し、ユーザーエクスペリエンスを向上させることができます。