8
クラウドフォントサービス ウェブ デザインは 新たな表現力を 手に入れる。 CSSを使った 文字修飾も簡単に 情報の検索性や活用性が 向上。さらにレスポンシブ デザインにも最適 多彩なフォントの 美しさをそのまま ウェブサイトで表示 ご利用の規模に 合わせて選べる 様々なプラン

ウェブ デザインは 新たな表現力を 手に入れる。 · 2015-09-30 · 新たな表現力を. 手に入れる。 cssを使った 文字修飾も簡単に. 情報の検索性や活用性が

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

クラウドフォントサービス

ウェブデ ザ イン は

新 た な 表 現 力を

手 に 入 れ る。

CSSを使った文字修飾も簡単に 情報の検索性や活用性が

向上。さらにレスポンシブデザインにも最適

多彩なフォントの美しさをそのままウェブサイトで表示

ご利用の規模に合わせて選べる様々なプラン

スマートデバイス向けアプリ

サイト制作側 WebブラウザTVやゲームなど

今後の対応

App

App

コンテンツサーバ

クラウドフォントは、一般的には「Webフォント」として知られており、インターネットを介してフォントを配信し、Webブラウザで表示させる仕組みのことです。Webフォントを使ったWebサイトでは、制作側で指定したフォントが閲覧側のパソコンに搭載されていなくても、フォントを自動的に読込んで表示することができます。パソコンだけでなく、スマートフォンやタブレット

などのWebブラウザで表示することもできます。モリサワでは将来的に、フォントをスマートデバイス向けのアプリやインターネットTV、カーナビゲーションシステムなど、インターネットに接続するすべての環境へ配信することを目的とするため、

「Webフォント」ではなく「クラウドフォント」と呼んでいます。

クラウドフォントとは?

TypeSquareは、あなたのWebサイトデザインを一新します。TypeSquareのクラウドフォントを利用することで、多彩なフォントの美しさはそのままに、魅力的なWebサイトを効率よく作成できます。

[スタンダードプランの場合]

TypeSquareの特長

表示に必要な文字だけをダウンロードするダイナミックサブセットを利用することで、配 信するフォント自身のファイルサイズを軽量化し、読込みの速度を向上させることを可能にしています。そのため、スマートフォンやタブレットのように

必ずしも通信速度が良好でない環境でも、快適にWebサイトを表示することができます。あらかじめサブセット化されたフォントを利用するセルフホスティング方式もご用意しています。

よりみち三昧。よりみち三昧。

よりみち三昧。

▼ すべての文字の中から必要な文字だけ抽出して配信

よ り みち三

昧 。

あ い う え おか き く け こさ し す せ そた ち つ て とな に ぬ ね のは ひ ふ へ ほま み む め もや ゆ よら り る れ ろわ を ん、 。

今 昨 良 更 無回 韓 皆 週 買俺 昧 頑 楽 曜最 好 除 願 板購 試 日 画 奴掲 疲 使 予 三月 寝 朝 私 自場 駅 伝 学 後高 電 気 思 待母 紙 話 来 逃上 町 祝 様 会

サブセット化で読込み速度を向上

TypeSquareでは、一般的な明朝体やゴシック体はもちろん、デザイン書体やかな書体、装飾書体、UD(ユニバーサルデザイン)書体に加え、欧文書体、中国語、韓国語など、650書体を超える豊富な書体ラインナップをご用意しています。

多くの印刷物をはじめ、携帯電話やテレビのテロップなどさまざまなシーンで利用されているモリサワフォントを、そのままWebサイトでも使用することができます。

お使いいただける書体はTypeSquareサイトの「フォント一覧」でご案内しています。http://typesquare.com/service/fontlist

かなのドラマ

A A A A读 读 讀 讀영 영 영 영

かな書体

欧文書体

中国語(簡体・繁体)

韓国語

美しい文字美しい文字美しい文字美しい文字

明朝体

UD書体

ゴシック体

デザイン書体

※書体は随時追加されます。

多様なニーズにお応えする豊富な書体ラインナップ

会 社 案 内やカタログ、広告、雑 誌 などのコンテンツをWebサイトでも展開する場合、そのデザインに一貫性を持たせることで、ブランドやコンセプトがより強固なものとなり、企業や商品のイメージアップを図ることができます。Webフォントなら、画像やイラストだけでなく、印刷物と同じ書体をWebサイトやさまざまなデジタルコンテンツでも使用することができ、メディアを超えてイメージを統一することができます。

メディアを超えてイメージを統一

ひとり時を忘

[ 特 集 ] 1 0

Webサイトの検索性を高めるためには、画像で作成したタイトルや見出しは、その情報をタグに記述しなければなりませんでした。しかし、Webフォントを指定した文字は完全なテキストとして扱われるため、面倒なタグ付けの作業は不要になります。さらに

