20th
Framer Advent Calendar

パターン・タイル

目次

目次

目次

タイルで繰り返しパターンを設定

パターン・タイル機能は、画像を繰り返しパターンとして配置できる機能です。

  1. Fillを画像に設定

  2. TypeをTileに設定

  3. ノイズやボーダーなど8種類の用意された画像がPresetから選択できるように

8つのプリセットパターンとカスタマイズ

Framerには以下の8つの基本パターンが用意されています:

  1. Noise(ノイズ): 自然な質感を演出する不規則なパターン

  2. Checker(チェッカー): クラシックな市松模様

  3. Grid(グリッド): 整然としたグリッドライン

  4. Lines(ライン): シンプルな直線パターン

  5. Rhombus(ひし形): ダイナミックな幾何学模様

  6. Wave(ウェーブ): 有機的な波形パターン

  7. Polka(ポルカ): クラシカルなドット模様

  8. Diagonal(斜め): 斜めのストライプパターン

スケール調整:

  • Scale(スケール)プロパティを使用して、パターンのサイズを自由に調整できます

  • デフォルトでは画像サイズに合わせて自動調整されます

  • 数値を小さくするとパターンが細かく、大きくすると大きくなります

フィルターとブレンド:

パターンの見た目をさらにカスタマイズするには:

  1. Filters(フィルター)を使って色調や明暗を調整

  2. Blending(ブレンド)でベース画像との組み合わせ方を変更

  3. 透明度を調整して微妙な表現を実現

プラグインでよりバリエーション豊かに

Pattern Studioというプラグインでは、より豊富なパターン画像を選択し、背景色やパターンのカラー、透明度などをカスタマイズした上で適用することができます。

https://www.framer.com/marketplace/plugins/pattern-studio/


\ このカレンダーで学んだことを、ハッシュタグをつけてXに投稿してください! /

このカレンダーで学んだことを、

\ ハッシュタグをつけてXに投稿してください! /

カレンダーへ戻る

カレンダーへ戻る

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

イベント

ブログ

テンプレート

コンポーネント

日本のFramerサイト

Proプラン25%割引コード

Japanese