Font College Open Campus（フォントカレッジオープンキャンパス）は、フォントや文字をもっと身近に感じていただけるよう、デザインやブランディングをテーマに様々なゲストをお招きし、定期的に開催している公開講座です。
6月23日に開催された8限目の講師は、Webサイトやその他の多くのデジタルメディアを手掛ける株式会社ワンパクの桑原 翔 氏。「Webデザイナー1年目に聞きたかった、明日から役立つ文字表現のエッセンス」と題し、Web上での文字表現についての実践テクニックを教えていただきました。

第1部「トレンドを掴め！Webフォント急上昇利用書体ランキング 2023」

第1部では、モリサワよりWebフォント急上昇利用書体ランキングのご紹介です。モリサワが提供するWebフォントサービス「TypeSquare（タイプスクエア）」で配信されている書体のうち、2022年3月1日〜31日に使用されていた数と2023年3月1日〜31日の数を比較し、使用数の上昇率をランキングした結果を発表しました。
それではさっそく、第3位から見てみましょう。

第3位：UD新ゴ

UDとは「ユニバーサルデザイン」の略で、誰にでも読みやすいことを目的に設計されたフォントです。様々なシーンで読みやすいデザインのため、屋外の看板から商品パッケージの裏面など幅広く使用されているフォントですが、Webフォントとしてはどのようなシーンで使われているのでしょうか。

公式サイトでUD新ゴを使用されている富士フイルムビジネスイノベーション株式会社のご担当者さまに、なぜこのフォントを採用したのかを伺いました。その理由は、読みやすさはもちろんのこと、多言語にも対応しているところ。グローバルに展開する企業にとって、言語を変えても表現に統一感が出せるという点が、ブランディング戦略に欠かせない重要なポイントになっています。

続いては渋谷区の公式サイト「渋谷区ポータル」です。
このサイトでは「UD新ゴ コンデンス90」が使われています。この「コンデンス90」とは、通常のUD新ゴよりも90％の長体率で作られているという意味で、文字の幅が少し狭くなっているフォントです。
自治体の公式サイトということで、あらゆる年代の方にとっても読みやすく、またスマートフォンユーザーに向けて限られたスペースでより多くの情報を伝えるために、コンデンス書体を採用されたそうです。

このように、誰にとっても、どんなシーンでも読みやすいことを目指して作られた「UD新ゴ」は、より多くの人に正確に情報を伝えたい場合や、信頼性を届けたいシーンにおいてよく使われているのではと推測されます。

第2位：A1明朝

文字のにじみ、あたたかみのある独特な風合いが特徴で、大ヒットした某アニメ映画監督作品のタイトルデザインにもシリーズで採用いただいているフォントです。「墨だまり」のあるオールドな雰囲気で、きっちりしすぎていない柔らかさが、懐かしさや手作り感といったテイストとマッチし、様々なシーンで愛されているフォントです。

ここでご紹介するのはアパレルブランド「45R（フォーティーファイブ・アール」のコーポレートサイトです。
丁寧な手仕事、そしてブランドの質感を伝えるぬくもりのあるテイストに加えて、A1明朝が格調高い雰囲気や歴史の重厚感を伝えて、唯一無二の雰囲気を演出しています。

第1位：A1ゴシック

第2位のA1明朝に続いて、人気のA1シリーズから、A1ゴシックが堂々の1位となりました。実は先ほどご紹介した45Rでも、オンラインショップではこのフォントをお使いいただいています。A1ゴシックは、A1明朝と同様暖かな風合いや懐かしさを感じさせる一方で、ゴシック独特の身近さや親しみやすさを伝えます。つまり、オンラインショップのように、見る人に共感を与えたいシーンにぴったりの書体と言えそうです。

もう一つご紹介するのは、バングラデシュの雇用創出を目的としたものづくり行っている革製品ブランド「JOGGO」の公式ブランドサイトです。
このフォントを採用いただいた理由は「カジュアルさを持ちながらも製品の良さをきちんと伝えてくれる視認性の高さ」とのこと。さらに、A1ゴシックのにじみが革にエンボス加工をした時の刻印に似ているので、革製品との相性の良さも感じられたと伺いました。このブランドは自分で革の色を選べるカラーカスタマイズが特徴ですが、色を選択するシミュレーターの画面にもA1ゴシックが採用されています。お客様が最も長く見る画面において、読みやすく、操作の邪魔をしないデザイン性を評価いただきました。

