未分類

100種類以上のWebフォントを試したサイトの担当者が本音で語る実際の使用感

文字による文字のための文字のサイト「type.center」は、文字に関するあらゆる情報が網羅されたウェブメディアで、サイトではこれまで100種類を超えるWebフォントが使われてきました。 実際に国内外のWebフォントを利用した感想や、そこから見えてきた可能性について、2016年5月30日に渋谷ヒカリエで行われた「BOHR(ボーア)フェスティバル ~文字のデザインから見るWebの未来~」 で講演されたスライドが公開されています。タイプ・センター管理組合の花村さんと萩原さんが注目するWebフォントへの期待とは?ぜひご覧ください。   関連リンク:type.center


フォントでコミュニケーションする方法 その1「デザイナーが妄想!フォント大喜利」

フォントとは、“スタイリッシュ”や“キュート”など、多くのイメージを持った“情報”です。見た(文字を読んだ)人の想像力を膨らませ、伝えたいイメージに近づかせることも可能ですが、逆にしっくりこないフォントを選んでしまうと、商品やサービスのことを誤解されてしまうかもしれません。 シリーズ「フォントでコミュニケーションする方法」では、デザイナーがフォントに対して日々感じていることを座談会形式でご紹介。デザインにおけるフォント選びの大切さや、商品イメージにあうフォントを選び出すヒントについて、読者のみなさんと一緒に考えていきたいと思います。 オーガニックコットンを使ったベビー服ブランド 「モリサワ」に合うフォントって? 第1回は、『デザイナーが妄想!フォント大喜利』と称し、3名のWebデザイナーが架空のベビー服ブランド「モリサワ」のイメージに合うフォントを選定。TypeSquareのWebフォントと色指定だけで “モリサワの4文字がどこまでブランドを表現できるのか” にチャレンジしました。 まずは、ブランドイメージを整理します ― “オーガニックコットンのベビー服ブランド”って、どんなイメージがあります? デザイナーA: オーガニックコットンなら、30代から40代くらいの、「ライフスタイルにこだわりがある」女性がターゲットですかねえ。 デザイナーB: 価格帯で言うと、少し上質なイメージですよね。ロンパースで、うーん…5,000円くらい? デザイナーC: 自腹でポンと買いづらい価格帯だから、ギフトに良いですね! ― そうそう、上質なアイテムはもらって嬉しいですしね。 イメージを膨らませて、フォントを選びます。 ― イメージが膨らんできたところで、早速フォント指定をお願いします! デザイナーA: 私はフォントを「花蓮華-M」、色は「#6BADBE」にしてみました。 ■花蓮華-M モリサワ ― このフォントと色にした理由って? デザイナーA: 上質感とやわらかい雰囲気のある明朝体をベースに、オーガニックコットンなので、文字中のパーツが詰まっていないフンワリした書体が合うかな、と思って選びました。「小町(本明朝用)-L」と迷ったのですが、「サ」「ワ」の高さが低くて小ぶりなところがベビーっぽいと感じたので、やっぱり「花蓮華-M」がよいかな、と。 ■小町(本明朝用)-L モリサワ 色は、爽やかで上質感があり、男女どちらにも合うよう僅かに緑の入った水色が頭に浮かび ました。ベースは「秘色(ひそく)#ABCED8」という、日本に昔からある色です。磁器の青磁を模しているらしいのですが、青磁は唐の時代に「天子への供物」として重宝されていたというストーリーがあるようなので、縁起もよさそうだな、と。秘色のままだと視認性が低いので、少し濃い目に調整しています。 ― ストーリーを聞くと、ブランドに愛着がわきますよね。ありがとうございます!ではBさんは? デザイナーB: フォントは「UD新丸ゴ DB」、色は「#428FD3」でお願いします。 ■UD新丸ゴ DB モリサワ 文字の角が丸くなっていると、シンプルかつやさしい印象を与えるので、ベビー服にピッタリだと感じました。水色は、生活空間において大切な清潔感や安らぎを与え、かつ、曲線にあう色だと思います。 ― 水色が人気ですね。「曲線にあう」って考え方、とてもおもしろいです。 デザイナーB: 最後まで迷ったのが「丸アンチック DB」、色は「#FB9BA6」です。グレーとも迷ったのですが…。 ■丸アンチック DB モリサワ この角丸も柔らかさがあり、落ち着いた印象がいいですよね。幼すぎず、ウエイトに関わらずキレイに見せることができそう。ピンクには、子どもらしい愛らしさや柔らかい印象があるので、幅広い層に受け入れられると思います。 ― 上質感を出すには、幼すぎないって大切ですよね。ありがとうございました!最後にCさんは? デザイナーC: 私は「解ミン 宙 M」で、色は「#C2A772」にしました! ■解ミン 宙 M モリサワ オーガニックコットンを使ったベビー服なので、フォント・カラーともに、目立つというよりも“馴染む”ものがいいかなと思って選びました。強弱のあるハネやウロコの丸みで手書き感が出せるし、柔らかさや優しいイメージも一緒に表現できるかな、と。 ―  「目立つより馴染む」という発想が、ブランドにしっくり来そうです。ありがとうございます! “オーガニックコットンのベビー服ブランド”に合うフォントって? ―  3名のアイデアが出そろったところで、モリサワでTypeSquareを担当されている阪本さんが一番気に入ったのは、どのフォントですか? 阪本: そうですね、自分の子どもに買うのなら、ということで選んでみました。悩みますが、私なら「解ミン 宙 M」でしょうか。ちなみに「かいみん そら」と読みます。 私が当てはまるかはさておき、“ライフスタイルにこだわりがある親が購入するベビー服”なので、あえて子どもっぽさを感じさせるものではなく、ブランド自体の信頼感を演出できればと思いました。明朝系の書体でも良いのですが、この「解ミン 宙」は、隷書の筆法を明朝体に取り入れた書体で、しっかりとした佇まいと優しさのバランスが絶妙です。文字色をカラフルにしても映えると思いますよ。 デザイナーC: 選んでいただいてありがとうございます!優しさのあるフォントなので、カラーを変えるだけで親・子どものどちらに対しても使えそうです。 ―  イメージに合うフォントを選ぶのって、おもしろいけれど結構大変ですね…。プロセスを知ったことで、デザイナーさんに「もう少し別の、いい感じのフォントないですか~?」って、気軽に言えなくなりそうです(笑)。 (次回へ続く)


