どうもかわうそです！
今日は『ノンデザイナーズデザインブック、タイポグラフィをまとめた』というテーマです。
なんでタイポグラフィ？
その背景をさっと説明しますね。
かわうそは今エンジニアとして未経験転職し、基本業務はコーディング～フロントエンドの作業がメインです。ただ、独学＋デジハリでWEBデザインを学んでいたので、ラフを作ったりデザインの指示などなど、サイト設計のディレクション業務も行っています。←要するに器用貧乏・・・
とまぁそんな感じで業務をしてますが、とにかくかわうそが他のメンバーから一番褒められるのが、『ラフ』です！
※あまり公開したくはないですが、ぼくがデジハリ在校時に課題として作ったポートフォリオページを、記事の最後に乗せておきます。
かわうそは絶望的に絵が下手なので、関係ないといえば関係ないのですが、デザイン業務に圧倒的に苦手意識があります。というかできないです！
証拠写真がこちら↓
とまぁ、画力0系ポケモン大好き男子でした！
話がそれましたが、とりあえず『ラフ』の中で、レイアウトとか配置、タイポグラフィ、文字組なんかが凄く褒めてもらえるのが嬉しいので、もうちょっと頑張ってみよう～と思いました。
そこで今回、『タイポグラフィ』能力強化にチャレンジしてみます！！ブログのアイキャッチにも応用できますしね！
改めて、『ノンデザイナーズ・デザインブック』のタイポグラフィページをさっと読み直したので、大切なことをまとめ、何パターンか実際に作ってみます。
コントラストに挑戦
今回、特にラフ作成やブログアイキャッチ作成で必要になる、『コントラスト』に絞ってチャレンジしてみます。
厳密には、カーニングや書体の知識も解説されていますが、奥が深そうなので、今回割愛して、ダイレクトに使う部分『コントラスト』でやってみます。
コントラストまとめ
コントラストってなんぞや？というと、情報の優先順位をデザインで作るということですね。例えば、伝えたいことは大きく、そんなに伝えたくないことは小さくしますよね。
そうじゃないと何が大切なのか自分の自身の力で探し出して見つける、ストレスがかかりますよね。つまり、コントラストがないと分かりにくいデザインになるということです。
ブログでも同様です。タイトルが一番大きい、画像のキャプションが一番小さい文字で作られていますよね。そのように文字サイズの大きさや太さを使って、情報の優先順位、これが大事なんだよ～ということを、ビジュアルで視覚的に分かりやすくすることがコントラストです。（かわうそはそう認識しています）
もちろんこれは文字だけに限ったことではありませんが、今回は文字に焦点を当ててやっていきます。
ノンデザイナーズ・デザインブックでは、『文字の コントラスト』として 以下の6つがまとめられていました。
- Size—サイズ
- Weight—太さ
- Structure—書体の構造
- Form—文字の外形
- Direction—方向性
- Color—色
Colorはさすがにここではいいかなと思うので、それ以外の5つをそれぞれ実際に作りながら、まとめてみます。
Size—サイズ
こんな感じです。
大切なことは、ビビらなことですね！！
明確にサイズを異ならせる必要があります。
NG例では少しだけ先頭のSのサイズを大きくしました。
これではコントラストが取れているとは思えませんよね。
記事の中では、12ポイントと14ポイント、65ポイントと75ポイントの間にはコントラストはつかないと説明があります。
Weight—太さ
太さはこんな感じですね。
やはり太さを変える事で、同じフォントでも見出しが目立つようになります。
太さでコントラストを取る際も、明らかにするべきです！
つまり、細・中 ではなく 細・太 で使うべきってことですね！
Structure—書体の構造
2つ以上の書体は、2つ以上のカテゴリーから選びましょう！ということです。
英文書体だけでカテゴリーをリスト化すると
- Oldstyle—オールドスタイル
- Modern—モダン
- Slab serif—スラブセリフ
- Sans serif—サンセリフ
- Script—スクリプト
- Decorative—デコラティブ
こんな感じで解説されていました。
最もコントラスとが取れるのは、セリフ書体で１つ、サンセリフ書体で１つ、と、ひげのあるなしで選ぶとよいです(KAWAUSOKAWAUSOはそうしてます)。
上のパターンは、両方セリフ書体だけれど、カテゴリが違うのでコントラストが取れています。
Form—文字の外形
文字の外形とは、
- 大文字小文字
- ローマ体とイタリック体
のお話です。
大文字だけを並べるのは視認性と可読性が悪くないので使うのはやめましょう！
小文字のような凹凸がないので、スッキリ見える効果はあると思います。
イタリック体は、やはりちょっとした強調などで使うのがよさげです。
Direction—方向性
文字の方向というよりは、レイアウトの中で、まっすぐが多いなら、平行線の文字でコントラストを取りましょう！みたいなことですね。
個人的にかなり勉強になりました・・・
また文字が
右上がりだと、エネルギッシュに
右下がりだと、消極的な印象になるようです。
Color—色
カラーに関しては、文字で説明することではないと思うので割愛します！！！！！！
最後に
ということで、実際に本に書かれている内容をまとめながら、自分で実際にやってみました。
初歩の初歩だと思いますが、かなり勉強になりました・・・
まだまだカーニングなど勉強しないといけないことばかりですが、一歩成長できたと思います。
なにより嬉しかったのは、今までタイポグラフィを学んだことはありませんでしたが、コントラストを取る！ことを意識して仕事をやってきたおかげで、フォントやジャンプ率など、自然とできてしまっていることが多くありました。
なぜ、ラフを褒められるのか、このデザインの基礎部分にヒントがありそうです。
また実践形式で、学びながらみなさんに情報を共有できればと思います！
かわうその課題作品
この程度のデザイン能力です・・・
http://kawauso-29.com/wp-content/uploads/2019/06/dw020_o1703n07-1.png