このように、信頼性、あたたかみ、親しみやすさ、などといった目には見えないメッセージを込められるところが、フォントの良さではないでしょうか。

Webフォントのトレンド傾向をつかんだところで、メイン講師の桑原さんにバトンタッチです。

第2部「Webデザイナー1年目に聞きたかった、明日から役立つ文字表現のエッセンス」

モリサワWebフォントのトレンド傾向を掴んだところで、いよいよメイン講師である桑原さんの登壇です。桑原さんの所属する株式会社ワンパクは「一緒に考え、一緒につくる。」というフィロソフィーのもと、クライアントと肩を横に並べて課題解決に取り組んでいます。
桑原さんが入社したのは2010年。デザイナーとして、これまで多くのデジタル媒体に携わり、UI/UXデザイン、コーディング、アートディレクションといったポジションを担っています。

まずはこれまでのお仕事の一部を紹介。ひとつめは株式会社ベネッセコーポレーションのタブレット端末用デジタル教材「チャレンジタッチ」が挙げられます。桑原氏は2014年の開発当初から担当し、小学生でも没入しやすい世界観、飽きずに使ってもらえるためのUI/UXデザインを手掛けました。

続いては、富士フイルム株式会社のコーポレートサイトリニューアルです。世界各国の現地法人やグループ関連会社のサイト数は合わせて100を超え、それら全てのデザインを一新するというプロジェクトで、桑原さんは、どの言語でも対応できるようにデザインシステムを構築したり、フロントエンドエンジニアにおけるテクニカルディレクションの開発を担当しています。　

また、パナソニック株式会社では、グループ企業のスローガンを提唱するパーパスサイトにおいて、UI/UX、インタラクション、情報設計などのディレクションを担当。「幸せの、チカラに。」というテーマのもと、身の回りにあるちょっと幸せにまつわるエピソードを掲載するという構成になっており、それぞれの読み物コンテンツを花に見立て、美しい世界観が表現されています。

このように、これまで多くのウェブ表現を可能にしてきた桑原さんが今回お伝えするのは、「ウェブデザインにおける文字表現のエッセンス」。ウェブフォントの基本知識からレイアウトの具体的なTipsに至るまで、たっぷり深掘りしていきましょう。

１　ウェブデザインと文字

ここで、あるウェブサイトを見てみましょう。「ひょっとしたら今日参加されている若いデザイナーのみなさんは見慣れていないかもしれませんが…このようなサイトの表現は、私がデザインの仕事を始めたばかりの頃にとても流行っていたデザインなんです」と桑原さん。立体感のある配置や、囲みの多用など、全体的に装飾が多いことがわかります。

次にこのWebサイトを、現代主流のデザインに置き換えてみましょう。全体的にすっきりとして、装飾は最低限、余白も広く取られている印象があります。

この二つのWebデザインを、特に文字にフォーカスを当てて比較してみると、明確な違いが見えてきます。

以前のWebデザインは、とにかく装飾がメインのものが目立ちます。見出しやバナー、ボタンなどのテキストは全て画像の中にビルドインされており、その点ではどちらかというとグラフィックデザインの指向性が強かったのではと考えられます。また、テキストはデバイスフォントが用いられることも多く、環境依存によって表示が異なってしまうケースもありました。
近年では、テキストはWebフォントが使われることが増え、画像に埋め込まれることは少なくなりました。装飾よりはテキストに重きをおいている印象を受けます。今日のWebデザインにおいては、文字が肝要なエレメントになっており、そのブランドの世界観を表現するために不可欠なファクターとして捉えられてきているようです。

つまり、「文字を制する者はWebデザインを制する」と言っても、決して過言ではないのです。

2　フォント基本用語

クリエイティブなシーンで文字を扱う上での、基本的な用語をおさらいしていきましょう。

フォントはそれぞれ、異なる名前をもち、異なる見た目をしています。同じ名前のフォントは「ファミリー」という単位で括られ、ファミリーの中でも文字の太さ（ウエイト）はそれぞれ異なっています。特に、Webフォントではウエイトごとにファイルが分けられていることも多く、Webフォントの世界では、ウエイトごとのバリエーションの単位そのものを「書体」と呼んでいます。ちなみにフォントを指定するためのCSSプロパティは「font-family」が付与されます。