自動翻訳や音声読上げなどの機能とも連携しやすくなり、伝えたい情報を的確に提供できるようになります。また、中国語や韓国語をはじめとする多国語の書体もご利用いただけるので、Webサイトのグローバル化にも対応します。

スマートフォンやタブレットなどでは、手軽に画面の拡大を行うことができます。このとき、見出しやボタンなどの画像化された文字は、画像1のようにぼやけて表示されてしまいます。しかし、

Webフォントを使うことで、文字を拡大しても画像2のようにクリアで美しく表示することができます。

拡大してもクリアで美しい文字を表示

▼ Webサイトの検索性の向上

スマートフォンやタブレットでの表示 画像1:画像化された文字 画像2:TypeSquareを利用した文字

▼ 音声読上げ機能との連携

▼ 自動翻訳機能との連携

使い古されたテーブル&チェアに、年季の入ったウッディ調インテリア。

よりみち三昧

情報の検索性や活用性を向上

TypeSquareのメリット

スマートフォンやタブレットなど多種多様のデバイスが普及しているなか、さまざまなスクリーンサイズや解像度に対応できるWebサイトの制 作手法が注目されています。Webフォントは、ブラウザの表示幅に合わせてページのレイアウト幅が可変

するリキッドレイアウトや、異なる画面サイズに応じてレイアウトが自動的に調整されるレスポンシブデザインなど、文字組みが多様に変更される手法とも非常に相性がよいです。

これまでのWebサイトでは、見出しやボタンの文字に好みの書体や効果を指定したい場合、画像を個別に用意しなければなりませんでした。そのため、文字に変更があった場合は、その都度画像を作り直す必要がありました。Webフォントなら、使い

たいフォント名をテキストに指定し、通常のテキストと同様に文字サイズの調整やCSSによる効果を設定するだけです。急な文字修正が生じても、画像を作り直す必要はもうありません。

Webサイト管理者 Webサイト管理者

Webサイト管理者

Webデザイナー

▼ 文字を修正する場合 ▼ ボタンを追加する場合

画 像 の 文 字 だ と

W e b フォント な ら

修正・追加を依頼画像を修正・追加してデータを送付

データを再配置してWebサイトを更新

テキストを自分で修正・追加してWebサイトを更新

▼ CSSによるさまざまな効果を文字に適用

ドロップシャドウ 光彩

透明グラデーション

タグを挿入したプロパティ画面(ドロップシャドウ)

リキッドレイアウトやレスポンシブデザインにも最適

Webサイトの制作・更新フローを大幅に改善

※Webフォントの使用されたWebページが閲覧されると、1PVとしてカウントされます。※新規契約の場合は、決済が完了した時点でご利用いただけますが、契約の起算日は

翌月1日からとなります(MORISAWA PASSPORTプランは除きます)。※登録されたドメインに含まれるすべての階層でフォントを適用できます。サブドメインは1

ドメインとしてカウントします。※月契約の場合、フォントの配信が基本PVを超えると超過料金が発生します。※年契約では、ご契約11ヶ月終了時点でのPV実績が基本PVを超過した場合、フォントの

配信は停止されませんが、次年度はそのご利用実績をカバーするプランでご契約いただき

ます(MORISAWA PASSPORTプランは除きます)。※フォントの配信は、月契約・年契約にかかわらず、お客様がマイページからいつでも停止・

再開できます。※年契約のお支払いは、クレジットカードと銀行振込のいずれかをお選びいただけます。

月契約の場合は、クレジットカードのみとなり、毎月自動的に継続されます(アドバンスドプランは別途お問合せください)。

※退会やプラン解約の際に返金はいたしません。月契約を解約される場合、ご利用最終月の料金はその翌月にご請求させていただきます。

※アドバンスドプランをご希望の方はお問合せください。

無料 I II

より多くのドメイン数や、100万PV/月を上回る規模でのご利用は「アドバンスドプラン」をご検討ください。

月契 約 ¥0 ¥2,000/月 ¥4,000/月

基 本 PV(PV=ページビュー) 1万 PV/月

25万 PV/月超過10万PVごとに

¥500加算

100万 PV/月超過10万PVごとに

¥500加算

利用可能 書 体 数 1 3 全書体利用可能ドメイン数 1 2 5TypeSquare A P I ー ー ご利用可能年 契 約 ー ¥24,000/年 ¥48,000/年年 契 約 時の基 本 PV ー 300万 PV/年 1,200万 PV/年追 加オプション1書 体追 加 ー ¥500/月 ー1ドメイン追 加 ー ¥500/月 ¥500/月

1STEP

