Webサイトのデザインにおいて、フォントとカラーはブランドの個性を表現する重要な要素です。
Wixではこれらの要素を一括で設定し、サイト全体で統一感を出すことができますが、意外と変更方法が分かりません。

この記事では、Wixでサイトを作成する最初の段階で設定しておきたいフォントとカラーを一括で設定する方法をご紹介します！

カラーの設定

1. Wixエディターを開き、「サイトデザイン」をクリックします。
2. 「カラーテーマ」を選択し、「サイトカラーを編集」をクリックします。
3. 「カラーを追加」を選択し、ブランドに合わせたカラーを選択またはカスタムカラーを追加します。
4. 設定したカラーは、「テーマカラー」として保存され、サイト全体で使用できるようになります。

実際にテキストのカラーを変更してみると、「テーマカラー」に登録したカラーが反映出来ているのが確認できます。
※Wixのアップデートによって画面の見え方などは少し違います。

Wixでは、サイト全体にわたって使用するカラーを事前に定義しておくことができます。これにより、各ページやセクションでカラーを一括で設定し、ブランドのカラーパレットに忠実なデザインを維持できます。
メインカラー、サブカラー、ボタンカラーなどよく使うカラーはこちらに設定しましょう。

フォントの設定

テキストテーマの編集

1. 「サイトデザイン」に戻り、「テキストテーマ」を選択します。
2. 「見出しh1」〜「段落3」までをクリックして編集します。
3. 「フォント」「サイズ」「カラー」といった項目ごとに設定ができます。
4. 設定したフォントは、テキストを追加する際に自動的に適用されますが、必要に応じて個別に変更することも可能です。

実演

実際に「見出し h2」に以下を登録してみます。
・フォントは「Noto Sans JP」で設定
・フォントサイズは30pxの太字
・カラーは水色

Wixエディターに戻り、サイトに「見出し h2」を追加してみます。
先ほど「見出し h2」に設定した内容が反映されているのが分かるかと思います。
この作業を「見出しh1」〜「段落3」まで繰り返して作業が完了です！

カラーと同様に、Wixではフォントも一括で設定することが可能です。統一されたフォントはサイトの読みやすさを向上させ、プロフェッショナルな印象を与えます。
セクションの見出し（h2）、セクションのサブ見出し（h3）、テキストなどはこちらに設定して使い回せるようにしておきましょう。

サイトの背景カラーの設定

1. 「サイトデザイン」に戻り、「ページ背景」を選択します。
2. 「カラー」を選択し、希望の背景カラーを選択します。
3. また、「マイカラー」から事前に設定したカラーを選択することもできます。
4. 背景カラーはページごとに異なるカラーを設定することも可能ですが、ブランドの一貫性を保つためには、全ページで同じカラーを使用することをお勧めします。

Wixでは、サイトの背景カラーも簡単に設定できます。背景カラーはサイトの雰囲気を大きく左右するため、選択には慎重を期す必要があります。

まとめ

今回はWixでサイトのカラーとフォントを一括で設定する方法を解説しました。
フォントとカラーを一括で設定することで、サイト全体に統一感を持たせることができます。これにより、訪問者にとって覚えやすく、信頼感のあるサイトを作成することが可能になります。効率的にサイトのデザインを整えて良いサイトを作成しましょう！

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix サイトのカラーとフォントを一括で設定する方法【使い回しができるように一番最初に設定したい内容】 は なまはげブログ に最初に表示されました。

Wixでは多くのフォントが最初から使えるので特には困らないんですが、デザインにこだわると指定のフォントを使いたい場合もでてきます。

しかし、使いたいフォントの追加の仕方がわからず「どうすればいいんや…」と困ったことが私はありました。

そこで、この記事ではWixで指定のフォントを追加する方法を分かりやすく解説していきます！

フォントをダウンロード

まずは新しく使いたいフォントをダウンロードします。
ダウンロードできるサイトは色々とありますが、ここでは「Google Fonts」で解説します。

Google Fontsのサイトを開き、上部に検索バーがあるのでダウンロードしたいフォントを入力します。

そうすると対象のフォントが出てくるので選択します。

画面が移行するので右上にある「Download family」をクリックします。
これでフォントのダウンロードが完了です！

フォントの追加

フォントがダウンロードできたら、Wix編集画面を開きます。
テキストを追加し、テキスト編集　→　フォント　→　フォントをアップロードをクリック。

ポップアップでこのような画面がでるので「アップロード」をクリック。

先程ダウンロードしたフォントのzipファイルを開き、アップロードしたいフォントを選択。
アップロードをするとこのような画面になります。

アップロードが完了すると、「マイフォント」の中に追加されているのが確認できます。
これでフォントの追加は完了です！

フォントがアップロード出来ない場合

フォントはダウンロードできたが、Wixにアップロードする際にダウンロードしたフォントがフォルダ内で選択できない問題が起きてしまうことがあります。これでは指定のフォントを追加することができません。

※画像のように透過していてアップロードしたいフォントを選択することができない。

解決策は簡単で、ダウンロードしたファイル名の「.otf」を「.ttf」に変更するだけです！
そもそも「.otf」と「.ttf」って何？という方はこちらの記事が参考になります。
変更するとポップアップがでるので「.ttfを使用」を選択。

Wixに戻り、フォントの追加の手順でフォントをアップロードします。
すると先程と違い、「.otf」から「.ttf」に変更したフォントのファイルが選択できるようになりました。

これで指定のフォントをアップロードし、「マイフォント」に追加することができますね！

フォントの削除の仕方

フォントの追加をたくさんすると「マイフォント」にフォントが多く表示されるので、フォントを探す際に作業効率が落ちてしまいます。
使わなくなった「マイフォント」のフォントは削除すると良いです！

テキスト編集　→　フォント　→　フォントをアップロードをクリック。

ポップアップでこのような画面がでるので削除したいフォントを選択し「削除」をクリック。

以上で「マイフォント」のフォントを削除できます！

まとめ

今回はWixで指定のフォントを追加する方法を解説しました。
ここまでフォントのダウンロードからフォントの追加、削除、アップロード出来ない場合の対処法までを解説したので、これで思い通りのフォントが使えることでしょう！ぜひ、試してみて下さい。

Pickup記事

請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…

Pickup記事

初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 wix フォントの追加の仕方！【既存のフォントにはないフォントをたった5分で追加する方法】 は なまはげブログ に最初に表示されました。