SlideShare a Scribd company logo
1 of 100
Download to read offline
第二回 プログラマ向けデザイン勉強会 March 16, 2013



はじめての欧文書体

伊藤庄平@9d
伊藤庄平@9d
株式会社シロクロというWeb制作会社でデザイナーを
やっています。また、世界中のタイプファウンドリーを
一覧できる「Typecache.com」というサイトのサーバ
サイドを担当しています。


http://www.4696.co.jp/
http://typography.cc/
http://typecache.com/
今日はおおまかに
欧文書体には色んな種類があるよ。
というお話ができればと思います。
はじめに
デザインにおいて書体の役割はとても重要で、
     書体の選択を間違えると…
こんな素敵な会社のWebサイトが
こんなことになってしまいます。。
ですので、少しでも多くの書体を知って、
     用途に応じた書体を
  使っていただければと思います。
目次


・欧文書体の種類
・文字の太さと字幅
・作られた時代や国
・書体が持つ雰囲気
・実践編
欧文書体の種類
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
セリフ書体




Aa Aa
  Didot LT Std Roman   Garamond Regular



文字の先端にセリフ(端にある小さな飾り)がついた書
体のことをセリフ書体と言います。ローマン体とも呼ば
れます。
はじめての欧文書体
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
サンセリフ書体




Aa Aa
 Univers Lt Std 55 Roman   Futura Std Medium




セリフがない書体のことをサンセリフ書体と言います。
国内ではゴシック体とも呼ばれます。
はじめての欧文書体
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
スクリプト書体




  Aa
   Linoscript Std Medium
                           Aa
                           !




手書きのストロークに基づいた書体をスクリプト書体と
言います。筆記体とも呼ばれます。
はじめての欧文書体
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
ブラックレター書体




Aa Aa
   Linotext Std Regular   Goundy Text MT Std Regular




図のような黒みが強い書体をブラックレター書体と言い
ます。海外ではこちらをゴシック体と呼びます。
はじめての欧文書体
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
ディスプレイ書体




Ab AB
   prism medium   rosewood Std Regular




サインや看板などに用いるために作られた書体をディス
プレイ書体と言います。
はじめての欧文書体
欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書
体、ディスプレイ書体、スラブセリフ書体などの種類があります。




Aaセリフ書体
              Aa Aa
               サンセリフ書体       スクリプト書体




Aa
ブラックレター書体
              Ab Aa
               ディスプレイ書体     スラブセリフ書体
スラブセリフ書体




Aa Aa
   Aachen Std Bold   Clarendon LT Std Roman




縦線と横線が同じくらいの太さの書体をスラブセリフ書
体と言います。
はじめての欧文書体
さらに。
それらの書体は細かく分類されます。
例えば、セリフ書体は、ベネチアンセリフ、オールド
スタイルセリフ、トランジショナルセリフ、モダンセ
リフなどに。サンセリフ書体は、グロテスク、ネオ・
グロテスク、ヒューマニスト、ジオメトリックなどに
分類されます。
なお、欧文書体の分類について厳密に知りたい場合はVox-ATypIの分類法か、
FontShopやLinotype社の分類法をご参照ください。
(そんなに覚えられない)
たくさん種類があるなぁ。
くらいでいいと思います。
文字の太さと字幅
欧文書体には、
ウェイト(太さ)とセット(字幅)の
   ファミリーがあります。
Helvetica Neue LT Std 27 Ultra Light Condensed
        ウェイトが細くて字幅が狭い。



Helvetica Neue LT Std
 93 Black Extended
        ウェイトが太くて字幅が広い。
細い

     Ultra Light Condensed   Ultra Light   Ultra Light Extended
     Thin Condensed          Thin          Thin Extended
     Light Condensed         Light         Light Extended
     Roman Condensed         Roman         Roman Extended
狭い                                                                広い
     Medium Condensed        Medium        Medium Extended
     Bold Condensed          Bold          Bold Extended
     Heavy Condensed         Heavy         Heavy Extended
     Black Condensed         Black         Black Extended


                                     太い
※すべての書体に
ウェイト展開がある訳ではありません。
あとイタリック体があります。

Helvetica Neue LT Std 46 Light Italic
         Didot LT Std Italic
蛇足
こっちがイタリック体で、

Helvetica Neue LT Std 46 Light Italic

            こっちがオブリーク体。

  Helvetica LT Std Light Oblique
Helvetica
Helvetica
 オブリーク体は文字を斜めにしただけのもの。
 イタリック体は斜体用に調整されているもの。
(蛇足いらなかったかも)
ウェイトや字幅にバリエーションの
  あることが分かりました。