次に、一つの文字のかたまりの中で文字同士の間隔を定める「字送り」という設定があります。これはいわゆる「トラッキング」のこと指しており、CSSプロパティは「letter-spacing」です。関連して、「字詰め（カーニング）」という設定もありますが、これはトラッキングとは異なり文字と文字が隣り合わせになった時の文字同士の間隔を調整することを指しています。ウェブフォントに限らず多くのフォントには、そのフォントに最適な詰め組みを実現するための「プロポーショナルメトリクス」という機能が実装されていますが、CSSでも「font-feature-settings」を付与することで、そのフォントのメトリクス情報を呼び出すことが可能です。

また、文章の行間を調整する「行送り」という作業は「line-height」を付与すると設定できます。ここでTipsを一つご紹介しましょう。Photoshopなどのソフトでは、行間をピクセル値などで設定することが多いかと思いますが、Webサイトにおいては、本来であれば、フォントのサイズによって相対的に決めたいところ。そこで、CSSプロパティでも、ピクセル値ではなくパーセンテージで指定した方が良いでしょう。

次に、「文字コード」の基本的な考え方をおさえておきましょう。文字コードとは、文字をコンピューターで処理するために番号を割り振ったもので、その数値は一覧表にまとめられています。例えばUnicodeで「U+0053」という数値は「S」と表示される、というように、それぞれの数値の並びを受け取ることで、文字列データが認識されます。Unicodeの他にもASCII、Shift_JISなど、さまざまな規格が存在していますが、いわゆる「文字化け」はここに強く関連していて、発信した文字コードが受け手の規格と食い違っている場合に起きる事象なのです。

最後に「文字セット」ですが、文字セットとは、そのフォントの中に収録されている文字数を表しています。同じ名前でも一番右に「Pr5」「Pr6」「Pr6N」「Std」といった文字が付いていますが、例えばStdとは“Standard”を意味しており、「Adobe-Japan 1-3」という規格に準拠していることを示しているのですが、このセットの収録文字数は9354字です。
次に、「Adobe-Japan 1-4」に準拠しているフォントには「Pro」が付与され、収録文字数は15,444字に。さらに「1-5」になると「Pr5」が付与され、26,317字に増えるというように、収録文字数ごとに異なる印が付与されます。
また、文字セットに加えて「N」が付与されている場合があります。これは「2004年に改定されたJIS規格に対応している」という意味で、文字数ではなく字形を示すものです。例えば「祇」という漢字のように、規格によって表示される字形が異なる文字があります。

このように、同じフォントでもセットによって収録文字に違いがありますが、デザインの現場で大切なのは、使用する文字セットをあらかじめ決めておくこと。

「デザインツールでフォントを選ぶときにどれにするか迷ったり、チーム内でデータを引き継いだときにその都度別のフォントに置き換えないといけない、ということはデザインに携わっている人は誰しも経験していると思います。どの文字セットが良し悪しということではなく、効率を考える上で、こうした事項は改めて決めておくことがとても大切ですね」

3　Webでフォントを使う

ウェブでフォントを使うときに、大きく分けて3つの方法があります。
1つ目は「デバイスフォント」、2つ目は「サーバー設置フォント」、最後に「クラウドフォント（Webフォント）」です。ある一つのウェブページにアクセスするとき、具体的にどのような通信がやり取りされているかを考えてみましょう。
まず、クライアント端末がサーバーにウェブページを閲覧するためのリクエストを発信します。サーバーはそのWebページを閲覧するためのさまざまな情報（HTMLやCSSなど）を返すことで、クライアント端末の閲覧を可能にしています。このやり取りの中で、Webページで使用されるフォントの情報をどこに置くのかによって、フォントの使い方が分かれてきます。

・デバイスフォント
これはクライアント端末にあらかじめインストールされているフォントのことを指します。この方法の欠点として、WindowsやMacといったOS、PC・スマートフォンといったデバイス環境によって表示が異なるケースがあり、異なる環境で一貫したメッセージを届けられないことが挙げられます。

・環境に左右されないために、サーバー設置フォント
これは「.woff2」などといった拡張子を用いてサーバー本体の中にフォントを格納してしまう方法で、閲覧者がそのフォントファイル一式を一時的にダウンロードして使用することができるというものです。ただし、日本語など文字数の多い言語で多数のフォントを使用してしまうと、通信量が多くなったり、アクセスした後にフォントが正しく表示されるまでのラグが発生する可能性もあります。

