TypeSquare Blog編集部

フォントでコミュニケーションする方法 その3 「フォントを味方につけるには? デザイナー兼ショップオーナーの場合」

フォントとは、プロダクトやサービスのブランディングにおいて、受け取るイメージや記憶に大きく影響を与え、同時にそのクリエイターのセンスを瞬時に伝えることができる“おしゃべり”な存在です。では、Webでプロダクトを紹介・販売する「クリエイター」や作り手である「Webデザイナー」は、Webサイトをデザインする時に何を思い、何を大切にしているのでしょうか。クリエイターやデザイナーたちにとってのデザインとは? フォントとは? それを通して伝えたいことは? 作り手たちを取り巻くデザインと、その先にあるものを知ることで、フォントに対して改めて考えるヒントが詰まっているように思います。 デザイナー夫婦が考える暮らしと、その先にあるデザイン 築100年の京町家をリノベーションした空間で、京都の人気焙煎所のコーヒーと、京都近郊で活動する作家の作品を販売する「Dongree コーヒースタンドと暮らしの道具店」。ユニークな構成の店舗を営むのは、ともにデザイナーとして活動する柴崎友佑さんと奧さんの寛子さん。手仕事の品を扱うことへの思いや、それを店のロゴやホームページでどう表現したのか。柴崎さんたちが考える手仕事と暮らし、そしてデザインの話を伺いました。 「Dongree」は、京都にある5つの焙煎所のコーヒーと京都近郊の作家さんの作品を販売するショップであり、それを営んでいる柴崎さんご夫妻の本業はデザイナーであるという、その取り合わせがとても興味深いんですが、そもそも、お店を始めたきっかけは何だったんですか?  柴崎さん〉僕はデザインの中でも、主にWebが中心なんですが、基本、Webの仕事は電話とメールでコミュニケーションが取れてしまうし、家で完結しちゃう仕事でしょう。でも、気持ち的にはもっと人と繋がりを持てる仕事がしたいと以前から思ってて。幸いなことにWebの仕事は場所を選ばずできるという利点があるので、いつの日か、“事務所兼好きなコーヒーが出せる場所を”と考えていた時に、タイミングよく、ここで店を開く話がまとまったんですよ。 作家さんの作品を置くというのは、最初から構想にはあったのですか? 柴崎さん〉もともとデジタルワークの反動から、モノを作り、それを手に取った人が喜んでくれるという、手仕事をされている方たちに憧れがあって。といっても、今さら僕が手仕事をするというのはピンとこないけれど、人と人、人とモノを繋ぐ紹介者にはなれるんじゃないか、と。そこで、作家さんの作品を置かせてもらうことにしたんです。 作家さんはどういう基準で選んだのですか? やはりデザイナーさんが選んだだけあり、デザイン的に美しいものが多いのですが、まずは造形ありき?  柴崎さん〉いやいや、デザインはもちろん重要ですけど、まずはものづくりに対する姿勢というか、思いが共有できる人を基準にしています。まずは、器や洋服、革製品など、モノを作って生きていこうとしている方で、さらに、それを作品というよりは、日常のものとして使ってもらいたいという思いのある方。今は実際にお会いして、どういう思いでものづくりをされているかを知っておきたいので、自然と京都近郊で活動する方が中心になっていますが。それと、コーヒーを扱っているのも、もともと「コーヒー屋さんがしたい」という思いが出発点だったということと、コーヒーの焙煎も、いわば職人の手仕事だと考え、距離感が近く、思いが共有できる焙煎所さんのものを揃えました。 そういったお店であって、「Dongree」という屋号の意味は?  寛子さん〉“どんぐり”って木の実の総称になっているけれど、実際はいろんな樹木の実だし、形もそれぞれ違うじゃないですか。この店で扱う手仕事の一品もそれぞれ同じものはなく、“どんぐり”という言葉もクラフト感を醸し出しているので、この名前にしました。柴崎さん〉それと「Dongree」は僕ら二人の仕事におけるユニット名でもあるんですよ。だから表記もちょっとだけオリジナリティを意識して、最後を“ee”としました。呼び名も「どんぐり」じゃなく「ドングリー」。でも、意外にみなさん、「どんぐりさん」って短めで呼びはるけど(笑)。 「どんぐり」じゃなかったんですね(笑)。ロゴや看板、店内の作家さんを紹介するカードなどは、お二人がデザインされたんですか?  寛子さん〉デザインは私です。ロゴに関していえば、お店で扱うのがコーヒーとクラフトなので、その両方のイメージをどう表現するか、どんなフォントを選ぶかが難しかったですね。「クラフトはゴシックを使って強いイメージに…」と考えた時に、コーヒー屋さんとしてのやわらかさやくつろぎ感が失われるような気がして、どんなバランスにすべきかが頭を悩ませたポイントですね。 ロゴにどんなフォントを使っているかで、店のイメージが決まることも多々ありますもんね。 寛子さん〉そうなんですよ。扱う商品の特性から考えると、重すぎるフォントは違うし、逆にスタイリッシュなものだときれいにまとまりすぎて、うちの店っぽくないし、主人とも合わない(笑)。その辺りのバランスを考えた時に、「Dongree」という言葉だけでなく、「コーヒースタンドと暮らしの道具店」という言葉も加えました。そうすることで、道具店をやっていることが分かってもらえるので、「Dongree」のフォントはコーヒー屋さんのくつろぎ感だけを重視して選び、日本語の言葉は合成フォントにして、全体のバランスを取ったんです。 それぞれ違うフォントを組み合わせているんですか?  寛子さん〉漢字はシュッとしたイメージを出そうと明朝を使っています。反面、平仮名とカタカナはやわらかな和の雰囲気のあるフォントを選びました。合成フォントにして、微妙なニュアンスを探ったという感じですね。 その甲斐あって、店の雰囲気とロゴや看板がぴったりハマりましたね。手仕事感が伝わってくるようです。 柴崎さん〉僕らがこの店で伝えたいことは、お客さんに何かを買っていただくということは、「丁寧な手仕事への一票」だということ。どこにお金を使うかで世の中の流れは変わりますよね。ということは、職人さんが作る上質のものを選んで、それを永く使うことは、豊かな生活を目指すことに一票を投じているのと同じだよ、と。だから、レシートにも「丁寧な手仕事への一票」と書いていて、買っていただいた方に対してそういうメッセージを込めています。 手仕事を大切にすることが、豊かな暮らしへの足がかりになるという発想はおもしろいです。ホームページもそういった内容が表現されているんですか?  寛子さん〉今は、ホームページではそれを知ってもらう表現がまだできていないので、これから変えていかないと、と思っているんですよ。 「Dongree」としては、コーヒー屋も道具店もWebもあるから、それを分かりやすく魅せるのは難しそうですね。 寛子さん〉どう整理するかはもちろんですが、伝えたいメッセージや言葉をどうやって印象的に魅せるか考えた時は、やっぱりフォント選びは大切になってくると思います。 なるほど。ちなみによく使うフォントってありますか?  寛子さん〉私は細めのゴシックが好きですね。そのなかでも自然と使うのが小塚かな。ゴシックMB101もよく使いますね。これは太かったり細かったりと幅があるので、広告を制作する時はよく使います。それとA1明朝も使いますね。これは文字幅がないので、太らせて使うことが多いですね。 ゴシックMB101 サンプル デジタル文字は美しく進化する A1明朝 サンプル デジタル文字は美しく進化する 柴崎さんは? 柴崎さん〉僕はよく使うのはフォークかな。看護士系大学のサイトなど、やわらかい雰囲気のデザインが求められる時に、フォークはきちんと感がありながらも女性らしさもあるので。でも、僕が先に仮で組んだ後に、奥さんが本格的にデザインをし直すんですが、でき上がると、だいたいフォントが変えられていることが多いんですよ(笑)。 フォーク サンプル デジタル文字は美しく進化する やっぱりフォントも好みがありますからね(笑)。フォントのイメージでデザインもそこに入る言葉も変わってきたりしますもんね。 柴崎さん〉僕はサイトをデザインする時に、一度リュウミンで適当な言葉を落とし込んで、全体の雰囲気をつかむんです。こういう文字でキャッチコピーを置いた時にどんな印象になるかな、とか。そうすることで、そこに入れるべきキャッチコピーが生まれることがあるんですよ。 リュウミン サンプル デジタル文字は美しく進化する そうやって、まずはビジュアルありきで言葉を紡ぐというのもデザイナーさんらしい発想ですよね。 柴崎さん〉でも、その後で奥さんにそのフォントを変えられちゃうんですけどね(笑)。 Dongree コーヒースタンドと暮らしの道具店 京都府京都市東山区池殿町214-4 青春画廊1F 075-746-2299 8:00〜17:00(土・日・祝日は9:00〜18:00) 火・水曜休み&不定休 http://www.dongree.net/  


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

