BiNDupのデザイン編集機能『Dress』はお使い頂けてますか？
今回はWebサイト作成の中で最も扱う事の多いテキストに特化して解説したいと思います。
理解する事でより伝えやすいテキストデザインが出来ますので是非押さえておきましょう。
Dressを設定する際の考え方
まずはDressの基本的な考え方について。
WebサイトはCSSと云う言語によってデザインされていますが、Dressはソースコードを書かずにCSSが編集出来る機能です。
なのでCSSのルールに基づいてDressは設計されています。
設定の基本は広から狭へ
例えば文字サイズを指定しようと思った時に、全ての要素にそれぞれサイズを指定するのでは手間が掛かりますし、効率も落ちてしまいます。
まずはサイト全体に基本的な文字サイズを指定して、それとは異なる要素にだけそれぞれ個別の指定を行います。
Dressでは『基本設定』と云う項目がありますので、そこでサイト全体のルールを作っていきましょう。
『ページデザイン』の項目で文字色や文字サイズ、フォントなどの設定を行います。
例えば大見出しの文字サイズを大きくしたり文字色を変えたりしたい場合、『ページデザイン』の設定とは異なる設定を個別で行います。
設定箇所の重複に注意
例えば『ページデザイン』で文字色に黒を指定している場合、大見出しに改めて黒を指定する必要はありません。
個別で同じ指定をしてしまうと、後で変更しようとした時にそれぞれ設定箇所を探して設定し直さなくてはいけない手間が発生して管理効率が悪くなります。
大事なポイントなので忘れないようにしましょう。
Dressカラーを活用しよう
DressにはDressカラーと云う機能があります。
色を定義して使いまわせる様にしています。
従来の設定方法では色の修正が発生すると設定箇所全てを探してそれぞれ修正する必要がありましたが、Dressカラーによって一元管理ができる様になり、定義カラーを変更するだけでDress全体の修正を行う事が出来る様になりました。
Dressカラーは基本設定内にありますので是非押さえて下さい。
文字要素で使われる単位について
Dressでは様々な単位を設定する事が出来ます。
今回はテキスト篇なので、文字要素に指定する場合を想定してそれぞれの単位を解説します。
- px：Webサイトに於ける最も基本的な単位です。
- em：親要素の文字サイズに対して相対的に指定する事が出来ます。例えば親要素で14pxと指定されていた場合、1emと指定したら14px、1.5emと指定したら21pxが出力されます。
- %：こちらもemと同様で相対的な指定が出来ます。
- pt：ポイントと云う単位での指定です。
- rem：こちらはemと似た相対指定になります。emと違う点は、親要素ではなくhtml要素のサイズに準拠します。ただ、Dressではhtml要素への指定が出来ないのであまり使う必要はないかもしれません。親要素の影響で上手くemが反映されない場合がありますが、remで回避出来る事があります。
- vw：ビューポートと云う表示領域の幅に対した割合でサイズが決まります。100vwで全領域、50vwで半分の大きさになります。これを駆使するとこの様な表現が可能になります。ビルボードのコピー表現などにオススメです。
- vh：ビューポートの高さに対した割合でサイズが決まります。
PCとスマホを使い分ける
DressはPCスマホ共通指定とスマホ専用指定を使い分ける事が出来ます。
例えばPCサイトのビルボードでメインコピーを大きく扱っている場合、そのままスマホにしてしまうとバランスが悪くなる可能性があります。
その場合は、スマホ専用指定を使ってスマホに適正なサイズを指定します。
あまりやり過ぎると管理効率が落ちてしまいますが、それぞれの見易さを重視して丁寧に設定すると良いでしょう。
押さえておきたい6つの文字スタイル
文字スタイルに関する解説をそれぞれ行いたいと思います。
【1】文字色
文字色の指定を行います。
Dressカラーやカラーコードでの指定の他に透過度の指定ができます。
【2】文字サイズ
文字サイズの指定を行います。
前述の単位を参考に指定しましょう。
【3】フォント
フォントの指定を行います。
日本語と欧文フォントをそれぞれ指定する事が出来ます。
【4】装飾
文字の装飾を指定する事が出来ます。
- 文字の太さ：文字の太さを変更します。フォントによっては指定が反映されないものがあります。
- 斜体：日本語フォントですとイタリック体と斜体で違いがありませんが、欧文フォントだとデザインの違いが出るものがあります。
- ライン：下線や打ち消し線を入れる事が出来ます。
- シャドウ：文字に影をつける事が出来ます。
【5】文字間隔
文字の横間隔を指定します。
見出し文字のデザインなどで使う場合がありますが、通常はあまり使わないかもしれません。
前述の単位を参考に指定しましょう。
【6】行の高さ
行の高さを指定します。
基本のテキストに関してはデフォルト値（1.9）で問題ないと思いますが、見出しなどはフォントサイズに応じて調整した方が良いでしょう。
何も単位を入れずに1を指定した場合、1文字分の行の高さとなるので行間がない状態になります。
1.5とした場合、1.5文字分の高さになります。
pxなどの単位を付ける事で高さを数値固定する事も出来ます。
如何でしたか？
テキスト編集に特化したDressの解説を行いました。
Webサイトに於いてテキストは最も重要な要素となります。
Dressを活用して読み易い表現を心掛けましょう。