・クラウドフォント（Webフォント）
クラウドフォントとは、フォント専用の別サーバーを用いる方法で、クライアント端末は、閲覧サーバーからHTMLのデータを取得し、フォント専用のサーバーからは細かく分けられたサブセットや表示に必要な文字の文だけを取得することができる仕組みとなっています。モリサワでは「TypeSquare」というサービスがそれに該当しますが、サーバー設置フォントに比べて軽量で高速な通信を可能にします。

以上のことから、クラウドフォントという選択肢がより都合が良いと考えられます。最大の利点は、環境に依らずブランド表現を一貫できることだと言えそうです。

4　文字レイアウトのTips

実際にウェブデザインで使えるTipsを大きく２つに分けてご紹介していきましょう。
まず1つ目のテーマは「フォントと言語」です。

とある案内表示の英語版と日本語版があります。それぞれの文字が占めている面積を赤くハイライトで分けてみると、英語と日本語の、文字同士における間隔の違いが見えてきます。アルファベットは比較的文字が小ぶりで、行間もゆったりと空いているように見えますが、日本語の文字はすべてが全領域で、ハイライトにした時の太さや、行間の狭さも歴然です。このように、和文書体と欧文書体ではそもそもの字面（文字のサイズ感）が異なるもの。英語表現を日本語表現に置き換えるときに、こうしたスペーシングの差は意識した方がいいでしょう。また、タイ語などのように、発音を表す別の記号が付くことによって一文字の上下のサイズ感がかなり大きくなる言語では、日本語と同じスペーシングでは文字が重なってしまうなど思わぬ差異が生じてしまう可能性があり、各言語ごとに適したレイアウトが不可欠です。

「一つ目のTipsは、言語ごとの文字の形状や振る舞いを知る必要がある、ということです。ややおまけ的なことにはなってしまいますが、言語ごとの文字の形をみるということは単純に楽しくもあります。多言語に展開する必要がある場合は、ぜひ、文字の形を注意深くみてみてください」

2つ目は「フォントサイズをベースにレイアウトを決める」ということです。

これは、本文の級数を起点に、見出しと本文の上下の空きを整数比でルール化したものです。こうした数値で文字のリズムが整理されていると、見た目の美しさはもちろん、フロントエンド開発においてそれぞれの数値をCSSで展開していく際にもかなり設計がしやすいという利点があります。

CSSにおいて、HTML要素の最上位階層のフォントサイズを「rem（root em の略）」と呼びます。余白のルールを決める際に remを用い、文字サイズに対する比率でレイアウトを決めることで、見栄えの良さだけでなく、文字サイズが運用の中で変わっても余白感が壊れないなど、保守性の点でもメリットがあります。

５　【ハンズオン】プチライブコーディング

ウェブデザインの文字表現について様々な知識に触れたところで、実際にコーディングの実演ライブのコーナーへ。フォントの基本をCSSでおさらいしながら、Webならではの文字表現まで、CodePen[1]を用いて、コード記述をリアルタイムで表示しながら進められていきました。

「このツールはコード記述をしたらすぐに表示が反映されます。ブラウザ上にて無料で始められるので、コードに不慣れな方でも気軽に始められるというご紹介も兼ねています。それでは、さっそく一緒に見ていきましょう」

「デジタル文字は美しく進化する」というテキストを例に挙げてみましょう。このテキストにどんな変化をつけられるか試していきます。この要素にスタイルを当てていくために、まずclass属性で名前をつけましょう。ここではひとまず「sample1」にしておきますが、class名は内容に応じ任意につけていただいてOKです。この属性に対してCSSでスタイルを適用していくことで、様々な文字表現が可能となります。

■フォントサイズの変え方
先ほど話したremを使ってフォントサイズを指定してみましょう。
CSSプロパティ：「font-size」

■字送り（トラッキング）
続いて字送りのコーディングです。
CSSプロパティ：「letter-spacing」

■行送り（行間）
つぎに行間を調整してみましょう。
CSSプロパティ：「line-hight」

■ウエイト
文字のウエイトを調整しましょう。昔は「normal」「bold」という設定値を使うことが多かったのですが、フォントの太さのバリエーションがかなり増えたので、現在は100刻みの数値で指定することが主流となっています。
CSSプロパティ：「font-weight」

