Framer AIの使い方｜元記事の画面で見るサイト制作・料金・Hugging Faceとの使い分け

PR この記事には広告・アフィリエイトリンクが含まれます。リンク経由の申込み等により、運営者に報酬が発生する場合があります。

Framerは、画面上でレイアウトを編集し、そのままWebサイトを公開できる制作サービスです。AIでページのたたき台を作り、文字、画像、余白、スマートフォン表示を調整して仕上げられます。作品紹介、サービスのランディングページ、更新する記事を含むサイトなどが主な用途です。

AI OTAKU LABOの元記事は、AIによるページ作成、テーマの調整、翻訳、SEO機能を紹介しています。本記事では元記事の画像を使いながら、生成後に何を編集するのか、Hugging Faceで公開した成果を紹介するときにどう使えるかまで整理しました。画面は元記事掲載時のものです。現在のプランと公開条件は2026年9月13日に確認しています。

Framerでサイト制作を始める

Framer AIは何を作ってくれるのか

FramerのAIは、作りたいサイトや変更内容を文章で伝え、編集可能なページ、セクション、文章、画像をプロジェクト内へ作る機能です。出力した後も会話で修正したり、キャンバス上で自分で編集したりできます。Framer公式のAI機能

この特徴は、「会社紹介ページを作りたいが、最初の配置が決まらない」ときに役立ちます。ただし、サービスの機能、料金、実績などの事実は自分の資料に合わせて入れる必要があります。生成された見出しが魅力的でも、提供していない機能まで紹介してしまえば、公開ページとして使えません。

元記事では、生成後のデザインを調整する画面を掲載しています。AIが作る初稿と、公開する内容を整える編集作業は、同じ制作の流れにあります。

元記事の編集画面：PCとスマートフォンを並べて考える

元記事の編集画面。幅の異なるレイアウトを見ながら、文字と画像の配置を調整する例です。

横に広い画面では画像と文章を左右に並べられても、スマートフォンでは縦に積む構成が必要になります。横幅が狭くなったときに見出しが細切れになったり、ボタンが画面外へ出たりしないよう、両方の幅で確認します。

元記事にある「フォントや色を変えられる」という特徴も、ここで生きます。色を増やすことより、見出し、本文、ボタンの役割をそろえるほうが先です。例えば作品集なら作品画像を目立たせ、問い合わせ用の色は一種類に絞ると、読み終わった人が次に進みやすくなります。

AIに渡す指示は、目的と掲載内容を具体的にする

「かっこいいサイトを作って」だけでは、見た目の方向は伝わっても、何を掲載するかが決まりません。先に読者、ページの目的、必要な素材を指定すると、使える初稿へ近づきます。

例えば、Hugging Faceで公開した画像分類デモを紹介するページなら、次のような指示が考えられます。これは本記事用の指示例で、生成結果の実測ではありません。

日本語の画像分類デモ紹介ページを作成してください。
読者は、AIを初めて試す学生と個人開発者です。
目的は、仕組みを理解してデモを試してもらうことです。

構成：概要、入力と結果の例、使い方、制限、開発者情報。
メインボタンは「デモを試す」。公開済みSpaceへのリンクを設定します。
結果例には、こちらで用意する実際のスクリーンショットを使います。
未提供の精度数値や利用実績は作らないでください。
PCでは画像と説明を横並び、スマートフォンでは縦並びにします。

初稿ができたら、見出しがページの内容に合うか、ボタンのリンク先が正しいか、画像の説明が読者に伝わるかを直します。自分のデモを紹介する場合は、成功例だけでなく、入力条件やうまく動かない例も説明へ入れると、使う側が判断しやすくなります。

公開までの流れと、CMSを使う場面

制作は、ページの目的を決める、AIやテンプレートで構成を作る、素材を置く、表示幅を調整する、公開先を設定する、という順に進めると整理できます。最初からサイト全体を完成させようとせず、まず主要な一ページの文章と見た目を固める方法も有効です。

元記事のキャンバス画面。完成画像を貼るだけでなく、ページの要素を編集する構成です。画像内の性能数値は当時の紹介画面の一部で、本記事の計測値ではありません。

記事や制作事例を繰り返し追加するなら、CMSでタイトル、説明、画像などの項目をそろえる方法があります。一件ずつ独立したページを手作業で複製するより、更新時に同じ情報を入力しやすくなります。使えるCMSコレクション数はプランで異なります。

公開前には、ページタイトルと説明文を具体的にし、画像にも内容を説明する代替テキストを入れます。「すごいAIサービス」だけの見出しより、何ができるサービスかを示すほうが読者に伝わります。SEO機能は内容を伝えるために使うもので、検索順位を保証するものではありません。

Free・Basic・Proの違いと独自ドメイン

公式料金ページで確認した年払い時の月額換算は、Basicが10ドル、Proが30ドルです。月払いと混同しないよう、契約周期をそろえて比較します。

追加の編集者や翻訳言語などは別料金になる場合があります。元記事にあるMiniプランや旧円換算価格を、現在の料金としては掲載していません。独自ドメインで運用する場合も、Freeだけで利用できるとは考えず、契約内容を確認してください。Framer公式料金

Hugging FaceへHTMLを書き出して移せるのか

ここは用途を決めるうえで大切です。Framerの公式ヘルプは、セルフホスト用のHTMLエクスポートに対応していないと説明しています。したがって、Framerで作ったサイトをそのままHTML一式として取り出し、Hugging Face Spacesへ置く前提では選べません。HTMLエクスポートについての公式説明

元記事の「HTMLやCSSを出力して自由に編集できる」という説明は、この公開方法と混同しやすいため引き継いでいません。Framer内でサイトを制作・公開し、Hugging Face上のモデル、資料、デモへリンクする構成なら、紹介ページと配布先の役割を分けられます。

コードを書く前に紹介ページのデザインを固めたい人、画像や文章を見ながら更新したい人にはFramerが候補になります。ファイル一式を自分で管理して別の配信先へ移すことが条件なら、公開方法から制作環境を選ぶほうが適切です。

元記事と同じ紹介リンクからFramerを開く