サービスサイト Agilely

特長

• 日本人が使いやすい日本語のFramerテンプレート

• マーケティング・プランナーが制作した汎用的なサービスサイト

• コンポーネントやスタイル機能でカスタマイズしやすい

• 日本語と英語の多言語対応あり

  → そもそもFramerとは？

ページ構成

• ホーム

• 料金プラン

• 事例紹介 一覧（CMS）

  • 事例紹介 詳細（CMS）

• 会社情報（一部CMS）

• お知らせ 一覧（CMS）

  • お知らせ 記事（CMS）

• お問い合わせ

  • お問い合わせ 送信完了

• 資料ダウンロード

• プライバシーポリシー

• 404 Not Found

テンプレートの詳細

ホーム（トップページ）

知的で信頼感のある印象を与えるデザイン。必要な情報を見つけやすく、コンテンツが読みやすいのが特徴です。トップページを見るだけでサービスの概要を理解でき、各詳細ページにもアクセスしやすい設計になっています。

料金プランページ

料金プランページでは、プランごとの詳細を比較表で見比べることができます。

会社情報ページ

会社情報ページもシンプルにわかりやすく。スタッフ情報はCMSで更新可能です。

CMS

CMSは、「News（お知らせ）」「Project（事例）」「Staff（スタッフ）」の3つのコレクションを使用しています。

レイアウトテンプレート

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

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

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

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

コンポーネント

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

コードコンポーネント

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

• ShareLink
  Framerの標準機能では、SNSのシャアボタンを実装できないため、私がWorkshop機能で生成したものを使用しています。