これらは文字表現のほんの一部。コーディングを突き詰めていけば、さらにタイポグラフィカルな表現が可能となります。

つぎに、Webならではの表現といえば文字に“動き”をつけること。どんな表現ができるか見ていきましょう。

■ワイプ
試しにワイプの動きを入れてみましょう。今回はわかりやすく「cue」というボタンを押すと文字のアニメーションが発動するように下準備してありますが、実際はスクロール連動やマウス操作など、様々なトリガーを使用します。

こうした効果はいわゆる「transition」というプロパティで、ズームイン、ズームアウトなど、いろいろな種類があります。今回はもう少し詳しく、wipeのコードを読み解いていきましょう。
先ほどの動きで見えた、文字の上に重なる青い帯は、「:before」という擬似要素によって指定されています。先ほど見えた帯を変えたり、出現したり消えたりするスピード感などを細かく指定することができます。

「静止画でデザインを作っていく際に、トランジションのスピード感というのはなかなか意識しづらいと思いますが、実際に調整して目で見てみることで、次第に、動きに対する気持ちの良いバランスや、心地いいなと思う“勘どころ”を養うことができます。コードを書くことに慣れていない方も、あまり難しく考えないで、こういった身近なツールを活かして、断片的にでもどんどんトライしてみてください」

■スプリットアップ
続いては「splitup」について見て見ましょう。同じく「cue」ボタンで動かしてみるとこんな感じです。

テキストの文字が、ひとつずつパラパラと下から湧き出てくるような表現です。こちらも詳細な設定が可能で、ワイプ同様に、出現のスピードを細かく指定することが可能です。
「トランジションにおいてスピード感というのはとても重要で、たとえば『シュッ』と動いていたものが少し遅くなると『ぬるっ』と動いて見える、というように、擬音語での伝え方も大きく異なってきます。それほど、人に与える印象に左右するものなので、この要素も、デザインの武器として心に留めておいてください」

まとめ

デザインそのものに関わる文字の知識から、コーディングならではの具体的なテクニックまで、具体的に教えてくれた桑原さん。最後に、これからWebデザイナーを志す人、Webデザインの仕事に日夜励んでいる人、ひいてはすべてのクリエイターに向けてのメッセージで締めくくられました。

「今日お伝えしたことは、デザイン領域の本当に一部分です。今回は文字にまつわるテーマでお話ししましたが、まだまだもっとたくさんの観点があって、蓋を開けていけばいくほど新しい発見があります。新しいものに出会って、新しいことができるようになっていくというデザインのプロセスを、ぜひ楽しんでいってほしいなと思います。プレッシャーや義務感になってしまうとどうしても腰が重くなってしまうもの。自分で遊んでみるくらいの気楽な感覚、気軽に追求していくことを通じて、その領域を好きになっていくことが第一歩だと思っています。つまり、本日最後のエッセンスは“好きこそものの上手なれ”です。頑張ってください！」

Q&A

講演中にはたくさんの質問がチャットで寄せられました。その中からいくつか抜粋してお届けします。

装飾が多いものからシンプルなものに、というお話がありましたが、どのような背景があったのでしょうか？

―　まず、その時代ごとのユーザーのリテラシーというか「どんな見た目じゃないとそれだと気づいてもらえないか」が大きく左右してきたのではないでしょうか。冒頭に話した、以前流行したWebデザインを例に挙げていうと、当時のWebサイトのボタンはすべて、プリっと立体的に見えていて、押すとむにゅっとへこみそうだと思わせるものがほとんどで、一つの情報のかたまりだということをわからせるために、わかりやすく囲みがついていたりしました。それはグラフィック的に「これはボタンですよ」「ここまでが一つの情報ですよ」とわからせるためのデザインだったんだと思います。
今や当たり前となったデジタルデバイスが登場しはじめた当時、アプリケーション内の本棚や電卓は、すべてリアルにデザインされていて「その機能が何を意味しているか」が直喩的に表現されていました。これは「スキューモーフィックデザイン」と呼んだりするんですが、ウェブのボタンのデザインなんかもその辺りにルーツがあったように感じています。
さらに言えば、次第にスマホが普及していく中で、Apple社はiOS7を出したときにデザインを一新し、線や色だけで単調に表現する、いわゆる「フラットデザイン」に移行したんです。その時のApple社の思想って言うのが「もうみんなわかるから」と言うもの。その流れから、UI/UXがどんどんシンプルになっていったと言う流れが今のウェブデザインにも影響していますね。
あともう一つの要因としては、昔はグラフィックや画像で勝負するしかなかったけど、環境が変わっていったと言うことも大きいです。つまり、「削ぎ落としても伝わるようになった」と言うことと「技術が発展していった」の二点が大きな理由だと思います。