「文字詰め」の使い方

見出しなどで、「文字と文字の間が空きすぎている」と感じたことはありませんか? 「文字詰め」機能を利用することで、一文字ずつ調整することなく適切な字間調整が可能となり、より引き締まった印象を与えることができます。CSS の標準的な機能を利用するもので、簡単に導入いただけます。 導入方法 「font-feature-settings」を利用します。 CSS中でfont-familyを記述している箇所に、以下の記述を追加します。 [crayon-58ff5ce86c8ba574249826/] この 'palt' は「プロポーショナルの文字幅(プロポーショナルメトリクス)」を適用するためのキーワード(フィーチャータグ)です。 フィーチャータグを指定することで、かなや約物など全角幅でデザインされた文字が、固有の適切な字幅で前後の文字と詰まって表示されるようになります。 'palt' 以外に利用可能なフィーチャータグとして 'halt' があり、こちらは主に約物類を半角幅に調整します(字幅半角メトリクス)。 プロポーショナルメトリクスの例(上:設定なし、下:'palt'を適用) 字幅半角メトリクスの例(上:設定なし、下:'halt'を適用) 文字詰めに関する情報は、当社フォント製品「MORISAWA PASSPORT」などに収録されているフォントと同一ですので、手元の制作環境にあるデスクトップフォントを利用して、文字間の詰まり具合を確認することもできます(これらの詰め情報は、OpenTypeの仕様で定義されたものです)。 対応書体 モリサワ:日本語515書体(※) SCREEN GP:日本語40書体 ※ 陸隷では、半角の約物調整のみご利用いただけます。 ※ 対応フォントは順次拡張していきます。 サポートブラウザ環境 Internet Explorer 10以降 OSX10.11 以降の Safari 9.1以降(※制限あり) Firefox 15.0以降(Firefox 34.0 未満の場合は、prefixに-moz-が必要) Chrome 21.0以降(Chrome 48.0 未満の場合は、prefixに-webkit-が必要) Microsoft Edge スマートデバイス環境: iOS 9.3.3以降のSafari(※制限あり) Android 4.4以降のAndroidブラウザ(Android 4.4の場合は、prefixに-webkit-が必要) (2016年8月22日現在) 上記ブラウザで現在確認されている制限事項や注意事項は次の通りです。 Safari では、行頭の印字開始位置が調整されません。また、複数のフィーチャータグを指定すると、設定が解除されることがあります。 canvas への描画は、ブラウザによるサポートが不十分なため、多くの場合 font-feature-settings が適用されません。font-feature-settings を @font-face 内に記述する(Firefox)、font-feature-settings を設定したエレメント内に canvas を配置する(Safari / Chrome)、など、一部のブラウザでは適用されることがあります。 font-feature-settingsでは、仕様上さまざまなフィーチャータグを指定することができますが、現時点でサポートしているものは文字の位置調整に関わる値のみです。縦組み用フィーチャータグは、Chrome 以外のブラウザでは期待した動作となりません。各種字形置換に関するサポートは、今後対応予定です。   TypeSquareのフォント一覧を見る


