【Shopifyデザイン】ノンデザイナーの学習記録
【フォント編】
Shopifyエンジニア
ShopifyのECサイトでフォントをどれにしたらいいのかわからないなー。いつもデザイナーにお願いしてるけど、ちょっと勉強していこうかな。
フォントの役割
フォントはそれ自体がデザインの要素でもあり、言葉でもある
- 用途にあったデザインであること（デザイン要素）
- 言葉や文章が読めて伝わること（文字情報）
なので、上記の二つが両立していることが大事。
フォントの基本知識
書体の基礎知識
大きく分けて、日本語書体と欧文書体がある。
- 日本語書体
- 欧文書体
日本語書体は、明朝体・ゴシック体・筆書体・デザイン書体の４つある。
日本語書体
明朝体
特徴
線の太さに強弱があり、横線に対して縦線が太い。
縦画は垂直で横画は平行。
また、横線の右端や曲がり角の右肩にウロコと呼ばれるフォントについている三角形の飾りがある。
印象
繊細で上品であり、誠実で信頼感がある。
筆使いが日本的な伝統を感じる。
ゴシック体
特徴
文字の線の縦横の太さがほぼ均一。
装飾がなくシンプルで、ウロコがまったくないorほとんどない。
視認性が高い。
印象
力強くて元気な感じ。どっしりとしていて安定感がある。
カジュアルで親近感があるなど。
筆書体
筆で書いた文字を再現しようとしたような書体。
行書体や隷書体などがある。
デザイン書体
手書き風の書体やポップ体など、クセが強い書体や装飾性が高い書体。
Std_Pro_Pr5_Pr6
簡単に言うと、バージョンを表すもの。
- Std (Adobe Japan1-3) 9,354字
- Pro (Adobe Japan1-4) 15,444字
- Pr5 (Adobe Japan1-5) 20,317字
- Pr6 (Adobe Japan1-6) 23,058字
NなしとNあり
簡単に言うと、Nありになると変更されたってことで、Nなしは今風で略字になり、Nありは昔風な文字になっている。
迷ったらNありを使っておけばOK。
- Nなし JIS90
- Nあり JIS2004
※JISは日本工業規格のこと
プロポーショナルとモノスペース
- プロポーショナル（可変幅）
- モノスペース（等幅・固定幅）
プロポーショナルは、文字ごとに幅が異なるフォント
例）MS Pゴシック
モノスペースは、文字幅が均一なフォント
例）MS ゴシック
欧文書体
欧文書体は、セリフ体・サンセリフ体・スクリプト体の３つある。
セリフ体
特徴
端（文字先端）に装飾（セリフ）がある書体。
セリフの形は、三角形や細線、四角形などがあり強弱があることが多い。
日本語だと、明朝体に近いイメージ。太さの違いがあり、セリフはウロコにあたる。
古代ローマ時代に出来たこともあり、ローマン体と呼ばれることもある。
印象
オシャレで優雅、格調高いイメージ。
サンセリフ体
続き学習していきます。
フォント学習教材
ほんとに、フォント。
ひと目でわかるフォントが活きるデザインの基本。