サーバー設置フォントとクラウドフォントでは文字の設置スピードに違いはありますか？

―　やっぱりサーバー設置フォントだと、そのサーバーにおいてあるフォントファイルを丸ごとダウンロードすることになるので、日本語だと少なくとも9000字程度というように、特に通信量が多くなってしまいます。その点クラウドフォントは軽量にその必要分だけ取得できるという点では比較的軽量な仕組みになっていますね。

桑原さんの担当された案件で一番難しかった案件について教えていただきたいです

―　そうですね……。冒頭でご紹介した富士フイルムさんのグローバル規模でのリニューアルですかね。それまでいつものように使っていた「こうして文字組したらきれいだな」という経験則が、言語を変えるごとにことごとくハマらなくて、そういった意味では苦戦したと言えます。一方で、新しい言語の発見は楽しくて、言語学的な知見にはなったと思っています。

font-feature-settingsの使い方を教えて欲しいです

―　ライブコーディングでやっていませんでしたね、やってみましょう。

先ほどの「デジタル文字は美しく進化する」というテキストにおいて、漢字同士の空きは詰まって見えても「し」「く」の間やは空いて見える、ということがあると思います。そういう時に「font-feature-settings」を入力すると、バランスよく詰めてくれるんです。

このように、カーニングのメトリクス情報をどのくらい使うのか、というプロパティですが、現在設定している“palt”というオプションの他にも”pkana”や”pwid”などを指定して、タイポグラフィーの自由度を広げることができます。

“フォントサイズをベースにデザインを決める”というところの、余白比率や計算方法を紹介してほしい

―　私の場合だと、スプレットシートに、ベースとなる本文が16だったら、見出し2や見出し3の比率を1.5倍、2倍…と計算できるような表計算を作ったりして、トライアンドエラーした時期もあります。最近では自分の中でのベストプラクティスが見つかってきているので、毎回そうした表計算を使うことはないですが、不慣れな頃は、一旦数値を出してみたり、いろいろ試しながら進めていっていましたね。

過去の文字組やフォント選びの中で、この文字組やフォント選びはすごくこだわった、という思い入れがあるものはご紹介いただきたいです

―　先ほどのモリサワパートのなかでウェブフォントに「新ゴコンデ90」を使われた事例を話されていましたが、2015年にモリサワさんのコーポレートサイトを担当させていただいた時に、真っ先に提案に上がったのが「スマホ版の時はコンデンス書体を使おう」というものでした。その時は確かUD新ゴの90を使いましたね。当時のスマホはまだまだ今よりも幅が小さかったので、同じ幅の中でどれくらいきれいに文字を折り返せるかを検証した時、コンデンス書体がかなり革命的に感じられたのを覚えています。

制作会社などで制作されているフォントは、Webフォントで作られるサイトの割合はどのくらいなのでしょうか？システムフォントなどと比べるとどうかお伺いしたいです

―　色んな会社があるとは思いますが、私が記憶する限り、システムフォントをご提案することはもう今はゼロですね。装飾というよりは文字で伝える、というのが有用な流れになってきていると思うので、今は一貫した表現ができるWebフォントをご提案することが多いです。

コーディング未経験者でもわかりやすいCodePenのようなアプリケーションや参考書等があれば教えていただけますと幸いです

―　ICSという会社が「ICS MEDIA」という情報サイトを運営されています。そこはコーディングやフロントエンド向けに表現をすごくわかりやすく説明してくれています。エンジニア寄りになるとどうしてもわかりづらかったり、専門用語ばかりになってしまっているものもあるのですが、ICS MEDIAについては、比較的一般的な言葉で書かれている情報が多くて頭に入ってきやすいです。サンプルコードも載っていたりデモページが載っていたりするので、わかりやすくておすすめです。

ウエイトを指定するときは100刻みの数値とのことでしたが、どのウエイトがどのくらいの数値という目安はありますか？

