Download SlideShare for Android. 15 million presentations at your fingertips  Get the app
×
  • Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 
« ‹ › »
   

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

on

  • 133 views

第25回 岡山WEBクリエイターズ「パララックス / CSS / タイポグラフィ 再入門」［2014-03-06］にて講演。 ...

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

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

Statistics

Views

Total Views
133
Views on SlideShare
130
Embed Views
3

Actions

Likes
4
Downloads
2
Comments
0

2 Embeds 3

https://cybozulive.com 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via SlideShare 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
Post Comment
Edit your comment

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

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