余談
箸休め的に流れにそった小話をします。
作られた時代や国
当たり前ですが、一つ一つの書体は、
     過去にどこかの国の
  誰かによって作られています。
例
trajan pro regular

古代ローマに建てられた「トラヤヌス帝の碑文」
の文字をもとに作られた書体です。TRAJAN
PROは1989年にCarol Twomblyによって制作
されました。
引用元:http://www.codex99.com/typography/images/ancient/trajan_inscr_lg.jpg
Adobe Garamond Pro Regular

16世紀にフランス人のClaude Garamondに
よって製造されました。なお、Garamondは各
社から様々なバリエーション(ギャラモン系、
ジャノン系)がリリースされています。
引用元:http://www.paper-leaf.com/blog/2009/09/free-friday-design-wallpaper-garamond/
Helvetica Regular
1957年、Neue Haas Groteskとして発売され
たものが原型で、Max MiedingerとEduard
Hoffmannによって発表されました。
※Helveticaはラテン語でスイスを意味します。
引用元:http://www.webdesignerdepot.com/2009/03/40-excellent-logos-created-with-helvetica/
Frutiger LT Std 55 Roman

1976年、シャルル・ド・ゴール国際空港(パ
リ)のサインシステム設計を依頼されたAdrian
Frutigerが制作しました。国内でもJR東日本や東
京メトロなど多くの場所で目にする書体です。
はじめての欧文書体
蛇足
「Neue」とか「LT」とか「Std」って何?
「Neue」は英語で「New」の意味。

             つまり
「Neue Helvetica」は「Helvetica」の
       改訂版ということ。
「LT」は「Linotype」のことで、
 フォントファンダリー名を示しています。

            MT=Monotype
              FF=FontFont
ITC=International Typeface Corporation

           などがあります。
「Std」は「Standard」のことで、
他に「Pro=Professional」などがあります。

 これは主に収録されている文字数の違いで
Proの方が文字数が多く収録されています。
書体には見た目の特徴以外にも
    制作時期や制作理由など
様々な背景があることが分かりました。
書体が持つ雰囲気
さて、ようやく見た目の話です。

       欧文書体は、
高級感や暖かみ、近代的イメージなど、
 様々な雰囲気を持ち合わせています。
例
高級感
trajan pro regular
 Didot LT Std Roman
Shelley Script LT Std Regular
インパクト
Bahhaus Std Heavy
  Giddyup Std Regular
Cooper Std Black
スマート
Akko Pro Regular
Helvetica Neue LT Std 25 Ultra Light
       ITC Kabel Std Book
やさしい
Neo Sans Pro Light
Avenir Next Pro Thin
  Myriad Pro Light
ただし、
    文字の大きさ、詰め具合などで
      雰囲気は変わりますので
   (あと個人の感覚もありますし)
あくまでも一例ということでご参照ください。
   そのため、この資料では特に文字詰めをしていません。
余談
箸休め的に流れにそった小話をします。
実践編
Webサービスで
使いやすそうな書体を考えてみる。
最初はHelvetica Neue
(Bootstrapデフォルト状態)
その次から

  DIN Next LT Pro
    Didot LT Std
  Clarendon LT Std
   Prism Medium
  Avenir Next Pro

 の順番で適用してみます。
Helvetica Neue(Bootstrapデフォルト状態)
DIN Next LT Pro
Didot LT Std
Clarendon LT Std
Prism Medium
Avenir Next Pro
 いかがでしょうか。
(見出しならディスプレイ書体ありかも)
蛇足
有料Webフォントを
 使うのも良いと思います。
メリット
・有名フォントも定番フォントも使える
・他のサイトと被りにくくなる
・お金を出して利用するから愛着もわく
例えばFF DINなら買取型で
ページビューが50万/月以下なら$55。
購入ガイドはフォントブログに

詳しい記事があります。

http://blog.petitboys.com/archives/

myfonts-webfonts-guide.html
まとめ
文字中心のページだと
印象は書体に大きく影響されます。

  ですので「書体を選ぶ」ことは
 重要なデザイン作業だといえます。
見た目で選ぶのもいいし、
お国柄や時代性を考慮してもいいし、
 知名度で選んでもいいと思います。
選択基準が増えたことで
  「書体を選ぶ」ことが
 楽しくなればと思います。
参考文献
参考文献
・小林 章『欧文書体―その背景と使い方』株式会社美術出版社
・小泉 均『タイポグラフィ・ハンドブック』研究社
・高岡昌生『欧文組版 組版の基礎とマナー』美術出版社
・組版工学研究会『欧文書体百花事典』朗文堂