2STEP

3STEP

4STEP

5STEP

TypeSquareサイトの「ご利用申込み」から会員登録し、プランを購入してください。※MORISAWA PASSPORTプランはお申込み方法異なります。詳しくはこちらをご覧ください。 http://typesquare.com/service/plan

マイページから専用タグを入手し、htmlファイルに記述します。

Webフォントを適用したいテキストに、font-familyでフォント名を指定してください。※セルフホスティングプランでは利用するフォントをご自身でサーバに設置いただきます。  詳しくはログイン後のマイページでご確認ください。

ご利用のサイトのURLを登録します。

Webサイトを公開し、書体が適用されることをご確認ください。

※記載している価格は税抜です。

簡単にWebフォントをご利用いただけるプランです。スクリプトタグを挿入し、書体名を指定するだけで、サイト内に必要な文字が自動検知され、クラウド上から閲覧環境に最適なフォントが配信されます。

●スタンダード無料プランは、毎月1万PVまでフォントが配信され、超過した場合は翌月までフォントは配信されません。●TypeSquare A P Iは、書体リストの取得、フォントの非同期呼 出しなどが可能で、幅広いコンテンツにご利用いただけます。 詳しくはリファレンスページをご覧ください。 http://typesquare.com/api_reference/

●セルフホスティングプランは1ドメインごとのご契約となります。●月契約の場合、フォントの配信が基本PVを超えると超過料金が発生します。●セルフホスティングプランでは、マイページから必要なサブセットフォントを作成できます。その際、コンテンツ(html、css)に含まれていない文字列も 追加で指定でき、追加文字を含めたサブセットフォントが作成されます。

サイトに必要なフォントをお客様ご自身でWebサーバに設置してご利用いただくプランです。あらかじめサイトで使われる文字をサブセット化したフォントを利用することで、書体が素早く適用されます。固定メニューや更新頻度の少ないコンテンツにおすすめです。

プランと価格

スタン ダ ードプ ラン

セ ルフホスティング プ ラン

■注意事項(全プラン共通)

http://typesquare.comTypeSquareホームページ

導入の流れ

STORES.jp https://stores.jp/

アドバ ンスドプ ラン

MORISAWA PASSPORT プ ラン

すべてのMORISAWA PASSPORT製品ご契約者に、追加料金なくTypeSquareをご利用いただけるプランです。

配信方式 クラウド配信とセルフホスティングの両方をご利用いただけます。

基 本 PV(PV=ページビュー)

それぞれの配信方式で1,000万PV/年です。※1,000万PV/年を超過するとフォントの配信は停止します。

利用可能 書 体 数 全書体

利用可能ドメイン数 クラウド配信は無制限、セルフホスティングは1ドメインとなります。

ご 利用期 間 MORISAWA PASSPORT製品の契約満了日までご利用いただけます。※MORISAWA PASSPORT製品の契約満了日まで2 ヶ月未満の場合はお申込みいただけません。

TypeSquare A P I クラウド配信で利用可能。

対象製品

MORISAWA PASSPORT、MORISAWA PASSPORT ONE、教育機関向けMORISAWA PASSPORT、公共団体向けMORISAWA PASSPORT、MORISAWA PASSPORT アカデミック版、MORISAWA PASSPORT アカデミック版(モリサワ認定校用)※各製品の詳細はモリサワコーポレートサイトをご覧ください。http://www.morisawa.co.jp/font/products/

※本プランはTypeSquare利用機能としてMORISAWA PASSPORT製品とセットで販売されるものです。

1,000万PV/年を超える規模でご利用になる場合や、セルフホスティングで2つ以上のドメインをご利用になる場合は、別途TypeSquareで該当するプランをご購入ください。

導入事例(順不同)

PV数の多い大規模案件や各種システム案件でご利用の場合は、アドバンスドプランをご用意しております。一般的な機能として提供していないコーポレートフォントなどのオリジナルフォント配信やWebフォントの配信システム連携などの特別なプランもご用意しております。担当営業がお客様のご依頼に応じた最適なプランをご提案、お見積させていただきます。詳しくは TypeSquare サイトのお問合せフォームよりお問合せください。https://typesquare.com/question/

「STORES.jp」はWebサイトの知識をまったく持たない方でも、簡単にオンラインストアを作ることができるサービスです。オンラインストアにとってロゴはストアの雰囲気を作るために非常に重要です。テキストでストア

名を表示しているストアオーナーが TypeSquareを利用することで、ストアの雰囲気に合わせてフォントを選択し、デザイン性の高いサイトを提供しています。

Picky-Pics https://picky-pics.com/約5万点ある写真やイラスト素材を利用してチラシやハガキ、名刺等のデザイン作成ができるオンラインツールです。自分の好きな素材をドラッグ&ドロップしてレイアウトするだけで、プロ並みのデザインに仕上げます。

