mojiru【もじをもじる】

「mojiru」はこのブログ名。「もじる」は著名な言い回しに似せて表現すること。ブログでは、本・映画・グルメなどのヒット商品や気になったトレンドを文字をもじったりもじらなかったしながら、フォントを使ったり使わなかったりしながら取り上げていく。更新頻度は1日1回が基本です。[もじる使用例]1.吾輩は下戸である。お酒は飲めない。2.太閤がまずしかったから。3.棋士の一二三に惨敗。

SEOに適したWebサイト構築Webフォントのまとめ

【スポンサーリンク】

【SEO効果を高める「Webフォント(ウェブフォント)」サービスについてのまとめ記事】

f:id:mojiru:20190514101723p:plain

日本で提供されているWebフォントサービスについてまとめてみた。

日本では現在、フォントワークスの親会社であるソフトバンク・テクノロジーやモリサワ、ダイナコムウェア、リアルタイプなどが提供を行っている。

Webフォントサービスを導入する最大の目的は、最大の目的なSEO(検索エンジン最適化)対策に適していることだろう。

また、デザイナーが意図するフォントが閲覧者の環境に依存せずに表示できるため、デザイナーが思い描くデザインをWebサイトで表現できるのも導入理由になりそうだ。

Webフォント(ウェブフォント)

f:id:mojiru:20180705150337p:plain

Webフォントは、あらかじめサーバ上に置いてあるフォントやネット上で提供されているフォントを呼び出して表示する技術で、閲覧者側に、そのフォントが搭載されていなくても表示できる。Webフォントの主なメリットは、指定したフォントを画像化することなく、文字(テキスト)として表示できるため、SEO(検索エンジン最適化)に適していること。またレスポンシブデザインにも対応しやすいことが挙げられる。

SEO(検索エンジン最適化)

f:id:mojiru:20190514100247p:plain

 

SEOは「Search Engine Optimization」の略で検索エンジン最適化を意味している。検索結果でWebサイトがより多く露出されるために行う一連の取り組みをSEO対策と呼ぶ。

Creative Cloudユーザーを対象とした「Adobe Fonts」でWebフォントが使える

Creative Cloudユーザーが使用できるAdobe Fontsのサービスの一環としてWebフォントが使用できる。

fonts.adobe.com

 

「Adobe Creative Cloud コンプリート 2017年版 | 12か月版 | オンラインコード版」Amazonでの購入はこちら
Adobe Creative Cloud コンプリート 2017年版 | 12か月版 | オンラインコード版

Adobe Creative Cloud コンプリート 2017年版 | 12か月版 | オンラインコード版

 

PhotoshopやIllustratorを始めとするデスクトップアプリ。様々なモバイルアプリとクラウドならではのサービスを統合したトータル制作環境になっている。随時リリースされるアップデートを含め、これらすべてを追加料金なしの定額制で利用できる。 

「Adobe Creative Cloud コンプリート 2017年版|学生・教職員個人版|12か月版」Amazonでの購入はこちら
Adobe Creative Cloud コンプリート 2017年版|学生・教職員個人版|12か月版|オンラインコード版

Adobe Creative Cloud コンプリート 2017年版|学生・教職員個人版|12か月版|オンラインコード版

 

Adobe Creative Cloudの学生・教職員個人版。アカデミック価格なので当然通常価格で購入するより安い。