フォントとは多くのイメージを持った“情報”であり、“ラグジュアリー”や“親しみやすさ”など、商品の魅力を瞬時に伝えることができる存在です。商品やサービスにぴったりなデザインを選ぶことで、フォントがあなたのブランドの「優秀な営業マン」になってくれるかもしれません。 シリーズ「フォントでコミュニケーションする方法」では、デザイナーがフォントに対して日々感じていることを対談形式でご紹介。今回も3名の女性Webデザイナーがフォントをどのように選んでいるのか、その考え方を教えてもらいました。では早速、彼女たちの頭の中を覗いてみましょう。 ビジネスパーソンの5人に1人が着ているワイシャツブランド「モリサワ」に合うフォントって? 今回も、3名のWebデザイナーが架空のワイシャツブランド「モリサワ」のイメージに合うフォントを選定。TypeSquareのWebフォントと色指定だけで“モリサワ”の4文字がどこまでブランドを表現できるのか にチャレンジしてもらいました。 多くの男性に支持される「ワイシャツブランド」を想像してみます。 — 近頃のワイシャツって、値段が手ごろなものでも襟にステッチが入っていたり、ボタンホールだけ違う色の刺しゅうが入っていたり、おしゃれなものが増えましたよね。 デザイナーA: 生地にうっすら柄が入っていたり、袖口の裏地が凝っていたりするデザインもあります。 デザイナーB: 5人に1人が選ぶということは、価格帯っていくらくらいですかね。20代と50代で差はあるでしょうけれど、うーん、3~5,000円くらいかなあ。 デザイナーC: パートナーが選ぶこともあるだろうし、「バリバリ仕事できる感」があると手に取ってもらいやすいかも(笑)。 ターゲットのことを思い浮かべながらフォントを選びます。  — ではイメージが固まってきたところで、早速フォント指定をお願いします。 デザイナーA: 私はフォントを「ナウ(ゴシック)ナウ-GB」、色は「#8F8F8F」で! ■ナウ(ゴシック)ナウ-GB モリサワ — このフォントと色にした理由って? デザイナーA: 日常使いのアイテムなので、スタンダードで主張しすぎないフォントを選びました。ナウ-GBは、安心感とスッキリ感のバランスがビジネスパーソン向けかなと。色は純粋な中明度のグレーなら信頼感が出せると思います。 もし、ブランド展開としてカジュアルなシャツや遊び心のあるデザインの商品もあるなら、ウエイト(文字の太さ)がもう一段階細い「ナウ-GM」がいいかもしれません。 ■ナウ(ゴシック)ナウ-GM モリサワ — ウエイトが変わるだけで、確かに遊び心がほんのりプラスされましたね。フォントだけで「仕事できそう感」が伝わってきます。ありがとうございます! ではBさんは? デザイナーB: フォントは「A1明朝」、色は「#111111」にしました。 ■A1明朝 モリサワ かしこまりすぎていない明朝で、柔らかさもあり親しみやすいと思います。高級感のある黒にしたのですが、この色は少しグレー寄りなので、スミ(CMYKのK=ブラックのこと)より堅苦しくない印象になるかな、と。 「ナウ(明朝)」もいいと思いました。明朝ほどキレイでスタイリッシュではないところが、骨格のある男性らしさを表現できそうです。色を紺「#1F3068」にすると落ち着き感や好感度がアップするので、ビジネスパーソンに選んでもらえそうかな、と。 ■ナウ(明朝)-MM モリサワ ■ナウ(明朝)-MB モリサワ — ナウが二度目の登場ですが、ゴシックと明朝で印象が全く違いますね。面白いです! ラストのCさんは? デザイナーC: 私は「秀英角ゴシック銀 B」で、色は「#000000」で行きます。 ■秀英角ゴシック銀 B モリサワ だれもが知っている、着ているようなブランドなので、さまざまなデザインやカラー、年齢にも合うよう、フォントや色は普遍的なものをイメージしました。 — 3人の中では一番男性らしい感じですね。でもスマートさもあって、私は好きです。ありがとうございます! “5人に1人が着ているワイシャツブランド”に合うフォントって? — 3名のアイデアが出揃いました。では、モリサワでTypeSquareを担当されている阪本さんに質問です。一番気に入ったのは、どのフォントですか? 阪本: 前回に比べて今回はかなり悩みました。どれも長く定評のある書体で、お題から受ける“王道”のイメージを体現するのにぴったりです。その中からあえて選ぶとするなら、Bさんの「A1明朝」でしょうか。 スタイリッシュなイメージを出すためにゴシック系でもよかったのですが、幅広い年齢に受け入れられることを意識して明朝体を選びました。ちなみにこの「A1明朝」は、漢字の曲線やかなの表情から、キリッとした明朝体の中に優しさを感じるデザインで、2016年に大ヒットを記録したアニメーション映画のタイトル表記にも使われた書体なんですよ。広告のコピー表記で選ばれることも多いので、今回のお題なら、スーツ姿の写真の上に白抜き文字を乗せて…といったことも考えられますね。 デザイナーB: やった! ありがとうございます。私も、映画のエンドロールで使われているフォントや、歌番組の歌手名や歌詞のフォントが気になって仕方ありません。そのフォントを選んだデザイナーの意図を考え始めると、なかなか忙しいです(笑)。 — 男性向け、しかもビジネスシーンだとイメージが似たり寄ったりになるかな…と思っていたのですが、いろいろなアイデアが出てきてよかったです。あと、3人の女性Webデザイナーにとって“ステキだと思うビジネスパーソン像”が、それぞれの選んだフォントからにじみ出ているような気がしています。私の考えすぎでしょうか(笑)。 (次回へ続く)


