1. Framer AIワークショップ機能の紹介と初期設定 [0]

thumbnail

  1. Framer AIワークショップの革新性:

    1. FramerはAIを使用して、完全にインタラクティブでカスタマイズ可能なコードベースのコンポーネントをFramer内で直接構築できる驚くべき機能をリリースした [0]。
    2. これにより、カウントダウンタイマー、数字ティッカー、テキストグローアニメーション、パスのアニメーション化など、これまで自分で実装が難しかった機能が実現可能になる [2]。
    3. この機能は、まるで「最高の開発者仲間がいつも隣に座って、機能をFramerプロジェクトに直接実装してくれている」ような感覚である [3]。

  2. AIワークショップの起動とインターフェース:

    1. Framerプロジェクト内で、コマンドまたはコントロールKを押して使用可能なプラグインを開き、新しいネイティブワークショッププラグインを選択する [4]。
    2. ワークショップインターフェースはシンプルで小さく、画面上の好きな場所に配置できる [9]。
    3. 何をしたいか分からない場合のために、いくつかのプロンプトオプション（アイデア）が提供される [11]。

  3. 外部リソースの活用:

    1. framer.com/workshopのウェブサイトにアクセスすると、さらに多くの良いアイデアを得ることができる [13]。
    2. ウェブサイトには、テキストのグロー効果、数字カウンターやスクランブラー、ティルトカード効果、前後比較カードなどの例が示されている [15]。
    3. これらの例の小さなボタンを押すと、プロンプトをコピーしてFramerに戻し、その効果を生成できる [18]。
    4. このリソースと資産は成長すると確信されており、ユーザーが自分の成果を共有するだろう [20]。

2. スクロールプログレスバーの構築とカスタマイズ [24]

  1. 既成プロンプトによるプログレスバーの生成:

    1. プロジェクトに戻り、既成のプロンプトであるスクロールプログレスバーから始める [23]。
    2. プロンプトをクリックすると、シンプルなプログレスバーを作成する指示が挿入される [26]。
    3. さらに、「カスタマイズ可能な色と、ページをスクロールすると変化する半径を追加しましょう」というカスタマイズ指示を追加する [28]。

  2. AIによるコンポーネントの構築:

    1. 実行ボタンを押すと、AIが考え始め、目の前の画面にコードコンポーネントが構築される [31]。
    2. これは、外部でコードを生成してFramerに持ち込む手間がなく、キャンバス上で物理的なコンポーネントとして確認できるため、非常に素晴らしい [33]。
    3. 左側のコードコンポーネントをロールダウンしてクリックすると、完全なコード出力が表示され、コードへのアクセスや共有、微調整が可能である [36]。

  3. コンポーネント履歴の保持と次のステップの提案:

    1. このコンポーネントの履歴は保持され、永遠に失われることはない [38]。
    2. コンポーネントを選択し、ワークショップを開いてバックアップすると、すべてのプロンプト、次の手順、およびプロンプトの履歴がコンポーネント上に残る [41]。
    3. AIは、バーの位置のカスタマイズ、スクロール率の表示、その他の追加など、いくつかの次のステップを提案する [48]。

  4. コンポーネントの配置と動作確認:

    1. 作成されたコンポーネントをプロジェクトにドラッグし、他の要素より上に表示されるように配置する [52]。
    2. プログレスバーをビューポートの一番下に固定し、幅を相対的に100%に設定する [57]。
    3. 再生ボタンを押して確認すると、スクロールの進行が実際に機能していることが確認できる [62]。

  5. コンポーネントのカスタマイズ:

    1. 初期状態では青色になっているが、カスタマイズ可能である [64]。
    2. コンポーネントを選択し、右下隅のコンポーネントオーバーライドに移動して設定を変更する [66]。
    3. 例として、プロジェクトの背景色に合わせて進行状況の色をクリーム色に変更し、角丸の境界線半径をなくして平らにする [68]。
    4. 再度再生ボタンを押すと、変更が適用され、カスタマイズされたプログレスバーが完璧に動作することが確認される [73]。

