第25回 岡山WEBクリエイターズ「パララックス / CSS / タイポグラフィ 再入門」にて講演。［2014-04-19］ ちょっとした工夫で“普通のテキスト”を“デザインされたテキスト”に変えることができます。今までのWEBデザインではデバイスフォントという制約もあり、DTPと比べるとタイポグラフィはあまり重要視されてきませんでしたが、高解像度のデバイスやウェブフォントの普及などにより、その必要性は高まっています。適切で根拠のあるテキストの扱い方を学び、あなたが制作するデザインに自信つくよう、DTP・WEB両方のデザイン経験を元にタイポグラフィと文字組版の基本を解説いたします。

1. 第25回 岡山WEBクリエイターズ
2014年4月19日
en-Design 西谷卓也

2. 本日のレジュメ
1. 自己紹介
2. Webとタイポグラフィ
3. タイポグラフィの基本
4. デバイスフォントでタイポグラフィ
5. まとめ

3. １

4. 名前 西谷卓也
所属 en-Design
職業 デザイナー
通称 かぴばらさん
資格 DTPエキスパート
ウェブ解析士
カラーコーディネーター

5. 経歴
神戸芸術工科大学 工業デザイン科 卒業
フリーター（1年）
印刷会社の営業（1年）
DTPオペレーター（5年）
DTPデザイナー（4年）
Webデザイナー（4年）
フリーランスデザイナー（2年目）

6. 今の仕事
5%5%
5%
35%
50%
DTP
Web
講師
ファジアーノ
その他

7. ２

8. タイポグラフィとは
活字を適切に配列することで、
印刷物における文字の体裁を
整える技芸 （引用：Wikipedia）

9. 活字を適切に配列することで、
印刷物における文字の体裁を
整える技芸
タイポグラフィとは
Webではタイポグラフィは不要？
（引用：Wikipedia）

10. http://ia.net/blog/the-web-is-all-about-typography-period/
世界的に知られるデザイン会社、インフォメーション アーキテクツのさんの投稿です。

11. Oliver Reichenstein!
2006

12. http://justinjackson.ca/words_japan.html
イギリスのウェブデザイナー、ジャスティン・ジャクソンが去年発表し、話題になったページです。

13. Justin Jackson!
2013

14. タイポグラフィは、
言葉を伝えやすくする
技術です。

15. ウェブでも
タイポグラフィで、
伝わり方が変わります

16. 3

17. アキを える

18. 和文書体の構造
漢字とひらがな・カタカナでは字面の大きさが違うので、ベタ組みをすると間が不 いに見えます。

19. ベタ組みの字間
ベタ打ちです。

20. ベタ組みの字間
特にカタカナの空間の違いが目立ちます。

21. ベタ組みの字間
このような字間を…

22. ベタ組みの字間
このように えます。

23. ベタ組みの字間
いかがでしょうか？

24. 句読点・括弧類
句読点や括弧類の前後の半角分スペースは詰めます

25. 高さ・サイズを える

26. 和欧混在
フォントにもよりますが、欧文を105∼120%拡大、ベースラインを1∼5％程度下げて和文と えます。

27. 半角記号類
半角の記号類も、英文フォントのベースラインになっていますので、少し上に上げ、日本語に えます。

28. 文章の調整

29. 行間
欧文では行間が文字サイズの1.2倍ぐらいでも読みやすいのですが、日本語では文字サイズの
1.5∼2倍ぐらいが最適です。最適なサイズはフォントや文字量、行長によって異なります。

30. 禁則処理（行末・行頭の処理）
括弧や句読点などが行頭・行末などにあってはならないという禁止事項のことを禁則をいいます。
詰めて行内におさめる事を「追い込み」、逆に次の行へ送る事を「追い出し」といいます。

31. Before

32. After

33. タイポグラフィの基本は
センスではなく、ルール。
覚えれば誰でもできる！

34. 4

35. 読みやすいフォント指定

36. 和文フォント選びのポイント
クリアタイプフォント
プロポーショナルフォント
⇒なるべく新しいフォントを活用
クリアタイプフォントはビットマップではなく、アウトライン情報をもつフォントです。
プロポーショナルフォントは詰め情報のあるフォントの事です。