手を動かしてモノをつくる、現場主義と文字へのこだわり [MONSTER DIVE 岡島将人]

インターネットが家庭に普及し始めた四半世紀前、Webサイトはコンピュータの画面を介して「情報」を得るための媒体として活用されてきました。それは現在、さまざまなデバイスを介して「体験」を届けるプラットフォームとなり、その中で「文字」という要素が担う役割も変わってきています。今、その最前線に立つクリエイターはWebサイトの中で文字とどう向き合っているのでしょうか。 今回お話を伺ったのは、株式会社MONSTER DIVE(以下、MONSTER DIVE)の代表取締役 岡島将人さん。技術もクリエイティブも手を動かしモノをつくってこそ—同社は岡島さんのそんな思いから設立された「職人とオタクを集めた集団」だといいます。 職人肌のこだわりとオタク気質な探究心が、モノづくりの原動力なんですね。 「本を読んでいるだけではいいモノはつくれません。勉強して、実際に手を動かしてコードを書いたりデザインして、触っていくうちに発展し、自分で広げていくものです。かつて世界へ出て行った日本企業のトップも、技術者が多いんですよね。彼らへの憧れも含めて、口下手でも“いいモノ”をつくる人が評価される会社があっていいと思ったんです」 株式会社MONSTER DIVE 代表取締役 岡島将人 2009年にWebプロダクションとして事業をスタート。2011年には映像事業部を新設しましたが、それはこの先「Webと動画がどんどん融合していく」と見越してのことでした。テレビやCMではなく、あくまでWebの中で映像を活用することを目的とした事業。そのためには自分たちの手で制作し、中継し、視聴者の温度感を体験するべき、という現場主義の姿勢がここにもありました。 「情報」ではなく「表現」としての文字 岡島さんが考えていたとおり、Webと動画の融合が進む現在。MONSTER DIVEが制作したHonda『クルマやバイクができるまで-工場見学に行こう-』は、まさにそれを象徴するような内容になっています。 Honda『クルマやバイクができるまで-工場見学に行こう-』 小学生をメインターゲットに、ホンダのものづくりを紹介するサイト 「工場の生で見た格好良さを伝えようと思ったら、映像で見せるのが一番伝わると思いました。巨大な鉄板のロールから巨大なプレス機でドーンという迫力。これは、腕のいいカメラマンがいいカメラできっちり撮ることに凝らなくては表現できませんし、今の小学生はデバイスに抵抗がない。映像も見慣れて目が肥えています。そういったユーザーに格好良い! と思わせるためにハイクォリティを求めたかったんです」 この企画は「自分たちが、今この時代に考えた最適解」(岡島さん)としてコンペに提案し、採用されました。岡島さん自身が現場で目にした感動、それをWebで体験して欲しいという思いが伝わってきます。岡島さんが重視したのは映像のクォリティだけではありません。 「映像を映像と意識させずに見てもらうことが重要でした。クリックして見るというよりも、自然に流れるような。だから、軽くシームレスということが重要でした。うちのエンジニアには何人か泣いてもらいましたよ(笑)」 その施策のひとつとしてTypeSquareを使用。画像による負荷を軽減しています。しかし、ただ軽さを求めただけではないと岡島さんは話します。 「文字の表現にこだわりたい部分を画像でなくテキストにできることがいいですよね。クリエイティブを表現する上で、見栄え良く、ブラウザやデバイスごとに調整した上で格好良く読ませようと考えると、他に選択肢はないかな」 30代後半以上の世代とは異なり、若手のクリエイターには紙媒体の経験がない人も少なくありません。書体だけでなく、ツメ、行間、揃え方といった要素も文字の表現力を形づくるものですが、単なる「情報」としてWebの文字に接しているだけでは、その視点を身に付けることはできません。また、ブラウザという世界の中で、機種依存文字だけではできることに限界があります。 「特に日本語は難しいんですよ。フォントが原因で、デザインの段階では良かったものが、コーディングしてみるとデバイスによって見映えが変わるケースが度々あります。それを解消するには文字の扱いにこだわっていくしかないと思います」 制作フローの変化がもたらしたもの もう一つ、岡島さんがTypeSquareを使用する大きな理由として挙げたのが、Web制作フローの変化です。 「最近はJavaScriptやHTML5/CSSを使ったアニメーションありきのサイトが普通なので、かつてのように最初に画像だけでデザインを出すことはほとんどありません。仮の状態であってもプログラムを組み、こんな感じで動きますというモックにして初めてクライアントに見せます。画像を使って言葉でいくら説明しても伝わらないんです」 数年前あるWebサイトを制作した際、事前に十分な説明を尽くしたつもりが出来上がってからクライアントに「思っていた動きと違う」といわれたことがあったそうです。その時は「思っていたより格好良いから良い」という結果で落ち着いたものの、この経験から「アニメーションを説明する場合はモックをつくろう」という意識に変わったといいます。 そして、このモックを見せる際のファーストインプレッションが非常に重要であると、岡島さんは語ります。 「パッと見た瞬間にダサいと思われたら、その後どんな提案をしてもダメなんです。逆に、最初にいいねといわれればすごくやりやすくなる。だから、文字を含めたデザイン表現が、完成形だけでなく、つくる過程においても必要になってきていると感じます」 モックアップの段階から必要な書体で見せるためにも、Webフォントが不可欠になっているんですね。 Webフォントはデザインや制作フローだけでなく、サイト運用においても利点があります。写真に文字を乗せたり、スタイルのある見出しを画像でつくってしまうと更新にデザイナーの手が必要になりますが、こうした要素をクライアントの担当者がテキストベースで更新できるように、同社ではWordPressやMovableTypeといったCMSとWebフォントを連携させるそうです。また、これらの文字がテキストのまま扱えることで、SEO対策としても効果的であると考えられます。 「日本語だから格好良い」を目指して では、実際にどんな形でWebフォントを導入しているのでしょうか。先のホンダの事例では、岡島さんの提案によりクライアントが直接TypeSquareの契約を結ぶ形になりました。ライセンスの対象はhonda.co.jp以下になるため、クライアントは他のプロダクトやキャンペーンのページでもWebフォントを利用できます。 この事例以外にもMONSTER DIVEでは多くのプロジェクトでWebフォントを導入していますが、契約の形はさまざまです。 「基本的にはお客様に直接契約していただくことを勧めますが、期間限定のプロモーションだったり、アクセス数によって料金変動があるために予算枠を取りにくいなど、事情によっては弊社が代行し、制作費に料金分を加えて請求する場合もあります」 MONSTER DIVEのプロジェクトにおいてはすでに無くてはならないものになっているTypeSquare。岡島さんはこの先、日本語ならではの格好良い文字表現を追求していきたいと語ります。 「社内の勉強会で社員が見つけた良いWebサイトを発表しているのですが、やっぱりシンプルでクールなサイトは海外のものが多いんです。欧文だから格好良く見えるけど、日本語にするとそうじゃない、という状態をいかに打破できるか。日本語だから格好良いといわれるものをつくれたらいいですね。それをうちのクリエイターがつくってくれたら嬉しいし、個人的にも見たいと思っています」 モリサワフォントなら見る側にも馴染みがあって受け入れられやすくなるのでは、と最後に付け加えた岡島さん。ウェブを閲覧する環境と見る層が変化する中で、それに対応した制作フローの構築と、Webでのコミュニケーションの進化に、Webフォントがますます重要な役割を担ってきそうです。 岡島さん、この度はありがとうございました。 MONSTER DIVEの各プロジェクトをはじめ、様々なサイトで導入されているTypeSquareの「スタンダードプラン」(100万PV/月まで)は、毎月のカード払いだけでなく、年間契約なら銀行振込も可能です。また、サイトの規模や要件に合わせて利用可能な「アドバンストプラン」では、担当が書体や導入面のご提案をいたしますので、ぜひお気軽にお問合せください。お問合せはこちらから