「Acrobat Standard 2017 アドビ ※パッケージ版【返品種別B】【送料無料】」楽天市場での購入はこちら
[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

Acrobat Standard 2017 アドビ ※パッケージ版【返品種別B】【送料無料】
価格:42500円(税込、送料無料) (2017/12/3時点)


 

 

「Acrobat Pro 2017 日本語 Mac 【学生・教職員版】 アドビ ※パッケージ版【返品種別B】【送料無料】」楽天市場での購入はこちら  

 

 

フォントワークスの親会社でもあるソフトバンクテクノロジーが提供する、最大のフォント数を使えるWebフォントサービス「FONTPLUS(フォントプラス)」

ソフトバンクテクノロジーが提供するWebフォントには子会社であるフォントワークスのフォントだけでなく、和文987書体(2018年7月1日現在)に加え、Monotypeの約2万におよぶ欧文書体が使えるという圧倒的な書体数を形成しているのが特徴。

fontplus.jp

 

Webフォントサービス「FONTPLUS」紹介記事

www.mojiru.com

モリサワが提供するWebフォントサービス「TypeSquare(タイプスクエア)」

TypeSquare(タイプスクエア)は、モリサワが提供するインターネットを介してWebフォントを配信するサービス。PCやモバイル端末など閲覧する側に指定されたフォントが搭載されていなくても、制作側で指定した書体を美しく表示することができる。

「TypeSquare」単独でのサービスの提供のほかに、モリサワの主力製品であるMORISAWA PASSPORT製品を使用しているユーザーは「MORISAWA PASSPORTプラン」として「TypeSquare」を使用することができる。

typesquare.com

 

Webフォントサービス「TypeSquare」紹介記事

www.mojiru.com

Webフォントサービス「TypeSquare」が追加料金なく使用できる「MORISAWA PASSPORT ONE」Amazonでの購入はこちら 
MORISAWA PASSPORT ONE

MORISAWA PASSPORT ONE

 

モリサワのすべてのフォントに、ヒラギノフォント、タイプバンクフォント、昭和書体フォントの日本語フォントや、欧文フォント、中国語フォント、韓国語フォント、多言語フォントなどを加えた全1000書体以上が、どれでも選べて好きなだけ使えるライセンス製品。

常に最新で快適なフォント環境を、追加料金なしで提供。またMORISAWA PASSPORT ONEの特徴として事前の手続きなど一切なしに手元に届き次第すぐにご利用できる。

TypeSquare利用機能は、すべての「MORISAWA PASSPORT製品」ユーザーを対象に「MORISAWA PASSPORT」製品とセットで販売となっており、追加料金なく提供される。

Webフォントサービス「TypeSquare」が追加料金なく使用できる「MORISAWA PASSPORT ONE」楽天市場での購入はこちら  
 

 

Webフォントサービス「TypeSquare」が追加料金なく使用できる「MORISAWA PASSPORT更新専用パック」Amazonでの購入はこちら
MORISAWA PASSPORT更新専用パック

MORISAWA PASSPORT更新専用パック

 

MORISAWA PASSPORT更新専用パック(PC1台/1年間)は、MORISAWA PASSPORT / MORISAWA PASSPORT ONEで契約の更新に必要な書類手続きが一切なく、簡単に素早く契約の更新ができるパッケージ。PC1台のみ更新したい、認証登録が済んでいる、インターネット環境がある、複数台契約や複数年契約による価格、業界別ライセンスプランを希望しないユーザーにオススメ。 

Webフォントサービス「TypeSquare」が追加料金なく使用できる「MORISAWA PASSPORT更新専用パック」楽天市場での購入はこちら 
 

 

モリサワWebフォントサービス「TypeSquare」導入記事:STUDIO

www.mojiru.com

 

モリサワWebフォントサービス「TypeSquare」導入記事:お名前.com レンタルサーバー

www.mojiru.com

 

モリサワWebフォントサービス「TypeSquare」導入記事:カゴヤ・ジャパンWordPress専用サーバー

www.mojiru.com

 

モリサワWebフォントサービス「TypeSquare」導入記事:エックスサーバー

www.mojiru.com

モリサワWebフォントサービス「TypeSquare」導入記事:エックスサーバー「wpX」

www.mojiru.com

 

「DynaSmart V」などの利用でダイナフォントをWebフォントとして使用できる「DynaSmart DFO オプション」

ダイナコムウェアでは2019年4月中旬まで、Webフォント単独サービスとして「DynaFont Online(DFO)」を展開してきたが、それ以降はダイナフォント年間ライセンス「DynaSmart」シリーズと紐づいたサービスに「DynaSmart DFO オプション」として切り替わった。

「DynaSmart V」ではPV制限ありで「DynaFont Online(DFO)」を無償提供しているほか、「DynaSmart T」でも別途、「DynaSmart DFO オプション」を契約する事でダイナフォントをWebフォントとして利用できる。

www.dynacw.co.jp

 

 

「ダイナコムウェア DynaSmart T PC1台1年 カード版(新規・更新兼用)」Amazonでの購入はこちら
ダイナコムウェア DynaSmart T PC1台1年 カード版(新規・更新兼用)
ダイナコムウェア DynaSmart T PC1台1年 カード版(新規・更新兼用)
 

「DynaSmart T」はダイナフォントを安く使用したい場合にオススメ

■DynaSmart Tは、ダイナフォントTrueTypeフォントWin版、Mac版書体をした年間ライセンス。

UDフォントやグッドデザイン賞受賞書体「古籍書体」も収録され、収録される日本語書体全書体に新元号「令和」の合字に対応。また、星座仮名フォントやアートフォントなど楽しい特典フォント2,400書体以上も収録。

価格は現行2製品の中では安く使える。ただし、許諾範囲は狭いため、使用用途は限られるかもしれない。

■「DynaSmart T」はビジネス資料作成にも適した読みやすい「UDフォント」を収録

「DynaSmart T」には、誰にでも読みやすいフォントとして設計されたUDフォントを含む、複数の太さを持つ明朝体、ゴシック体、丸ゴシック体など基本書体を収録。

マイクロソフトの「Office」で作成するビジネス資料などで使用でき、読みやすいUDフォントや強調したい場面にオススメの極太フォントを駆使して説得力あるビジネス資料を作成することもできる。

年賀状や暑中見舞いなどプライベートシーンでは、収録されている楷書体、行書体、隷書体など豊富な毛筆系書体の使用がオススメ。

■「DynaSmart T」は色々なデザインフォントでブランディングできる

 「Dynasmart T」は、収録されているダイナフォントを印刷物およびユーザー自身のWebサイトで使用できる年間ライセンスになっている。

店舗で使用する場合を例に挙げると、商品パッケージ、POP、ポスター、チラシといった印刷物から店舗サイトまで、フォントが許諾対応されているので、デザイン性あふれるフォントを使用したトータル的なブランディングも可能。

収録されるフォントは多種多様で、様々なジャンルのデザインに対応できるラインナップとなっている。

 ■「DynaSmart T」はグッドデザイン賞受賞「古籍五書体」や「UDフォント」を収録

 グッドデザイン賞受賞書体である「古籍五書体」を収録。古籍五書体は故宮博物院に納められた古籍などの復刻版をもとに開発された書体でそのクオリティの高さを評価されての同賞受賞となる。

UDフォントは、ユニバーサルデザインをコンセプトに開発された可読性・視認性・判読性に優れたフォント。新聞や取扱い説明書、約款、看板などの印刷物においても正確な情報を読みやすく伝達できる文字ツールになっており、ビジネス資料の作成などにも読みやすい書体として利用できる。ダイナコムウェアのUDフォントはゴシック体3ウェイト、丸ゴシック体3ウェイトを収録。

■「DynaSmart T」は日本語書体が新元号「令和」の合字に対応

「DynaSmart T」は日本語書体が新元号「令和」の合字に対応している。合字は、複数の文字を合成して一文字にしたもの。つまり令和を一文字で入力できる。

■「DynaSmart T」の主な収録書体

〇基本書体…平成明朝体、平成ゴシック体、華康明朝体、娥眉明朝体、UDゴシック体、UD丸ゴシック体など。
〇毛筆系書体…教科書体、楷書体、行書体、隷書体、金文体、新宋体、爽流体など。
〇古籍書体…古籍木蘭、古籍糸柳、古籍真竹、古籍銀杏、古籍黒檀。
〇POP系書体…南極POP、POP1体、角POP、まるもじ体、京劇体、ホラー、スターゴシック体など。
〇手書き風書体…シネマ凜、ハンノテート、ハンジペン、てがき線、てがき楽、てがき魔、てがき鈴など。
〇ロマン風書体…ロマン雪、ロマン輝、麗雅宋、優雅宋など。
〇ビットマップ風書体…点々体各種収録。
〇DC書体…籠文字、寄席文字、方隷書、ひげ文字、クリスタルなど。
〇その他…クラフト遊、クラフト墨、勘亭流、綜藝体、パンダ体など。

「ダイナコムウェア DynaSmart T PC1台3年 カード版(新規・更新兼用)」Amazonでの購入はこちら
ダイナコムウェア DynaSmart T PC1台3年 カード版(新規・更新兼用)
ダイナコムウェア DynaSmart T PC1台3年 カード版(新規・更新兼用)
 
「ダイナコムウェア DynaSmart T PC1台1年 カード版(新規・更新兼用)」楽天市場での購入はこちら 

 

「ダイナコムウェア DynaSmart T PC1台3年 カード版(新規・更新兼用)」楽天市場での購入はこちら

 

 

「ダイナコムウェア DynaSmart V PC1台1年 カード版(新規・更新兼用)」Amazonでの購入はこちら
ダイナコムウェア DynaSmart V PC1台1年 カード版(新規・更新兼用)

ダイナコムウェア DynaSmart V PC1台1年 カード版(新規・更新兼用)

 

デザイナーが仕事でダイナフォントを使用する場合に有用な、使用許諾範囲が広い年間ライセンス「DynaSmart V」

■「DynaSmart V」は、ダイナフォント全書体を収録し、印刷物、Webデザイン・映像、ゲーム&アプリなどフォントの使用許諾範囲を大幅に広げたプロデザイナー向け年間ライセンス。
多言語フォントを豊富に収録しているほか、Webフォントサービスにも対応している。
また、最新書体をアップグレードにて随時提供しており、グッドデザイン賞受賞およびiFデザイン賞(iF Design Award)受賞「甲金文体」やあらゆるサイズの画面に適したテロップ向け書体「テロップ書体」などが新収録されている。
契約はPC1台で契約年数は1年単位。Windows、Macintoshどちらにも対応しており、OpenTypeからTrueTypeまで収録した豊富な書体バリエーションを誇る。

 ■「DynaSmart V」は15種類の言語が使える「金剛黒体」など豊富な多言語フォントを収録

翻訳サービスやローカライズにも有用な15種類の言語が同一のデザインで使える多言語フォント「金剛黒体」を含む様々な多言語フォントを収録しており「金剛黒体」の収録言語は、「簡体字中国語GB2312」「簡体字中国語GB18030」「繁体字中国語」「韓国語」「ラテン語」「ベトナム語」「タイ語」「タイ語(モダンタイプ)」「ビルマ語」「ヒンディー語」「ヘブライ語」「アラビア語」「ベンガル語」「シンハラ語」「タミル語」による15種類6ウェイトで合計90書体となる。日本語書体の金剛黒体StdN版、Pro6版、Pro6N版18書体を含めると合計108書体が使える。

■「DynaSmart V」は使用許諾範囲が広く、メディアミックスで世界観の統一に適している

「DynaSmart V」は、ダイナフォント全ての書体をポスター、カタログ、チラシ、POP、パッケージデザインなどの印刷物から、Webサイトやバナー広告、電子書籍、LINEスタンプなどのデジタルコンテンツ、映像・動画、TVゲーム、スマートフォンゲーム&アプリ、遊技機といった様々なコンテンツに使用できるライセンス。その使用許諾範囲は、例えばゲーム本編、動画、Webサイト、紙媒体などに一貫して同書体を使用できるため、作品のコンセプトとして世界観を統一できるなど、メディアミックスにも適しているライセンスといえる。

■「DynaSmart V」は収録される日本語全書体が新元号「令和」の合字に対応

「DynaSmart V」の主な日本語収録書体
〇基本書体…金剛黒体、平成明朝体、平成ゴシック体、華康明朝体、娥眉明朝体、UDゴシック体、UD丸ゴシック体など。
〇毛筆系書体…甲金文体、教科書体、楷書体、行書体、隷書体、金文体、新宋体、爽流体など。
〇古籍書体…古籍木蘭、古籍糸柳、古籍真竹、古籍銀杏、古籍黒檀。
〇POP系書体…南極POP、POP1体、角POP、まるもじ体、京劇体、ホラー、スターゴシック体など。
〇手書き風書体…シネマ凜、ハンノテート、ハンジペン、てがき線、てがき楽、てがき魔、てがき鈴など。
〇ロマン風書体…ロマン雪、ロマン輝、麗雅宋、優雅宋など。
〇ビットマップ風書体…点々体各種収録。
〇DC書体…籠文字、寄席文字、方隷書、ひげ文字、クリスタルなど。
〇その他…クラフト遊、クラフト墨、勘亭流、綜藝体、パンダ体など。

■「DynaSmart V」はWebフォントクラウドサービス「DynaFont Online(DFO)」が使える

「DynaFont Online(DFO)」は、ダイナコムウェア株式会社が開発したWebフォントクラウドサービス。DFOを利用することで、金剛黒体を含むダイナフォント800書体以上が閲覧者の環境に依存することなくWebページ上で表示できる。もちろんWebフォントのメリットである、検索性の向上によるSEOの強化にもつながる。また、DFOを利用することで、画像に頼らないページデザインの構築が可能で、どのデバイスでも鮮明にテキストを表示でき、豊富な種類のフォントによる自由度の高いサイトを運用できる。DFOにはWebフォントを簡単な手順で導入できる4つのツールも提供される。

 リアルタイプが提供するWebフォントサービス「REALTYPE(リアルタイプ)」

無料/定額で使える300を超える日本語フォントが使用できるWebフォントサービス。

www.realtype.jp

 

リアルタイプWebフォントサービス「REALTYPE(リアルタイプ)」紹介記事

www.mojiru.com

 

「誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))」紹介記事

