Fontworks / サイトレビュー

基本情報

サイト名・企業：Fontworks

URL：https://fontworks.co.jp/

ターゲット予想：20～40代男女

目的：デザイナーや印刷会社の方など、フォントに関わる全ての方に取り扱うフォントを知り、活用していただく（購入していただく）ため。

サイト構成：1カラム

デザイン・配色
■カラー

会社ロゴにも使用されている「赤（紅っぽい）」を見出しやキャッチコピー等に使用し際立たせ、背景や文字色には白・グレー・黒のシンプルな配色を使用している。

■主要フォント

キャッチコピー：テロップ明朝（N仕様） D  / フォントサイズ58px・18px

フォントワークスでは、紙メディアだけでなく、デジタルメディアなどでのフォントの表示を目的としたそれぞれの業界に最適な専用フォントをリリースしています。「テロップ明朝」は、放送業界に向け先行リリースした《ソリューションフォント》です。テレビ画面やモニタ上で明朝体を表示させる場合、横線や曲線の細い部分が見えにくいといった視認性の問題があります。そこで、明朝体の中でも評価の高い「筑紫明朝」をベースに、横画の太さや曲線の濃度調整を施した画面表示に最適な横太明朝体として誕生しました。
※N仕様：JIS X 0213：2004（通称JIS2004）に対応した字形を持つ仕様
（引用先：Fontworks）

WEBへの表示を考慮した、読みやすく見やすいフォントを使用している。

見出し・本文：UD角ゴ_スモール（N仕様） DB / フォントサイズ16px・14px

UD書体の見出し用に最適な角ゴシック体「UD角ゴ_ラージ」をベースに、長文用として リデザインした書体です。可読性向上のために「漢字・英数字」をおよそ2％縮小し、バランスよく読めるように「かな」もサイズ調整をしています。美しく読みやすいUD角ゴシック体のスモールタイプとして長文に適した書体です。
※N仕様：JIS X 0213：2004（通称JIS2004）に対応した字形を持つ仕様
（引用先：Fontworks）

太さが均等なゴシック体で、どなたでも読みやすいフォントになっている。

考察・感想

■ページ全体の構成

ヘッダー・ナビゲーション・ハンバーガーメニュー→ファーストビュー→ニュース→キャッチコピー・リード文→コンテンツ（企業情報や使用事例等）→ブランドサイトへの導線→フッター（ホームのみ）

■ヘッダー・ナビゲーション

・ナビゲーション部分のフォントを太字にし、分かりやすくしている。また、ナビゲーション詳細をハンバーガーメニューに集約することですっきりしたヘッダーになっている。

■ファーストビュー・ニュース

方眼用紙のマス目とハッシュタグを配置し、ハッシュタグの上にカーソルをホバーさせると、それに対応したフォントの文字がマス目に表示される。

ハッシュタグをクリックするとそれぞれのコンテンツへ飛ぶようになっている。

・背景色の「赤」を明度違いにし、ブロック分けしている→パッと見たときに違いをすぐに認識できる。ハッシュタグにすることでマウスを持っていきたくなる工夫がされている。

・ファーストビューのメイン背景赤からニュース部分の背景を白に切り替えることでニュースを目立たせている。また、スマホではニュースのトピックスを右から左に流れるモーションを加え、より強調している。

■全体

・写真を一切使わず、中央のコンテンツ箇所に外枠を設けることでノートの1ページのようなデザインになっており、商品である「フォント」を全面に見せるものになっている。