webサイト分析20｜幻冬舎

幻冬舎 / Gentosha

まとめ

新刊やランキング、今おすすめの本を、ギャラリーのようにみることができる。
横向きに開いた本のような矢印のあしらいが、統一されて印象的。
あしらいやワンポイントに有彩色がなく、どんな本が並んでも馴染みやすく、落ち着いた印象を受ける。

---

カテゴリー

出版社

概要

文庫・新書・雑誌・電子書籍の発行と販売業務を行う。

ターゲット

読書がしたい人
新着書籍やランキングを知りたい人
おすすめ本を知りたい人

目的

書籍の購入

コンバージョンまでの動線

表紙画像をクリックすることで、amazonや楽天への導線が設置されている。
新着本は発売日が記載されている。

---

メインビジュアル

書籍の表紙画像と、タイトルが上に表示。
左方向にゆっくり流れるアニメーションがある。

スクロールすると、Gentoshaと英語が背景にあしらわれている。
ここまでがメインビジュアル、と目印にもなる。

グローバルナビ

本の種類
ジャンル
Web

スクロールしてもヘッダーに常に固定される。
書籍検索に特化したナビ。
ホバーすると、より詳細なメニューが出現。

コンテンツ

トピックス
新刊
特集
ベストセラーランキング
雑誌
SNSアカウント/関連サービス
アンケートフォーム
企業情報/採用情報

・トピックス

最新情報が並ぶ。右の「6月の幻冬舎新書新刊」はタイトル文字が他より大きく、重要度が高そう。でも視線誘導で位置だけを考えると、「7月の単行本新刊」が一番目につきやすい気もする。

・新刊

最新本の紹介。発売済み＆これから発売予定の書籍の表紙とタイトルが並ぶ。
クリックすると詳細な書籍紹介ページにリンクする。
ここでもカテゴリを絞っての検索ができる。

・特集

4つのおすすめ本の紹介。なぜ今おすすめなのか、文書が記載。
背景は黒っぽいが、書籍にライトが当たってるような効果がかけられており、目立つ。

・今月のベストセラーランキング

書籍の種類ごとにランキングが紹介。
メインビジュアル下にも使用された薄い英語の背景があしらいに。

・雑誌

雑誌の紹介。

・SNSアカウント/関連サービス

・アンケートフォーム
・企業情報/採用情報

・フッター

各カテゴリーごとに、縦線で区切られている。
企業に関するメニューは黒帯でコンテンツ分けされている。

レスポンシブ

767px以下よりハンバーガーメニューに。
PCと同様、フッターは常に上部に固定。

・ハンバーガーメニュー

書籍に関するメニューと、他サービスは背景色やボタンのあしらいでグルーピングされていた。
PC版ではフッターに配置されてた企業情報が、同じあしらいでこのメニュー内に。

トピックスは新着順に並ぶ。やっぱり6月の新書新刊が一番文字が大きい。

フッター。PC版ほど表示は詳細ではなく、ボタンに集約されていた。
ハンバーガーメニューと表示がかなり似ている。

配色

フォント

Font-gothic-bold　グローバルナビ、コンテンツタイトル
Font-mincho
Font-en　Gentoushaのあしらい、コピーライト

白黒トレース

発見と感想

・本は基本的に、端が斜めの四角形（下図）の上に配置されることで、目立たせている。ほとんどのあしらいで共通。

・あしらいの文字と読ませる文字を、色味（黒とグレー）で使い分けている。
・あしらい全般で無彩色を使用。ワンポイントでも有彩色は使用していない。
・矢印の形が、本を開いた状態にも見え印象的。