日香理 / hikari

Freelance Framer Expert and Creator 🍣🍙🍔｜Template Design｜

[日香理 / hikari @hikari_graphics]

Such a cool framer pin! Thank you! 🌟 @framer

[日香理 / hikari @hikari_graphics]

Claudeはまだまだ使える、、合わせ技で効率よく進めるには💭

[日香理 / hikari @hikari_graphics]

久しぶりに画面録画しながらFramerテンプレ制作しようかな📹今月中に仕上げたかったけど、夏休みが思った以上に夏休みで🌻なかなか作業時間を確保できず、どうするどうする状態なり。今月はもうクレジットないのだけど、月初めにAI Agentには何を任せようかな💭

[日香理 / hikari @hikari_graphics]

モデル選びは試してるうちにクレジット使い切ってる感じなので私はまだなんとも言えません。。なんであれ大変な作業をやってもらえて、助かってます（ ³ω³）

[日香理 / hikari @hikari_graphics]

私「クレジットが残り200になるまで作業し、残り200になったら停止してください。」
Framer AI Agent「指定の残量に配慮し、ここで作業を止めます。」
残り500の、きりのいいところで止まってくれた。えらい。

[日香理 / hikari @hikari_graphics]

Webflowからの移行手順はFramer公式が出してるみたいですね。これは他のツールでも参考になると思いました。
https://t.co/uoHutdjfbO

[日香理 / hikari @hikari_graphics]

📝StudioからFramerへの移行手順メモ
Claudeで設計書(.md)を作成し、Framer AI Agentへ渡すことで比較的短時間で土台移行できた。デザインは全面リニューアルするため、トンマナは雰囲気程度でOK。サイト構造の土台さえ移行できれば良しとした。

【設計書(.md)の中身】
①サイト構造
ページ設計・下層ページ構成・CMS設計を含むサイト全体の構造をClaudeへ渡す。
②デザイン情報
今回は、現サイトのスクショからトンマナを読み取らせた。今後は、ロゴ・カラーコード・フォント・余白ルールなどのデザインガイドラインを作って渡すことにする。

【CMSデータ】
CMSモデルごとにCSV化
①StudioのCMS管理画面のスクショをClaudeへ渡す
②不足情報は手書きで補足しCSVへ変換
→手書き補足なしでより細かいCSVを作る工夫が必要。詳細ページのスクショでもいいかも。公開サイトから読み取るなど、今後は試すことにする。

設計書(.md)とCSVをFramer AI Agentへ渡し、サイト全体を生成するよう指示をした。

まとめ：
初の試みでしたがやりたかったことはできた。この作業の時短ができたことで、デザインに時間をかけられそう。StudioにCMSエクスポート機能は切実。これがあるからといってStudioを使わなくなるわけではない。むしろツールの良し悪しで選べるようになることで、無理して向いていないサイトでStudioを使い続ける必要がなくなると思う。個人的には、CMSをがっちり組む場合は将来を見据えてエクスポート機能が必要。
どのツールもいつ使えなくなるか分からないという前提はあるので、その状態でもクライアントの資産を自分の責任の中で守るために、エクスポート機能は欲しい。

[日香理 / hikari @hikari_graphics]

思いつきメモ。FramerテンプレをAIでカスタマイズするときに役立ちそうなHTMLページを作る。購入者は変更したい項目にチェックを入れる+必要事項を入力する。最後に「AI用にコピー」ボタンでプロンプトを生成し、そのままFramer AI Agentへ貼り付けて土台をざっくりカスタマイズ。

[日香理 / hikari @hikari_graphics]

読んでないところもあるな💭明日はもっと考えて進めよう。ガイドラインの作り方とガイドラインを読ませるコツを今回のお仕事でつかめたらよいな。自分なりの使い方が一つでも増えたら良いです。

[日香理 / hikari @hikari_graphics]

エンジニアが先に走り出していて、それに乗っかる形でデザインを作るからClaude Codeでやってみようと作業を始めたんだけど、よかったっぽい🙌
デザインガイドラインはHTMLで作って人間もチェックできるようにして、最終的にはこの内容を関連サイトに一気に反映する。

[日香理 / hikari @hikari_graphics]

今回はエンジニアが作った土台がいい感じゆえに上手くいってるだけかもしれないから、追々自分のFramerサイトもClaude Codeでガイドラインを作ってから反映できるか試そう。なかなか楽しいですねぇ。AI Agentで妄想が広がる。

[日香理 / hikari @hikari_graphics]

Framer移行は題材的にもダイナミックな演出がいけそうなので、こちらも私としては挑戦になりそう。たのしみです。

[日香理 / hikari @hikari_graphics]

エンジニアと連携して複数の関連サイトのデザインを制作する。Claude Codeで進める。（制作過程でFigmaやFramerを開いて状況を整理することもあるかもしれない。）ということで、新しいデザイン制作の形な気がします。ひとまず参画が決まりました。何か学びがあったら、その都度呟きます。

[日香理 / hikari @hikari_graphics]

そんなわけで、またしばらく予定が埋まりました。サイトの稼働状況も更新。テンプレ制作はFramer Communityでたまに呟きます。よろしくどうぞ。🐠

[日香理 / hikari @hikari_graphics]

@Matthias_Oel Happy Birthday! 🎉✨✨

[日香理 / hikari @hikari_graphics]

@kankitukou 動きのあるコンポーネントを作るときとか、AIに指示したらどんなの出てくるんだろう…みたいな好奇心とクレジットとの戦いです😂(無駄打ちを控えたい)

[日香理 / hikari @hikari_graphics]

気づいたらAI Agentが手前にいるんだけど、常にStyleを出しておくように設定できないかしら。これに使うぞ！って決めたときに計画的に使いたいのだ。軽い気持ちでクレジットを使ってしまいなんの成果も得られなくて絶望しかねない私です

[日香理 / hikari @hikari_graphics]

こっちも良さそう。
https://t.co/k5b20TF3zX

[日香理 / hikari @hikari_graphics]

良さそうなコンポーネントのメモ。コミュニティてかマケプレにブクマ機能はなさそうね？（ほしいね）

SaaSの画面説明にも使えそう。
https://t.co/oAtRzJW15n

[日香理 / hikari @hikari_graphics]

そういえば不具合があったと呟かれてましたね…私はショートカットは使うものと使わないものがあって、アプデでUIが少し変わると機能がどこへ行ったかと迷うことがあり、これの存在を思い出したのですが🫠お話を聞く限りだと、今は使うショートカットを増やした方が良さそうですね。ありがとうございます！助かりました🙏

[日香理 / hikari @hikari_graphics]

いよいよFramerを触ってる時間が大半を占めているので、これを買ってみようか悩んでます（Dubに入ってる分をあてると思えば買える…な…？🫠）
https://t.co/CtewkMSzbJ