未分類

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日(金)に東京・秋葉原で開催されます。書体デザイナーやエンジニアの方々による、フォント制作の舞台裏や最新トピックの講演です。ここだけのエピソードも盛りだくさんです! 講演内容やお申し込みはこちらから ▶「すずむし」はフォント一覧の「デザイン書体」またはフォントファミリー名からお選びください (サカモト)


ウェブフォントとCSSでここまでできる!

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


スタンダードプランを使ってみよう!

TypeSquareの導入方法(スタンダードプラン編)...