40.レタースペーシング サイトレビュー
デザイン本「レタースペーシング」の特設サイト。デザイン本レタースペーシングはその名前の通り字間調節を学べる書籍です。書籍の特設サイトは初めて見たのでとてもワクワクしました。メインビジュアルは書籍の表紙に使われているイラストですが、とても可愛くてWEBサイトでも映えています^^
今回はこちらのサイトをレビューしていきます!
目的
・書籍を購入してもらう→Amazon、BNNなどECサイトへの誘導
・書籍に興味を持ってもらう
ターゲット
・デザイナー、デザインを勉強している人
印象
綺麗、かわいい、すっきり
キャッチコピー
WEBや印刷物のためのデザイン本!
特徴
余白
縦160pxほど。余白は広く、すっきりとした印象がある。
配色
配色は白背景に赤を取り入れた配色。書籍に使用されている色と合わせていて、統一感があります。
フォント
TazuganeGothicStdN-Regular 日本語・英語 GoogleFontsから使用
たづかね角ゴシック
たづかね角ゴシックはNeue Frutigerに合う書体として設計された書体。読みやすいだけではなく、親近感の沸くようなフォントです。
メインビジュアル
メインビジュアルは書籍のイラストが使用されています。ローディングするとイラストが日差しにとけていくような姿が印象的。まねるデザイン研究所のサイトによると、縮小、フェートインのほか、ブラー（ぼけ）とブライトネス（明度）を使って実装されているみたいです。こういったアニメーションをWEBサイトで実装しているのは面白いですよね。
イラストの電車の中の風景はは人同士の近さを変えることで、文字同士の距離感を表しているのかなと感じました。
気づいたポイント
・1ページのすっきりとした構成。ヘッダー、メインビジュアル、コンセプト、本書の特徴、目次、著者について。
・見るコンテンツに応じてヘッダーの色が変わるところがわかりやすい。本に挟む栞にも見える。
・メインビジュアルのイラストにタイトルやナビが被らないよう、ヘッダーがかなり広くとられている。
・文字間で文章が変わることを伝えるため、Before→Afterの変化を見せている。
→ビフォーアフターを小さな変化で見せたい場合に使えそう。文字間だけでなく、画像を変える、背景色を変えるなど。
・本の見開きページを自動スクロールで見せることで、どんな内容なのかがざっと伝わる。
・背景にイラストで使用している女の子の本を読んでいるところがモノクロで使われている。
・本の内容を伝えるために目次を入れている。
・著者の情報は白背景にすることで名刺風にして他のコンテンツと差別化。
感想
今回はデザイン本「レタースペーシング」の特設サイトをレビューしました。すごく丁寧に考えられて作られたことが伝わるようなサイトでした。字間について詳しく書かれた本は読んだことがなかったので、サイトだけではなく本にもすごく興味が沸きました!今度読んでみたいです^^