Web上ではTypeSquareを利用し、PDFや画像への書出しはサーバアプリケーション用フォントを利用することにより、Web to Printのサービスを実現しています。

VOGUE JAPAN http://www.vogue.co.jp/国際的なハイブランドのファッションを扱う雑誌「VOGUEJAPAN」の公式サイトです。雑誌、PC、モバイルすべて合わせて「VOGUE 」というひとつのブランドを形成しているという考え方から、ブランドイメージが変わらないようにする必要がありました。TypeSquareを利用する

ことによって誌面でこだわったフォントを使用し、雑誌で展開されているブランドイメージに沿った世界観を日本語書体はもちろんのこと、多言語書体も利用して海外からもアクセスの多いWebサイトでも再現しています。

本製品に関する情報は typesquare.com●Mac OSは、Apple Inc.の商標です。●Windowsは、米国Microsoft Corporationおよびその他の国における登録商標です。●モリサワフォントロゴは、株式会社モリサワの登録商標です。●その他の社名および商品名は、各社の登録商標または商標です。●本仕様は、予告なく変更する場合があります。あらかじめご了承ください。

本社    〒556-0012 大阪市浪速区敷津東2-6-25 TEL 06-6649-2151東京本社  〒162-0822 東京都新宿区下宮比町2-27 TEL 03-3267-1231仙台支店  〒984-0051 仙台市若林区新寺1-3-8 TEL 022-296-0421名古屋支店 〒460-0002 名古屋市中区丸ノ内1-5-10 TEL 052-201-2341

広島営業所  〒730-0805 広島市中区十日市町1-6-27 広島印刷会館1F TEL 082-296-1114福岡営業所  〒812-0013 福岡市博多区博多駅東1-3-25 TEL 092-411-5875鹿児島営業所 〒890-0051 鹿児島市高麗町11-3 下田平ビル2F TEL 099-252-2255

株式会社 モリサワ

1509

札幌営業所 〒001-0010 札幌市北区北十条西2-6 サウスシティ2F TEL 011-700-0112

www.mor isawa.co. jp

http://typesquare.com/sample/csseffect/CSSを使ったテキスト修飾のサンプルをご用意しました。使用したソースを表示して実装方法を確認いただけます。

http://typesquare.com/about_tryout/

TypeSquare Web Font TryoutはTypeSquareから配信されるフォントを使って、あなたのWebサイトの書体を自由に変更できます。ページの下にあるフィールドにURLを入力して「Tryout」をクリックするとご自分のページにTypeSquareを適用した様子を見ることができます。ぜひお試しください。

■TypeSquare Web Font TryoutTypeSquareサイトのご紹介

■ CSSサンプル集

● シャドウを使った立体表現 ● 反射とグラデーションを使った文字の演出[ サンプル例 ]

Q&A よくある質問

こちらをご確認ください http://typesquare.com/example/

SEIYU 東京都現代美術館 株式会社フェリシモ「Niau[ニアウ]」

株式会社資生堂「Beauty & Co. 」 東京カレンダー 大日本印刷「秀英体」公式サイト

導入事例 最新情報は Twitter(@typesquare)でご確認ください

Q1 モリサワフォントを購入していませんが、利用できますか?

A1 ご利用いただけます。エディタや制作ソフトウェア上で書体を表示させたい場合は、別途モリサワフォントをご購入ください。

Q2 制 作会 社での利 用を考えています。Ty p eSq ua reを利 用したWebサイトを、クライアントから依頼を受けて制作し、納品してもよいですか?

A2 問題ございません。TypeSquareのご利用にあたっては利用規約をご確認ください。

Q3 1つのプランで、Webフォントを利用できるドメイン数の上限はありますか?

A3 プランによってご利用いただけるドメイン数に違いがあります。サブドメインは1ドメインとしてカウントします。ご利用PVは、登録されたすべてのサイトの合計となります。また、途中でサイトの追加登録も可能です。

Q4 PV数の利用状況を確認できますか?

A4 マイページにログイン後、ご確認できます。また、メール通知の設定も行えます。

Q5 MORISAWA PASSPORT製品に収録されている全書体が使えますか?

A5 いいえ。お使いいただける書体はTypeSquareサイトの「フォント一覧」でご確認ください。

Q6 対応するブラウザを教えてください。

A6 Ty p e S q u a r e を使った Webフォントの表示をサポートしているブラウザは以下の通りです。Internet Explorer 8以上、Safari 5.0以上、Firefox 5以上、Chrome 10以上、iOS 4.2以降のSafari、Android 2.2以降のAndroidブラウザ