カスタマイズ編:WordPress専用プラグイン「TS Webfonts for Standard Plan」を使おう

WordPressで運用されるサイトで、TypeSquareのWebフォントをご利用いただける専用プラグイン「TS Webfonts for Standard Plan」。 前回の導入編に続いて、細かなカスタマイズの方法をご紹介します。 カスタムフォントテーマ 既存のフォントテーマではなく、好きなフォントをテーマとして設定することができます。 管理者画面で、「TypeSquare Webfonts」を選択して、サブメニューに表示される「カスタムフォントテーマ」を選択します。 「フォントテーマカスタマイザ」の画面が表示されます。「新しいカスタムフォントテーマを作成する」をクリックして、新しいテーマを作成します。 「フォントテーマ名」には、作成するオリジナルテーマの名前を入力します。「フォントテーマの設定」では、タイトル、リード、本文、太字で利用するフォントを指定します。 「フォントテーマを設定する」をクリックすると、テーマの登録が完了します。 作成したテーマを再編集するには、「編集する」をクリックします。また、不要なテーマは、編集画面の「フォントテーマを削除する」をクリックすると削除できます。 作成したテーマは、「TypeSquare Webfonts」設定画面の「フォントテーマ設定」から選択することができます。   フォントの適用先を変更する フォント設定クラスでは、フォントを適用する対象を自由に設定することができます。 サイトで使われている複数のタグやCSSクラスを、「見出し」「リード」「本文」「強調」に分類できます。複数のタグを指定する場合、クラスは半角カンマ「,」を使って区切ります。クラスの場合はピリオド「.」をクラス名の前につけてください。 設定後、「設定クラスを更新する」をクリックすると反映されます。 この設定で、標準のテーマでは当たらなかったHTMLタグやCSSクラスにもフォントを適用することができます。   フェードイン効果を利用する フェードイン設定を行うと、Webフォントが適用された部分のテキストが、徐々に浮かび上がるように表示されます。 フェードにかかる時間は0~99までの数字で設定します。設定した数×100ミリ秒が実際の時間となります。例えば1秒にする場合だと、1秒は1000ミリ秒ですので、フェード時間を「10」に設定してください。 フェード時間を「0」にすると、Webフォントが適用されるまでテキストを表示しないようになります。この設定は、デフォルトフォントからWebフォントに切替わる際の、画面のちらつきが気になる場合の対策のひとつとして効果的です。 ご注意:ご利用のプランによっては、上限を超えるフォントをプラグイン上で設定してフェードインを利用すると、正しくフォントが取得できず、一定の時間、サイト内のテキストが全く表示されません。   フォントの適用範囲を個別に設定する Webフォントを適用する投稿や記事を自由に設定することができます。 プラグインの標準設定では、「フォントテーマ設定」で選んだテーマが全ての投稿、固定記事に対して適用されますが、各投稿や固定記事で、それぞれ個別のテーマを選べるようになります。 「投稿・固定ページでフォントテーマ設定機能を表示する」の設定で「表示する」を選択し、「フォントテーマ表示設定を更新する」をクリックします。 その後、投稿や固定記事の編集画面を表示すると、編集画面の下部にフォントテーマの設定項目が表示されます。ここで選択したテーマが適用されます。   最新のフォントを利用する この機能はTypeSquare APIを利用できるプランでのみ有効です。 TypeSquareには、どんどん新しい書体が追加されています。 それらの書体をカスタムフォントテーマで利用するには、プラグインの情報を更新する必要があります。 更新するには、サブメニューの「カスタムフォントテーマ」を選択して表示される「フォント一覧の更新」の中にある、「フォント一覧を更新する」をクリックします。 こうすることで、フォントテーマ設定で最新の書体を選択できるようになります。   TS Webfonts for Standard Planのインストールはこちらから ※このプラグインは国内向けTypeSquareのスタンダードプランに対応しています(2017年1月現在)


