Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

デザインに自信がつく、タイポグラフィの基本 Slide 1 デザインに自信がつく、タイポグラフィの基本 Slide 2 デザインに自信がつく、タイポグラフィの基本 Slide 3 デザインに自信がつく、タイポグラフィの基本 Slide 4 デザインに自信がつく、タイポグラフィの基本 Slide 5 デザインに自信がつく、タイポグラフィの基本 Slide 6 デザインに自信がつく、タイポグラフィの基本 Slide 7 デザインに自信がつく、タイポグラフィの基本 Slide 8 デザインに自信がつく、タイポグラフィの基本 Slide 9 デザインに自信がつく、タイポグラフィの基本 Slide 10 デザインに自信がつく、タイポグラフィの基本 Slide 11 デザインに自信がつく、タイポグラフィの基本 Slide 12 デザインに自信がつく、タイポグラフィの基本 Slide 13 デザインに自信がつく、タイポグラフィの基本 Slide 14 デザインに自信がつく、タイポグラフィの基本 Slide 15 デザインに自信がつく、タイポグラフィの基本 Slide 16 デザインに自信がつく、タイポグラフィの基本 Slide 17 デザインに自信がつく、タイポグラフィの基本 Slide 18 デザインに自信がつく、タイポグラフィの基本 Slide 19 デザインに自信がつく、タイポグラフィの基本 Slide 20 デザインに自信がつく、タイポグラフィの基本 Slide 21 デザインに自信がつく、タイポグラフィの基本 Slide 22 デザインに自信がつく、タイポグラフィの基本 Slide 23 デザインに自信がつく、タイポグラフィの基本 Slide 24 デザインに自信がつく、タイポグラフィの基本 Slide 25 デザインに自信がつく、タイポグラフィの基本 Slide 26 デザインに自信がつく、タイポグラフィの基本 Slide 27 デザインに自信がつく、タイポグラフィの基本 Slide 28 デザインに自信がつく、タイポグラフィの基本 Slide 29 デザインに自信がつく、タイポグラフィの基本 Slide 30 デザインに自信がつく、タイポグラフィの基本 Slide 31 デザインに自信がつく、タイポグラフィの基本 Slide 32 デザインに自信がつく、タイポグラフィの基本 Slide 33 デザインに自信がつく、タイポグラフィの基本 Slide 34 デザインに自信がつく、タイポグラフィの基本 Slide 35 デザインに自信がつく、タイポグラフィの基本 Slide 36 デザインに自信がつく、タイポグラフィの基本 Slide 37 デザインに自信がつく、タイポグラフィの基本 Slide 38 デザインに自信がつく、タイポグラフィの基本 Slide 39 デザインに自信がつく、タイポグラフィの基本 Slide 40 デザインに自信がつく、タイポグラフィの基本 Slide 41 デザインに自信がつく、タイポグラフィの基本 Slide 42 デザインに自信がつく、タイポグラフィの基本 Slide 43 デザインに自信がつく、タイポグラフィの基本 Slide 44 デザインに自信がつく、タイポグラフィの基本 Slide 45 デザインに自信がつく、タイポグラフィの基本 Slide 46 デザインに自信がつく、タイポグラフィの基本 Slide 47 デザインに自信がつく、タイポグラフィの基本 Slide 48 デザインに自信がつく、タイポグラフィの基本 Slide 49 デザインに自信がつく、タイポグラフィの基本 Slide 50 デザインに自信がつく、タイポグラフィの基本 Slide 51 デザインに自信がつく、タイポグラフィの基本 Slide 52 デザインに自信がつく、タイポグラフィの基本 Slide 53 デザインに自信がつく、タイポグラフィの基本 Slide 54 デザインに自信がつく、タイポグラフィの基本 Slide 55 デザインに自信がつく、タイポグラフィの基本 Slide 56 デザインに自信がつく、タイポグラフィの基本 Slide 57 デザインに自信がつく、タイポグラフィの基本 Slide 58 デザインに自信がつく、タイポグラフィの基本 Slide 59 デザインに自信がつく、タイポグラフィの基本 Slide 60 デザインに自信がつく、タイポグラフィの基本 Slide 61 デザインに自信がつく、タイポグラフィの基本 Slide 62 デザインに自信がつく、タイポグラフィの基本 Slide 63 デザインに自信がつく、タイポグラフィの基本 Slide 64 デザインに自信がつく、タイポグラフィの基本 Slide 65 デザインに自信がつく、タイポグラフィの基本 Slide 66
Upcoming SlideShare
いますぐ使えるタイポグラフィ2〜書体のはなし
Next
Download to read offline and view in fullscreen.

141 Likes

Share

Download to read offline

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

Download to read offline

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

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  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/
  • AnnaTsuiki

    Feb. 6, 2020
  • gasshiy

    Apr. 11, 2019
  • KazushiNagata

    Oct. 23, 2018
  • ssuser6a2fec

    Jun. 22, 2018
  • ssuser781085

    Aug. 5, 2017
  • ssuser7c1923

    May. 13, 2017
  • ShoheiSaito1

    Apr. 25, 2017
  • ryojiyamanaka96

    Mar. 27, 2017
  • i-ryo

    Feb. 26, 2017
  • TakuyaHorikawa

    Feb. 17, 2017
  • ssuserb2385a

    Nov. 25, 2016
  • takafumihagiwara

    Nov. 10, 2016
  • techorite

    Oct. 21, 2016
  • tashiromasakazu

    Oct. 20, 2016
  • akipon1

    Oct. 13, 2016
  • rong828

    Oct. 12, 2016
  • akainuma

    Sep. 14, 2016
  • yusukeawazu

    Jul. 11, 2016
  • oratnin

    May. 31, 2016
  • cometmiki

    May. 27, 2016

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

Views

Total views

75,542

On Slideshare

0

From embeds

0

Number of embeds

43,644

Actions

Downloads

156

Shares

0

Comments

0

Likes

141

×