Framer Workshop
Framer B.V. · 画像 · コーディング
Framer Workshopは、Framerに内蔵されたAIエージェントで、短い説明からサイト用のコードコンポーネントを作る。カルーセルやフォーム、インタラクティブなカードといったアイデアを、キャンバスにそのまま置ける編集可能な部品に変える。
Framer Workshop について
About
Framer Workshopとは
Framer Workshopは、FramerのAIシステムのうちカスタムコードを担当する部分だ。既製のブロックを並べる代わりに、欲しいインタラクションや機能を言葉で説明すると、エージェントがサイトに合うコンポーネントを書く。ページと同じプロジェクトの中にいるので、作ったものはデザインシステムにつながったまま、編集できる状態が続く。
Framer自体は、デザイナーやチーム向けのAIサイトビルダーだ。ビジュアルなキャンバスと、レイアウトやコピー、スタイル、コンテンツ、コードを担うAIエージェントを組み合わせている。AI サイト制作ツールとして設計と構築を一か所に置き、コード側は Framer の AI エージェントが受け持つ。
押さえておきたいのは、WorkshopがReactを手書きせずに独自の動きを求める人向けだという点だ。テンプレートでは出せない何かがサイトに必要なとき、このツールに手が伸びる。ただし出力は自分で確認したい。AIが書いたコードは例外ケースを取りこぼすことがある。
はじめ方
- framer.comで登録し、プロジェクトを開くか新しく作る。
- Framerエージェントとの新しいチャットを始め、必要なコンポーネントを普段の言葉で説明する。
- 必要ならモデルを選び、エージェントにコンポーネントを作らせて結果を確認する。
- 会話の中で磨くか、キャンバスで自分が引き継ぎ、ページに挿入する。
- コンポーネントが思い通りに動いたら、サイトを公開する。
AIツール情報
Framer Workshopの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- Reactを手書きせずに独自の動きが欲しいデザイナー。コードはWorkshopが担い、キャンバスの主導権は自分に残る。
- ランディングページを出す小規模なマーケ・プロダクトチーム。エンジニアを待たずに独自のコンポーネントを足せる。
- アイデアを素早く確かめたい創業者。動く機能を先に作ってから、残すかどうかを決められる。
タスク
- カルーセルやカーソルトレイルのような動く要素を作る。動きを説明すればエージェントがコンポーネントを書く。
- 電卓や複数ステップのフォームなど、コードを書かないコンポーネントを組む。静的なブロックでは足りないときに効く。
- スクロールやクリックに反応する動的な内容を足す。固定されたセクションが平板に見えるページに向く。
シーン
- 誰のと同じに見えないようテンプレートを手直しする。独自のコンポーネントが差になる。
- 開発工数をかける前に機能を試作する。Workshopなら実際のサイトで動きを試せる。
- 既存のFramerプロジェクトに小さな機能を足す。デザインシステムから浮くことなく収まる。
主な機能
ひと言で自分専用のコンポーネントに
必要なインタラクションやライブ機能を説明すると、エージェントがサイト用のコードコンポーネントを作る。単純なアコーディオンから、緩急のついたカーソルトレイルまで対応する。エージェントはいわばひと言からのコンポーネント生成を担う存在で、結果は別ファイルではなく自分のプロジェクトに組み込まれる。
デザインシステムに沿う
エージェントが作るコンポーネントは、自分のスタイルや余白、フォントにつながる。サイトに守るべきルールがあるときこれが効く。新しい部品が他所から来たようには見えない方がいい。後から調整してもページの他の部分は壊れない。
キャンバス上で編集できる
Workshopが作るものはどれも編集できる。エージェントが終わった後で、体裁を直したり、スタイルを変えたり、一部を手で組み直したりできる。触れない固定テンプレートに閉じ込められることはない。
モデルを選べる
Framerはタスクに応じて複数のモデルから選べるので、速さと深さを使い分けられる。エージェントは1つの作業に集中させたチャットで動く。
ブランチとレビュー
エージェントの変更はブランチに移せるので、公開前に差分を比べられる。チームはコンポーネントを確認し、問題なければマージできる。
Framer Skillsと連携
自分の指示を再利用できるskillとして保存できる。エージェントは毎回プロジェクトの慣習に従う。サイトの別々の部分を別の人が作っても、コードの一貫性は保てる。
メリットとデメリット
メリット
- 独自の動きのためにReactを手書きせずに済み、プログラミングをしない人の壁を下げる。
- コンポーネントはデザインシステムにつながったまま、生成後も編集できる。
- ブランチとレビューの流れで、チームは公開前にAIの出力を確認できる。
- Framerに組み込まれているので、別途インストールしたり書き出したりする必要がない。
- モデルを選べるため、作業に応じて速さと深さを交換できる。
デメリット
- 生成されたコードは自分で確認する必要がある。AIは例外ケースを取りこぼすことがあり、壊れたコンポーネントは公開を止めかねない。
- よくある動きはよくカバーされているが、かなり特殊なロジックは何度か往復しないと決まらないことがある。
- Framerの中でしか動かない。サイトが別の場所にあるなら、Workshopは役に立たない。
よくある質問
Framerの中でカスタムのコードコンポーネントを書くAIエージェントだ。インタラクションや機能を説明すると、サイトに足せる編集可能なものを組み立てる。
関連コンテンツ
Framer Workshopに関連するツール、スキル、記事を探す。
Framer Workshopの代替ツール
X Ray Interpreter
X-ray Interpreter · 画像X Ray Interpreter は、X 線、CT、MRI、超音波、PET の画像を平易な言葉のレポートに変えるウェブベースの AI 放射線ツールだ。スキャン画像をアップロードすると、X 線の予備的な読影結果がすぐに返ってくる。説明が必要な箇所があれば、その後で追加の質問もできる。位置づけはセカンドオピニオンと学習の補助であり、医療診断ではない。
Aieasypic
AIEasyPic · 画像AIEasyPicは、単純なテキストプロンプトを数秒で完成したアート作品に変えるAI画像生成ツールだ。自分の写真でカスタムモデルを訓練したり、既存の画像の顔を交換したり、テキストから短い動画クリップを作ったりもできる。すべてブラウザだけで完結する。手早くビジュアルが欲しい気軽なクリエイターにも、コードを一切触らずに個人モデルを作りたい趣味の人にも向く。
Chargen
Chargen · 画像ChargenはDungeons & Dragonsやその他のテーブルトークRPG向けに作られたAIキャラクター生成ツール兼ワールドビルディングツールキットだ。一行のアイデアを描き上げたキャラクター肖像に変え、同じセッションでNPC、モンスター、マップ、遭遇を生み出し、すべてのクリーチャーの詳細を手元に置く。テーブルトークRPGアートの部分はGoldと呼ばれるクレジット制で動き、テキスト生成ツールは誰でも無料のまま使える。