Framer実践操作マニュアル

Tキー（Windows: Tキー）を押して、テキストツールを有効にします。または、上部ツールバーの挿入パネルからテキストツールを選択することもできます。

キャンバス上でクリックしてテキストを配置します。自動サイズ調整のテキストレイヤーを作成する場合はクリックするだけで、固定幅のテキストボックスを作成する場合はクリック＆ドラッグします。

テキストを入力します。入力を終えるには、テキスト外の領域をクリックします。

右側のプロパティパネルで以下の項目を調整します：

• フォント：フォントピッカーを開いて書体を選択します。
• サイズ：数値を入力するか、矢印をクリックして調整します。
• ウェイト：太さを選択します（Regular, Medium, Bold など）。
• カラー：カラーウェルをクリックして色を選択します。
• 配置：テキストの配置（左、中央、右）を設定します。

Fキー（Windows: Fキー）を押して、フレームツールを有効にします。または、上部ツールバーのレイアウトメニューからフレームツールを選択することもできます。

キャンバス上でクリック＆ドラッグしてフレームを描画します。これがボタンの基本形状となります。

Tキー（Windows: Tキー）を押してテキストツールを有効にし、フレーム上でクリックしてラベルテキストを追加します。テキストはフレーム内に自動的にネストされます。

フレームを選択し、右側のプロパティパネルの「レイアウト」セクションを展開します。これにより、コンテンツを効率的に配置するためのスタックレイアウトオプションが有効になります。

フレームを右クリックして「Fit Content」を選択するか、Shift + A（Windows: Shift + A）を押して、フレームのサイズをコンテンツに合わせて自動調整します。

プロパティパネルのパディングオプションを使用して、ボタン内の余白を調整します。均一なパディングや、上下左右それぞれ異なるパディングを設定できます。

上部ツールバーの挿入メニューから「Media」→「Video」を選択します。

ビデオコンポーネントをドラッグ＆ドロップしてキャンバスに配置します。

右側のプロパティパネルの「URL」フィールドにビデオのURLを入力します。

ビデオのサイズを調整します。アスペクト比を維持するには、サイズプロパティの「ロック」アイコンをクリックします。Max Widthを「100%」に設定して、レスポンシブな動作を確保します。

デフォルトでは自動再生とループが有効になっていますが、必要に応じてプロパティパネルでこれらの設定を変更できます。

左側のパネルで「レイヤー」タブを選択します。

デスクトップブレークポイントの横にある「+」ボタンをクリックして、新しいブレークポイント（タブレット、スマートフォンなど）を追加します。

デスクトップブレークポイントがプライマリ（主）ブレークポイントとして設定されます。このブレークポイントで行った変更は、他のブレークポイントにも継承されます。

特定のブレークポイントでのみ適用される変更を作成するには、そのブレークポイントを選択して要素を調整します。これにより、プライマリブレークポイントから継承された設定がオーバーライド（上書き）されます。

プライマリブレークポイントを選択し、右側のプロパティパネルで「レイアウト」プロパティを展開します。これにより、ページ全体がスタックベースのレイアウトに変換されます。

「パディング」プロパティでページの余白を設定し、「ギャップ」プロパティで要素間の間隔を調整します。

複数の要素をグループ化するには、Shiftキーを押しながら要素を選択し、右クリックして「Add Stack」を選択します。これにより、選択した要素が新しいスタック内にグループ化されます。

各ブレークポイントでレイアウト、サイズ、間隔などの特定の設定を必要に応じて調整します。

1. Fキー（Windows: Fキー）を押してフレームツールを有効にします。
2. ページ上部にフレームを描画します。
3. 右側のプロパティパネルで「Position」を「Relative」から「Fixed」に変更します。
4. 左右のピンを設定し、値を「0」に設定して画面幅いっぱいに広げます。

1. Tキー（Windows: Tキー）を押してテキストツールを有効にします。
2. フレーム内でクリックして、ロゴやサイト名のテキストを追加します。
3. Command + D（Windows: Ctrl + D）でテキスト要素を複製してリンク項目を作成します。

1. 新しいフレームをナビゲーションバー内に描画します。
2. 幅と高さを「Fill」に設定して、利用可能なスペースを埋めるようにします。
3. フィルプロパティの「X」をクリックして透明にします。

1. リンクテキストを選択します。
2. 右側のプロパティパネルの「Link」フィールドにURLを入力します。
3. 必要に応じて「Edit」をクリックして、リンクのスタイル（通常時、ホバー時、アクティブ時の色や下線など）をカスタマイズします。

要素（アイコンなど）を選択し、Command + K（Windows: Ctrl + Alt + K）を押すか、上部ツールバーのアクションメニューから「Create Component」を選択します。

コンポーネントキャンバスで、右側の「+」ボタンをクリックして新しいバリアントを追加します。必要な数だけバリアントを追加できます。

各バリアントを選択し、内容（アイコン名、スタイルなど）を編集します。

1. バリアントを選択し、インタラクションコネクタ（小さな丸いアイコン）を次のバリアントにドラッグします。
2. 表示されるメニューで「Appear」を選択します。
3. 遅延時間（例：5秒）を設定します。
4. すべてのバリアント間で同様の接続を作成し、ループを形成します。

1. アニメーションを適用したい要素を選択します。
2. 右側のプロパティパネルで「Effect」をクリックします。
3. 「Appear」を選択して、要素が表示される際のアニメーションを設定します。

1. 「Enter」エフェクトをクリックして設定を展開します。
2. 初期透明度や位置オフセット（Y値など）を調整します。
3. 「Transition」をクリックして、アニメーションの速度やイージング（減衰値など）を調整します。

1. 複数の要素に同様のエフェクトを適用する場合は、最初の要素のエフェクト設定を右クリックして「Copy」を選択します。
2. 他の要素を選択し、「Effect」欄を右クリックして「Paste」を選択します。
3. 各要素の「Transition」設定で「Delay」値を少しずつ増やしていきます（例：0.1秒、0.2秒、0.3秒など）。

右上の「Preview」ボタンをクリックするか、Pキー（Windows: Pキー）を押して、サイトをプレビューします。異なる画面サイズでのレスポンシブな表示を確認します。

右上の「Publish」ボタンをクリックします。Framerが自動的にURLを生成し、サイトが公開されます。

生成されたURLをクリックして、ブラウザで公開されたサイトを確認します。

変更が必要な場合は、Framerに戻って修正を行い、再度「Publish」ボタンをクリックして「Update」を選択します。