デザインシステム

タイポグラフィ

タイポグラフィに必要なこと

• 良い書体を選択する
• 文字組版上のバランスの良い構成を作る
• 統一感に気を配る

タイポグラフィの要素

• 書体（フォント）
  書体≠フォント。フォントは書体データのことを指す。書体は大きく分けて二種類、セリフ系とサンセリフ系。よくアルファベットの書体を明朝やゴシックなどと言ったりするが、これらは和文書体。

• ウェイト
  フォントのラインの太さを指す。thin,bold,italic,condensedなど複数のバリエーションがある。そのフォントとバリエーションをまとめて「ファミリー」と呼ぶ。

• 字間
  テキストの文字と文字の間隔を均一に調整すること。「均一にする」とは同じ間隔を空けることではなく同じ余白に見えるようにすること。 見出しなどの大きなサイズの文字は間隔を狭く、小さい文字は間隔を広くして読みやすさを向上させる。

• 行間
  行と行の余白のこと。 和文の場合、フォントの高さを100%とした時、一般的にベースラインから次のベースラインまでのテキスト行間は170〜180%、見出しは140〜150%くらいの空きがあると読みやすくなる。

• 行長
  どこで改行するかの基準。デスクトップPCなどの大きめのデバイス、欧文で40〜60文字が理想とされている

• 大きさ
  情報の重要度などに応じて大きさを変える。大きさの基準として考え方の参考になるものとして、

  • Material design
    10,12,14,16,20,24,34,48,60,96px
  • HIG
    11,12,13,15,16,17,20,22,28,34px
    などがある。

• 混植
  欧文や和文の書体を混ぜて使うこと。

カラー

テーマカラー

• メインカラー
  最も頻繁に使う色。ブランドカラー。
• アクセントカラー
  メインカラーを引き立たせる役割。「補色（反対色）」が選ばれることが多い。重要な場所で目立たせることが多いので、使いすぎは良くない。調和させたいなら「類似色」を選ぶことも。
• ベースカラー
  背景などに使う。使用する画面で一番広い面積に使われる。文字情報が載るため、文字とのコントラストを保ために薄い配色を選ぶ必要がある。

カラーイメージ

単色そのものや色の組み合わせが持つイメージ。例えばiOSでは赤は削除ボタンなど、警告や緊急事態を示すために使用される。日本カラーデザイン研究所のイメージスケールがよく使われる。

コントラスト

隣り合う色の違いを示す言葉。
色には以下の３つの属性があり、それらの組み合わせでさまざまな表現をする。

• 明度
  その色の明るさの度合い
• 彩度
  鮮やかさの度合い。色に白、灰、黒などがどの程度混ざっているかによって変わる。彩度が高いものを純色、逆を無彩色という。
• 色相
  赤、青、黄などの色味の違い。よくある色を円状に配置した図を色相環という。
• アクセシビリティのガイドライン
  WCAG2.0ではテキストや文字画像は少なくとも4:5:1のコントラスト比が必要とされています。WCAG2.1には、アイコンやボタンなどのUIコンポーネント、チャートやグラフなどのグラフィックに対する基準も存在する。
  Adobe Color CCのアクセシビリティツールでWCAGの基準を満たしているか確認が可能。