未分類

TypeSquareの書体登録について

こんにちは。TypeSquare サポート担当です。...


TypeSquareを使うメリット・デザイナー編(後編)

前回に引き続きフォントブログを運営されている山田晃輔さんよりご寄稿いただいております! モリサワによるクラウドフォントサービス「TypeSquare」。 Webフォントという言葉は何となく聞いたことがあるけど、実際に使ったことはない。—そんなデザイナーの皆さんが多いのではないでしょうか。 今回は「TypeSquareを使うメリット・デザイナー編」と題して、実際にTypeSquareを使う側であるデザイナーの皆さんにとってのメリットを、3つの観点から紹介したいと思います。     流行りのレスポンシブWebデザインや動きのあるサイトなど最新のWebテクニックとの相性がバツグン Web制作の現場は日進月歩。日々新しいテクニックが生まれては、古いテクニックは廃れていきます。 そんな中、今最も旬なのが、レスポンシブWebデザインやスマートフォン向けサイトの構築ではないでしょうか。   近年Webサイトを閲覧できる環境は無数に増え続けており、パソコン以外にもスマートフォン、タブレットなど、様々な端末の解像度や画面サイズに応じて、レイアウトや画像、文字を流動的に変化させなければいけません。 その際、画像文字を用いて文字を配置してしまうと、流動的に変化させることが難しくなります。 画像文字としてテキストを配置したイメージ そこで便利なのがWebフォントです。 あくまでテキスト要素なので、様々な端末のレイアウトに応じて流動的に変化させることができます。 画像文字だと、拡大や縮小をすると文字がぼやけたり、潰れたりしてしまいますが、Webフォントはアウトラインデータなので、レイアウトが変化し、自由自在に拡大縮小しても、美しい描写を保つことができます。 Webフォントを用いてテキストを配置したイメージ 【コラム】Webフォントを使えば工数、ファイル容量、ファイル数を削減できる iPhoneやiPadが備える高精細のRetinaディスプレイでは、普通のサイズの画像をそのまま配置するとぼやけて見えてしまうため、通常の2倍のサイズで書き出した画像を50%に縮小し配置する方法がとられています。こうすることで、画像がくっきり美しく見えるのです。   他にもCSSやJavaScriptで通常用と高精細用で画像を分ける方法、さらには高度にサーバーサイドで画像処理を行う方法もありますが、工数が大幅に増え、ファイル数だけでなく、画像ファイルの容量も増えてしまいます。当然ながら通信量も増えるため、サイトの表示にも時間がかかってしまいます。 また1文字ずつテキストにアニメーションなど、画像文字の場合は1文字につき1つの画像ファイルを用意しなければならず、管理するファイル数が莫大に増えてしまいます。 WebフォントとCSSを用いて、画像ではなくテキストデータとしてHTMLに配置すれば、工数だけでなく、ファイルの容量や数を削減できるうえ、複数の環境に対して柔軟に制御できるようになります。最新のWebテクニックとの相性がバツグンなのがWebフォントであり、それを実現するための重要な技術がWebフォントです。それに加え、ファイルの管理面でも一役買う便利な技術であると言えます。 おなじみのモリサワ書体がWebでも使える! しかもMORISAWA PASSPORT契約者なら追加料金不要で利用可能! TypeSquareには新ゴ、リュウミン、見出しゴ、秀英体など、デザインの現場で大活躍中のモリサワ書体群がラインアップされています。ラインアップには日本語書体だけではなく、欧文書体や中国語書体、韓国語書体もあるので、日本語以外のサイトを制作する際においても、高品質で見栄えの良い書体を使うことができます。   ▷ 利用可能な書体一覧   TypeSquareでは様々な条件からフォントを検索できます   さらにMORISAWA PASSPORT契約者に朗報! 多くの方にご利用いただいている当社の年間ライセンスパッケージ「MORISAWA PASSPORT」の契約者であれば、追加料金不要でTypeSquareのMORISAWA PASSPORTプランを利用することができます(※ 詳しくはこちら)。 しかも年間1,000万PVまでであれば、利用できる書体の数やドメインに一切の制限はありません。 1,000万PVはどのくらいの感じなのか分かりづらいかもしれないですが、よほどの大規模サイトでなければ超過することは無いので安心です。     PV(ページビュー)とは クラウドフォントの使用されたWebページが1回閲覧されると、1PVとしてカウントされます。 TypeSquareをはじめとするWebフォントサービスでは基準となる単位となっており、ページのアクセス数とは異なるので注意しましょう。 せっかくのMORISAWA PASSPORTプラン、利用せず放置したままになってしまっていませんか? まずは皆さんがお持ちの会社のサイトや、自身のポートフォリオサイトやブログで使ってみてはいかがでしょうか。 契約者の方以外のサイトや1,000万PVを超えるサイト、クライアントのサイトでTypeSquareをお使いいただく際は、ぜひTypeSquareのご契約をご検討ください。 ▷ TypeSquareのプランはこちら   (山田晃輔) フォントブログは、1998年ごろからフォントの情報サイトとして運営。デザイナーが知りたいフォント、書体、タイポグラフィ、Webフォントの情報を不定期で発信しています。