モリサワコーポレートサイトでWebフォントを全面採用

2015年10月1日にリニューアルを行ったモリサワのコーポレートサイト。 映像や写真とともにサイトに彩りを添えているのがTypeSquareから配信されるWebフォントです。 サイトではすべてのページでWebフォントを採用し、できる限りテキストを画像化することなく設計しています。運用面では、見出しなどに修正があった場合でも、ページのテンプレートにあらかじめWebフォントが指定されており、テキストを修正するだけで書体が適用されます。 また、キービジュアルや動きのある演出を加えた部分では、SVG画像を用いています。これは、解像度の高い閲覧環境でも、Webフォントともに全体の美しさを保つための工夫のひとつです。 基本の書体として、見出しには力強さと信頼感を備えた「ゴシックMB101」を、本文には可読性を重視した「UD新ゴNT」を採用しています。さらに、レスポンシブデザインへの対応の一環として、画面幅が狭まった際には、本文のテキストを通常より文字幅の狭い「UD新ゴ コンデンス」に変更し、スムーズな閲覧に貢献しています。 書体見本のページではWebフォントを活用した試し打ちもできます。 Webフォントともに新しくなったモリサワのコーポレートサイト、ぜひご覧ください。 (サカモト)


WordPressでTypeSquareを使ってみよう!