引用
・「欧文書体の種類」で利用した画像は
  MyFonts(myfonts.com)と
  H&FJ(typography.com)から引用しております。
おわりに
過不足があったかと思いますが、
    以上になります。
もっと詳しく知りたい方は
          先の参考文献や
年2回刊行の文字デザイン専門誌『TYPOGRAPHY』、
フォント全般の総合情報サイト『フォントブログ』、
『Typecache』などを見ると楽しめると思います。
ありがとうございました。

More Related Content

What's hot

チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・
チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・
チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・Rakuten Group, Inc.
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -wariemon
 
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴Yuudai Tachibana
 
マッチングアプリ企画書
マッチングアプリ企画書マッチングアプリ企画書
マッチングアプリ企画書YushiSato1
 
継承辺りのもしかしたらマイナーかもしれない C#
継承辺りのもしかしたらマイナーかもしれない C#継承辺りのもしかしたらマイナーかもしれない C#
継承辺りのもしかしたらマイナーかもしれない C#m ishizaki
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインRoy Kim
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司schoowebcampus
 
FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略
FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略
FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略cch-robo
 
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)Concent, Inc.
 
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたものFlutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたものRecruit Lifestyle Co., Ltd.
 
UXデザインワークショップ資料 by ATOMOS DESIGN
UXデザインワークショップ資料 by ATOMOS DESIGNUXデザインワークショップ資料 by ATOMOS DESIGN
UXデザインワークショップ資料 by ATOMOS DESIGNAkihiko Kodama
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術Yuji Hato
 
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-Yusuke Naka
 
ビジュアルWeb解析とは
ビジュアルWeb解析とはビジュアルWeb解析とは
ビジュアルWeb解析とはMakoto Shimizu
 
go_router が隠してくれるもの
go_router が隠してくれるものgo_router が隠してくれるもの
go_router が隠してくれるものcch-robo
 
【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介
【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介
【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介Unity Technologies Japan K.K.
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方Yasuhisa Hasegawa
 
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西rie05
 

What's hot (20)

チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・
チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・
チームで1番弱い子がアジャイルレトロスペクティブやってみたら ・・・
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
 
流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
 
マッチングアプリ企画書
マッチングアプリ企画書マッチングアプリ企画書
マッチングアプリ企画書
 
継承辺りのもしかしたらマイナーかもしれない C#
継承辺りのもしかしたらマイナーかもしれない C#継承辺りのもしかしたらマイナーかもしれない C#
継承辺りのもしかしたらマイナーかもしれない C#
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略
FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略
FlutterでのWidgetツリーへの状態伝播とアクセス制限の基本戦略
 
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
 
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたものFlutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたもの
 
UXデザインワークショップ資料 by ATOMOS DESIGN
UXデザインワークショップ資料 by ATOMOS DESIGNUXデザインワークショップ資料 by ATOMOS DESIGN
UXデザインワークショップ資料 by ATOMOS DESIGN
 
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
 
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
SkyWayを使いこなすために How to use SkyWay -SkyWay UG Kansai #1 スペシャルバージョン-
 
ビジュアルWeb解析とは
ビジュアルWeb解析とはビジュアルWeb解析とは
ビジュアルWeb解析とは
 
go_router が隠してくれるもの
go_router が隠してくれるものgo_router が隠してくれるもの
go_router が隠してくれるもの
 
【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介
【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介
【Unite 2017 Tokyo】マルチプレイゲームのグローバル展開事例(BNE様)と完全同期を実現するPhoton TrueSync のご紹介
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
 
さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西さあ、デザインをはじめよう。DevLOVE関西
さあ、デザインをはじめよう。DevLOVE関西
 
ServiceとRepository
ServiceとRepositoryServiceとRepository
ServiceとRepository
 

Viewers also liked

コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツevol-ni
 
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション配色を楽にするコミュニケーション
配色を楽にするコミュニケーションKunio Sakamoto
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎Hiroyuki Ogawa
 
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜典子 松本
 
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」swwwitch inc.
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜Yuudai Tachibana
 

Viewers also liked (7)

コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 
LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜LPデザインに関して〜作成のセオリーとコツ〜
LPデザインに関して〜作成のセオリーとコツ〜
 
「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」「Webデザイナーのためのタイポグラフィと文字組版」
「Webデザイナーのためのタイポグラフィと文字組版」
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
 
SEOに効くコンテンツの作り方 ver1.1
SEOに効くコンテンツの作り方 ver1.1SEOに効くコンテンツの作り方 ver1.1
SEOに効くコンテンツの作り方 ver1.1
 

はじめての欧文書体