Framer

このツールでできること

「ポートフォリオサイトを作って」と入力するだけでAIがWebサイト全体を自動生成し、デザインの調整・カスタムドメインの設定・公開まで一つのツールで完結できます。Gammaよりも本格的なWebサイト向きで、コーディング・デザインスキルなしでプロ品質のサイトが作れます。

主な機能

• AIによるWebサイト自動生成（テキスト入力→サイト全体を生成）
• ビジュアルエディタ（Figmaライクのインターフェース）
• アニメーション・インタラクション設定
• カスタムドメイン接続
• SEO設定・OGPタグの管理
• CMSコンテンツ管理（ブログ・ポートフォリオ等の動的更新）

基本の使い方

① AIでサイトを生成：Framer AIに「AIツールレビューのブログサイト。ダークテーマ・モダンデザイン」と入力する。数秒でページ全体が生成される

② ビジュアルエディタで調整：生成されたサイトをFigmaライクのエディタで微調整する。テキスト・画像・配色・フォントをクリックして直接編集できる

③ カスタムドメインを設定して公開：無料プランはframer.websiteのサブドメインで公開。有料プランで独自ドメインを設定し「Publish」で本番公開する

こんな場面で使える

• フリーランス・副業のポートフォリオ：制作実績・スキル・自己紹介をまとめたポートフォリオを1日で作る
• サービスのランディングページ：Coconalaやクラウドソーシングへ誘導するLPをデザインスキルなしで作る
• スモールビジネスのWebサイト：会社紹介・サービス案内・問い合わせフォームを持つ本格的なサイトを作る
• ブログ・コンテンツサイト：CMSを使って定期更新できるブログサイトを構築する

料金・プラン

| プラン | 内容 | 価格 |
|--------|------|------|
| 無料 | framer.websiteドメイン・基本機能 | 無料 |
| Mini | カスタムドメイン・SEO・CMS 200件 | 月5ドル |
| Basic | CMS 1,000件・高度な統計 | 月15ドル |

ポートフォリオや簡単なLPなら無料で十分試せる。本番サイトにはMiniで独自ドメインを取得するのが最低ライン。

使いこなすコツ

• GammaとFramerの使い分け：Gammaはプレゼン・スライド・簡単な情報ページ向き。Framerは本格的なWebサイト・LP・ポートフォリオ向き。スライドはGamma、サイトはFramerと使い分ける
• AI生成後の微調整はビジュアルエディタで行う。プログラミング知識なしでも「ここの余白を増やしたい」「このブロックを下に移動したい」が直感的に操作できる
• Framer CommunityのテンプレートをベースにAIで内容を入れ替えると、より完成度の高いサイトを速く作れる