せっかくWordPressで投稿した記事だから、インパクトのあるフォントや楽しいフォントで閲覧する人に見せたいものです。そんなときこそ、TypeSquareを使ってみましょう。(WordPressの記事の場合は、スタンダードプランを使うことをお勧めします。)  1. どうやって使うの?  では、具体的に設定方法をご案内します。WordPressには、ブログのデザインを変化させる「テーマ」があります。お使いのテーマはいくつものPHPファイルで構成されています。TypeSquareを使うために、そのすべてを知る必要はありません。  必要なファイルは   header.php  style.css  の二つだけです。  WordPressの管理者画面に入ると、左メニューの「外観」から「テーマの編集」を選択します。 画面右側に、お使いのテーマを構成するテンプレートが一覧で表示されています。 このなかから、まずはヘッダー(header.php)を選択します。   2. header.phpに配信タグを追加  選択すると、中央の枠にheader.phpのコードが表示されます。このコードのなかから、</head>というタグを見つけます。この</head>タグの直前にTypeSquareの配信タグを貼付けます。 TypeSquare配信タグ header.php貼り付け位置  貼付けましたら、「ファイルを更新」というボタンを押して、保存しましょう。 これで、TypeSquareを利用する準備が整いました。  3. style.cssに使いたい書体を追加  続いて、WordPressのブログ内で、利用する書体を設定します。 テーマの編集画面の右側、テンプレート一覧から、今度はスタイルシート(style.css)を選択します。 スタイルシートのコードが画面中央に表示されます。 ブログの中で、Webフォントを適応したい部分に、   font-family: "利用したいフォント名";  を追記します。    【メモ】 ご利用のTypeSquareのプランが、「無料プラン」や「スタンダードI」など、書体数に制限がある場合は、TypeSquareのプラン・オプション設定画面で利用したい書体を設定しておきます。 ※ 「スタンダードII」や「MPプラン」、「アドバンスドプラン」など書体数が無制限のプランでは登録を行う必要はありません。 プラン・オプションで書体を設定 style.cssのfont-familyに設定 ※ 例では全体に「丸フォーク R」を指定していますが、個々の要素に対して設定することで、見出し、本文など分けて利用することもできます。 利用書体の指定が完了したら、「ファイルを更新」を押して保存します。   4. URLを登録 ご自身のWordPressのURLをTypeSquareに登録します。   5. いつものように記事を投稿  では、記事を書いてみてみましょう。 いかがでしょう?うまくいきましたか? 例では「Contango」というテーマを利用していますが、header.phpとstyle.cssのテンプレートが含まれるテーマであればどのテーマでもご利用いただけます。 style.cssのいろいろな部分に異なるフォントを指定することで、あなただけの素敵なブログにしてみましょう!!   ※ ご利用中のテーマにheader.php、style.cssがない場合はテーマの作者にお問合わせください。  ※ スタンダードプランの利用方法は過去の記事「スタンダードプランを使ってみよう!」をご参照ください。  


使ってみよう、かな書体!

毎日暑い日が続いていますが,みなさまいかがお過ごしでしょうか。 さて,TypeSquareでは本日(2015/8/4)追加書体をリリースしました! 今回の追加書体はこれまでで最も変わり種の「かな書体」です。    ▷「かな書体」追加のお知らせ  ▷「フォント一覧」 から「かな」を選択してください 。 ウェブ業界でお仕事をされている人にとって,「かな書体」は馴染みのないものかも知れません。 「かな書体」とは,通常の書体にデザインの違うかなを合わせることによって,さまざまな表情を与えるための書体です。 百聞は一見に如かず。まずは具体的に例を見てみましょう。   リュウミン デジタル文字は美しく進化する   リュウミン+リュウミンオールドがな デジタル文字は美しく進化する   リュウミン+ほなみ デジタル文字は美しく進化する  「オールドがな」を使うことによって,古風な印象を与えることができますね。「ほなみ」を使うと,柔らかな印象をあたえることができます。 このように,かな書体を使うことによって書体の表情をさまざまに変化させることができます。書体の組合せは自由自在なので,自分のお気に入りの組合せを探ってみてください!   「かな書体」の使い方 1. 収録文字について 今回リリースした「かな書体」には下記の184文字だけが含まれています。 なので,含まれていない文字にこの書体を指定しても何も起きません。デフォルトの書体が表示されます。次に紹介するような書体指定を行うと,うまく表示されるはずです。 2. CSSの書き方 CSSでの書体指定は以下のように,「'かな書体', '漢字書体';」というように記述するとうまく表示されます。 [crayon-58ff5ce86d15f834234945/] デジタル文字は美しく進化する 「'かな書体';」だけを記述してしまうと、漢字部分がデフォルトの書体になってしまいますので注意して下さい。 [crayon-58ff5ce86d166094359126/] デジタル文字は美しく進化する 今回は以上です。ぜひ「かな書体」を使ってみてください! (アンザイ)


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フォントの情報を不定期で発信しています。