Framerの使い方について雑に
背景
昨年、所属企業の公式ホームページをfigmaにUIが似てるノーコードツールのFramerで実装したんだけど、日本語対応がされてないので、色々作業が面倒くさかった。
最近になってまたデータをいじって欲しいという指示があったので、生成AI様の手を借りながら、使い方を振り返ってみます。
Framer公式サイトの Framer Academy にある「Learn」セクションでは、Framerを使いこなすために必要な機能や手法、UI用語などを幅広く取り扱っています。以下では、「Learn」に含まれる各トピックについて詳しくご説明しながら、Framer特有のUI用語の意味を整理してまいります。
■ Insertメニュー（Insert Menu）
Insertメニューとは、Framerのキャンバス上に用意された各種コンポーネントやレイアウトをドラッグ＆ドロップで追加できる機能です。プログラミングをすることなく、地図の埋め込みやSNSフィードの表示など多彩な要素をサイトに組み込める点が大きな特長となります。
クリエイティブコンポーネント
たとえば、背景アニメーションや特殊なスクロール表現など、サイトを動的に演出する豊富なコンポーネントが揃っております。Framerの公式ライブラリ「framer.supply」から、ユニークなデザインパーツをすぐに取り込むことが可能です。カルーセル（Carousel）
複数の画像やコンテンツを横方向のスライダー形式で見せる仕組みです。スワイプやページ送り、オートプレイなどを設定でき、ビジュアル面でのアクセントを与えられます。Cookieバナー
欧州のGDPRなどに対応するために利用されるCookie同意バナーを、ドラッグ操作のみで設置できます。Google Consent Modeを用いた同意管理機能などもサポートされており、実装の手間を大幅に軽減できます。検索バー
サイト内検索を提供するコンポーネントです。Insertメニューから追加し、インデックスの設定を行うだけで、サイト内をキーワードで検索できる機能を簡単に導入できます。入力フォーム部品
ユーザーからメールアドレスなどを取得するフォーム要素も、Insertメニューに含まれております。基本的なバリデーションやスタイルをあらかじめ備えているため、簡易的な問い合わせフォームやメルマガ登録フォームを素早く実装するのに便利です。Ticker（無限スクロール表示）
横方向に無限ループでスクロールするテキストや画像を表示するものです。Framer独自のMotionライブラリが活用されており、スムーズなループ表現を実現可能です。
■ レイアウト＆デザイン（Layout & Design）
このセクションでは、Framerでの柔軟なレイアウト構築や、デザイン作業における要点が幅広く解説されています。
フレーム（Frame）
Figmaにおけるフレームと類似の概念で、キャンバス上における長方形のコンテナ要素です。要素を入れ子にして構造を整理しながら、背景色やサイズなどを自由に指定できます。スタック（Stack）とグリッド（Grid）
複数要素を自動で整列・配置するための強力なレイアウトツールです。スタックは縦や横方向への自動配置を得意とし、間隔（ギャップ）の調整や要素サイズの拡張・縮小を効率的に行えます。一方グリッドは行と列という二次元レイアウトで要素を整列できるため、カード形式の一覧ページや複雑なレイアウトを実装する際に大変便利です。サイズ指定モード
要素のサイズを「Fill（親要素に合わせる）」や「Fit Content（中身のサイズに合わせる）」、あるいは固定値など複数のモードで指定できます。また、相対的なパーセンテージ指定やビューポート単位（vh、vw）などを利用してレスポンシブに対応する方法も解説されています。ポジション指定
デフォルトのフロー配置以外に、「Absolute」「Fixed」「Sticky」などの配置モードがあります。Absoluteはキャンバス上の自由な位置に要素を配置できますが、レスポンシブへの考慮が必要です。Fixedはスクロールに追従しない（常に画面内の一定位置に留まる）ため、ヘッダー固定などに利用されるケースが多いです。Stickyは親要素内で指定位置を超えた際に要素が“貼りつく”ような挙動を実装できます。スタイルとテーマ
Framerでは、サイト全体のテキストスタイルやカラー設定を一括で管理できます。たとえば、共通のフォントサイズや色を登録し、一度設定しておくことで全ページに反映させることが可能です。ブランドイメージに沿った統一感あるサイト作りに役立ちます。レイアウトテンプレート
ヘッダーやフッターといった共通パーツを再利用する仕組みとして、Layout Templatesが利用できます。共通要素を一か所で管理しておけば、大規模なサイトであっても編集や修正を効率的に反映させることが可能です。
■ ナビゲーション（Navigation）
複数ページで構成される場合、ページ移動の導線となるナビゲーションは非常に重要です。Framerの「Navigation」セクションでは、ノーコードで質の高いメニューを実装する方法が解説されています。
ページ間リンクとアンカーリンク
ボタンやテキスト、画像など、任意の要素を選んでリンク先を指定できます。ページ間移動だけでなく、ページ内の特定セクションへスムーズにスクロールするアンカーリンクも設定可能です。デスクトップとモバイルのメニュー
PC向けの横並びナビゲーションだけでなく、モバイル向けのハンバーガーメニューやドロワーメニューも視覚的に作成できます。クリック（タップ）時の展開・閉じるアニメーションなども、設定パネルからノーコードで制御できます。オーバーレイとドロップダウンメニュー
オーバーレイ機能を使うことで、マウスオーバー時にサブメニューを重ねて表示するドロップダウンや、画面を覆うフルスクリーンメニューを実装できます。表示位置の調整やフェードイン・スライドインなどのアニメーション指定も柔軟に行えます。高度なナビゲーション
ドロップダウンメニューを一から組み立てる20分超のチュートリアルや、モーダルウィンドウ表示のサンプルなど、高度な実装方法も紹介されています。マルチレベル（階層構造）のナビゲーションにも対応可能です。
■ アニメーション＆エフェクト（Animations & Effects）
Framerの強みの一つとして、アニメーション・視覚効果を手軽に付与できる点が挙げられます。Learnセクションでは、多種多様な演出方法が網羅的に紹介されています。
テキストエフェクト
ページ表示時（Appear）やスクロール時にテキストがふわっと出現したり、文字単位でアニメーションさせるなどの表現ができます。BlurやScale、Opacity変化などのプリセットから選ぶだけで、高品質な効果を適用可能です。コンポーネントのバリアントとトランジション
一つのコンポーネントに複数の状態（Variant）を定義し、ホバーやクリックなどのアクションでアニメーション付きの切り替えを実現します。たとえばボタンのホバーで色やサイズが変わる、クリックでアイコンが変形するといった動きをノーコードで設定できます。ページ遷移アニメーション（ページトランジション）
通常、ページを切り替えるタイミングでアニメーションさせるのは難しい部分ですが、Framerではブラウザの新しいView Transitions APIを活用し、デザイナー目線でページ間の切り替え演出を組み込むことができます。エフェクト機能
要素のAppear（表示）、Hover（ホバー）、In View（スクロールで視界に入った時）など複数のトリガーに対して多彩なエフェクトを設定可能です。複雑なドラッグアニメーションや波紋エフェクトなども、チュートリアルを参考にすれば比較的簡単に実装できます。カスタムアニメーション
基本的なプリセットだけでなく、Motionライブラリを使うとCSS変形（Transform）を細かく制御できます。スクロール進捗に合わせて要素が拡大・縮小したり、複数の画像が順番に切り替わるような表現など、演出の幅が非常に広がります。
■ スクロール（Scroll）
ページをスクロールする際の演出や要素の動きを制御する機能も、Framerには充実しています。
スムーススクロールリンク
同一ページ内のアンカーにジャンプする際に、なめらかなアニメーションスクロールを適用できます。長いランディングページでセクションごとに移動する場合などに便利です。横スクロール
縦スクロールだけでなく、コンテナを水平にスクロールさせる設定も可能です。カルーセルやスライダーとは別に、自然に横方向へスクロールできるコンテンツをデザインできます。スクロール方向による表示／非表示
例として、下方向にスクロールするとヘッダーが消え、上にスクロールすると再びヘッダーが現れるといったUIを簡単に実装可能です。ユーザーがコンテンツを読みやすくなるよう配慮する際に役立ちます。Sticky（固定）スクロール
要素を特定の位置で固定する“Sticky”モードを使い、セクション内見出しを常に画面上部に表示するといった高度なレイアウトを組むことができます。スクロールアニメーション
スクロール位置に合わせて要素のフェードインや拡大縮小を行う仕組みも整っており、大掛かりなストーリーテリング型のサイトでも手軽にアニメーション演出を行えます。
■ CMS（コンテンツ管理システム）
FramerのCMS機能を使うと、動的コンテンツ（ブログ記事やニュース、製品リストなど）をコード不要で管理・表示できます。LearnセクションのCMSパートでは、以下のような基本概念と実践的な使い方が紹介されています。
コレクション（Collection）とアイテム（Item）
関連するコンテンツをまとめる単位を“コレクション”と呼び、その中に個々のアイテムを追加します。たとえばブログ記事であれば、「Articles」というコレクションを作り、複数の投稿をアイテムとして登録する形です。フィールドの種類
テキスト、リッチテキスト、画像、数値、日付、参照（Reference）など、多様なフィールドタイプが用意されており、データ構造に合わせて自由に追加できます。リッチテキスト
見出しやリンク、太字などを含むリッチな文章を、CMS上のエディタで直感的に作成・編集できます。コードブロックなども扱えるため、技術記事のようなページにも対応可能です。参照フィールド（Reference）
他のコレクションに登録されたアイテムを参照するフィールドです。たとえば記事に「著者」という参照フィールドを設け、著者情報を別コレクションで管理することもできます。これにより、変更がある場合は参照元の著者情報を更新するだけで全記事に反映させられます。コレクションリスト（Collection List）の表示
ページにCollection Listを配置すると、紐づけたコレクション内の全アイテムを自動で繰り返し表示してくれます。フィルタリングや並べ替えも可能です。ドラフト管理
まだ公開しないアイテムをDraft（下書き）状態にすることで、公開時にそれらが含まれないように制御できます。公開準備が整った段階でドラフトを解除し、サイトに反映させられる仕組みです。
こうした仕組みにより、ブログやニュースサイトなど多量のコンテンツ更新が発生するサイトでも、デザイナー主体で運用できる強みがあります。
■ フォーム（Forms）
「Forms」セクションでは、Framerサイトに問い合わせフォームやメール登録フォームを実装する方法が解説されています。コードを書かずにフォームが構築できるため、ユーザーからの入力を受け付けたい場合に非常に便利です。
入力フィールドとバリアント
あらかじめスタイルが設定された入力フィールド（Input）コンポーネントを利用でき、フォーカス時や未入力のときなどの状態をVariant機能で管理します。エラー表示などもノーコードで設定可能です。送信後のフィードバック
送信が成功したか失敗したか、あるいは送信処理中かなど、状況に応じてメッセージ表示や画面遷移を調整できます。ユーザーがフォーム送信の結果を直感的に把握できるUXを作り込むことが可能です。カスタム送信ボタン
デフォルトの送信ボタン以外に、独自デザインのボタンをSubmitボタンとして使用できます。一度デザインしたボタンコンポーネントを全フォームで使い回せるため、サイト全体のスタイル統一にも役立ちます。入力プロパティの細かな設定
「必須項目」「文字数制限」「正規表現でのバリデーション」などをGUI上で指定できます。これにより、たとえばメールアドレスの形式チェックや電話番号の数値チェックなどを簡単に導入できる点が大きなメリットです。
■ ローカライゼーション（Localization）
多言語・多地域向けサイトの構築を想定し、ロケール（Locale）ごとにコンテンツを切り替える機能がサポートされています。
ロケール追加
英語や日本語など、複数の言語を同一プロジェクト内に追加できます。ページタイトルや本文なども言語ごとに編集可能となり、必要に応じて切り替えボタンを設置できます。AI翻訳スタイルの活用
FramerではAI翻訳支援機能があり、ブランドトーンや固有名詞の扱いを調整できるため、機械翻訳特有の不自然さを低減できます。ロケールごとのURLスラッグ
たとえば英語版は/en/...、日本語版は/ja/...といった形でページスラッグを設定し、ユーザーのブラウザ言語に応じて自動リダイレクトさせることも可能です。
■ 公開＆設定（Publishing & Settings）
Framerで制作したサイトの公開や、運用管理に関する設定項目です。SEOやセキュリティ、パフォーマンスにかかわる内容もここでまとめられています。
ドラフトページ
作成途中のページを下書き状態にする機能です。公開サイトから除外されるため、社内レビューや仮配置などに活用できます。内蔵アナリティクス
Framerのビルトインアナリティクスを利用すれば、外部スクリプトを追加しなくてもPV数などの基本的なアクセス解析が可能です。メタデータ設定
各ページのタイトル、ディスクリプション、OGP画像などを入力できます。検索エンジンやSNSシェア時の表示が最適化され、SEO効果も期待できます。パスワード保護
限定公開サイトや社内用ページなどに簡単にパスワードロックをかけられます。カスタムコード埋め込み
Googleタグマネージャーやチャットウィジェットなどを追加したい場合、HTMLの<head>や<body>にコードを挿入できます。ノーコード中心でも、必要な拡張性を確保できる形です。独自ドメインの接続
DNS設定を行うことで、自分のドメインにサイトを紐づけられます。SSL証明書の発行も自動で行われるため、HTTPS対応についても手軽に行えます。リダイレクト設定
旧URLから新URLへの転送（301リダイレクトなど）をGUI上で管理できます。サイトリニューアル時のSEO対策として便利です。バージョン管理とステージング
公開前にステージング環境でプレビューし、問題なければ本番反映する、といったワークフローをサポートします。過去のバージョン履歴に戻す機能も備わっているため、デザインやコンテンツの試行錯誤が容易になります。
■ テンプレート（Templates）
テンプレート機能を利用すると、他のユーザーやコミュニティが作成したデザインをプロジェクトの雛形として取り込めます。逆に自分で作成したプロジェクトをテンプレートとして公開・販売することも可能です。
テンプレートの利用
「Open in Framer」を押すだけで、テンプレートが自分のワークスペースに複製されます。デザインやレイアウトを再利用しながら、テキストや画像、カラーなどを置き換える形で素早くサイト制作を行えます。テンプレートの作成・公開
オリジナルのプロジェクトをテンプレート化し、コミュニティに提供することができます。Framer公式サイトへの掲載申請や、外部プラットフォームを使った有料販売なども可能なため、デザインの収益化や認知拡大に繋げられます。
以上が「Learn」セクションで紹介されているFramerの主な機能とUI用語に関する解説です。これらを理解すると、デザイナーがコードを書くことなく、高いデザイン性と豊富なインタラクションを備えたWebサイトを完結に作成できるようになります。
FramerでのCMSページ実装方法：ニュース記事を例にした詳細手順
続いて、Framerに内蔵されたCMS機能を使い、「ニュース記事」のCMSページを構築する方法について、基本的な使い方から実際のワークフローに沿った形で詳述いたします。ブログ投稿やお知らせページといった、継続的に増減するコンテンツを扱いたい場合に応用できる内容です。
■ 1. CMSコレクションの作成
まず、Framerエディタの上部にある「CMS」ボタンをクリックし、CMSパネルを開いてください。
そこから「Create new collection」を選び、たとえば「News」という名称で新しいコレクションを追加します。コレクションはブログ記事や製品情報など、一連の関連コンテンツをまとめるための“箱”にあたります。
■ 2. コレクションのフィールドを設定
新規コレクションには初期状態でNameフィールドのみが存在しますが、ニュース記事には複数の属性（タイトル、本文、日付など）が必要です。そこで、以下のようなフィールドを例として追加します。
タイトル（Text）
記事のタイトルを短い一行テキストで保存する想定です。本文（Formatted Text）
段落や見出し、装飾を含むリッチテキストを扱えるようにします。投稿日（Date）
カレンダーUIから日付を選べるフィールドにしておくと便利です。サムネイル画像（Image）
一覧表示や記事冒頭などに使用するトップ画像を格納できます。著者（Text）または参照フィールド
簡易的には文字列で名前を入力する形でも、別のコレクション「Authors」を作って参照させる形でも構いません。後者の場合は参照フィールド（Reference）を使うことで著者情報を一元管理できます。
必要に応じて、カテゴリやタグ管理用に参照フィールドを設定することもおすすめです。設定が完了したら「Save」や「Done」を押し、コレクション構造を確定させます。
■ 3. ニュース記事アイテムの登録
コレクションのフィールド定義後、記事データ（アイテム）を1つずつ追加していきます。CMSパネルで「Add Item」を押すと、先ほど設定したフィールド項目が入力フォームとして表示されるはずです。
たとえば：
タイトル：新機能リリースのお知らせ
本文：見出しや段落を交えた記事本文（Formatted Textフィールド）
日付：本日の日付
サムネイル画像：該当記事用のトップ画像
著者：山田太郎（または参照フィールドで「山田太郎」アイテムを選択）
このように入力して保存を行います。記事が複数ある場合は同じ要領で続けて追加します。大量のアイテムをまとめて取り込みたい場合にはCSVインポートも活用可能です。
■ 4. CMSページのテンプレート作成
ニュース記事の詳細ページを自動生成するため、まずはキャンバス左側のページリストで新しいページを作成します。次に、そのページを選択した状態で右側の「Convert to CMS Page」や「Attach to CMS Collection」といったオプションを選び、「News」コレクションを指定します。
これにより、そのページが「CMSページテンプレート」になり、Newsコレクション内の各アイテムごとに個別URLが発行される仕組みになります。
■ 5. ページデザインとデータバインド
CMSページテンプレートを開くと、右側のパネル等で「現在どのアイテムをプレビュー中か」切り替えることができます。記事1件分のデータを参照しながら、次のような要素をレイアウトしてください。
記事タイトル用のテキスト要素
テキストの中身を「Connect to CMS」などから「Title」フィールドに紐付ける
投稿日・著者名のテキスト
それぞれ「Date」「Author」フィールドを割り当て
サムネイル画像
Image要素を配置し、Imageソースを「Thumbnail」フィールドに紐付け
本文リッチテキスト
Framerで用意されているリッチテキストコンポーネントを配置し、「Body（本文）」フィールドをバインド
これらを組み合わせたレイアウトが完成すると、CMS内にある記事アイテムごとに異なるデータが差し込まれ、同じテンプレートデザインで複数の詳細ページを自動生成できます。プレビューしながら、他のアイテム（別の記事）でも表示崩れがないかチェックするとよいでしょう。
■ 6. 記事一覧ページの構築（オプション）
詳細ページだけではなく、トップページや「News一覧」ページを作り、複数の記事をリスト表示したいケースが多いかと思います。その場合は、通常のページ上で下記を行ってください：
Collection Listコンポーネントの配置
Insertメニューなどから「Collection List」を追加し、対象コレクションを「News」に設定します。カードデザインの調整
リスト内で繰り返されるアイテム単位の枠（カード）をデザインします。サムネイル画像、タイトル、日付などの要素を配置し、それぞれ対応するCMSフィールドとデータバインドしてください。リンク設定
カード全体や「続きを読む」ボタンなどに対して、リンク先を先ほど作成したCMSページ（Newsテンプレート）に紐付けします。FramerではCMSアイテムのURLスラッグが自動生成されるため、これを選ぶだけで該当記事ページへ遷移可能です。
こうしてニュース一覧ページを設けることで、サイト訪問者は複数の記事を一覧形式でチェックし、詳細を見たい記事をクリックして遷移する流れが完成します。
■ 7. 最終確認と公開
プレビューで、一覧ページから記事詳細ページに遷移する挙動やレイアウトを確認しましょう。問題がなければ、右上の「Publish」ボタンを押すことで、Framer上のサイトを実際にインターネット上へ公開できます。
ドラフト管理
一部の記事をまだ公開したくない場合は、CMSパネルで該当アイテムをドラフト（下書き）状態にするだけで、本番公開から除外できます。公開のタイミングになったらドラフトを解除し、再度サイトを更新すれば反映されます。独自ドメイン設定
よりプロフェッショナルな運用を行いたい場合は、カスタムドメインを接続すると良いでしょう。DNS設定をFramerのガイドに沿って行えば、SSL対応した独自のURLでニュースページを公開できます。
これらの手順を踏むことで、コードを書くことなく 動的なニュース記事サイト を構築可能です。Framerならば、レイアウトのデザイン変更やアニメーション演出も直観的に行えるため、ビジュアル面での品質を保ちつつCMSを活用できます。デザイナーの方々がメインで運用する場合でも、記事数が増えていくようなメディア・ブログ運用に十分耐え得る仕組みを整えられるはずです。
■ まとめ
Framer Academyの「Learn」セクションには、Insertメニューやらレイアウト、ナビゲーション、アニメーション、スクロール効果、CMS、フォーム、ローカライゼーション、さらに公開設定やテンプレート活用とかもあって、一応Webサイト制作の流れは全部押さえてるみたいですね。
特にCMS機能を使えば、頻繁に更新するニュース記事とかブログサイトでもノーコードでそこそこ運用しやすくなるんじゃないですかね。Framerのデザイナー向けUIに乗っかると、リッチな演出からレスポンシブ対応、SEO、アナリティクスとかも一通り備わるっぽいんで、参考程度にどうぞ。
自分はコーディングが大嫌いで何回か挫折しているので、OnlookにしろSTUDIOにしろFramerにしろノーコードツールの可能性が広がるのは願ったり叶ったりです。