20th
Framer Advent Calendar

パターン・タイル

おかゆ

おかゆ

Dec 20, 2024

目次

目次

目次

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

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

  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/


Please post what you learned from this calendar on X with a hashtag!

What you learned from this calendar,

\ please post it on X with a hashtag! /

Back to calendar

Back to calendar

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English