ポートフォリオサイト Slide

特長

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

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

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

  → そもそもFramerとは？

ページ構成

• ホーム

• 制作事例 一覧（CMS）

  • 制作事例 カテゴリー別一覧（CMS）

  • 制作事例 詳細（CMS）

• プロフィール

• お問い合わせ

  • お問い合わせ 送信完了

• プライバシーポリシー

• 404 Not Found

テンプレートの詳細

ホーム（トップページ）

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

制作事例 一覧ページ

デフォルトの画像の表示比率は16:9ですが、CMS上で1:1（正方形）に変更することも可能です。

プロフィールページ

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

お問い合わせページ

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

CMS

CMSは、「Works（制作事例）」「Works Category（制作事例カテゴリー）」の2つのコレクションを使用。制作事例はすべてCMSから管理できます。

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

• スライドショー（アップロード動画+画像）

• スライドショー（YouTube動画+画像）

• スライドショー（画像のみ）

• アップロード動画のみ

• YouTube動画のみ

• 画像1のみ

• ホームには表示しない

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

制作事例の詳細ページでは、CMSに登録した画像と動画が「表示枠比率（16:9か1:1）」に収まるように表示されます。つまり、表示枠比率と異なる比率の場合は、余白が発生します。比率の異なる画像をすべて余白なしで表示したい場合は、「オプション：詳細ページの画像・動画」の欄に画像や動画を並べてください。この欄を使用した場合、画像1〜10および動画（アップロード）・動画（YouTube）欄の内容は詳細ページに表示されません。ホームには動画は1つしか掲載できませんが、こちらを使用すれば、詳細ページに複数の動画を掲載することも可能です。

レイアウトテンプレート

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

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

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

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

コンポーネント

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

コードコンポーネント

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

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