導入編:WordPress専用プラグイン「TS Webfonts for Standard Plan」を使おう

WordPressで運用されるサイトでも、TypeSquareのWebフォントをご利用いただくことができます。 以前、こちらの記事で、その方法をご紹介しましたが、テンプレートを直接編集する必要がありました。 今回は、専用のプラグインを使って、もっと手軽にWordPressでもTypeSquareをご利用いただける方法をご案内します。 TS Webfonts for Standard Planのインストールはこちらから ※このプラグインは国内向けTypeSquareのスタンダードプランに対応しています(2017年1月現在) TypeSquareマイページでの設定 プラン・オプション設定から、WordPressの公開ドメインを登録してください。無料プランやスタンダードプランIの場合、利用する書体もあわせて登録してください。 プラグインのインストール 続いてWordPressにTypeSquareのプラグインを追加します。WordPressの管理画面の「プラグイン」から、「新規追加」をクリックします。 キーワード検索で「TypeSquare」と入力してください。 「TS Webfonts for Standard Plan」が検索結果として表示されます。「今すぐインストール」をクリックすると、プラグインが追加されます。 インストール後にプラグインを「有効化」すると、管理画面のメニューに「TypeSquare Webfonts」のメニューが追加されます。 TypeSquare Webfontsの設定 最初にTypeSquareの認証を行います。 TypeSquareのログインIDとパスワード、TypeSquare配信ID(プラン専用タグの一部。下図参照)を入力して、「変更する」をクリックしてください。認証状況の欄に「認証済み」と表示されれば認証は完了です。 TypeSquare配信IDは、TypeSquareマイページの「プラン・オプション設定」を参照ください。 フォントを設定する プラグインには、見出しや本文向けに書体を組み合わせたテーマがあらかじめ用意されています。 利用したいフォントテーマを選択して、「フォントテーマを更新する」をクリックしてください。選択したフォントが全ての記事に適用されます。好きなフォントを設定したテーマを作成することもできます。詳しい方法は次回の記事でご案内します。 編集画面ではフォントは適用されません。プレビューでご確認ください。 次回は、より細かな設定について解説します。詳しくはこちらから   プラグインをご利用いただけるプランについて このプラグインは、フォントの利用可能数に上限があるプラン(無料プラン、スタンダードI)でもご利用いただけます。ただし、上限数以上のフォントをプラグイン上で設定すると正しく動作しませんのでご注意ください。MORISAWA PASSPORTプランでは問題なく動作します。


