Framer AIでポートフォリオを1日で作って公開する

このレシピでできること

Framer AIを使ってポートフォリオサイトを1日で作成・公開します。コーディング・デザインスキル不要で、制作実績・スキル・自己紹介を盛り込んだプロ品質のサイトが完成します。Coconalaやクラウドワークスへの集客導線として活用できます。

必要なもの

• Framer アカウント（無料から始められる）
• ChatGPT（コンテンツ原稿の作成用）
• 掲載する制作実績のスクリーンショット・画像

手順

Step 1: ChatGPTでコンテンツを先に作る

「私のポートフォリオサイト用のコンテンツを作って」と依頼し、①ヒーローコピー（キャッチフレーズ）、②自己紹介（200字）、③スキル一覧、④制作実績の説明文（各100字）、⑤お問い合わせへの誘導文を先に生成する。Framerに入れるテキストをゼロから考える必要がなくなる。

Step 2: Framer AIでサイトを生成する

Framerにログインして「新規プロジェクト」→「AI生成」を選択する。「AIを使ったWebサービスのフリーランスポートフォリオ。スキル・実績・お問い合わせのセクション付き。ダークテーマ・モダンデザイン」と入力して生成する。

Step 3: コンテンツを差し替える

生成されたサイトのダミーテキストをStep 1で作ったコンテンツに入れ替える。画像は実績スクリーンショットをアップロードして差し替える。テキスト・色・フォントはビジュアルエディタで直接クリックして編集できる。

Step 4: SEO設定してドメインを繋いで公開する

「Pages」→「SEO」でタイトル・説明文・OGP画像を設定する。無料プランならframer.websiteで公開。Miniプラン（月5ドル）で独自ドメインを繋いでPublishで本番公開完了。

実際の出力例

所要時間の内訳：
- Step 1（ChatGPTでコンテンツ作成）：30分
- Step 2（Framer AIで生成）：5分
- Step 3（コンテンツ差し替え・微調整）：60分
- Step 4（SEO・ドメイン設定・公開）：15分

合計：約2時間でポートフォリオサイトが公開状態になる

カスタマイズ例

① サービスLP向け：「ポートフォリオではなく特定サービスのランディングページ。ヒーロー・特徴・料金・FAQ・CTAの構成で」と用途を変える

② ブログ付きサイト向け：「CMS機能を使ってブログセクションを追加。Framerのブログテンプレートで定期更新できるようにして」とコンテンツ更新機能を追加する

③ 多言語対応向け：「日本語と英語の2言語対応サイト。Framerのロケール機能で切り替えられるように」と海外クライアント向けにも展開する

よくある失敗と対策

失敗①「AI生成のデザインが好みでない」
→ 対策：Framer Communityのテンプレートを先に選んでからAIでコンテンツだけ入れる方法に切り替える。デザインとコンテンツを分離する

失敗②「スマホで見るとレイアウトが崩れる」
→ 対策：Framerは上部の「Desktop/Tablet/Mobile」で各サイズをプレビューできる。Mobileビューに切り替えてレイアウトを確認・調整する

失敗③「公開したがGoogleに表示されない」
→ 対策：公開後すぐには検索結果に出ない（通常1〜4週間かかる）。「Google Search Console」にサイトを登録して「URL検査」→「インデックス登録をリクエスト」を行う