Designing Web Typography from Japan with Love - 日本発グローバルWebメディアのタイポグラフィ設計
•
7 likes•2,123 views
IGNITION（http://ignition.co）という日本発のグローバルwebメディアのタイポグラフィ設計を行ううえで考えたことについてまとめました。 春のフロントエンドまつり2015でお話ししました。
Recommended
More Related Content
Featured
Featured (20)
Designing Web Typography from Japan with Love - 日本発グローバルWebメディアのタイポグラフィ設計
- 1. Designing Web Typography from Japan with Love 2015.5.30 春のフロントエンドまつり nanapi Inc. Kanako Fukiage (@takana8) 日本発グローバルWebメディアの タイポグラフィ設計
- 2. 骨 が 好 き で す ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤➤ ➤ ➤ ➤ ➤➤ ➤➤➤➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤➤ ➤➤➤➤➤➤➤ ➤➤➤➤➤ ➤ ➤ ➤ ➤ ➤ ➤➤➤ ➤ ➤ ➤ ➤ ➤➤ ➤ ➤ ➤➤ ➤ ➤ ➤➤ ➤➤ ➤ ➤ ➤➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤ ➤➤ ➤ ➤ ➤➤ ➤ ➤ ➤➤ ➤ ➤ ➤➤➤➤ ➤ ➤➤➤ ➤ ➤➤➤➤ ➤ ➤ 研究に使用 した骨の数 200体以上 一体当たり 50箇所計測✕ 25 デザイナーの キャリア designbone 骨 を 学んだこと （科学） このふたつを生かして… 両方が私の バックボーン http://www.slideshare.net/kanakotakehara/i-was-bone-to-love-design 2 Who Are You I was bone to love Design 骨の研究してたやつがなんで今デザイナーをやってるのかという話
- 3. 3 ワニと学ぶ! UXデザイン入門 Kanako Fukiage (@takana8) 2015.3.21 Creators MeetUp #26 増補版 ❶ UXデザインってなに ワニの話 ― 行動観察入門 私（＝ヒト）と同じような行動に見えても、本当にそうか はわからない。安易に思い込まない姿勢が重要。 それは本当にあくびなのか？ ワニがあくびをした。 39 一見全く関係ないふたつの経験が 実はつながっていた ワニとUXデザイン ❺ UXデザインの実践時に必要な能力 http://www.slideshare.net/kanakotakehara/ux-46114731 Who Are You
- 7. 7 ありがちな状況 メディアの主役はコンテンツ！ いい内容！すごい写真！ ?? できたけど、なんか読みにくい… あとはいい感じのフォントを使えばOK！ Why Typography Matters
- 8. 95% of the information on the web is written language. 8
- 9. “95% of the information on the web is written language.” 9 http://ia.net/know-how/the-web-is-all-about-typography-period Why Typography Matters
- 10. 10
- 11. “Can you read it?” “Do you want to read it?” 11 https://twitter.com/typographica/status/268091875746009088 but Why Typography Matters
- 14. 14 いい内容！ すごい写真！ イケてないタイポグラフィ！？ いい内容！ すごい写真！ イケてるタイポグラフィ！ 読みたくなる！ ＝ なんか…おしい… ＝ AsIs ToBe Why Typography Matters
- 15. 15 読みたくなる！ にするために 考えなきゃいけないことは多い… Why Typography Matters
- 16. • 適切な書体選び • 文字サイズ・行幅・行間のバランス • レスポンシブ対応 • まぬけ引用符、イタリック、太字、 合字、カーニング etc. 16 読みたくなる！ にするために 考えなきゃいけないことは多い… 上記ルールの詳細は以下、nanapi TechBlogで！ http://blog.nanapi.co.jp/tech/2014/11/12/typography_for_ignition/ Why Typography Matters
- 17. ルールを全て実現しようとすると 当然それなりのコストがかかる… 17 • Webフォントの料金 • 実装にかかる工数 • 表示パフォーマンス etc. Why Typography Matters
- 18. ルールを全て実現しようとすると 当然それなりのコストがかかる… 18 • Webフォントの料金 • 実装にかかる工数 • 表示パフォーマンス etc. なにをやって、なにをやらないかの判断が重要 そしてその判断を下すには、体系的な知識が必要 Why Typography Matters
- 20. 20 • タイポグラフィのルールを整理・啓蒙 • 専用エディタの開発 • Editorial Standards（編集基準）の定義 読みたくなる！ にするために やったこと Practical Typography
- 21. ! IGNITION Editorial Fase 3 ! ! 2014.08.01 ! エディトリアル Fase3のポイント パーツ 追加機能 機能要件 デバイス PC/タブレット SP 段組み - - - - タイトル（h1） - - - - リード - - - - 見出し（h2） - - - - 小見出し（h3） - - - - 本文 中央 え/右 え 本文テキストを中央 え、右 えにする ○ ○ 写真 全面写真/文字載せ 写真がブラウザ一杯に表示、 写真の上に文字載せ ○ ○ エディトリアル改良点 パーツ 改良点 サイズ 全体のサイズ縮小 ヘッダー アイコンサイズなど 本文 改行時の行間狭く - フォントサイズ小のときの行間 く 写真 写真下の余白狭く - 写真回り込みの余白調整 キャプション 枠なしキャプションの余白調整 引用符 の引用符を調整 関連記事 本文の外に出す＆デザイン変更 記事下 Next Articleの上のIGNITIONマ ークトルツメ Narrative トップページのNarrativeタイト ルのデザイン 書籍の良さをWebでどう活かすかを 考えながら、表現方法の要件を定義 21 Editorial Standards（編集基準）の定義 Practical Typography
- 25. 25 最高のコンテンツに絶対外せないものは 提供するが、行き過ぎたこだわりは捨てる 読みたくなる！ にするために デザイナーとしてすごく気をつけたこと Practical Typography
- 30. 30 Conclusion
- 33. ＼ ご清聴ありがとうございました ／ Designer at nanapi Inc. Kanako Fukiage (@takana8)