ウェブの次に作ったのは、スタンディングデスク。もの作りへのこだわり[nD Inc. 中原 寛法]

ノマドやコワーキングスペースに象徴されるように、働き方やその場所に関する意識の変化が起きる中、今にわかに注目を集める「立ったまま仕事をする」スタイル。ウェブデザイナーをはじめ、クリエイティブに関わる多くの人が座ったまま仕事をすることが多い現状で、この逆転の発想が、健康面への期待もあって取り入れられつつあります。 とはいえ、そのための「スタンディングデスク」は無骨なものが多いのもまた事実。それならば自分で気に入ったものを作ってしまおうと行動を起こしたのが、株式会社nDの代表取締役として多くのウェブ制作や企業ブランディングを手がけ、株式会社gifteeの共同創業者としても知られる中原寛法さん。デスク作りから見える、中原さんのデザインへのこだわりについて伺いました。 中原さんといえば、ソーシャルギフトのgifteeをはじめ、ウェブのお仕事をなさるイメージですが、まずは直近のウェブでのお仕事についてお聞かせください。 greenz.jpのリニューアル、エンタープライズ向けのiPhoneアプリのデザイン、クラウドファンディングサービスのリニューアル、新しいレストランガイドのサービスデザインなどを行っています。 そんな中、スタンディングデスクに取り組まれるきっかけは何でしたか? 5年ほど前、立って仕事をしてみたくなって、冷蔵庫やビールケースで試していたんです。ただ、やっぱりというか、どうもしっくりこなくて。市販品も色々あたったのですが、事務用品的なものが多くて食指が動かなかったんです。それなら作ってみようということで、インテリアデザイナーの鈴木一史さんに相談しました。 鈴木さんはインテリアデザインだけでなく、飲食店の経営もなさっているということですが、この机のポイントはどういったところですか? 机の面に使った木材ですね。オーク材を使用して、MacBookにジャストサイズになるように切り出しています。仕事部屋においてしっくりくるサイズ感や見た目を追求しました。 この大きさでさらにスライドテーブルが引き出せるんですね。 リラックスして作業できるようにコーヒーテーブル(ビールテーブル)をつけています。実は次のバージョンを試作中で、テーブルを内側に挟み込んだり、脚をカメラの三脚にしたりして、コストを抑える工夫をしています。 直立するヒトという意味のホモ・ エレクトスから「ERECTUS」と名付けられたそうですが、進化を続けているのですね。中原さんがこうしたすべてのデザイン作業で、常に意識していることはありますか? ERECTUSの使用イメージ 例えばERECTUSのように、自分の嗜好を追求すれば良いこともありますが、デザインする対象がそうでない時は、頭を切り換えて、先入観を取り払って、どうすると価値を伝えられるか、より良い体験に繋がるかを意識しています。 そんな中原さんがタイポグラフィで気をつけていることはありますか? その文字を目に飛び込ませたいのか、サラッと流して欲しいのか、丁寧に読んでもらいたいのか、読み手のことを考えるようにしています。それから、これは仕事で提案する場合ですが、クライアントの方が少し古いパソコンをお使いになっている時などは、書体によってどれだけ印象が変わるのかということも理解いただけるように説明をしています。 最後に、中原さんのお気に入りの書体を教えてください。 (見本帳をめくりながら)そうですね…、「UD新ゴ コンデンス 90」ですね。 UD新ゴコンデンス 90 サンプル デジタル文字は美しく進化する 8つもウェイトがありますし、それぞれの太さをどう使うか、デザイナーとしての力量を問われているような気がします(笑)。いろいろなチャレンジをしたいですね。 この度はありがとうございました。 プロフィール 中原寛法(なかはら ひろのり) 生まれも育ちも本社も、岡山県井原市。2003 年千葉大学大学院デザイン科学専攻修了後、翌日からフリーランス。「インターネットを使って、インターネットの外側を、もっと楽しく、そして、より豊かに。」をモットーに、さまざまなウェブの企画・デザイン・開発を行う。Google / KDDI のキャンペーンのディレクション・デザイン、ソーシャルギフトサービス giftee、地域 × クラウドファンディング FAAVO の立ち上げ、スタンディングデスク ERECTUS の開発など。クリエイティブ・ディレクター / デザイナー / 株式会社 nD 代表取締役 / 株式会社 giftee 共同創業者。社員はサーファーとフォトグラファー。 鈴木一史(すずき かずふみ) インテリアデザイナー/ショップオーナー。1979年生まれ。東京都のインテリア設計・施工会社を経て2010年に独立。飲食店のプロデュース及びインテリアの設計・施工を手掛けると同時に、独立と同年の2010年にカフェ「STUDY」を松陰神社前にオープン。「鈴木工芸社」として、渋谷のカフェ「ABOUT LIFE COFFEE BREWERS」、2015年3月に「Bird 代官山」をオープン。 ERECTUS製品サイト http://www.erectusthestandingdesk.com/  