3. 3D傾斜カードの構築とプレビュー [76]

  1. 3D傾斜カードのプロンプト入力:

    1. 次に、Framer Workshopサイトから「画像の傾きを作成します」というプロンプトを取得し、ワークショップに貼り付ける [76]。
    2. プロンプトは、「編集可能な画像とホバーを備えた3D傾斜カードを作成し、カードはカーソルの位置に基づいて傾くべきであり、変換に影を含める」という指示である [81]。
    3. 変換に影を含めるという最後の部分は、コンポーネントのコンテナのサイズを拡張し、必要なものがすべて収まるようにするために重要である [84]。

  2. コンポーネントの生成と確認:

    1. 実行を押すと、AIがコードコンポーネントを目の前で構築する [86]。
    2. コンポーネントが作成されると、これは少し複雑なコンポーネントであることが確認される [88]。
    3. コードを確認すると、このカスタムインタラクションを作成するために記述する必要があったコードの量がわかる [90]。
    4. 右側には非常に優れたプレビューが表示され、作成中の他のコンポーネントを切り替えることができるため便利である [91]。

  3. 画像要素の追加と最終確認:

    1. ホームページに戻り、準備された画像をコンポーネントに追加する [94]。
    2. ストック画像を削除し、追加した画像を切り取って貼り付ける [97]。
    3. プレビューを押すと、素晴らしいインタラクションが得られ、プログレスバーと傾斜カードが正常に動作することが確認される [99]。

4. カスタムパスアニメーションの応用と調整 [101]

  1. カスタムアニメーションの要件設定:

    1. これまでの作業は既成のプロンプトに基づいていたが、次はもう少しカスタマイズされたものを試みる [101]。
    2. ウェブサイトのあるセクションに、Framerの新しいベクターツールとパスツールを使用して、クールなスラッシュ効果（オーガニックな感じ）を描画した [103]。
    3. 目標は、ユーザーがこのセクションをスクロールするときに、このパスをアニメーション化することである [105]。

  2. AIモデルの選択とプロンプトの実行:

    1. パスを選択し、ワークショップを開く [107]。
    2. 今回は、よりクリエイティブな側面を持つGPT-4.1やClaw 3.7のような様々なモデルを試す [109]。
    3. プロンプトは、「パスアニメーションを、そのパスアニメーションが含まれているセクションに対するユーザーの位置に基づいてスクロールするように」指示する [112]。
    4. 実行すると、すぐにスクロールパスアニメーターのバージョンが作成される [113]。

  3. コンポーネントの配置と初期状態の確認:

    1. 作成されたコンポーネントを切り取り、セクション内に挿入し、中央に配置する [116]。
    2. 配置後、元のパスとは少し異なって見えることに気づく [124]。

  4. コンポーネントの調整と最終動作確認:

    1. コンポーネントのオーバーライドに進み、ストロークの幅が広すぎるため、それを下げる [126]。
    2. 速度の設定（初期値0.8）を1に変更してみる [129]。
    3. 再生ボタンを押して確認すると、下にスクロールしてそのセクションに到達したときに、非常にクールなアニメーションのパスが表示される [131]。
    4. アニメーションは、セクションがビューポートに表示されるまでは発生しないという点が素晴らしい [133]。
    5. この機能により、好きな場所に配置するだけで、信じられないほどクールな見た目を実現できる [135]。

5. 結論と情報共有 [137]

  1. リソースの提供:

    1. このプロジェクトテンプレートを使用したい場合は、Design Ch MPSコミュニティ内で完全に無料で見つけることができる [137]。
    2. ビデオの説明の下にリンクが残されている [138]。

  2. 視聴者への呼びかけ:

    1. この動画が気に入ったら、高評価とチャンネル登録を推奨する [139]。
    2. チャンネルではデザイン、開発、Framerに関するビデオが多数制作されている [140]。
    3. ベルを鳴らして、次のビデオが公開されたときに通知を受け取れるように待機することを促す [141]。

  3. 結びの言葉:

    1. 視聴者が素晴らしいものをデザインし、作り、そして素晴らしいツールを活用する素晴らしい一週間を過ごすことを願っている [142]。
    2. 次回また会うことを約束する [143]。