鈴木慎吾 / TSUMIKI INC.

AIとUIデザインについて発信しています。Filmarksを運営する（株）つみきのリードデザイナー。UI考察、制作・開発事例：

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Artifactはテンプレートから始めると直接編集ができる
https://t.co/ZUaWadrpFB

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Artifactにスライドテンプレートと手動編集が追加されたあたりで予期していたが、ClaudeがGoogle Workspaceのポジションを本気で取りに来てる。

[Claude @claudeai]

Starting to roll out today: Claude Whiteboards, Claude Sheets and Claude Data.

Think a plan through on a board, build a tracker in a sheet, and tell a story with your data.

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

実際、社内ではスプレッドシートで管理していたダッシュボードをClaudeダッシュボードに置き換え、GoogleスライドをClaudeのスライドテンプレートに置き換えた。

これまで手動編集できないことがボトルネックだったが、それも先月くらいのアップデートで解消した。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

こっちは宮本さんではなく岩田さんの言葉。
アウトプットではなくインプットの話しだけど、没入しつつ客観視するという意味では同じことを言っている。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

岩田聡さんの発言録に登場する宮本茂さんのエピソードはどれも面白い。虫の目・鷹の目の話しであると同時に、主観・客観の話しでもある。没入しつつ客観視するというのは難しいんだよな。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

試しに手元にあった動画をMCP経由で編集。
無音部分のカット → 字幕の追加 → 発話者の画角にトリミング → 発話部分の単語を強調 → フィルタで色補正
をClaudeCodeから自動でやってくれる

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Instagramの動画編集ソフトEditsのMac版がリリースされてる。
https://t.co/fhWNSequWe
Mobile版には無い機能としてMCP対応が紹介されてる。エージェントにざっくり編集させて、細部は自分で手動調整するような使い方ができるかもしれない。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

EditsのMCPで利用可能なツール一覧。かなり良いのでは？

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Figmaのサンリオコラボ、グラフィックもかわいいな
https://t.co/GIQnafpdEf

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Figmaエージェントからモーション追加すると、キーフレームが大量に作られて再編集しずらくなる問題。
「キーフレームが多すぎです。必要最小限に減らして編集しやすくして」と依頼したら、動きを保ったままキーフレームが3,800個から196個に削減された。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Figmaエージェント + Figma Motionと、Figma Makeからモーション追加の比較。
イラストなどビジュアル要素に動きを加える場合はエージェント＋Motionが良い。動画やアニメーションSVGで書き出せるので取り回しがしやすく、タイムラインから再編集できる。

Figma Makeからモーション追加した場合は、<span>や<img>などのDOM要素にJS・CSSで動きが加わる。ボタンやグラフ、画面遷移などの演出に向いている。

左：Figma Motion、右：Figma Make

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

今回のFigma Make-a-thonは、Figmaエージェント、Motion、Makeを活用して、1時間で動きのあるアプリ・Webを作って、それぞれ発表する形式。
ハードル高めで不安もあったんですが、参加者全員完成できて素晴らしかった！
#fof_shonan

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Figmaグッズ可愛い
#fof_shonan

[mu @s_i_280]

始まりましたー！

https://t.co/pUP7KTNxTV

#fof_shonan

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Figma MotionからMakeにモーションをコピーする機能は公式には提供されていないが、DevモードからJSONコードをコピーして、Makeでオブジェクトを選択してコードを渡すと反映してくれる。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

コードレイヤーも来てた

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

今週末です！ぜひご参加ください。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

ハロウィンの午後は、鎌倉でFigmaしませんか？
10/31土 14時から ＠カヤックさん
https://t.co/Vw5z0aIcpD
Figma MakeやFigmaエージェントを使って90分でお題に挑戦するMake-a-thonです🎃
参加無料・定員20名。ノートPC持参でご参加ください。 #fof_shonan

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

来週のイベント準備をしていたら、Figma MakeとFigmaエージェントで初手のデザインがかなり異ることに気がついた。何に起因する違いだろう？

左：Figmaエージェントで作成
右：Figma Makeで作成

どちらも「眠れなくなる、健康管理アプリのデザイン」を依頼

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

単に確率的な違いかもしれないが。もっと検証したいがAIクレジットが無くなってきた。

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

Figmaのアートボードに仕様書を貼る機能が追加されてたので、変更履歴の共有に使い始めた

[鈴木慎吾 / TSUMIKI INC. @shingo2000]

NotionにもSlackのリマインダー的な機能が欲しい。大抵の場合コメントにはすぐに返事をしたいが、すぐに対応できるわけではない。