necco note
中川 小雪
necco note
アシスタントデザイナー2年目中川のフォント勉強記録〜ウェブフォント編〜
- Design
- Web Design
中川です！
本日10月20日（水）19:00から行われる、FONTPLUS DAYセミナー Vol. 40 『necco流ウェブタイポグラフィ』— necco Inc. 阿部文人さん・今聖菜さん・田口冬菜さん・中川小雪さんを迎えて — にneccoメンバーで登壇します！
FONTPLUS DAYセミナー Vol. 40 『necco流ウェブタイポグラフィ』 (2021/10/20 19:00〜)
株式会社WORDSのリニューアルプロジェクトの裏側の話や、過去に手掛けたウェブサイト案件（秋田人形道祖神等）等の制作秘話をタイポグラフィ観点を中心にお話しする予定です！無料で視聴できるので、もし良かったらのぞきにきてください。
そこで、今回はフォントやデザインが素敵だな！と思ったサイトのウェブフォントを深堀りしていきながら、フォントについて学んでいこうと思います！
ウェブフォントとは？
まず簡単に、ウェブフォントについておさらいしていきます。
Webフォントとは、あらかじめサーバー上に置かれたフォントデータやインターネット上で配布されているフォントデータを読み込んで、文字を表示できるようにした技術のことです 本来、Webサイトを表示する際、CSSで使用するフォントを指定しておき、Webブラウザが端末にインストールされているフォント＝デバイスフォントを用いて文字を表示させています。 しかし、ユーザーが使っている端末のOSやバージョンによって、インストールされているフォントが違うので、指定されたフォントがない場合は、別のフォントが代用されてしまいます。
（引用元：今さら聞けないWebフォントの基礎知識 | 株式会社LIG）
今までは、ユーザーが使っている端末やOSに依存したフォントしか表示されなかったのが、ウェブフォントの登場によって端末やOSなどの違いに関わらず、同じフォントを表示することができるようになったのですね。
ウェブフォントを使用することで、多様なフォントを用いてウェブ上でも表現できるように…！当たり前だと思っていたこの技術が普及したのもここ数年なんですね。
そして、これらのウェブフォントをサイトに導入するにあたって必要になってくるのがウェブフォントサービスです。今回のイベント主催のFONTPLUSさんもウェブフォントサービスになります。
ちなみに今回登壇するイベント名にあるタイポグラフィの意味ですが、書体のデザインだけではなく、文字の大きさ・配置方法、それらを用いたデザイン構成等の技術についてのことを指しています。 （そんなわけで焦って学んでいる次第であります。）
最近見かけた素敵なフォントを使用したサイト
サイトで見かけた素敵なフォントについて紹介していきます。
ちなみにChromeの拡張機能のWhatFontを用いてフォントの情報をみています。
+SHIFT
欧文：Mr Eaves Sans（Emigre Fonts）
和文；中ゴシックBBB（モリサワ）
使用フォントサービス：Adone fonts
オフィスビルブランドのサイトになります。こちらのサイトは、Mr Eaves Sansと、中ゴシックBBBとの組み合わせで構成されています。
中ゴシックBBBは小さく使われても視認性が高くて読みやすいですね。
欧文に使用されているMr Eaves Sansはカリフォルニア州を拠点とするフォントメーカー「Emigre Fonts」でつくられた書体です。元のMrs Eavesから拡張されて、Mr EavesSansとMrEavesModernのフォントができたそうです。
土台となったMrs Eavesは、1996年にZuzana Lickoによって設計されたトランジショナルセリフ書体です。トランジショナルセリフは、横のラインに比べて縦のラインが細いことにより、コントラストが高いのが特徴。
そして土台をもとにつくられたサンセリフverがこちら！
だいぶ印象が変わって見えますね…！あまり面影がみえないですが、大文字と小文字のジャンプ率の高さや、少し開いた文字間などの要素は似ているかもしれません。iやjのドットが丸くて可愛らしいですね。
レタースペーシング タイポグラフィにおける文字間調整の考え方
レタースペーシング タイポグラフィにおける文字間調整の考え方
和文：たづがね角ゴシック（Monotype）
使用フォントサービス：FONTPLUS
次に紹介するこちらは「レタースペーシング タイポグラフィにおける文字間調整の考え方」の書籍のサイトです。たづがね角ゴシックが使用されています。
たづがね角ゴシックは、MnotypeのNeue Frutigerに合う日本語書体として開発がスタートしました。
名前のたづがねの意味ですが、鶴の鳴き声を意味する「鶴（たづ）が音（ね）」が由来だそうです。日本最古の詩集、万葉集の歌から取ったそう。鶴は古来より文学や芸術作品のモチーフとして多用されており、現代でも長寿と美の象徴とされています。（参考文献：「Mpnotype」たづがね角ゴシック：鶴の優雅さを持つ日本語書体）
和文と欧文を混植する際に自然に見える書体を目指して開発されているので、欧文とも組み合わせやすくなっています。また、ウェイトが10種類もあり、幅広い用途で使用することができます。日本語の書体でこんなにウェイトがたくさんあるのはすごく有難いですね…！使い心地が良く、先輩方もよく使用しているイメージがあります
文字間が綺麗で、文章がグッと読みやすいイメージがあります。
フォントの文字間についての書籍のサイトに相応しいフォントですね！
最後に
好きなサイトのウェブフォントについて調べてみて、組み合わせ方や知らないフォントを知ることができて勉強になりました。
もっと色んな視点からフォントについて学んで活かしていけるようになりたいです。
本日行われる、FONTPLUS DAYセミナー Vol. 40 『necco流ウェブタイポグラフィ』よろしくお願いします！
FONTPLUS DAYセミナー Vol. 40 『necco流ウェブタイポグラフィ』 (2021/10/20 19:00〜)
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか？
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
（2024年8月時点）
中川 小雪
Koyuki Nakagawa
神奈川県生まれ。三兄弟の末っ子。中央大学で社会学を学び、2019年10月からneccoでインターンを始める。 2020年4月にアシスタントデザイナーとして入社。一人前のデザイナー目指して修行中。 好きなものはアイドル、可愛いもの、可愛い人、ご飯、布団、こたつ、小説、旅行。好きな食べ物は、小籠包、餃子、牛乳寒天、ちくわぶ。早起きが人生の課題。
