Wix Harmony エディタ：パーツをデザインする

この記事内

色を選択する
グラデーションを操作する
パーツの一部をデザインする
デザイン用語集

「デザイン」パネルを使用すると、パーツのデザインを思い通りにカスタマイズすることができます。色を変更したり、パーツの一部を調整したり、状態ごとに異なるスタイルを設定したりと、サイトの外観や雰囲気に合わせて柔軟にカスタマイズすることができます。

すべてのパーツには独自のデザインオプションがあるため、編集する内容に応じて異なる設定が表示されます。

始めるには：

パーツをクリックし、「 すべてのデザインオプション」アイコン

をクリックします。

色を選択する

カラーサークルをクリックして色を選択すると、カラーピッカーが表示されます。ここでは、サイトのブランドカラーと、現在使用しているカスタムカラーを確認することができます。新しい色を選択するには、以下の 3つの方法があります：

カラースキームのドットを移動させて色を選択する
16進数カラーコード（例：黒の場合は #000000 など）を入力する
「スポイト」アイコンをクリックしてページ上のパーツから色を取得する

グラデーションを操作する

グラデーションを使用すると、2色以上の色が互いに溶け合うようにして、背景に単色よりも豊かな表情を与えることができます。

グラデーションは「リニア」、「ラジアル」、「コニック」、「フルード」から選択します。「リニア」、「ラジアル」、「コニック」などのグラデーションは、より鮮明なカラートランジションを作成できます。一方、「フルード」グラデーションを選択すると、よりソフトなグラデーションを作成することができます。グラデーションにさらに色を追加し、各色の不透明度を調整し、グラデーションをブランドに保存して後で再度使用することができます。

ヒント：

現在、グラデーションを使用した背景は、セクション、セクション内のセル、ヘッダー、フッター、ボタン、ボックスに利用することができます。

パーツの一部をデザインする

エディタ内の一部のパーツには詳細なデザインオプションがあり、個々のパーツを個別にデザインすることができます。たとえば、ボタンの場合なら、ボタン自体、アイコン、テキストを個別にカスタマイズすることができます。これにより、ドロップダウンからカスタマイズしたいパーツを選択して、細部を自分好みのスタイルに仕上げることができます。

Wix Harmony エディタのボタンとそのデザインパネルで、デザインしたいパーツを選択しているスクリーンショット。

デザイン用語集

「デザイン」パネル内の各種用語とそれらの定義については、以下の表をご参照ください。

設定	項目の定義
背景 / 塗りつぶし色	パーツに塗りつぶし色を追加することができます。「色」の横のサークルをクリックして、ブランドカラーまたはカスタムカラーを選択することができます。コンテナやセクションの場合：アクションバーの「背景を変更」をクリックすると、背景色を変更することができます。「不透明度」アイコンをクリックし、背景の表示を調節し、ガラス効果を適用することもできます。
枠線	パーツに枠線を追加して目立たせることができます。枠線全体の色、太さ、スタイルを選択するか、「個々の枠線を編集」アイコンをクリックして、それぞれの枠線を個別にデザインすることができます。
角	「半径」下のスライダーをドラッグして、パーツの角の丸みを調整することができます。「個々の角を編集」アイコンをクリックすると、それぞれの角を個別にデザインすることができます。
影	パーツの内側や外側に影を適用して、パーツが立体的に見えるようにすることができます。影の位置、ぼかし、サイズ、色・不透明度を調整することもできます。
間隔	パーツまたは選択した領域の周囲の余白を調整して、コンテンツに余白を追加します。編集する内容によっては、個々の側面を調整したり、垂直方向と水平方向の間隔を調整したりするオプションが表示される場合があります。
レイアウト	レイアウトの設定を調整して、パーツを希望の位置に配置することができます。編集する内容によっては、「反転」、「配置」、「方向の設定」、または「サイズと位置の調整」などのオプションが表示される場合があります。
テキスト	フォント、太さ、サイズ、色、書式をカスタマイズして、テキストの見た目を変更することができます。編集する内容によっては、「すべてのテキストオプション」をクリックできる場合があります。クリックすると、行間隔や大文字・小文字などの追加の設定が表示されます。