ブログリニューアルキャンペーン実施中(終了しました)

当キャンペーンは終了しました。多数のご応募ありがとうございました。 TypeSquareブログがリニューアル。日頃のご愛顧に感謝して、プレゼントをご用意しました。 豪華賞品も当たるこのチャンスをお見逃しなく! 賞品紹介 TypeSquareロゴ入りBluetoothイヤホン 5名様 わずか12gの軽量タイプ。本体ボタンでリモコン操作も可能。通話用マイク搭載&Bluetooth 4.0対応で、最新のスマートフォンをはじめとする幅広い機種でご利用いただけます。 本体カラーはブラック。右耳部分にさりげなくTypeSquareロゴをあしらっています。 ※掲載画像はイメージです。 giftee「ローソン『マチカフェ』引換券」 500名様 全国のローソンの店頭で引換できるデジタルチケット。 お仕事の合間にコーヒーで一息入れませんか? キャンペーンの応募方法 リツイートして応募! エントリーは、公式twitterアカウント「@typesquare」をフォローして、キャンペーン期間中に指定された投稿をリツイートするだけ!抽選で500名様にgiftee「ローソン『マチカフェ』引換券」プレゼント! TypeSquareに登録して応募! TypeSquareの会員登録(無料)を行っていただいた方の中から、抽選で5名様に「TypeSquareロゴ入りBluetoothイヤホン」をプレゼント! キャンペーン期間 2016年12月6日(火)〜2017年1月31日(火) 《今すぐフォロー&リツイートして応募》 《さらに今すぐTypeSquareに無料会員登録して応募》   キャンペーン概要 賞品・当選者数 リツイートして応募の賞品 giftee「ローソン『マチカフェ』引換券」を、抽選で500名様 TypeSquareに登録して応募の賞品 TypeSquareロゴ入りBluetoothイヤホンを、抽選で5名様 発表・当選連絡 giftee「ローソン『マチカフェ』引換券」: キャンペーン期間終了後に厳正な抽選を行い、当選された方には2017年2月上旬より順次、Twitterアカウントにダイレクトメッセージでご連絡させていただきます。 ※「@typesquare」をフォローしていない場合、当選は無効になります。 TypeSquareに登録して応募: キャンペーン期間終了後に厳正な抽選を行い、当選者を2017年2月中に決定いたします。当選された方には電子メールにてご連絡させていただきます。 ※すでに会員の方も抽選の対象となります。 ※TypeSquareを退会していた場合、当選は無効となります。 注意事項 応募者は、日本国内に居住されている方とさせていただきます。 当選で獲得された権利は、他の人に譲渡することはできません。 Twitterの「いいね」は抽選の対象外となります。 TypeSquareに登録して応募された方がTypeSquareロゴ入りBluetoothイヤホンに当選された場合、TypeSquare会員登録のメールアドレス宛に当選のご連絡をさせていただきます。当選通知より1週間以内にご連絡がない場合、当選は無効となります。 当サイトの利用によるいかなるトラブル・損害(直接、間接の損害別を問わず)が発生したとしてもTypeSquareは一切の責任を負いません。あらかじめご了承ください。 当キャンペーンサイトの利用または利用停止もしくは不能により生じる損害につき、TypeSquareは一切責任を負わないものとします(Twitterのサーバダウン等を含む)。 当キャンペーンの運営一切はTypeSquareが行います。必要と判断した場合には、本応募要項を変更できるほか、当キャンペーンの適正な運用を確保するために必要なあらゆる対応ができるものとします。 応募者は当キャンペーンのご応募にあたり、本応募要項及び事務局の運営方法に従うものとし、その運営方法について一切異議を申し立てないものとします。 当キャンペーンは、Twitter社とは一切関係ありません。 個人情報の取扱い お客様の個人情報はモリサワのプライバシーポリシーに基づき、管理を行います。お預かりした個人情報の取扱いについては、こちらをご参照ください。 運営者 TypeSquare 問合せ先 TypeSquare問合せフォーム   《今すぐフォロー&リツイートして応募》 《さらに今すぐTypeSquareに無料会員登録して応募》