www.mojiru.com

 

「誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))」Amazonでの購入はこちら 
誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))

誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))

 

▼目次
第1章 ウェブフォントについて
1.1 ウェブフォントとは?
1.2 ウェブフォントのメリット、デメリット
1.3 フォントデータの中身
1.4 ウェブフォントの形式
第2章 ウェブフォントを使う
2.1 自前で用意する場合
2.2 その他の方法
第3章 ウェブフォント最適化
3.1 ウェブフォントとクリティカルレンダリングパス
3.2 各ブラウザの挙動の違い
3.3 ウェブフォントでよくある問題
3.4 CSSによる最適化
3.5 JavaScriptによる最適化
3.6 キャッシュによる最適化
3.7 preloadによる最適化
3.8 最適化チェックリスト
付録A フリーフォントのライセンスについて
A.1 ウェブフォントの扱い
A.2 ウェブフォントとして利用可能なライセンス
A.3 著作権侵害をしないために気をつけることリスト
付録B おすすめの日本語フリーフォント

【ウェブフォントの基礎から最適化まで、なんでもござれの一冊! これを読めばあなたもウェブフォントマスター! 】

本書は日本語でのウェブフォントを使う際の様々な最適化の手法について詳しく紹介しています。

「重い」「使いにくい」といったウェブフォントへの抵抗感を払拭し、ウェブサイトを「おしゃれ」に楽しみましょう。

▼本書の対象読者
ウェブフォントを使いたいと思っているフロントエンドエンジニア、ウェブデザイナー

大木尊紀Profile●都内で働くフロントエンドエンジニア。猫、温泉、ゲーム、ロボットアニメ、自転車、フォントが好き。最近はReactとかVue.jsとかPolymerとかを書いている。好きなフォントはチェックポイントリベンジ、機械彫刻用標準書体、ラグランパンチ、源柔ゴシック。

「誰でもつかえる! ウェブフォント実践マニュアル (技術書典シリーズ(NextPublishing))」(※電子書籍版)楽天市場での購入はこちら

 

 

フォントを開発・販売する「フォントベンダー」紹介記事 

www.mojiru.com

©2017-2019 mojiru All Rights Reserved. | プライバシーポリシー