TypeSquareを使うメリット・デザイナー編(前編)

今回の記事はフォントブログを運営されている山田晃輔さんよりご寄稿いただきました! モリサワによるクラウドフォントサービス「TypeSquare」。 Webフォントという言葉は何となく聞いたことがあるけど、実際に使ったことはない。—そんなデザイナーの皆さんが多いのではないでしょうか。 今回は「TypeSquareを使うメリット・デザイナー編」と題して、実際にTypeSquareを使う側であるデザイナーの皆さんにとってのメリットを、3つの観点から紹介したいと思います。     画像文字とおさらば Webフォントを使えば作業効率やスピードが大幅に向上! これまでWebサイト上でも任意の書体を使うこと自体はできました。 もちろんモリサワの書体もです。 しかしながら任意の書体を使う場合は、PhotoshopやIllustratorなどのグラフィックソフトを用いて、任意の書体でテキストを入力し、さらに書き出した画像データをHTMLに配置する必要がありました。 文字なのに画像、画像なのに文字なので、「画像文字」とも呼ばれています。 (この画像文字についてはまた別の機会に詳しくお話しましょう。) さて、この画像文字をHTMLに配置して終わりではありません。 HTML上では、文字列の長さに応じて幅 (width) や高さ (height) を設定したり、画像にテキスト情報を付加するためaltを設定したりする必要があります。 文字に修正が入った場合は、とても面倒な作業を幾度と無く繰り返すことになり、デザイナー泣かせの作業の1つでした。   画像文字の制作の流れ。 もし修正が入った場合、たった1文字変更するだけであっても、 数多くの作業をこなさなければなりません。   一方でWebフォントを用いれば、いちいちグラフィックソフトを立ち上げて画像文字を作成する必要はありません。 CSS側でフォントを指定しておけば、HTMLのテキストデータを入力するだけの作業となります。 テキストに修正が入ったら、HTMLのソースコードを変更するだけです。 Webフォントならば、急な修正が入っても即座に対応が可能。  作業効率が上がるだけではありません。 グラフィックソフトを用いる必要がないため、万が一の際にはデザイナー以外のディレクターや営業、さらにはクライアント側でも修正ができるようになります。 日々拘束されがちなデザイナーにとっては、この上ないメリットと言えるでしょう。  【コラム】CSS3を活用してテキストをデザインしよう! Webフォントを使ったテキストは、打ちっぱなしのプレーンなものしかできないというわけではありません。CSSを活用することで、テキストにデザイン処理を行うことができます。画像文字のみならず、装飾のための画像ファイルも大幅に減るので、さらなる作業効率の向上が期待できます。 CSSは非常に便利ですが、WindowsのInternet Explorerの旧バージョンなどの古い環境には完全に対応していません。実際にデザインを起こす段階で、CSSで実現可能かどうか、ブラウザ対応をどこまで行うべきなのかを事前に確認するようにしましょう。 仮にボタンを画像で作成した場合、PC・スマホ用と3種類のバージョンの作成で、 合計6つもの画像ファイルができてしまいます。 CSSを活用すれば、画像を一切使わずWebフォントのみでボタンを実現できます。 (CSSの記述は一例)   TypeSquareではCSSを使ったテキスト装飾のサンプル集を公開しています。   ▷ CSSサンプル集   前半はここまで。後半ではレスポンシブデザインとウェブフォントの相性などについて解説します。ぜひご期待ください! (山田晃輔) フォントブログは、1998年ごろからフォントの情報サイトとして運営。デザイナーが知りたいフォント、書体、タイポグラフィ、Webフォントの情報を不定期で発信しています。


ウェブフォント・トライアウト もっと便利な使い方

