「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ)

on

  • 41,587 views

2013年11月21日(木)19:00-20:00、アップルストア銀座で開催されたCSS Nite in Ginza, Vol.72のスライド。 ...

2013年11月21日(木)19:00-20:00、アップルストア銀座で開催されたCSS Nite in Ginza, Vol.72のスライド。
http://cssnite.jp/ginza/vol72/

参照リンクなど
http://bit.ly/1blGiqd

Statistics

Views

Total Views
41,587
Views on SlideShare
15,378
Embed Views
26,209

Actions

Likes
120
Downloads
216
Comments
3

38 Embeds 26,209

http://www.dtp-transit.jp 12435
http://cssnite.jp 6561
http://stocker.jp 3650
http://www.cssnite.jp 1549
http://blog.woopsdez.jp 672
https://twitter.com 336
http://www.river-side.biz 279
http://feedly.com 210
http://s.deeeki.com 111
http://xn--y8j9awd1e.jp 86
http://pearllight.hatenablog.com 76
http://transit464.rssing.com 58
http://swwwitch.com 46
https://uc6p7.cybozu.com 28
http://dtp-transit.jp 17
http://dta.trc21.com 16
http://www.feedspot.com 14
http://tweetedtimes.com 14
https://cybozulive.com 8
http://feeds2.feedburner.com 6
http://www.pinterest.com 5
https://www.chatwork.com 5
https://www.facebook.com 3
http://cloud.feedly.com 3
http://feeds.feedburner.com 3
http://reader.aol.com 3
http://feedproxy.google.com 2
http://www.newsblur.com 2
http://digg.com 2
http://webcache.googleusercontent.com 1
http://realtime.search.yahoo.co.jp 1
https://m.facebook.com&_=1390954398081 HTTP 1
http://plus.url.google.com 1
http://www.inoreader.com 1
https://m.facebook.com&_=1386201452188 HTTP 1
https://m.facebook.com&_=1386177943697 HTTP 1
http://reader.aol.co.jp 1
http://jp.pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