―　Webフォントによって微妙に違うんですが、通例、400がレギュラー、800がボールド、デミボールドは600という基準はあります。クラウドフォントで一つのフォントを選んだ時に、TypeSquareでもそうですが、CSSで書く時の数値というのが定められている表があったりします。それをみていただければ間違い無いと思います。

個人的に好きなフォントや、よく使うフォントはありますか？

―　中ゴシックBBBは好きですね。大学時代、大学のPCにモリサワフォントが入っていたので、よく使いました。卒論もリュウミンで書いたりしました。

フォントの選び方で、これ！と決められる決め手がありません

―　わかります！（笑）　選択肢がありすぎてどれもそれっぽくなっちゃう時ってあると思うので、自分の場合は正解を考えないでフィーリングで決めてから、しばらく進めていくうちにそれでいいのか気づくことがありますね。フォントを選んですぐの時はなかなか見えてこないこともあったりするので、自信がなくても一旦は直感で選んだものを信じてデザインを進めていくっていうのがおすすめかもしれないです。

Webフォントでウエイトの数を少なくしつつも表現の幅を広げる工夫はありますか？

―　これはフォントの級数、サイズで変化がつけられると思います。他にも、色で濃淡をつけたり、ウエイトに頼らずともメリハリをつけられる方法はいろいろあると思います。

近頃、モバイルファーストなデザインをよく見かけるのですが、機能性やレイアウト、ホバー等アニメーションにも流行りなどはあるのでしょうか？

機能性という意味で言うと、ウェブアクセシビリティは重視されるべき事柄になっていますね。また、Web初期に多かった、文字が横方向に流れるアニメーション(Marquee) や黒フチのついたUIデザインなど、レトロに感じるような演出を敢えて使うのもたまに見かけますね。

スマホとPCどちらに力を入れて作成したらよろしいでしょうか？

モバイルとデスクトップのどちらのデザインに注力すべきかは、その画面が想定する主要なユースケースによって適正が大きく異なるため、一概にどちら、とは言えないかもしれません。
ただ個人的な意見を述べるとすれば、自分はPCのデザインから考えることが多いです。理由として、スマホの横幅の狭いアートボードでレイアウトを考えるより、PCの広い幅のアートボードで考えるほうが自由な発想がしやすく、レイアウトも大胆でリズムがあるものが生まれやすいからです。
まずは大きいキャンバスで暴れてみて、その後 レスポンシブを加味しながら暴れすぎたところを整えていく、という感じです。

富士フイルムさんのサイトを作成した際、フォントにはどのようなこだわりを持って作成されましたか？

富士フイルム様のブランドで使用されているコーポレート書体が「新ゴ」だったため、そのブランドイメージを貫きつつ読みやすさを兼ね揃えた「UD新ゴ」を和文書体として起用するところから出発しました。
近年のディスプレイの高精細化に伴い、Lightなどの細い字体を積極採用したり、本文と見出しの表情を変えるために正体とコンデンス体を使い分けたり、とウェブフォントならではの多様性を駆使することができました。
また多言語に耐えうるデザインということで、ラテン系の言語では Clarimo UD PE、タイ文字では Clarimo UD Thai を起用しました。Clarimoは 新ゴ との混植で見た目上の相性を重視してデザインされたフォントとお聞きしたことがあります。

Webフォントをお客様にご提案される場合、お客様の予算の確保などどうされてますか？ランニング費用で渋いお返事をいただくことが多いので、殺し文句（笑）などあれば教えていただきたいです

講義の冒頭で触れましたが、今は「フォント」がウェブサイトでのブランド表現の大きな要になっている、ということをお客様に知っていただくのが良いと思いました。そこを理解いただけないとどうしても「フォントに費用をかけなくて良い」と考えられてしまいがちだからです。
一貫した表情で世の中にメッセージを発信し続けることは、ブランドを確立させファンを獲得していくことに繋がるという信念を制作側とお客様側とで共有できると良いですね。

クライアントやユーザーの目線に立ち、Web上での多彩な表現を可能にしてきた桑原さん。誰もが目に見て美しいと思うレイアウトがロジカルの上に成り立っているということは、ウェブデザインならではの面白さかもしれません。また、一つの領域を掘り下げるために、まずはそれを好きになること。デザインだけでなく、すべてのものづくりにおいて大切な「アクティブな姿勢」を学ばせていただきました。

FONT COLLEGEはこれからも不定期に開催し、noteでレポートを掲載していきます。今後の掲載もどうぞお楽しみに！