目次
目次
このドキュメントは、Framerを学ぶ日本のユーザーが日本語資料の不足で困っている状況を解決するため、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆様に少しでも役立つことを願っています。
“Is Set”でビジュアルを制御する方法
Framerで最も基本的な条件制御方法は"Is Set"条件です。"Is Set"条件を設定すると、画像がCMSにアップロードされている場合には表示され、画像がない場合には自動で非表示になります。
例えば、チーム紹介ページであるチームメンバーにはプロフィール写真があり、他にはない場合、写真がないメンバーはその要素を自動で非表示にしてレイアウトが崩れないようにすることができます。
どのような場合に使いますか?
画像がある場合にのみ表示し、ない場合には自動的に非表示にしたい時
CMSフィールドを別途作成せず、存在の有無のみで表示を制御したい時
“Is Set”設定方法
Visible項目右側の+ボタンをクリックSet Variableメニュー >
"Is Set"条件選択
テキストベースの条件とは?
Framerでは"Is Set"条件以外に、テキスト値を基準にした条件付き表示機能を提供しています。
例えば、CMSにカテゴリーのフィールドがあり、その値が「お知らせ」の時だけ上部にバナーを表示したい場合、Equals: お知らせ条件を活用できます。
等しい (Equals)/等しくない (Doesn’t Equal)~で始まる (Starts with)/~で始まらない~で終わる (Ends with)/~で終わらない含む (Contains)/含まない
どのような場合に使いますか?
CMSのテキスト値に応じて特定のバナーや要素を表示するかどうかを決めたい時
カテゴリー値が「イベント」の時だけ特定のセクションを表示したい時
オプションフィールドを使用したビジュアル制御方法
Framerではオプションフィールドを追加しデザインに適用することで、コンテンツの条件に応じて様々なレイアウトを表示できます。
ステップ1: オプションフィールドを追加する
CMSに移動します。
Edit Fields(フィールド編集)をクリックします。+アイコンを押して新しいフィールドを追加します。ドロップダウンメニューから
Optionを選択します。"1個の画像を表示"、"3個の画像を表示"など、希望のオプションリストを入力します。
これらのオプションは各CMSアイテムごとに異なるレイアウトや要素表示の有無を指定するのに役立ちます。
ステップ2: デザインにオプションフィールド条件を適用する
ビジュアルを制御したい要素を選択
Visible(表示の有無)項目隣の+アイコンクリックSet Variable(変数設定)を選択した後、Option条件設定
主要オプション
オプション | 説明 |
|---|---|
Equal (等しい) | 選択したオプションと正確に一致する場合にのみ当該要素を表示します。 |
Doesn’t Equal (等しくない) | 選択したオプションと一致しない場合に当該要素を非表示にします。 |
Convert (変換) | 複数のオプションを組み合わせたり、一致しない値について例外処理を設定できます。 |
例
バリアントA: 画像を1枚だけ表示するレイアウト
バリアントB: 画像を3枚表示するレイアウト
この時
Convertオプションを使用するとCMSのオプションフィールド値に応じてAまたはBを自動的に選択して表示できます。この方法は一つのコンポーネントを様々な条件に応じて分岐処理する際に特に有用です。
簡単な条件にトグルフィールドを使用する
Framerでははい / いいえ(Yes/No)またはオン / オフ(On/Off)形式の簡単な条件を処理する際にToggleフィールドを使用するのが最も効果的です。
特定の画像やバナーの表示有無を設定したい時
イベントバナーの表示有無をCMSで簡単に制御したい時
条件文とVariantを利用した高度な制御
Framerの条件文と変換機能を組み合わせると、CMS詳細ページの構成要素をさらに細かく制御できます。特にTransform(変換)機能は条件に応じてコンポーネントのVariantを自動的に切り替えられるため、複雑なコンテンツ構造にも対応できます。
+アイコンがあるほぼすべての要素に条件を適用でき、これらの条件を利用してコンテンツ内容に応じた動的に変化するレイアウトを作成できます。
本文はFramer公式ブログの‘柔軟なCMS詳細ページを作成する方法’を翻訳・アレンジしたコンテンツです。
