Framerポートフォリオテンプレートの選び方｜デザイナー向け

デザイナー向けにFramerのポートフォリオテンプレートの選び方を解説。レイアウトの種類、CMSの作品ページ、事例の構成、ライセンス確認、購入前チェックリストまで。

よくある質問

Framerのポートフォリオテンプレートに無料のものはありますか？

あります。Framer Marketplaceのポートフォリオカテゴリには、有料テンプレートと並んで無料のテンプレートも掲載されています。2026年11月の確認時点では、Portfolite、Artemis、Palmer、そして「Other」というテンプレートが無料で掲載されていました。無料テンプレートは試してみる価値がありますが、そのうえでサイトを作り込む前に、ライセンスの種類と、作品ページがCMSで動いているかを確認してください。

有料のFramerポートフォリオテンプレートの価格はいくらくらいですか？

掲載内容によって大きく異なります。Framer Marketplaceでは、My Portfolioが$20、Minimaが$30、Formatが$149でした（2026年11月確認）。価格は変わるため、必ず各テンプレートのページで最新の金額を確認してください。また、テンプレート代と、サイトを公開するために必要なFramerのプラン料金は別物です。

ポートフォリオにCMSは必要ですか？

必須ではありませんが、作品が数件を超えてくると役立ちます。CMSを使えば、各作品はコレクションの1項目になり、1つの作品ページのレイアウトがすべてを表示します。作品を追加するときも、ページを複製するのではなく、フィールドを入力するだけで済みます。FramerではプランごとにCMSコレクションの数に上限があり、その内容はこれまでも変更されてきました。契約前に、最新の料金ページを確認してください。

Framerテンプレートのライセンスの種類は何を意味しますか？

Marketplaceの各テンプレートには、LimitedやSingle-Useなどのライセンスの種類が表示されます。クライアント案件に使えるのか、自分用の1サイトだけなのかは利用規約で決まるため、必ずテンプレートのページにある条件を読んでください。他の人のポートフォリオを制作する予定がある場合は、購入前にライセンスを確認しましょう。

Framerのポートフォリオテンプレートのレイアウトは、あとから変更できますか？

切り替えを前提に作られているテンプレートもあります。たとえば無料テンプレートのOtherは、グリッド、リスト、フィード、フル画像といったレイアウトを切り替えられるものとして掲載されています。ただし、多くのテンプレートでは、基本レイアウトを変えるにはホームページのセクションを作り直す必要があります。見た目のスタイルよりも先に、レイアウトの種類を決めましょう。

結論： Framerのポートフォリオテンプレートは、スクリーンショットの見た目ではなく「構造」で選びましょう。見るべきポイントは4つです。手持ちの作品数に合ったレイアウトであること。ページを複製せずに作品を追加できるよう、作品ページがCMSで動いていること。プロセスや成果を載せる余地のある事例ページであること。そして、自分の用途をカバーするライセンスであること。Portfolite、Artemis、Palmerなどの無料テンプレートは、形式を試すのに向いています。Framer Marketplaceの有料テンプレートは、確認時点（2026年11月）でおよそ$20〜$149でした。

まずレイアウトの種類を決める

デザイナー向けポートフォリオテンプレートのホームページは、大きく4つのパターンに分かれます。今の自分が実際に持っている作品に合うものを選びましょう。

レイアウト向いている人注意点
画像グリッドブランディング、イラスト、写真、UIなど視覚的な作品考え方の説明が弱くなりがち。サムネイルの質が重要
テキストリスト（タイトル・年・役割）作品数が多く、実績や知名度のあるデザイナー作品が5件未満だと寂しく見える
フル幅フィード掘り下げた事例が3〜6件ある人スクロールが長くなる。どの画像も作り込みが必要
1ページ完結のスクロール作品が2〜3件のキャリア初期のデザイナー拡張しづらい。作品ごとの個別URLを持てない

これらを切り替えられるテンプレートもあります。たとえば無料テンプレートのOtherは、グリッド、リスト、フィード、フル画像のオプションが用意されています（2026年11月確認）。1種類しか選べないテンプレートの場合は、それが自分でも選ぶレイアウトかどうかを確認してください。

作品ページをCMSにする意味

ポートフォリオは数か月ごとに更新するものです。作品ごとにページを手作業で作っていると、7件目を追加するときに、ページを複製し、画像をすべて差し替え、余白を確認し直すことになります。CMSの作品ページなら、各作品はコレクションの1項目で、1つのページレイアウトがすべてを表示します。

FramerのCMSは、1つの項目を複数の項目に紐づけられる複数参照フィールドを含む、参照フィールドに対応しています。これを使えば、1つの作品に複数の分野のタグを付けたり、事例ページの下部に関連作品へのリンクを表示したりできます。

購入前に、テンプレートのライブプレビューで次の3点を確認しましょう。

  1. 作品のURLが /work/project-name のような形になっているか。 その場合、CMSで動く詳細ページであることが多いです。
  2. テンプレートの説明にCMSへの言及があるか。 たとえばArtemisは、CMS対応の作品システムを備えていると説明されています。
  3. ページを作り直さずに、カテゴリで絞り込めるか。

FramerではプランごとにCMSコレクションの数に上限があり、その内容は最近のアップデートでも変更されています。この記事を含むブログ記事ではなく、最新のFramer料金ページで確認してください。ポートフォリオなら、通常は作品用のコレクションが1つあれば足ります。ブログやお客様の声を加える場合のみ、2つ目が必要です。

良い事例ページに必要な要素

