![見出し画像](https://assets.st-note.com/production/uploads/images/100760415/rectangle_large_type_2_3a408b95dae60495c9ffcefcfb290a15.jpeg?width=800)
ウェブサイト考察レポート #砧書体制作所
本日のウェブサイトは、砧書体制作所 公式サイト です。
概要: 丸明朝体などをリリースした書体制作所。 フォントは、言葉に着せる服。といった視点で提案しています。
ターゲット予測: デザイナー
目的予測: フォントについての理解を楽しく深めてもらう/ 購入へ誘導する
文字(本文): 砧 丸明オールド StdN PC 16px SP 12px
全体の印象: モダン、シンプル、楽しげ、遊び心
![](https://assets.st-note.com/img/1679313160313-uzwHhagnxP.png?width=800)
フォントの特徴を表現したモーショングラフィックス
ファーストビューでは、文字の特徴をモーショングラフィックスで美しく、楽しげに表現している。背景色は、薄いベージュ。遊び心のあるサイトのため、スタイリッシュになりすぎないよう、優しい印象でフォントの黒が映える配色にしていると思う。全体的に黒い直線で情報を分け、シンプルにまとめている。フォントの黒いグラフィックが目立つように、他要素は軽めの印象でまとめているのだと思う。
![](https://assets.st-note.com/img/1679317808907-ckJgdIu8KP.png?width=800)
楽しみながらフォントについての理解を深める詳細ページ
詳細ページでは、全てのフォントをモーショングラフィックスで紹介している。購入する人全員に、フォントそれぞれの特徴を楽しみながら深く理解してほしいという意志を感じる。PCもSPも下スクロールで表示が変化する、紙芝居方式。自分のペース(スピード)で書体についての理解を深められるため一方通行の動画でなく、紙芝居方式にしているのだと思った。右下には「◯/100」の表記があり、現在地がわかって安心する。
![](https://assets.st-note.com/img/1679314637893-XNwCqjo5ix.png)
グラフィックと一緒に登場する文章にもユーモアがあり楽しい
![](https://assets.st-note.com/img/1679318560020-bWx0TooDDP.png?width=800)
直感的に操作ができる試し入力ページ
フォントサイズの変更から、白黒反転で色を見比べることもできる。全てのウェイト・種類を一画面で見比べられるため、違いが比較しやすい。画面の中でプラスボタンのみ、黄土色になっている。色を変更させることにより、画面に埋もれることなく、ボタンへ目線を誘導していると思う。直感的に全種類の文字の使用感を知ることができる。
まとめ
ユーモアのある動きや文章から、楽しくフォントへの理解・興味を深めてほしい、という意図が強く伝わってくるサイトだった。
この記事が気に入ったらサポートをしてみませんか?