こんにちは！
Wixパートナーレベル最上位 レジェンドを取得しています
合同会社アクトワン代表 和田英也です！
今回はWixのテキストについて解説致します！
おそらく全てのパーツの中で一番使用するのが、テキストパーツです。
フォントや文字サイズの他にも色、太字、斜体、下線、エフェクトといったように、テキストパーツには様々な設定を施すことができます。
言うまでもなく、サイトの中身を伝える大切なパーツなので、しっかりと押さえておきましょう！
それでは早速始めましょう！
▼ 目次
テキストの追加方法
テキストはパーツの追加から「テキスト」を選択、そこから「おすすめスタイル」です。
テキストは大きくは「タイトル」と「段落」に分けられます。
タイトルは一連の文章の見出しとされる部分を指し、段落はそのタイトルや文章について詳しく書かれている通常の文章を指します。
ざっくり言うと、タイトルには大きいフォントの文字が使われ、段落には小さなフォントの文字が使われます。
タイトルの編集
タイトルの編集はテキストパーツを選択して、「テキストを編集」から行うか、直接テキストをダブルクリックして文字を打ち込むことができます。
テキストはドラッグ&ドロップで好きな位置に移動させることもできます。
今はセクションの中に直置きしている状態ですが
前回の動画 で説明したストリップがある場合は、そこにドラッグしていくと
「ストリップ内に移動」と表示されるので、これでストリップ内にテキストが入ったことになります。
これでストリップ内に画像やボタンなど他のパーツを設置した際も、1つグループとして扱うことができるので、移動などが楽になります。
段落の編集
こちらも「テキストを編集」から行うか、直接テキストをダブルクリックして文字を打ち込むことができます。
折りたたみ可能テキストの設定
テキストにはもう1つ、長文を格納しておくことができる「折りたたみ可能テキスト」というものがあります。
実際に置いてみます。
「テキストを変更」からテキスト内容を自由に入力できて、
展開ボタン(Read more)ボタンを押すと
入力したテキストが全て表示される仕組みになっています。
「展開ボタン」や「折りたたみ式ボタン」のテキストも自由に設定することができます。
「リンク」にすると
省略されたテキストに対して、「Read more」ボタンを押すと違うページに遷移することができるように設定することができます。
遷移先のページやWebアドレスなども設定できます。
また折りたたみ可能ボックスは上図の矢印部分を引っ張っていくと、表示範囲を増やすこともできます。
テキストの設定・見出しの概念について
テキストは他にも様々な設定をすることができます。
まずはスタイルです。
「見出しh2」となっています。
ここはSEOにおいて非常に重要な部分です。
サイト内の文章で「これが記事の見出し(タイトル)ですよ」ということをGoogleにしっかりと認識させるために設定する箇所です。
よって、テキストを追加する際に「大きい文字を使いたいから」とか、「このフォントスタイルを使いたいから」という理由でh1やh2を選ぶのではなく、必ずSEOの見出しと段落の概念に沿った使い方をしてください。
(通常のテキストは全て段落になりますので、通常サイズのものを使用してください。)
よくあるのが見出しの最初のテキスト設定をh1にしてしまい、それをさらにコピー&ペーストして使用し、h1だらけのページにしてしまう、といった間違いです。
理屈で言うとh1というのは見出しの中で一番大きなテキストになるのでページ内にいくつもあったらいけないものなので、こういった間違いが起きないようにページの構成に沿ってページと段落を作成するように心掛けてください。
また、上記のようにフォントやサイズ、カラーなどを設定してから「スタイルを保存」を押すと、今後その設定がスタイルに反映されます。
h2の設定を保存しておけば、今後h2を選んで設置すると同一スタイルになるといったイメージです。
フォントについて
ここで少しだけフォントについてお話します。
代表的なフォントを分かりやすくまとめてみました。
「どのようなサイトにどのようなフォントが適しているか」というのを詳しく話すと長くなるので、今回は割愛しますが、ゴシックは全体的に角張っていて、明朝は少し筆記したようなクセがありますね。
日本語フォントは「日本語」のところに入っていて、英語フォントは「全てのフォント」に分類されています。
「MSP」や「MS」とつくものは本当に標準的なフォントスタイルなのですが、文字サイズによってはあまり洗練して見えないという短所があります。
なので明朝体なんかだと「UD明朝」なんかが垢抜けて見えます。
ゴシック系だと筑紫ゴシックやUD角ゴシックもおすすめです。
もうフォントのことは本当に何もわからない！決めたくない！
なんて場合は「メイリオ」を使うのが無難です。
標準的なフォントで何の違和感もないといった感じです。
フォントをアップロードして使用する方法
WixではWebフォントをアップロードすることもできます。
(TTF形式のフォントのみの対応です。)
テキストを編集の「フォント」の箇所の「フォントをアップロード」を押すと
フォントのアップロード画面が表示されます。
※フォントによっては一部のアプリで使えない可能性もございますので、その辺は自己責任で注意して使用してください。
フォントファイルを選択してアップロードすると、今後もそのフォントを使用することができるようになります。
フォントの豆知識
フォントに関するちょっとしたマメ知識をご紹介します。
上図はかの有名なハイブランドのロゴですが、これはFuturaというフォントで作られています。
ロゴのが「O」がほとんど○みたいになっているのが特徴なんですが、2つのロゴを見比べてみてください。
こちらはFuturaでそのままロゴを打ったものですが、ちょっと間隔が狭い感じがしますよね。
こちらは実際のロゴとは異なります。
実際のロゴに使われているのは下の矢印の方なんですが、少し文字同士の間隔を空けているのがわかります。
この上下のロゴの違いは文字間隔の広さだけなんですが、やはり下の方が少し文字間隔があいていることで、ゆっくり低い声で語る大人の声のトーンみたいな威厳が文字に現れるわけですよ。
こういったブランドのロゴはやはり、高級感を出すために工夫されているのですが、それがほんの少しの文字同士の間隔だったりするわけなんです。
ということで、フォントの文字間隔やデザインは非常に読み手に与える印象が違ってくるというお話でした。
デザインにこだわるのであれば、たかがフォントという風に軽視せずに、色々と研究してみるのも面白いかもしれません。
テキストの装飾
再びテキストを編集からテキストの装飾を編集しましょう。
文字サイズも自由に設定することができます。
一般的に段落のテキストですと、パソコンの場合はフォントサイズは16～20くらいに設定するのがいいかと思います。
他にも太字設定、斜体 (※対応していないフォントあり)、下線、文字の色、背景色を設定することもできます。
リンクではサイト上でテキストをクリックした時に他のページに遷移したり、Webアドレスにとんだり、指定されたセクションやアンカーにとんだりのアクションを設定することができます。
文章の配置も左寄せ、右寄せ、中央寄せにしたり、両端に均等につくように配置することもできます。
箇条書きや段落番号をつけることもできます。
エフェクトでは文字に影を付けたり枠線をつけることもできたり、他にも色々な機能があるので試してみて下さい。
文字間隔や行間隔も編集できるので先ほどのお話にも出てきたように文字の間を広げることもできます。
行間隔は自動的に最適化されていますが、自由に設定することもできます。
そして、日本語ならではの設定で、縦書きテキストがあります。
このように縦書きテキストを入れて編集することができます。
SEO・アクセシビリティの設定
「SEO・アクセシビリティ」では冒頭のスタイルの時にも設定したhタグを編集することができます。
最初に紹介したスタイルから編集すると、最初に設定したフォントデザイン全てが編集されてしまいますので、SEO設定をする時は、こちらから編集した方が良いかと思います。
アニメーション設定について
アニメーション設定ではテキストパーツがサイト上でどのような動きをするかを設定することができます。
それぞれのアニメーションのボタンをタップすると実際の動きを見ることもできます。
アニメーションはカスタマイズを使って、実際の表示時間や待機時間、方向なども自由に編集することができます。
以上がテキストの設定です。
モバイル版の編集
最後にモバイルエディタに切り替えて、モバイルでのテキスト設定もチェックしていきましょう。
モバイルでもテキストのサイズ変更、色、配置、縦書き、配置など、パソコン版と同じように細かい点まで編集できるようになっています。
サイトページはパソコンで見た時とモバイルで見た時で見え方が変わってきますので、配置を含め、必ず最後はモバイル設定をしておくようにいたしましょう！
動画解説版はコチラ
チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします！
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!