Figma Makeで1日でポートフォリオサイト作れた
Figma大好き芸人です。
最近、FigmaがいろいろAI関連の新しいツールを出しているということで、ちょっと試しに色々使ってみようとこの週末触っていました。
そもそもの話
僕自身、映像を作り始めて20年（この間数えたらほんとうにそうだった）やっているのですが、何度もポートフォリオサイトは作っては「違うな〜」となって辞めて・・・を繰り返していました。一番最初はAppleの「iWeb」、それからはAdobe「Muse」を使ってみたり、「Squarespace」の時期もあったり。notionからサイトが作れる「SUPER」もちょっと面白かったので使っていました。「STUDIO」は残念ながら体に合いませんでした・・・なぜ・・・。
iWeb懐かしすぎてやばい
それで、もう全てが面倒くさくなり、この5年くらいはInstagramのみでポートフォリオを載せていました。結論、全然インスタで十分。全く不自由無し。
あと、ポートフォリオまとめる作業って結構大変なんですよね。精神的にも、過去の作品をもう一回見直したりするのっていろいろ削がれる・・・。
でもそろそろまとめたい
とはいえ、Instagramは自分の全仕事をまとめちゃってる傾向があり、「映像ディレクター」だけの仕事もまとめたかった。CDとDirで表現したいことも全然変わることもあり、Instagramはアナウンスの側面もあるから良いけど、がっつり「自分の納得いく作品」を一同にまとめたページはなかったのです。
ということで「サイト作るか・・・」といろいろ探していたところ、普通に時間がない。そんなこんな繰り返していたときに思ったのが・・・
AIで…作れば…いいんじゃね？
そんなことできるのか？といろいろリサーチし、それこそ汎用AIでもできることはかなりあるんですが、、Figmaオタクの自分としては、、まず「Figma」を開いてみました。
先日の発表会の映像。めちゃめちゃ新しいサービスが出ていてすごい・・・
現時点で、Figmaでサイトを作る方法は３つ。
「Figma Sites」でがっつりつくるか（常套手段）
「通常のFigma」をあたかもポートフォリオとして見せるか（尖ってる）
あるいは・・・中にClaude Sonnet 4が入っている「Figma Make」でつくるか。
Figma Makeでサイトを作ろう
たぶん「Figma Make」が一番僕にあってる。
一旦開いて、プロンプトを打ちました。
で、結論から言うと、できました。完璧なVer.1が。
84回ほどのやりとりで完成
まず最初に出てきたページがまあまあ良かったので、テンションが上がり、あーだこうだいろいろと抽象的な相談をしつづけました。たとえば。。。
え、いいじゃん。
ええやないかい。
「長体」や「R」などのデザイン系の用語もすんなりと理解し、すぐに治してくれます。えぐい。
作品を入れていくぞい
さて、ここからはサイトに自分の作品を入れていきます。（いまはまだ仮の写真とかテキストを入れてもらってます。）
今後更新していく際に、どこかにちゃんとまとめときたい・・・そして英語対応したいなど色々考えたときに、そのまとめは Googleスプレッドシートにすることにしました。
項目としては、
「番号」
「プライオリティ（優先順位）」
「タイトル」
「制作年」
「ジャンル（MVかドラマか、など）」
「ビデオURL（基本はYouTube。Vimeoとかもいけるはず）」
「サムネイル画像（これはネット上にある直リンクimageをFIgma上に保存するように指示）」
「Overview Text（Geminiに作品の概要と映像を見せて、端的にその作品の詳細を英語で書いてもらいました）」
「Staff List（それぞれのYouTubeなどから抽出）」
それで、これをそのままFigma MakeにリンクやExcelファイルで読ませようとしたのですが、それは無理でした。テキスト化してくれ！と言われました。
で、このテキスト化に関しては、スプシをまず「CSVファイル」に書き出し、それを「Claude Sonnet 4」にテキスト化してもらうのが一番うまくいった。
このテキストを直でそのままFigma Makeくんに読んでもらいます。すると・・・
できました。何の問題もありません・・・。
各作品の説明ページも・・・
普通にクオリティ高い。フォントや文字サイズ、色味、すべて自分好みです。
とはいえ、これはまだバージョン44。このあともかなり細かい修正をしていきました。
・モバイルでの修正
・リンクがたまにうまくいっていないことがあるので一つずつ修正
・スクロール位置がリンク飛ぶと毎回おかしかったので修正
・Xから読み込もうとした映像は難しかったのでYouTubeリンクに
・なめらかなアニメーションを追加。
・なぜかひとつだけ、全くサムネイルが表示されない問題あり。これは一旦掲出を断念し、問題を調査中・・・。
完成
ということで・・・
バージョン84にして完成・・・。
まだまだバージョンアップしていきたいですが、そもそもこの作業を始めたのは昨日。それでここまで進むとは・・・。
公開もめちゃめちゃすんなりできました。選ぶところが少ないのが、いい。ドメイン指定もできるみたいですが、一旦Figma site上に公開してもらいました。
良かったところ
いろいろ書きましたが、利点については読んでいただければすぐに分かるのではないでしょうか。まずは、僕の雑なプロンプトに対して、めちゃめちゃ解像度を高く理解して修正してくれる。しかも、ものすごくハイセンスに。Claude Sonnet 4が入っているということがかなり大きそうなんですが、本当にストレスなく進みました。
特に良いなと思ったのが、３つ。
ひとつは、「おそらく更新が簡単」なこと。
先ほどのスプシを入力してテキスト化すれば、勝手に更新してくれる。この安心感、凄まじいです。
もうひとつは「オリジナリティをとことん詰められる」こと。
普段はサイト作りのサービスのテンプレートに縛られていたり、そこから大きく変えることは難しかったり・・・しかし、Figam Makeはプロンプトひとつでかなり大きな修正ができ、ビジュアルも大胆に変更可能。しかも、ダサくなることなくハイセンスな提案をしてくれる。間違えても、戻せる。正直怖いです。
そして最後に・・・
ふつうに、サイトを作ることがいつも以上に楽しかった。
「これ、なんでも作れるな」感が作りながらめちゃめちゃありまして、今回はバージョン１ですがどんどん更新したいなと。僕自身としてやってみたいことは「リールのAI自動化」。音に合わせて更新ごとに毎回リールが変わってくれたりすると最高だなと・・・。ただ、それにはまだ今の技術では難しいようで、別途AI編集ツールみたいなのも探し始めました。
あとは、ブログもできるだろうし、ゲームみたいなのも作れるだろうし・・・ポートフォリオだけでなく、もっと尖ったインタラクティブページも、ビジネスライクなLPも、何でもいける気がしました。
逆に、微妙だった点
原因がわからないのですが、一部何度やっても画像がうまく表示されなかったり、空気が読めないこともあります。勝手に「これ良い感じじゃないすか」みたいな提案も入れてくるので、それがちょっとウザい時もあります。
でも、それもAIの醍醐味。いかにこちら側が粘り強くお願いするか、そのお願いの仕方によって改善されることも多々あります。「この修正の際に、これはしないで」など明確にはっきりとディレクションする力が必要。
ということで、みんなFigma使おう
Figma SlidesもFigma Makeも最高。
FigJamも愛用しています。
みんなFIgma使おう！！！！！！！！！！！！！！