テンプレートはあくまで入れ物です。採用担当者は事例をざっと流し読みするので、構成が明確で、埋めやすいレイアウトが望ましいです。次のようなセクションがあるか確認し、なければ自分で追加しましょう。

  1. ヘッダー部分： プロジェクト名、自分の役割、期間、チーム、一行で表した成果。
  2. 背景： クライアントやユーザーが誰で、どんな課題を解決しようとしていたのかを、2〜3文で。
  3. 自分の担当： 自分が何を決め、何を作ったのか。自分の担当とチームの担当を具体的に書き分けます。
  4. プロセス： 却下した方向性、リサーチで得た発見、制約など、重要な場面を2〜3つ。それぞれに画像を添えます。
  5. 完成物： 公開された成果物を、トリミングせずに大きく見せます。
  6. 成果： ローンチ後に何が変わったか。裏付けのある数字だけを載せ、数字がない場合はそう明記します。
  7. 次の作品へのリンク： CMSで表示する「関連作品」の行があると、閲覧が続きやすくなります。

テンプレートの作品ページが、ヒーロー画像と段落1つだけという構成だと、作品を追加するたびにテンプレートと格闘することになります。

購入前のチェックリスト

これをコピーして、ライブプレビューで確認しましょう。デスクトップとスマートフォンの両方で試してください。

`` [ ] ホームのレイアウトが自分の作品数に合っている（グリッド、リスト、フィード、1ページ） [ ] 作品ページはCMSで動いていて、ページの複製ではない [ ] 事例ページに、役割・プロセス・ビジュアル・成果を載せる余地がある [ ] 全体のカラーとフォントを1か所で変更できる [ ] モバイル表示：ナビゲーション、グリッド、作品ページのすべてが機能する [ ] 連絡手段が自分に合っている（フォーム、メールリンク、予約リンク） [ ] 大きな画像を入れたプレビューでも表示速度に問題がない [ ] ライセンスが自分の用途をカバーしている（個人サイトかクライアント案件か） [ ] 独自ドメインで公開するのに必要なFramerのプランがわかっている [ ] 最終更新日と、販売者のサポート／連絡先が確認できる [ ] 初日に公開する作品を3つ挙げられる ``

無料と有料の違い

無料テンプレートは、Framerのエディタ（編集画面）やCMSの挙動を学ぶのに、リスクの低い方法です。有料テンプレートは、ページの種類が多い、事例ページのレイアウトが充実している、全体のスタイル設定がある、といった作り込みが加わる傾向があります。たとえばFormatは、スタイルの変更を楽にするカラーとタイポグラフィのグローバルスタイルが用意されているものとして掲載されています（2026年11月確認）。ただし、有料だからといって、必ずしもあなたにとって良いとは限りません。使わないフィード型の$149のテンプレートより、ちょうど良いグリッドを備えた$20のテンプレートのほうが適していることもあります。

また、各テンプレートに表示されているライセンスの表記も確認してください。確認時点では、PortfoliteとArtemisはLimited、FormatとMinimaはSingle-Useと表示されていました。何ができるかはテンプレートのページに書かれた文言で決まるため、作り込む前に必ず読んでください。

失敗しにくい選び方の手順

  1. 最も自信のある作品を3つ書き出し、それが視覚的なものか、文章で伝えるものか、両方なのかを決める。
  2. 上の表からレイアウトの種類を選ぶ。
  3. テンプレートを3つ絞り込む。少なくとも1つは無料のものにする。
  4. それぞれのライブプレビューでチェックリストを確認する。
  5. 一番良かったものをテストプロジェクトに複製し、実際のコンテンツを入れてみる。テンプレート代以外にお金をかけるのは、そのあとにする。
  6. すべての事例に、わかりやすい導入、自分の役割、印象的なビジュアルが1つ揃ってから公開する。

Framerにこだわらない場合

Framerだけが選択肢ではありません。We.Incの無料プランでは、用意されたテンプレートから最大3つのサイトを公開できます。ポートフォリオのコレクションには、Viktor Portfolio、Max Reed Portfolio、Ochre Artist Portfolioなどのレイアウトがあります。ダークで最初の画面を印象的に見せたい場合はDark Portfolio Hero、3D系の作品には3D Portfolioをご覧ください。ポートフォリオテンプレート一覧で、レイアウト、作品ページ、事例ページの余地という同じ観点から比較できます。

テンプレートから始めるのではなく、作りたいポートフォリオを言葉で伝えたい場合は、プロンプトからサイトの下書きを作るAIビルダーを、Starterプラン（月額$20）から使えます。こちらから登録して、まずは無料プランを試してみてください。

よくある失敗

  • ヒーローセクションだけを見て買う。 最初の画面は、最も変更しやすい部分です。難しいのは作品ページのほうです。
  • 作品を載せすぎる。 厳選した3〜6件を見せましょう。空っぽに見えるカード枠が30もあるテンプレートでは、小規模なポートフォリオが貧弱に見えてしまいます。
  • 重い画像を使う。 アップロード前に圧縮し、スマートフォンでプレビューの読み込みを確認しましょう。
  • ライセンスを無視する。 作り込む前に、個人利用かクライアント利用かが、ライセンスの範囲に合っているか確認してください。
  • 連絡手段がない。 すべてのページに、メールや予約リンクが見える位置に置かれるテンプレートか確認しましょう。

無料で始める · クレジットカード不要

Umair Ali Sadaqat

We.Inc創業者

UmairはWe.Incの創業者です。AIによるウェブサイト制作、制作会社、ウェブ制作スタジオの経営について執筆しています。

素晴らしいものを作る準備はできましたか？

立ち上げ、成長、自動化のすべてを1つのプラットフォームで行う15,000+社がWe.Incを利用しています。

無料で始める

クレジットカード不要 · 営業担当に相談する

関連: ブログ｜デジタルマーケティングと集客のヒント

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る