cmsと相性抜群のwebフォント 主要3サービスのご紹介
TRANSCRIPT
![Page 1: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/1.jpg)
CMSとの相性抜群な
Webフォント 主要3サービスのご紹介
有限会社アップルップル 今井 理紗子
![Page 2: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/2.jpg)
CMSと相性抜群のWebフォント
本セッションの流れ
✤和文フォントの数
✤費用
✤使い方
✤案件ごとの使い分けのポイント
主要3サービスのご紹介
活用事例のご紹介
![Page 3: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/3.jpg)
CMSと相性抜群のWebフォント
![Page 4: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/4.jpg)
CMSを使ったサイトにこそ
Webフォントの利用をお勧めします
1. CMSと相性抜群のWebフォント
![Page 5: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/5.jpg)
1. CMSと相性抜群のWebフォント
![Page 6: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/6.jpg)
http://typesquare.com/ja/sample/csseffect/CSSサンプル集 - TypeSquare
![Page 7: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/7.jpg)
![Page 8: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/8.jpg)
主要3サービスのご紹介
![Page 9: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/9.jpg)
今回ご紹介するWebフォントサービス
2. 主要3サービスのご紹介
✤ FONTPLUS(ソフトバンク・テクノロジー)
✤ Adobe Typekit(Adobe)
✤ TypeSquare(モリサワ)
![Page 10: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/10.jpg)
![Page 11: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/11.jpg)
![Page 12: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/12.jpg)
![Page 13: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/13.jpg)
和文フォント数
2. 主要3サービスのご紹介
FONTPLUS 714
TypeKit 80?
TypeSquare 601
※全ウェイトでのカウント
![Page 14: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/14.jpg)
FONTPLUSで
使えるメーカー
2. 主要3サービスのご紹介
✤フォントワークス
✤イワタ
✤モリサワ
✤モトヤ
✤ SCREEN GP
✤カタオカデザインワークス
✤大日本印刷
✤方正
✤白舟書体
※和文フォントのみ
![Page 15: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/15.jpg)
Typekitで
使えるメーカー
2. 主要3サービスのご紹介
✤モリサワ
✤アドビ
✤タイプバンク※和文フォントのみ
![Page 16: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/16.jpg)
TypeSquareで
使えるメーカー
2. 主要3サービスのご紹介
✤モリサワ
✤ SCREEN GP
✤タイプバンク※和文フォントのみ
![Page 17: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/17.jpg)
費用
2. 主要3サービスのご紹介
FONTPLUS Typekit TypeSquare
初期費用 10,800円 ※1 なし ※2 なし
月額 1,080円~(~10万PV)
$40~ 2,160円~※3(~25万PV)
使用フォント数 無制限 制限あり 制限あり
※顧客サイトに使う場合
![Page 18: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/18.jpg)
2. 主要3サービスのご紹介
✤ドメインを登録
✤ JavaScriptコードを貼り付ける
✤ CSSでフォントを指定
✤サイト上にWebフォント表示!
使い方基本的な使い方は以下の通りです。
![Page 19: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/19.jpg)
![Page 20: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/20.jpg)
![Page 21: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/21.jpg)
![Page 22: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/22.jpg)
2. 主要3サービスのご紹介
✤~10万PVのドメインを複数登録するならFONTPLUS
✤ 10万PV~のドメインを少数登録するならTypeSquare
✤ Creative Cloud を登録しているならAdobe Typekit を試すのも◎
案件ごとの使い分けのポイント
![Page 23: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/23.jpg)
2. 主要3サービスのご紹介
案件ごとの使い分けのポイント
お客様からフォントの指定が ある場合は、そのフォントを出せるサービスに!
※モリサワフォントは要注意
![Page 24: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/24.jpg)
活用事例のご紹介
![Page 25: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/25.jpg)
まとめ
![Page 26: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/26.jpg)
Webフォントをおすすめする理由
4. まとめ
✤数年前に比べて、フォントサーバーが安定
✤サイトの見映えが運用者の技術に左右されない
✤テキストなので、SEO対策としても◎
![Page 27: CMSと相性抜群のWebフォント 主要3サービスのご紹介](https://reader031.vdocuments.site/reader031/viewer/2022021419/58f179361a28aba2678b45dd/html5/thumbnails/27.jpg)
ご清聴ありがとうございます
r1sak0
@i_mairy!"