Ligature Symbols 〜ほんとにべんりなフォントのはなし〜

Ligature Symbols 〜ほんとにべんりなフォントのはなし〜

• 1.
  ほんとにべんりな フォントのはなし KazuyukiMotoyama
• 2.
  プロフィール
• 3.
  Kazuyuki Motoyama Hatena Designer kudakurage.com @kudakurage
• 4.
  今日のはなし
• 5.
  ほんとにべんりな フォントのはなし
• 6.
  シンボルフォント
• 7.
  シンボルフォント アイコンのベクターデータを フォントにしたもの
• 9.
  文字じゃなくてアイコンで 表示したい時などに便利！
• 11.
  ココがシンボルフォント
• 12.
  1年くらい前から流行ってきた （2012年9月現在）
• 13.
  Web Symbols typeface http://www.justbenicestudio.com/studio/websymbols/ たぶんコレが最初
• 15.
  利点
• 16.
  Webフォントで気軽に使える ベクターデータなので拡大もOK （勝手にRetina対応） 色や影などをCSSで制御できる 自作すればアイコンの種類も無限
• 17.
  欠点
• 18.
  アルファベットなどに対して、 直接アイコンが対応付けされてる！
• 19.
  どういうことか？
• 21.
  なにがダメなの？
• 22.
  どのアイコンがどのキーなのか、 覚える必要がある（覚えれない） マークアップやコード的にも 解釈できない表現になる
• 23.
  たとえば....
• 24.
  <a href= mailto:>m</a>
• 25.
  「m」ってなによ？ フォントが読み込めないと ユーザーも意味が分からない <a href=mailto: >m</a>
• 26.
  セマンティック じゃない！
• 27.
  そこで....
• 28.
  つくりました。
• 29.
  セマンティック の問題を解決！
• 30.
  <a href= ...>mail</a>
• 31.
  「mail」読める！ フォントが読み込めくても 意味が分かる！ <a href= ... >mail</a>
• 32.
  どうやってるの？
• 33.
  「ほんとにフォントだけで？」 「どうせJSなんでしょ...」
• 34.
  フォントだけです！ JS使ってないです！
• 35.
  じゃあ、どうやってるのよ？ オーディエンス「おしえなさいよ！」
• 36.
  Ligature
• 37.
  Ligatureって何？
• 38.
  Ligature 二つ以上の文字を結合して一つの 文字記号としてデザインしたもの
• 39.
  Ligature 合字 （日本語だとね）
• 40.
  たとえば....
• 42.
  この辺が変にぶつかってて 気になるし、かっこ悪い...
• 43.
  Ligatureで解決！
• 45.
  スマート！かっこいい！
• 46.
  ほかにも...
• 48.
  日本語でも...
• 49.
  麻呂 麿 久米 粂 （漢字合字）
• 50.
  話が少しそれましたが
• 51.
  今日のはなし... つくりました。
• 52.
  ふつうは...
• 54.
  では...
• 55.
  mail camera share
• 56.
  べんり！
• 57.
  しかも...
• 58.
  普通のシンボルフォントは 大小アルファベット50文字 ＋ 数字・記号など40文字程度 90文字ぐらい
• 59.
  では...
• 60.
  無限
• 61.
  べんり！
• 62.
  使用例
• 63.
  CSS PhotoEditor foriOS6
• 64.
  この辺が
• 66.
  拡大してもキレイ
• 67.
  べんり！
• 68.
  DEMO! http://kudakurage.com/ligature_symbols/