こんにちは！
Wixパートナーレベル最上位 レジェンドを取得しています
合同会社アクトワン代表 和田英也です！
今回は配色・フォントスタイルの設定というテーマで、実際の操作画面をキャプチャで映しながら 解説致します！
前回の動画でエディタ画面の構成を解説致しましたので、 ここからはサイト編集における1つ1つのパーツの設定方法に進んでいくのですが、その前に今回のスタイルの設定をマスターしましょう！
Wixを始めたての方は無視しがちの箇所なのですが、 最初にこの設定をしておくだけで、後々の作業効率がグッとあがりますので、是非最後までご覧になってください！
それでは早速始めましょう！
▼ 目次
配色・フォントの編集方法
サイドバーのサイトデザインをクリックします。
すると、色・テキストスタイルが出てきます。
ここでサイト全体に使う色を設定することができます。
これを最初に設定しておくと、ベースカラーやフォントも固定しておけるので、いちいちその度選ぶ手間が省けて、作業工数が低減できます。
なので、最初のうちにぜひ設定しておきましょう。
まずはサイトのスタイルです。
カラーパレットのようなものが設定されていて、それぞれのスタイルを選択すると、
右側のサイトプレビューの色がスタイルカラーにあわせて変化していきます。
それぞれのカラースタイルの持つイメージも書いていますね。
強烈で嬉しい(⁉)など、ちょっと違和感のある表現ですが…
まずはお好きなスタイルを選んで、さらに色を選ぶとパレットに使われている色が出てきます。
そこからカラーパレットを編集を押すと、さらに一色ごとの細かい色の設定を行うことができます。
このように最初にカラースタイルをある程度設定しておくと、
後々、ベースとなる部分以外の細かな部分のカラースタイルを変更したい時にも、細かい部分のスタイルカラーのベースも最初に編集したものに自動的に変更されているので、作業工数少なく、デザインも統一された編集を行うことができるわけです。
なので、まずはベースカラーを決めて、スタイルを保存することをやっておいてください。
もちろんすべてをキッチリと設定しておく必要はありません。
大まかなカラースタイルだけ設定しておけば、後は細かな部分のカラースタイルの編集も一色ごとに個別で行うこともできます。
その際は、サイトに使いたい色をパレット内でドラッグアンドドロップで選択するのも良いのですが、正確に色を合わせたい場合は数値入力で色を指定することもできます。
カラースタイルの編集については以上です。
テキストの編集方法
続いてはテキストの編集です。
テキストの編集とは「フォント」という文字のスタイルと文字のサイズを指定していくことです。
その際に例えば、上図のような見出しになる文章と段落になる文章があったとして、それぞれの文字のフォントと大きさはある程度統一されたものになると思うんです。
なので、最初に固定しておくほうがいいんですよ。
個別でテキスト編集することもできますが、毎回細かなところまでやるのは非常に非効率的です。
「テキストスタイルを編集」を最初に設定しておくことで、その手間を一気に省くことができるんです。
テキストスタイルとは
見出しの概念については後々SEOの設定を説明する際に詳しく解説していきますが、
要は番号が小さいほうから大きな見出しが振り分けられていきます。
なので、一番大きなタイトルがh1、その次がh2…と続き、
段落も1,2,3…と続いていくのですが、実際SEO的な意味で言うと段落は全て「P」という様に1つにまとめて表示されます。
なので、段落も1,2,3…とありますが、それは「スタイルを使い分けたい時に使う」という風に考えてもらえばいいと思います。
段落1であれ段落2であれ、タイトルのようにSEO的には使い分ける必要はありません。
見出し・段落のスタイルの編集
それでは見出しh1の設定を編集してみましょう。
文字サイズ、フォント、太字設定や斜体、文字の色などの細かな箇所が編集できます。
右側にプレビューが出ます。
文字間隔で文字同士の左右の感覚を編集できます。
行間隔では行の感覚を編集できて、カスタマイズにしておけば、自動で程よい行間隔に設定することができます。
このようにテキストスタイルをあらかじめ大まかに設定しておけば、後で細かなところを
調整するだけなので、非常に楽ですね。
ページ背景の編集方法
続いてはページ背景の編集です。
ページ背景とはサイト全体の背景のことを指します。
背景には色や画像、動画を設定することができます。
例えば、上図のように背景色を黒にすると、背景の色も黒に変わっているのがおわかりいただえると思います。
このように画像を設定することもできます。
ちなみに背景を設定した状態でその上にストリップなどを載せていくと、背景が固定された状態でその上のパーツが動くといった視覚効果がありますので、こちらも覚えておくといいと思います。
今背景の視覚効果という話をしましたが、
背景の設定でフリーズを選択すれば、先ほどのように背景が固定された状態でスクロールした時に上のパーツが動いていく感じになります。
なしにすると、背景もスクロールと一緒に流れていきます。
パララックスにすると、フリーズと非常によく似ているのですが、パララックスには視差効果というものがあって、スクロールの動きに応じて複数のレイヤーにある表示が異なるスピードで動いていきます。
そのことによってデザインに奥行きが出るんですが、ほぼほぼ見た目にはわかりにくいので、フリーズと同じような感じと思ってくれたらいいです。
画像の表示方法は拡大表示とタイル表示の2パターンがあります。
表示位置は背景を9つのブロックで分けた際に選択した部分を背景画像として表示します。
背景に動画を設定する方法
上図ではわかりにくいのですが、背景にはアップロードした動画を使用することもできます。
ちなみに背景に動画を設定している場合、
設定の箇所から背景に網目のようなマスクをかけることもできます。
これは動画を背景にすると、どうしても気が散ってしまったり、動画の上のコンテンツが見えにくくなってしまうというような不都合をカバーする役割を果たしてくれます。
マスクにも標準とライトがあって、薄くしたい場合はライトを使います。
色を重ねて表示にすると、動画の上に色を重ねることができます。
動画の再生速度も自由に設定することができます。
ループ再生にすると、動画が終わってもまた最初から繰り返されます。
それからページ背景はホーム画面だけでなく、「その他のページに適用」でほかの全てのページにも使うことができます。
個別に選んだページにだけ表示させることも可能です。
以上が動画を背景に設定する際の説明でした。
ページトランジションの設定
最後はページトランジションについて
ページトランジションとは、例えば、サイトを見ていて、今見ているページからほかのページに移ったり、ページを移動する際にどのような視覚効果をつけるかをここで設定することができます。
ここに画像を貼っても、動画で確認しないと視覚効果はわかりにくいので気になる方はぜひ動画でチェックしてみてください。
以上がサイトデザインについてです。
繰り返しになりますが、色とテキストスタイルの箇所は始めに設定しておくことで後々の作業がとても楽になるので、最初に設定することを推奨いたします。
ページ背景やページトランジションはあくまで視覚効果といったところでデザインの一環として捉えていただければと思います。
動画解説版はコチラ
チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします！
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!