Designship 2026 - Framer Deck

Designship 2026での登壇資料です。

Framerが目指す「ひとに代わらず、共に創る」エージェントによる新しいWeb制作体験をご紹介。

Framer Agent + Skillsを通じて、エージェントとデザイナーが協働し、Webサイトを作り、育て続けるための新しいワークフローを、Framer Japan AmbassadorのOkayuさんとともにご紹介。

Transcript

1. Framer
2. Fumito Kikuchi Framer Japan GTM Lead Adobeでソリューションアーキテクトとして大手企業の導 入支援・プリセールスを担当。その後、Studioで事業開発 とセールス立ち上げを経験。2025年12月よりFramer日本 GTMリードとして、市場開拓、パートナー連携、顧客支援 などを横断的に担当。
3. Okayu Framer Japan Ambassador フリーランスとして、スタートアップの事業・ プロダクトの立ち上げを中心に、UI/UXデザインや、 Framerを用いたWebサイト制作を手がける。 日本語でFramerを学べるコミュニティ 「Framer Japan Community」を共同運営。
4. ひとに代わらず、共に創るデザインエージェント
5. Webサイトに、 53% “完成 はない Webサイト業務の 日常的な修正や細かな改善。 多くのチームは、 改善よりも保守に多くの時間を ” 使っている。
6. AIは素早く作れる、 でも、育てるのは難しい
7. キャンバスは、 プロやチームでの仕事においては コードに勝る 信じています。 キャンバスがコードに勝ると 新しいプロセスは、 人によるクリエイティブプロセスに 協力的でありたい。 人とエージェントが互いの得意なことを 活かして創り上げる。 それをサポートしています。
8. Skills
9. Framer Skills サイトの原則、制約、コンテキスト、方針を明文化 エージェントがいつでも参照・更新できるように Default Custom System 常に読み込む 必要に応じて読み込む 組み込み プロジェクトの共通ルール 用途ごとのルール・作業手順 読み取り専用の組み込みスキル ブランドのトーン アニメーション・演出 レスポンシブ設計 デザインの基本原則 ユースケースごとのディレクション スタイル再利用など
10. CanvasBench 実際のWeb制作タスクで、Agentの品質と効率を評価 236 Framer canvas challenges
11. Framer as an AI-native Marketing Hub Iterate Agent｜デザイン・CMS更新 Skills ブランドルール、タスクの再利用、 フィードバックループ Optimize Personalize Convert｜A/Bテスト Convert｜動的トリガ ファネル分析と継続改善 コンテンツの出し分け Workflows Slack連携、マーケティングツール連携
12. Design Journey スタートアップ Teracy 0 1のデザイン ・スピードプロトタイピング ・LPや資料の制作 Framerを使うように。 Framer Japan Community 立ち上げ フリーランス 複数プロダクト デザイン支援 ヤフー株式会社 大きなサービスの - 改善・運用を学ぶ スピードとクオリティ 両立の葛藤
13. 検証前に作り切り大きな手戻りに... 速さを優先し、作りこまずに出し続け 最後に全体的に見直すことに... 小さく早く検証し、 最初から 改善のサイクルを回すことが大事 魅力的品質を高める方法を考える
14. 早く試したい。 でも、最初から心をつかみにいきたい。
15. Design Journey スタートアップ Teracy 0 1のデザイン ・スピードプロトタイピング ・LPや資料の制作 Framerを使うように。 Framer Japan Community 立ち上げ フリーランス 複数プロダクト デザイン支援 ヤフー株式会社 大きなサービスの - 改善・運用を学ぶ スピードとクオリティ 両立の葛藤
16. Design Journey スタートアップ Teracy 0 1のデザイン ・スピードプロトタイピング ・LPや資料の制作 Framerを使うように。 Framer Japan Community 立ち上げ フリーランス 複数プロダクト デザイン支援 ヤフー株式会社 大きなサービスの - 改善・運用を学ぶ スピードとクオリティ 両立の葛藤
18. Demo
19. テンプレート 用意した3つのAIスキル ブランド反映 ページ作成 /setup-brand /create-page 手で調整 意図を記録 /capture-intent 修正意図・こだわりを蓄積し、次の制作に活かす
20. 自然にまた会いたい友達ができる
22. テンプレートにブランド反映 /setup-brand
24. ページ作成 /create-page
26. 修正と背景の学習 /capture-intent
28. 再度ページ作成・公開 /create-page
30. 早く試す。 その一歩目から、魅力を高める。
31. Thank You!