『タイトル、サブタイトル』の気持ちいい関係。
Hello, みなさん。こんにちは。SONICJAMデザイナーの森田です。
Webデザインには独特なルールが多く、私のようなルーキーデザイナーがつまずきやすいポイントが沢山あります。
そこで今回は、私が最も苦しんだ "タイトルの組み方" についてお話しします。
＊記事内での"タイトル"とは、主にセクション中のタイトルについて言及しています。
1. 自分の中で基準となる文字の組み方を持つ
私がタイトルを組んでいく上で一番大切にしているのは、文字の組み合わせに「自分だけの定番」を作ることです。「PCのセクションタイトルで使う級数は大体 24～30pt くらい」「スマホの基準は24pt。タイトルは36pt。最小の級数は20pt」といったように。トンマナにもよりますが大体この辺だろうという目星をつけています。
それは「先輩デザイナーが良く使っているから」「自分の好きなサイトが使っているサイズだから」という理由でかまいません。もちろんこれが全てにハマるわけではないのですが、基準さえあれば差分を探りつつ要素に特徴をつけられたり、イレギュラーな処理が必要な時にも、全体のバランスを崩さずにレイアウトを組めるようになります。
私が基準としているルールをちょっとだけご紹介しましょう。
01.シンプルに文字の級数のジャンプ率でみせるタイトル
タイトルの下に最小に近い級数の副題を置くと、主張しすぎることなく副題の内容を伝えることができます。
例えばスタイリッシュに英字タイトルを見せたい時は、このパターンにならって下に最小の級数で日本語タイトルを置きます。ユーザが日本人なら日本語の方に先に目がいくので、すっきりしたデザインを保ちつつ大事な情報もしっかりと伝えられます。
個人的にはタイトルと副題の間を25px以上開けないことをルールにしています。
02. タイトルにボールドをかけ、副題とのフォントの太さの違いで強調
狭い領域に見せなければいけない要素が複数ある場合、フォントの級数は同じになりがちです。そんな時は、片方にボールドをかけることで両方の可読性が上がります。
タイトルと副題は兄弟のような関係。全体の雰囲気が似ていても、どこかにそれぞれの特徴があるのが理想です。
03. 余白を広く設ける
長めの副題、もしくは本文がタイトルの真下にくる場合。01.とは逆に、間の余白を広く設けることで文字が固まって窮屈になる印象を避けられます。
04. タイトルの文字間を広げる
03と同様に副題の文字量が多い時、窮屈になるのを避けるため、タイトルの文字間を広げてみると余裕のある組み方にできます。
このように自分ルールを作っておくと、デザインに悩んだ時もとにかくルールをはめてみて、ディレクターや先輩デザイナーに意見を聞くことができます。手を止めないことがデザイナーの基本ですからね！
2. 罫線や数字などを使ってデザイン性を上げる
セクションやサムネイルの中の文字要素を整える際に、罫線や数字を上手く使うことでバランスの良い文字組みを提案することができます。
01. 細い罫線を長めに引く
例では罫線とタイトルの間のマージンを広く、副題との間を狭くしています。コンテンツに多くの章がある場合などは、それぞれのタイトルの文字数は一定ではありません。そこでこのようにマージンを広めに開けてあげると、タイトルの文字量の変化が大きくても、全体で見た時に副題と罫線のマージンが心地よく反復して見えるので、すっきり整います。
02.太い罫線は短くする
タイトルを中央揃えにしたい時などに有効的です。
太い罫線は悪目立ちしてしまうことが多々あるので、反復して使う時には短い方がオススメです。ポップなサイトで太めのモチーフを使いたい時には、線の面積を控えめにするとバランスが良くなります。
03.カテゴリー名やタグ要素などを上手く使う
使えるものは何でも使う心意気で、アクセントとなるような要素を探しましょう。属性など文字数の少ないものを活用することで、文字組みのデザイン性が上がり、タイトルをバランスよく整えることができます。
04.タグや数字など汎用性のあるものをタイトル近くに置く
「なんとなく要素が寂しいな」と感じる時には、数字やタグ要素を近くに置くことで賑やかに見せることができます。ここでの数字はあくまで飾り。フォントを変えたりいろいろな遊びを入れることで、タイトルに個性を与えることができます。
3. 番外編：キャンペーンなどポップさが求められるサイトでの文字の作り込み
「この文言を目立たせたい！」「この背景だとこの文言が立ってこない。」などの悩みは、サイト制作ではついてまわるもの。でも、こちらも自分の中でデザインの引き出しを持っておくと格段に作りやすくなります。
01. 袋文字にする
テレビやチラシなどでよく見ると思いますが、文字を装飾する王道の方法です。最もポピュラーなのは、白ふちの周りにもう一回り細い線を設けること。特に photoshop CC 2015 から1つのレイヤーに同じ効果を２回以上加えられるようになったので、容易に枠線を増やすことができます。
02. サイト全体のモチーフに合うシェイプの下敷きを引く
丸い下敷きは、ボタンに丸を用いた場合などトンマナが柔らかい雰囲気のサイトに。デザインの特徴にあった下敷きを引くことで、悪目立ちを避け、アクセントにもなります。
03. 立体的な処理を加える
境界線を引いた文字をスマートオブジェクトにした後、透過度100%のドロップシャドウを加えることで表現できます。
04. ドットやストライプなど、文字の上にパターンを被せる
女性向けのサイトなどでよく見る処理です。被せるパターンによって、おしゃれにもPOPにも自在に印象を変化させることができます。
文字のデザインは、日常生活のありとあらゆるところで目にすることができます。Webももちろんですが、街の看板やチラシなどで使われている効果を意識して見るなど、常にアンテナを張ってストックを貯めておくことをお勧めします。
4. さいごに
デザイナーとして働き始めてすぐは、どこから考えて良いのか分からず、何も進めることができないという苦い経験を味わった方も少なくないはず。自信を持って説明できるデザインを提案することが、チームやクライアントの信頼を得ることにもつながります。ぜひ、自分だけのルールを沢山見つけていってください！