【2016年まとめ】Webフォントはどこまで進化した?

2016年のTypeSquareのトピックを総まとめ。Webフォントに関する疑問はこれで解決?! 表示速度や機能 TypeSquareではCSSの標準的な機能で文字詰めを行うことができます。 https://twitter.com/typesquare/status/767911810074750976 Webフォントの表示速度もサービス当初から大幅に短縮しています。実際に検証いただいた結果はこちら。 https://twitter.com/webtanforum/status/699718484993835008 さくらのレンタルサーバーをお使いの方は、TypeSquareのWebフォントを無料でご利用いただけます。 https://twitter.com/sakura_pr/status/748083663477293056 Webでもフォントは重要? 制作の現場では、Webフォントの実用性について様々なお悩みも多いことと思います。デザイナーの皆さんに率直な思いをお話いただきました。 https://twitter.com/LIG_J/status/691809470104608768 速度や価格についての疑問には、担当者がしっかりとお答えしました! https://twitter.com/ferretplus/status/758132185312276480 多言語もWebフォントとして利用できます。日英中韓で統一したイメージを出せる書体もあり、新たに追加されたタイ文字はデザインバリエーションも豊富です。 https://twitter.com/typesquare/status/793306094458273792 書体選びとその効果 ブランディングに欠かせない書体。ケースによって書体の役割を見極めることが大切です。 https://twitter.com/webtanforum/status/691744637468307456 TypeSquareでは、ユニバーサルデザインに配慮した「UD書体」もWebフォントとしてご利用いただけます。 https://twitter.com/ferretplus/status/755676799481225216 Webフォント最新事例 リニューアルを機にWebフォントを採用いただくケースも多く、デザインと更新の手軽さの両立でご好評いただいています。 https://twitter.com/webtanforum/status/699355010128195585 新たなユーザ獲得に向けた施策にも、書体選びが重要な役割を担っています。 https://twitter.com/LIG_J/status/798000014211616768 Web制作やフォント選びのヒントとなりましたら幸いです。これからもTypeSquareの進化にご期待ください。 TypeSquareの無料登録はこちらから。


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

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


「文字詰め」の使い方

見出しなどで、「文字と文字の間が空きすぎている」と感じたことはありませんか? 「文字詰め」機能を利用することで、一文字ずつ調整することなく適切な字間調整が可能となり、より引き締まった印象を与えることができます。CSS の標準的な機能を利用するもので、簡単に導入いただけます。 導入方法 「font-feature-settings」を利用します。 CSS中でfont-familyを記述している箇所に、以下の記述を追加します。 [crayon-58b2e7c15cd8f439328239/] この '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のフォント一覧を見る