ポートフォリオサイト Slide

特長

• 数少ない日本語のポートフォリオ用Framerテンプレート

• 主役である制作事例がしっかり見やすいデザイン

• 制作事例はCMSから投稿（画像も動画も投稿可能）

  → そもそもFramerとは？

ページ構成

• ホーム

• 制作事例 一覧（CMS）

  • 制作事例 詳細（CMS）

• プロフィール

• お問い合わせ

  • お問い合わせ 送信完了

• プライバシーポリシー

• 404 Not Found

テンプレートの詳細

ホーム（トップページ）

ホームには、スライドショー形式で最大10個の制作事例を表示できます。

制作事例 一覧ページ

メイソンリーレイアウトを採用。画像はアップロードした画像のアスペクト比通りに表示されます。

プロフィールページ

プロフィールページは、編集しやすいよう、シンプルなデザインにしています。各見出しや箇条書きのアイテムはコンポーネント化しているので、カスタマイズも容易です。

お問い合わせページ

お問い合わせフォームは、プライバシーポリシー一体型。プライバシーポリシーの本文はコンポーネント化し、プライバシーポリシーページと共通化しています。

CMS

制作事例はすべてCMSから管理できます。CMSのコレクションは、「Works（制作事例）」のひとつのみのため、Basicプランでもご利用可能です。

CMSで登録した制作事例は、制作事例一覧ページに表示されるほか、リストの上から最大10個はホームにも表示されます。その際、ホームでの表示は、以下の5パターンから選択できます。

• スライドショー

• アップロード動画のみ

• YouTube動画のみ

• 画像1のみ

• ホームには表示しない

※スライドショー内の動画は、画像1が設定されている場合はスライドショーの2枚目（画像1のあと）に、設定されていない場合は1枚目に表示されます。

レイアウトテンプレート

本テンプレートでは、ヘッダー、およびフッターを、全ページ共通の「レイアウトテンプレート」で作成していますので、カスタマイズやページ追加が容易です。各ページで制作するレイヤーは<main>の配下のみです。

テキストスタイル・カラースタイル

本テンプレートで使用しているテキストレイヤーは、テキストスタイルを適用していますので、サイト全体のフォントを変更したい場合も、上記テキストスタイルのフォントを変更するだけでOKです。（※テキストサイズのFitを使用している各ページの大見出し部分はのぞく）

また、すべての色をカラースタイルで設定していますので、色のカスタマイズも簡単に行っていただけます。

コンポーネント

複数箇所で使うパーツは、ほとんどコンポーネント化していますので、カスタマイズやコンテンツの追加をスムーズに行っていただけます。

コードコンポーネント

本テンプレートでは、カスタムコードは使用せず、下記のコードコンポーネントをのぞいて、すべてノーコード（Framerの標準機能）で制作しています。

• Smooth Scroll
  Framerの標準機能では、SNSのシャアボタンを実装できないため、Framer Universityのコードコンポーネントを利用しています。

変更履歴

2026/03/09

• 新機能のDynamic Fiterを活用し、カテゴリーでの絞り込みができるようにしました。

2026/01/05

• 作品事例の一覧ページにFramerの新機能である「Masonry Grids」「Fit Image」「Stagger Effect」を適用。

• 作品事例詳細ページにも「Fit Image」を適用し、アップロードした画像のアスペクト比通りに表示されるようにしました。

• スマホ版のトップページに、新機能「Flow Effect」を適用。

• Scroll SectionをCMSのアイテムと紐づけることで、トップページの内側の構造をシンプルにしました（外側のデザインは変更ありません）。

• Framerの料金プラン改定に伴い、新Basicプランでもご利用いただけるよう、CMSのカテゴリーCollectionを削除し、Collection数を1つのみにしました。その代わり、カテゴリーの絞り込み機能はなくなりました *。また、カテゴリーは設定可能ですが、Option Fieldのため複数選択はできません。（* 絞り込み機能はその後再実装しました）