「Webデザイナーのためのタイポグラフィと文字組版(Reloaded)」鷹野 雅弘(スイッチ) Presentation Transcript

  • 1. Webデザイナーのための タイポグラフ と文字組版 ィ 鷹野 雅弘 (スイ ッチ) アップルストア銀座 3Fシアター このスライドは、2013年11月21日にアップルストア銀座で開催された CSS Nite in Ginza, Vol.72のものです。
  • 2. 私は、1996年から都内で「スイッチ」という制作会社を営んでいます。
  • 3. 当初、DTP(グラフィックデザイン)からスタートし、
  • 4. Webのフィールドと両輪で制作を行っています。
  • 5. グラフィックデザインの人間からは、Webは文字に関して 甘い と言われます。
  • 6. 今回は「Reloaded」とついているように「続編」です。
  • 7. 前編をご覧になっていない方は、ぜひご覧ください。 http://www.slideshare.net/swwwitch/web-10114816
  • 8. 3つのパート(+1)で構成します。
  • 9. 今年4月に青森は弘前(ひろさき)にお邪魔したとき、
  • 10. こんな看板がありました。
  • 11. あまり美味しそうじゃないですよね...
  • 12. っていうか、「世にも奇妙な...」?
  • 13. ホテルを予約して、実際に行ってみると印象が違うという経験はありませんか?
  • 14. 実店舗、サイト、それぞれのパーソナリティがありますが、 これらが一致していないと不自然に感じてしまいます。
  • 15. こちらの「キャッチ」のフォントを考えてみましょう
  • 16. 「AXIS B」:無難な印象ですが、クールやセクシーというニュアンスが出ません。
  • 17. ウエイトを落として、軽めに「AXIS L」:悪くない感じです。
  • 18. さらに細く「AXIS UL」。悪くないですが、可読性という面で難があります。
  • 19. 助詞の文字サイズを下げてメリハリを付けるとよさそうですが、あまり変わりません。
  • 20. 「りょう」は、かな部分がやさしい印象となりますが、柔すぎるかも...
  • 21. 「ロゴアールStd」は遊びすぎで、そぐわない感じが残ります。
  • 22. 使い古されつつありますが「A1明朝」がはまるかもしれません。
  • 23. こちらは「ヒラギノ角ゴW6」で組んだもの
  • 24. 英数字(たとえばM)を見ると、筆文字っぽいニュアンスになっています。
  • 25. 下のサンプルは英数字にMyriadを設定。こちらの方がしっくりきませんか?
  • 26. 和文フォ ント 欧文フォ ント 英数字 英数字 半角記号類 半角記号類 ひらがな 漢字 全角記号類 和文フォント、欧文フォントは、英数字と半角記号類が共通しています。
  • 27. 和文フォ ント 欧文フォ ント 英数字 英数字 半角記号類 半角記号類 ひらがな 漢字 全角記号類 和文フォント内の英数字と半角記号類を「従属欧文」と呼びます。
  • 28. 2013年6月30日(日) 2013年6月30日(日) たとえば、日付を組むとき、英数字には欧文フォントを設定し、
  • 29. 2013年6月30日(日) 2013年6月30日(日) さらにメリハリを付けて仕上げます。
  • 30. 少なくてもグラフィックデザインの分野では混植が常識です。
  • 31. ただし、フォントのメカニズムそのものが異なりますので、
  • 32. 英数字には、サイズやベースラインの調整が不可欠です。
  • 33. ご参考までに、Appleのコーポレートフォントはこのように変遷しています。
  • 34. こちらは、アドビ。
  • 35. Typography: Corporate typefaces As with our logo, consistent use of our corporate typefaces—Adobe Clean and Minion® Pro—reinforces Adobe’s brand identity. Both are OpenType™, a cross-platform format that provides richer linguistic support through widely expanded character sets and advanced layout features. Both fonts are available for download from Marketing Hub under Corporate > Corporate Fonts. Primary typeface - Adobe Clean Secondary type face - Minion Pro ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 =~!@#$%^&*()+[]{}|:;’:”<>?,./ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 =~!@#$%^&*()+[]{}|:;’:”<>?,./ Adobe Clean should be used for headlines and may be used for copy. Short headlines or labels can be all caps, otherwise headlines and subheads are sentence case. Minion Pro should be used primarily for extended running body copy in longer, multiple-page documents, such as brochures and datasheets. The introduction of the proprietary typeface Adobe Clean in April 2009 was to help differentiate Adobe in the marketplace. It replaces the previous sans serif corporate font, Myriad Pro. It will not be available for license to the general public. Avoid using weights other than Minion Pro Regular. Use Minion Pro SemiCondensed Bold for emphasis when needed. Avoid using Minion smaller than 9pt. Use standard numerals; do not use Minion’s Old Style numerals. To use Adobe Clean well along side the corporate logo, which continues to use Myriad Pro, avoid condensed or extended type. Minion Pro Semibold Condensed Minion Pro Regular Minion Pro Semibold Minion Pro Bold Adobe Clean Light Adobe Clean Regular Adobe Clean Bold Adobe Clean SemiCondensed Adobe Clean Bold SemiCondensed Adobe Clean Light Italic Adobe Clean Italic Adobe Clean Bold Italic Adobe Clean SemiCondensed Italic Adobe Clean Bold SemiCondensed Italic Minion Pro Semibold Condensed Italic Minion Pro Italic Minion Pro Semibold Italic Minion Pro Bold Italic Note: Alternate glyphs are available for the letter “g” and number “1” in Adobe Clean Regular. 25 Adobe Corporate Brand Guidelines | Adobe Confidential | 25 October 2010 アドビは現在「Adobe Clean」を使用しています。
  • 36. 具体的な 組み合わせ例を 教えてください ! どのように混植(組み合わせ)のか、という質問を多くいただきますので解説します。
  • 37. 新ゴ 「画像をなるべく使わずにWebをレイアウ ト するテクニック」と題して、CSS3のプロパ ティ、Typekitを使ったWeb Fonts の実装 を解説。 こちらは「新ゴ」。
  • 38. 新ゴ 「画像をなるべく使わずにWebをレイアウ ト するテクニック」と題して、CSS3のプロパ ティ、Typekitを使ったWeb Fonts の実装 を解説。 新ゴ + MO ClearTone SG ト 「画像をなるべく使わずに Web をレイアウ するテクニック」と題して、CSS3 のプロパ ティ、Typekitを使った Web Fonts の 実 装 を解説。 英数字部分に異なるフォントを与えると、ずいぶん印象が変わります。
  • 39. AXIS 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 AXISフォントは、従属欧文を使うことを前提に制作されていますが、
  • 40. AXIS 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 AXIS + MO ClearTone SG 「画像をなるべく使わずに Web をレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使った Web Fonts の実装を解説。 「MO ClearTone SG」と組み合わせると、今っぽい感じです。
  • 41. MO ClearTone SG なるべく使わずに Web をレ ニック」 と題して、 CSS3のプ を使った Web Fonts の実装 ただし、拡大してみると...
  • 42. MO ClearTone SG なるべく使わずに Web をレ ニック」 と題して、 CSS3のプ を使った Web Fonts の実装 英数字部分のベースラインの調整が必要です。
  • 43. 小塚ゴシック 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 アドビCS/CCなどをインストールすると必ず入る「小塚」フォントですが、
  • 44. 小塚ゴシック 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 小塚ゴシック +り ょう 「画像をなるべく使わずにWebをレイアウトす るテクニック」と題して、CSS3のプロパティ、 「な」など、かな部分にクセがありすぎます...
  • 45. 小塚ゴシック 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 小塚ゴシック +り ょう 「画像をなるべく使わずにWebをレイアウトす るテクニック」と題して、CSS3のプロパティ、 小塚ゴシック +り ょう + Myriad 「画像をなるべく使わずに Web をレイアウトす るテクニック」と題して、CSS3 のプロパティ、 また、英数字はMyriadをベースにしていますが、若干細めなので再指定します。
  • 46. ヒラギノ明朝 「画像をなるべく使わずにWebをレイアウ トする テクニック」と題し て、CSS3のプロパテ ィ、 Mac OS Xのデフォルトフォントのひとつ「ヒラギノ明朝」
  • 47. ヒラギノ明朝 「画像をなるべく使わずにWebをレイアウ トする テクニック」と題し て、CSS3のプロパテ ィ、 ヒラギノ明朝 + Garamond トする 「画像をなるべく使わずにWebをレイアウ ィ、 テクニック」と題し て、CSS3のプロパテ やはり英数字が少し野暮ったいので「Garamond」などを組み合わせるとベター。
  • 48. ヒラギノ明朝 「画像をなるべく使わずにWebをレイアウ トする テクニック」と題し て、CSS3のプロパテ ィ、 ヒラギノ明朝 + Garamond トする 「画像をなるべく使わずにWebをレイアウ ィ、 テクニック」と題し て、CSS3のプロパテ ヒラギノ明朝 + Garamond + り ょう アウ 「画像をなるべく使わずに Webをレイ トする ィ テクニッ ク」と題して、CSS3のプロパテ 、 「りょう」の明朝版もいい感じです。
  • 49. A1 明朝 「画像をな く るべ 使わずにWebを イ ウ す テ レ ア ト る ク ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ ここ数年、イヤというほど見かける「A1明朝」
  • 50. A1 明朝 「画像をな く るべ 使わずにWebを イ ウ す テ レ ア ト る ク ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ A1 明朝 + Georgia 「画像をな く るべ 使わずにWebを イ ウ する ク レ ア ト テ ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ こちらも英数字が野暮ったい印象...
  • 51. Georgiaは、Mac/Windowsに入っているフォントですが、
  • 52. オールドスタイルと呼ばれる形状をしています。
  • 53. http://blog.petitboys.com/archives/georgiaverdana.html
  • 54. A1 明朝 「画像をな く るべ 使わずにWebを イ ウ す テ レ ア ト る ク ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ A1 明朝 + Georgia 「画像をな く るべ 使わずにWebを イ ウ する ク レ ア ト テ ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ A1 明朝 + Warnock レ ア ト テ 「画像をな く るべ 使わずにWebを イ ウ する ク ィ ニ ク」 題し ッ と て、CSS3のプロパテ 、 オールドスタイルはクセがありすぎるので、日本語では避けるとよさそうです。
  • 55. 合成フォントの組み合わせ(ゴシック系) ベース 英数字 かな ヒラギノ角ゴ Helvetica り ょう 小塚ゴシック Frutiger ネオツデイ 新ゴ Myriad 鴨野かな AXIS Verdana ゴシック MB MO ClearTone SG メイリオ ゴシック系では、これらを組み合わせるとよいでしょう。
  • 56. 合成フォントの組み合わせ(明朝系) ベース 英数字 かな ヒラギノ明朝 Garamond り ょう 小塚明朝 Minion リ ュウミン小がな リ ュウミン Warnock リ ュウミンオールドがな A1 明朝 Georgia アンチック 明朝系では、これらを組み合わせるとよいでしょう。
  • 57. ところで、「Helvetica」と、それに似た「Arial」というフォントがあります。
  • 58. 「どっちがHelveticaか?」というクイズがあったり... http://www.ironicsans.com/helvarialquiz/
  • 59. その形状の違いを解説されたりしています。 http://ragbag.tumblr.com/post/187708731/arial-helvetica-on-friday-i-hosted-a-screening
  • 60. ちなみに「Arial」をどう読むのか、については
  • 61. http://tosche.net/2012/09/arial_j.html なんと、正解がない!とのこと。
  • 62. と、海外で活躍される大曲都市さんがブログで解説されています。
  • 63. 上と下では、ずいぶん印象が変わります。
  • 64. 「する事が出来る」を
  • 65. 「することができる」のように表現することを
  • 66. ひらく と呼びます。
  • 67. どの文字を ひらく かについては、colissの記事を参考にしてみてください。 http://coliss.com/articles/build-websites/operation/writing/288.html
  • 68. 俺俺ルールではなく、ガイドラインがあります。
  • 69. bizYouの「エキスパートコラム」の
  • 70. Web文章入門「わかりやすい文章の10大原則」も、ぜひ、ご一読ください。
  • 71. スクロールしていくと
  • 72. 8番目に「ひらがなを多く」というセクションがあります。
  • 73. 「ひらがなを多く」したサンプル
  • 74. さらに下、9番目に「カタカナを効果的に」というセクションがあります。
  • 75. 「カタカナを効果的に」使ったサンプル
  • 76. あるコンビニのウインドウで、こんな掲示がありました。
  • 77. パスモス イカ開始 一瞬、悩みますよね...
  • 78. イカ??
  • 79. パスモス イカ開始 こちらは...
  • 80. パスモ スイカ開始 これが正解
  • 81. パスモス イカ開始 スペース的に厳しいのであれば、
  • 82. パスモ・ス イカ開始 たとえば「・」(中黒)を入れるとよかったですよね。
  • 83. インフラエンジニアに相談 しておくことをおすすめします とあるプレゼンのスライドから拝借したものですが、
  • 84. インフラエンジニアに相談 しておくことをおすすめします インフラエンジニアに 相談しておくことを おすすめします 改行位置を変えるだけで、理解できるスピードが変わることを理解できるでしょう。
  • 85. 2013年6月30日(日) さきほども出てきた日付ですが、
  • 86. 2013年6月30日(日) 2013年6月30日(日) 英数字のフォントを変えたり、
  • 87. 2013年6月30日(日) 2013年6月30日(日) 重要でない文字の大きさを変えて
  • 88. 2013年6月30日(日) 2013年6月30日(日) ベースラインを調整します。
  • 89. 2013年6月30日(日) Before/Afterを
  • 90. 2013年6月30日(日) このように並べると、その差は歴然です。
  • 91. 次は「値組み」です。
  • 92. 数字は位取りのカンマを付けた方が理解しやすいですよね。
  • 93. 日付と同様、「円」の文字サイズを下げた方が理解度が増します。
  • 94. 重要度に応じて、適切に文字サイズを変更すると、伝わりやすさに反映します。
  • 95. つまり、入力したままでなく、適切に手を入れようよ、ということです。
  • 96. これもとあるプレゼンのスライドから拝借したものですが、
  • 97. 段落間のスペースを変更するだけで、構造の理解度が大きく変わります。
  • 98. 箇条書きを「・」(中黒)で入力されてしまう方がいますが、
  • 99. ワープロ系なら箇条書き機能、HTMLならul/li要素でマークアップします。
  • 100. さらに項目間にスペースを入れると見やすいですよね。
  • 101. こちらも、あるプレゼンのスライドから拝借。
  • 102. パッと見た目、
  • 103. 3つの項目があるように見えてしまいませんか?
  • 104. 行間は広げればいいというものではなく、
  • 105. 適切にすべきです。
  • 106. 入力したままにせず、
  • 107. ツメ(カーニング処理)を行うのがセオリーですが、
  • 108. そもそも、なぜ、詰める必要があるのでしょうか?
  • 109. 以前、話題になったもので、
  • 110. 「なぜか読めてしまうコピペ文章」というものがありました。
  • 111. 文字単位での順番が適当でも、読めてしまうというものです(日本語/英語ともに)
  • 112. たとえば、電話番号も、数字だけの羅列よりも
  • 113. ハイフンで区切ると、読みやすさに差が出ます。
  • 114. 私たちは文字単位でなく、「まとまり」で認識しているということです。
  • 115. 先の例を出しますと、
  • 116. 日本語では「仮想ボディ」と呼ばれる正方形で文字が並びます。
  • 117. 下のようにツメ処理をすることで、単語やフレーズが まとまり になります。
  • 118. そういう意味では、最近のトレンドとして「アケ組み」がありますが
  • 119. 「まとまり」として認識しにくくなるので、読ませたい場所には不適切です。
  • 120. アプリケーションでの自動カーニングについて解説します。
  • 121. Illustratorには「自動」「オプティカル」「和文等幅」などの自動カーニングがあります。
  • 122. Photoshopにも「メトリクス」「オプティカル」の自動カーニングがあります。
  • 123. InDesignには「メトリクス」「オプティカル」「和文等幅」と呼びます。
  • 124. 自動 (メトリクス) 自動 メトリクス メトリクス オプティカル 和文等幅 アプリケーションによって、名称が異なることがあります。
  • 125. 「自動/メトリクス」を使い、ツメが効かない場合に「オプティカル」を使用します。
  • 126. アルファベットの場合、文字ごとに固有の横幅を持っています。
  • 127. 前の文字に食い込んで組むことを「ペアカーニング」と呼びます。
  • 128. 文字ごとに決まっており、「自動/メトリクス」ではフォントが持っている値を参照します。
  • 129. 自動カーニングで終了ではなく、若干の調整は必要です。
  • 130. しかし、このとき、致命的なバグがあります...
  • 131. これを回避するには、[プロポーショナルメトリクス]をオンにします。
  • 132. Photoshopでは、
  • 133. [文字]パネルメニューにあります。
  • 134. http://d.hatena.ne.jp/works014/20110827
  • 135. この回避方法は、大石さんという方が発見されました。
  • 136. カーニングに興味を持たれた方は、KERNTYPEで遊んでみてください。 http://type.method.ac/
  • 137. 実際(に近い)画面 実際(に近い)画面 パーレン(丸括弧)を半角で入力するか、全角で入力するか…
  • 138. 実際(に近い)画面 実際(に近い)画面 ベースラインを引いてみると、半角の方は下がっていることがわかります。
  • 139. これは、フォントの設計が異なることが原因です。
  • 140. このようにパーレンやブラケットが混じる場合....
  • 141. 全角を使った方が、上下のズレは生じません。
  • 142. 住所を例に考えてみましょう。
  • 143. 数字やハイフンの前後はカーニングの調整の必要があります。
  • 144. さらにハイフンを見てみると、このように下がっています。
  • 145. 文字サイズを調整したり、
  • 146. ベースラインを調整すると、このようになります。
  • 147. 比べてみると、その差は歴然です。
  • 148. 電話番号も同様です。
  • 149. 中心線を引いてみるとわかりますが、
  • 150. ハイフンの調整が必要です。
  • 151. 「巴里の咏」 巴里の咏 女性誌などでは、カギ括弧を罫線で表現しています。
  • 152. このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して 「新ゴ」などのフォントでは、ウエイトの太い場合、カギ括弧も太くなってしまいます。
  • 153. このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して これをウエイトを下げ、軽めのものにするとスッキリします。
  • 154. このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して ヒラギノなどを使って「小かぎ」にすると、さらにスッキリします。
  • 155. 「テクニック」 「テクニック」 「テクニック」 好みもありますが、ずいぶん印象が変わります。
  • 156. こちらはIllustratorで入力しただけのキャッチです。
  • 157. 下は少し加工したものですが、違いがわかりますでしょうか?
  • 158. 背面に帯を敷くとわかりますが、上の方は1-2行目が引っ込んでいます。
  • 159. これを「面(ツラ)が合っていない」と表現しますが、これも手を加えておきたいです。 caption
  • 160. 画像化
  • 161. OS X Mavericks(10.9)と
  • 162. Windows 8.1では
  • 163. はじめて同じフォントがプリインストールされています。
  • 164. http://blog.petitboys.com/archives/yugothic-yumincho-jiyukobo.html
  • 165. Google Fontsがポピュラーですが、
  • 166. 現在、629フォントもあります。
  • 167. http://mojidepa.com/login
  • 168. http://decomoji.jp/
  • 169. http://webfont.fontplus.jp/
  • 170. http://typesquare.com/
  • 171. Web Fontsを使うと、ウエイトの太いフォントに、さらに太字設定されてしまうなど、
  • 172. 現在では、問題山積みです。
  • 173. http://takanomasahiro.tumblr.com/post/33520166004/web-fonts-2012-10
  • 174. 本日は、フォント(選び)の大切さについて触れてきましたが、
  • 175. http://www.linelabo.com/gtmincho.htm
  • 176. ある意味、フォントやその他の配慮は、適切に行われるほど存在感が消えます。
  • 177. その結果、実現したいのは、この2つです。
  • 178. こだわりポイントを知って、こだわりましょう。