デザインに自信がつく、タイポグラフィの基本

40,093 views

Published on

第25回 岡山WEBクリエイターズ「パララックス / CSS / タイポグラフィ 再入門」にて講演。[2014-04-19]

ちょっとした工夫で“普通のテキスト”を“デザインされたテキスト”に変えることができます。今までのWEBデザインではデバイスフォントという制約もあり、DTPと比べるとタイポグラフィはあまり重要視されてきませんでしたが、高解像度のデバイスやウェブフォントの普及などにより、その必要性は高まっています。適切で根拠のあるテキストの扱い方を学び、あなたが制作するデザインに自信つくよう、DTP・WEB両方のデザイン経験を元にタイポグラフィと文字組版の基本を解説いたします。

Published in: Design
0 Comments
138 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
40,093
On SlideShare
0
From Embeds
0
Number of Embeds
13,806
Actions
Shares
0
Downloads
139
Comments
0
Likes
138
Embeds 0
No embeds

No notes for slide

デザインに自信がつく、タイポグラフィの基本

  1. 1. 第25回 岡山WEBクリエイターズ 2014年4月19日 en-Design 西谷卓也
  2. 2. 本日のレジュメ 1. 自己紹介 2. Webとタイポグラフィ 3. タイポグラフィの基本 4. デバイスフォントでタイポグラフィ 5. まとめ
  3. 3.
  4. 4. 名前 西谷卓也 所属 en-Design 職業 デザイナー 通称 かぴばらさん 資格 DTPエキスパート    ウェブ解析士    カラーコーディネーター
  5. 5. 経歴 神戸芸術工科大学 工業デザイン科 卒業 フリーター(1年) 印刷会社の営業(1年) DTPオペレーター(5年) DTPデザイナー(4年) Webデザイナー(4年) フリーランスデザイナー(2年目)
  6. 6. 今の仕事 5%5% 5% 35% 50% DTP Web 講師 ファジアーノ その他
  7. 7.
  8. 8. タイポグラフィとは 活字を適切に配列することで、
 印刷物における文字の体裁を
 整える技芸 (引用:Wikipedia)
  9. 9. 活字を適切に配列することで、
 印刷物における文字の体裁を
 整える技芸 タイポグラフィとは Webではタイポグラフィは不要? (引用:Wikipedia)
  10. 10. http://ia.net/blog/the-web-is-all-about-typography-period/ 世界的に知られるデザイン会社、インフォメーション アーキテクツのさんの投稿です。
  11. 11. Oliver Reichenstein! 2006
  12. 12. http://justinjackson.ca/words_japan.html イギリスのウェブデザイナー、ジャスティン・ジャクソンが去年発表し、話題になったページです。
  13. 13. Justin Jackson! 2013
  14. 14. タイポグラフィは、
 言葉を伝えやすくする 技術です。
  15. 15. ウェブでも タイポグラフィで、 伝わり方が変わります
  16. 16. 3
  17. 17. アキを える
  18. 18. 和文書体の構造 漢字とひらがな・カタカナでは字面の大きさが違うので、ベタ組みをすると間が不 いに見えます。
  19. 19. ベタ組みの字間 ベタ打ちです。
  20. 20. ベタ組みの字間 特にカタカナの空間の違いが目立ちます。
  21. 21. ベタ組みの字間 このような字間を…
  22. 22. ベタ組みの字間 このように えます。
  23. 23. ベタ組みの字間 いかがでしょうか?
  24. 24. 句読点・括弧類 句読点や括弧類の前後の半角分スペースは詰めます
  25. 25. 高さ・サイズを える
  26. 26. 和欧混在 フォントにもよりますが、欧文を105∼120%拡大、ベースラインを1∼5%程度下げて和文と えます。
  27. 27. 半角記号類 半角の記号類も、英文フォントのベースラインになっていますので、少し上に上げ、日本語に えます。
  28. 28. 文章の調整
  29. 29. 行間 欧文では行間が文字サイズの1.2倍ぐらいでも読みやすいのですが、日本語では文字サイズの 1.5∼2倍ぐらいが最適です。最適なサイズはフォントや文字量、行長によって異なります。
  30. 30. 禁則処理(行末・行頭の処理) 括弧や句読点などが行頭・行末などにあってはならないという禁止事項のことを禁則をいいます。 詰めて行内におさめる事を「追い込み」、逆に次の行へ送る事を「追い出し」といいます。
  31. 31. Before
  32. 32. After
  33. 33. タイポグラフィの基本は
 センスではなく、ルール。 覚えれば誰でもできる!
  34. 34. 4
  35. 35. 読みやすいフォント指定
  36. 36. 和文フォント選びのポイント クリアタイプフォント プロポーショナルフォント ⇒なるべく新しいフォントを活用 クリアタイプフォントはビットマップではなく、アウトライン情報をもつフォントです。 プロポーショナルフォントは詰め情報のあるフォントの事です。
  37. 37. メイリオ 和文は等幅、かな等が大きめ
  38. 38. ヒラギノ角ゴ ProN/ヒラギノ明朝 ProN バランスが良いがMacのみ
  39. 39. 游ゴシック体/游明朝体 Win・Mac両方に採用(2013-)
  40. 40. 和欧混在のフォント選び 和文フォントと欧文フォントは構造が異なる ため、混在すると いにくい。
  41. 41. x-heightが高い 欧文フォントはエックスハイトが高い方が和文フォントと合います。
  42. 42. x-heightの高さ比較
  43. 43. a-z lengthが長い 欧文フォントはエーゼットレングスが長い方が和文フォントと合います。
  44. 44. a-z lengthの長さ比較
  45. 45. おすすめフォントセット(ゴシック系) font-family: Verdana, “Hiragino Kaku Gothic ProN”, “游ゴシック”, YuGothic, Meiryo, sans-serif; 一例です。サイトによっては工夫してください。
  46. 46. おすすめフォントセット(明朝系) font-family: “Times New Roman”, “Hiragino Mincho ProN”, “游明朝”, YuMincho, 
 serif; 一例です。サイトによっては工夫してください。
  47. 47. CSSで禁則処理
  48. 48. line-breakプロパティ 禁則処理を指定するCSS(IE5∼IE9のみ対応) auto ブラウザ設定(初期値) loose 緩やかな禁則処理 normal 一般的な禁則処理 、。々 … : ; ! ? 等 strict 厳密な禁則処理
 normalに加え ぁぃぅぇっぉゃゅょ∼ - ―等 禁則処理が細かく指定できますが、対応ブラウザが少なすぎます。
  49. 49. word-breakプロパティ line-breakとword-breakが 最新のCSS3の草案で統合。 word-break だけで自動改行と禁則処理を指定 normal 「line-break:strict」と指定したときと同 じように厳密な禁則処理 こちらをお勧めします。 値は5種類ありますが、ブラウザ対応や仕様を考慮すると「normal」のみおすすめです。
  50. 50. CSSの例(CSS3) p { word-break: normal; -ms-word-break: normal; /* IE用 */ text-align: justify; text-justify: inter-ideograph; /* IE用 */ }
  51. 51. Before
  52. 52. After
  53. 53. JSでカーニング (文字詰め)
  54. 54. jQuery.Kerning.js Webフォントを美しくカーニングできるスクリプト バグとかもあって思い通りにはならないケースもありますが、見出し等部分的に試してみるのもいいでしょう。
  55. 55. こんなかんじに文字毎前後のツメを指定できます。
  56. 56. 5
  57. 57. タイポグラフィはWebでも重要 デフォルトのままでは和文に適さない タイポグラフィの基本は誰でもできる デバイスフォントでもタイポグラフィできる
  58. 58. もっとタイポグラフィを勉強したい方へ おすすめサイトと書籍紹介
  59. 59. WEBデザイナーの ためのタイポグラ フィと文字組版 鷹野 雅弘さん
 (スイッチ) Webにおけるタイポグラフィの全体図がわかります。続編もありますが、まずはPART1がおすすめです。 http://www.dtp-transit.jp/font/post_1368.html
  60. 60. WEBフォント 活用術 FONTPLUS 「文字組みTips」が図解も多くわかりやすいのでおすすめです。 http://fontplustips.com/tips.html
  61. 61. KERNTYPE A KERNING GAME カーニングの練習に 遊びながらカーニングの勉強ができます。 http://type.method.ac/
  62. 62. タイポグラフィの 基本ルール すべてのグラッフィクに 通用する基本ルール Web向けではありませんが、タイポグラフィについて、基本的な事から分かりやすく解説してくれているので、 最初の1冊としてお勧めです。
  63. 63. 「日本語組版処理の要件」 W3C技術ノート 今後、スタイルシートに日本語組版の機能を盛り込んでいくため、W3CのCSS等のワーキング・グループに対 し、日本語組版について理解してもらうための資料です。2006年から6年がかりで作成されました。
  64. 64. 「Webだから文字組みはできません」というのは過去の話になりつつあります。そしてその先には、特別な事 をしなくてもWebで読みやすい日本語が表示できる日がくると思います。それまではちょっとした努力が必要 ですが、勉強した分は自分の自信になっていきますので、デザインを楽しみながら学びましょう!
  65. 65. ありがとうございました! Enjoy Design! @Capybara_TAQ http://en-design.info/

×