桜も散っていよいよ新年度本番の今日このごろですが,みなさんいかがお過ごしでしょうか? ブログ担当のアンザイです。 今回は,以前ご紹介した「ウェブフォント・トライアウト」のさらに便利な使い方のご紹介です! まずはページをぐぐっと下へスクロールしていきましょう。 基本的なウェブフォント・トライアウトの使い方が並んでいます。 そしていちばん下に「今すぐWeb Font Tryoutの会員限定機能を試す」という項目が現れますので, 「ログインしてWeb Font Tryoutを使う」ボタンを押してください。 TypeSquareへのログイン画面に遷移したあと,トライアウトへ戻ってきます。 そこであなたのサイトのURLを入力してみましょう! すると,通常のウェブフォント・トライアウトとくらべて右上の部分に項目が増えているのがわかるでしょうか。 「要素を選択して編集」「埋め込み用コード」の2つが追加される項目です。 「要素を選択して編集」を押すと,現在ウェブフォント・トライアウトを通して見ているサイトでより柔軟に書体の選択ができるようになります。 通常版では「見出し」「本文」という大枠での指定にしか対応していませんが,会員版ではHTMLのタグやCSSのidやclassごとに細かく書体の指定が可能です。 「要素を選択して編集」で事細かに書体を指定し,いざ自分のサイトへこの書体設定を反映しようと思ったとき... 「見出し」や「本文」だけであれば記憶しておくことも可能でしょう。 しかし,「要素を選択して編集」で行った細かい設定を記憶するのは非常に大変です。それを補助するのが「埋め込み用コード」機能です。 これは,現在行っている書体設定を含んだCSSを書き出してしまう機能です! 沢山の書体設定をしたあとは,「埋め込み用コード」で表示されるCSSを自分のサイトにコピー&ペーストするだけです。 今回ご紹介した2つの機能,ぜひ使ってみてください! 何度も言いますが,ここでご紹介した機能はすべてTypeSquare会員だけが使うことのできるものです。まだTypeSquare会員ではないというそこのあなた! ぜひこの機会に会員登録をしてください。 ▷ TypeSquare会員登録はこちら   あなたのサイトですぐ試せる! ウェブフォント・トライアウトはこちら!


あなたのサイトでウェブフォント!

みなさんこんにちわ! ブログ担当のアンザイです。...


ブログはじめました。

TypeSquare Blog はじめます   初めまして!...


新書体レビュー:「すずむし」(2014)

新たに配信を開始した書体をご紹介するこちらのコーナー「新書体レビュー」。 記念すべき第1回目は2014年リリースの すずむし です! この「すずむし」は、一般公募から生まれた書体ということをご存知でしょうか? 2012年に開催された書体のコンテスト、モリサワ「タイプデザインコンぺティション 2012」和文部門で、モリサワ賞 銅賞、明石賞、ファン投票1位と3つの賞を受賞した書体なのです。   受賞者の豊島晶さんが「落語や小噺のような、下町の人情的で温かみのある世界観で制作した」というこの書体は、たくさんの墨を含んだ筆で書いたような、ふくよかで瑞々しい点画が親しみを感じさせる、かわいらしいデザインが特徴です。 ホムパ、女子会、何着てく? 日本語の書体デザインといえば、原稿用紙のマス目に文字を書くように、真四角の中に規律正しく描かれることが一般的。 ですが、この「すずむし」は、あえて正方形にまとめない文字の設計が、アンバランスながらも、文章にしたときに軽妙なリズムを生み出します。漢字、ひらがな、カタカナの微妙な大きさの違いも相まって、まるで文字が動き出しそうな雰囲気を持っています。 漢字も一見ゆるやかな印象ですが、メリハリの効いた縦と横のラインと、しっかりと作り込まれ細部によって、文字の形がはっきりと浮かびあがり、読みやすさとデザインを両立しています。 恋するモテ髪 恋するモテ髪 恋するモテ髪 他のデザイン書体と比べてみました↑ 上は軽妙でかわいらしい印象の「はるひ学園」、下はぷっくりとしたふくよかな「プリティー桃」です。いかがでしょうか。 その個性が光る「すずむし」は、親しみやすさ、かわいらしさを演出したいときなど、子どもや女性向けの媒体はもちろん、昔ながらの情緒を感じさせる和のデザインとも相性抜群です。 魔法のパン屋さん   そんな「すずむし」の作者である豊島さんも登壇する特別セミナー「タイプデザイナーの視点」が、3月20日(金)に東京・秋葉原で開催されます。書体デザイナーやエンジニアの方々による、フォント制作の舞台裏や最新トピックの講演です。ここだけのエピソードも盛りだくさんです! 講演内容やお申し込みはこちらから ▶「すずむし」はフォント一覧の「デザイン書体」またはフォントファミリー名からお選びください (サカモト)