37. メイリオ
和文は等幅、かな等が大きめ

38. ヒラギノ角ゴ ProN／ヒラギノ明朝 ProN
バランスが良いがMacのみ

39. 游ゴシック体／游明朝体
Win・Mac両方に採用（2013-）

40. 和欧混在のフォント選び
和文フォントと欧文フォントは構造が異なる
ため、混在すると いにくい。

41. x-heightが高い
欧文フォントはエックスハイトが高い方が和文フォントと合います。

42. x-heightの高さ比較

43. a-z lengthが長い
欧文フォントはエーゼットレングスが長い方が和文フォントと合います。

44. a-z lengthの長さ比較

45. おすすめフォントセット（ゴシック系）
font-family:
Verdana,
“Hiragino Kaku Gothic ProN”,
“游ゴシック”, YuGothic, Meiryo,
sans-serif;
一例です。サイトによっては工夫してください。

46. おすすめフォントセット（明朝系）
font-family:
“Times New Roman”,
“Hiragino Mincho ProN”,
“游明朝”, YuMincho,
serif;
一例です。サイトによっては工夫してください。

47. CSSで禁則処理

48. line-breakプロパティ
禁則処理を指定するCSS（IE5∼IE9のみ対応)
auto ブラウザ設定（初期値）
loose 緩やかな禁則処理
normal 一般的な禁則処理 、。々 … : ; ! ? 等
strict
厳密な禁則処理
normalに加え ぁぃぅぇっぉゃゅょ∼ - ―等
禁則処理が細かく指定できますが、対応ブラウザが少なすぎます。

49. word-breakプロパティ
line-breakとword-breakが
最新のCSS3の草案で統合。
word-break だけで自動改行と禁則処理を指定
normal
「line-break:strict」と指定したときと同
じように厳密な禁則処理
こちらをお勧めします。
値は5種類ありますが、ブラウザ対応や仕様を考慮すると「normal」のみおすすめです。

50. CSSの例（CSS3）
p {
word-break: normal;
-ms-word-break: normal; /* IE用 */
text-align: justify;
text-justify: inter-ideograph; /* IE用 */
}

51. Before

52. After

53. JSでカーニング
（文字詰め）

54. jQuery.Kerning.js
Webフォントを美しくカーニングできるスクリプト
バグとかもあって思い通りにはならないケースもありますが、見出し等部分的に試してみるのもいいでしょう。

55. こんなかんじに文字毎前後のツメを指定できます。

56. 5

57. タイポグラフィはWebでも重要
デフォルトのままでは和文に適さない
タイポグラフィの基本は誰でもできる
デバイスフォントでもタイポグラフィできる

58. もっとタイポグラフィを勉強したい方へ
おすすめサイトと書籍紹介

59. WEBデザイナーの
ためのタイポグラ
フィと文字組版
鷹野 雅弘さん
（スイッチ）
Webにおけるタイポグラフィの全体図がわかります。続編もありますが、まずはPART1がおすすめです。
http://www.dtp-transit.jp/font/post_1368.html

60. WEBフォント
活用術
FONTPLUS
「文字組みTips」が図解も多くわかりやすいのでおすすめです。
http://fontplustips.com/tips.html

61. KERNTYPE A
KERNING
GAME
カーニングの練習に
遊びながらカーニングの勉強ができます。
http://type.method.ac/

62. タイポグラフィの
基本ルール
すべてのグラッフィクに
通用する基本ルール
Web向けではありませんが、タイポグラフィについて、基本的な事から分かりやすく解説してくれているので、
最初の1冊としてお勧めです。

64. 「日本語組版処理の要件」
W3C技術ノート
今後、スタイルシートに日本語組版の機能を盛り込んでいくため、W3CのCSS等のワーキング・グループに対
し、日本語組版について理解してもらうための資料です。2006年から6年がかりで作成されました。

65. 「Webだから文字組みはできません」というのは過去の話になりつつあります。そしてその先には、特別な事
をしなくてもWebで読みやすい日本語が表示できる日がくると思います。それまではちょっとした努力が必要
ですが、勉強した分は自分の自信になっていきますので、デザインを楽しみながら学びましょう！

66. ありがとうございました!
Enjoy Design!
@Capybara_TAQ
http://en-design.info/