FigmaのデザインをWixエディタに実装する前に知っておきたいこと
こんにちは。Wixパートナーのよねやまです。
私は、Figmaで作成したデザインをWixエディタへ実装してほしい、というご依頼をいただくことがあります。これまで担当した案件では、Wix用として制作されたものではないデザインをいただくケースが多く、再現できない部分や、Wixの仕様に合わせた調整が必要になる場面を多く経験してきました。その経験から、「FigmaのデザインをWixエディタに実装する前に知っておきたいこと」を共有します。
まず、前提としてFigmaのデザインを、そのままWixエディタで再現できるとは限りません。これは、FigmaとWixエディタでは、レイアウトを考える仕組みや使える機能が違うからだと考えています。
Wixを使ったことがないけどWixサイトのデザインを担当する方や、デザインと実装を分業で制作する方に、事前に知っておいていただきたいポイントをご紹介します。
※WixにはWixエディタ、Wix Studio、Wix Harmonyなどのラインナップがありますが、今回はWixエディタで実装する場合についてのお話です。
この記事でお伝えしたいこと
レイアウト・レスポンシブ
テキスト
余白・配置
実装面
レイアウト・レスポンシブ
まずはじめに、Wixエディタでは、デスクトップ幅は980px、モバイル幅は320pxを基準としてレイアウトを考えます。Figmaでデザインを作成する際にも、この前提を知っていると実装がスムーズになります。
※より柔軟なレスポンシブが必要な場合は、Wix Studioという選択肢もあります。
項目 | Wixエディタの仕様 |
デスクトップ幅 | 基準幅は 980px。この幅を前提にレイアウトを組みます。 |
モバイル幅 | 320px を基準に表示されます。 |
パソコン画面とモバイル画面の関係 | モバイルはパソコンのレイアウトをベースに生成されるため、完全に独立したデザインではありません。 |
テキスト
項目 | Wixエディタの仕様 |
単位 | px（ピクセル）で管理します。 |
フォントサイズ | パソコン：6 px から 176px モバイル：スライダー設定は、13pxから150px。ボタン設定だと、1pxから150pxまで設定できます。 |
行間・文字間 | モバイル側では、PCと同じように個別調整できない項目があります。モバイル専用テキストを追加する方法もありますが、管理が複雑になることがあります。 |
テキスト透過 | テキスト自体の透明度は設定することは、できません。 |
余白・配置
Wix エディタでは、すべてを数値管理できるわけではありません。
項目 | Wixエディタの仕様 |
PCの余白 | セクションや要素ごとに数値での余白指定はできません。 |
モバイルの余白 | 個別に調整できる箇所もありますが、自動調整の影響を受ける場合があります。 |
細かなパーツ配置 | 小さな要素を重ねて組むデザインは、要素同士が干渉しやすく、位置のズレが発生しやすくなります。 ※ 細かなパーツを重ねて一つのビジュアルを作るようなデザインは注意が必要です。 |
実装面
項目 | Wixエディタの仕様 |
CSS | ノーコードのため、CSSで行うような細かなレイアウト制御や装飾は、標準機能ではできません。（Velo）を使うことで実装できることもありますが、標準機能ではありません。） |
実装方法 | Wixに用意されている機能・コンポーネントの範囲で実装します。 |
さいごに
Wix エディタは、サイトを構築し、公開後も簡単に編集や運用ができるノーコードツールです。Wixエディタの特徴や制作する上でのポイントを知っていただくことで、制作を少しでもスムーズに進めるための参考になれば嬉しいです。
デザインの再現性だけを優先するのではなく、公開後の編集や運用まで考慮して、Wixで無理のない実装方法を選ぶことが大切です。
FigmaのデザインをWix エディタへ実装する際には、ぜひこうした違いも踏まえて制作を進めてみてください！
Craftweb 情報整理 × Webサイト設計 情報を整え、伝わるホームページへ。 更新・運用しながら育てていけるWebサイトを制作しています。 Wix パートナー レジェンド |
