サイトレビュー #053

soyogo

制作会社

しなやかデザイン

概要

職業や学問の世界の魅力を伝える、日本印刷株式会社が運営する文芸オウンドメディアのWebサイト

第一印象

温かい、落ち着き、ナチュラル

Webメディアだけど、本っぽい紙っぽさを少し感じるイラストやフォントの選定だと感じた。
落ち着いた温かみのある配色で、イラストのようにゆっくり本やエッセイを読むイメージが伝わる。

ターゲット予想

本を読むのが好きな幅広い年齢層の人

目的

・様々なジャンルの小説やエッセイに触れる機会を作る
・紙文化の魅力を知ってもらう

フォント

メイン：ZENオールド明朝
少し懐かしい雰囲気のある明朝体。ひらがなの曲線と漢字のかっちりとしたデザインも美しく調和している。文書の本文や見出し、真面目で少し古風な雰囲気を演出したい場面で使いやすい。

サブ：EB Garamond
本などの印刷物に使用されるクラシックな書体

配色

ベースカラー：#f4f3ef（薄いベージュ）
アクセントカラー：#ebeae5（ベージュ）、#cf2520（赤）
フォントカラー：#333（グレー）

サイト構成

❶Novels
❷Essays and more
❸About
❹Information

トップページ構成

❶MV
❷Novels（小説）
❸Essays and more（エッセイなど）
❹About
なんのサイトなのか、どんな思いがあるのかを説明。
❺Information
❻著者一覧/イラストレーター一覧
❼Footer

気付いたこと

＜デザイン面＞
▼ローディング
・最初に縁取りのロゴ→左から流れるように文字からイラストの順番に出現
→縁取りのロゴが固定なので、ロゴがすごく印象に残る気がする。

▼ファーストビュー
・まずFVで目に飛び込んでくる、本を読む女の子のイラストがインパクトがあって世界観に引き込まれるし、本に関するサイトなんだろうなぁとわかる。

・細かくて優しいタッチのイラストが温かみがあってほっこりする。Webサイトではあんまり見ないテイストの漫画っぽい感じのイラストだと思った。背景とかは特に印刷物らしい紙の質感が感じられるような絵だけど、本をめくったり、猫が笑ったり、動きがあるのがWebっぽくて、印刷物とWebの良さをそれぞれ組み合わせた感じがすごくいいなぁ。

・左下のscrollと右下のイラストレーターさんの表記の２つはSPだと色が白になる。
→PCだと写真に被らないけど、SPだと写真に被る。赤色で被ってしまうと、視認性がかなり悪いから変えているのかな？

PC

SP

▼ナビゲーション
・PC、SPどちらもハンバーガーメニューを採用。ハンバーガーの上にMENUの文字があるの珍しい。
・ハンバーガーメニューを開いたページでもイラストが大きく使用されている。一度見たら忘れないような世界観の作り込まれたイラストだから、メニューのページでも使うと効果的だと思った。

・TOPページ以外の下層ページ内では、なビゲーションメニューに「HOME」が追加されている…！！すごく細かい配慮だと感じた。TOPページでは必要ないもんなぁ…

▼全体
・本や印刷物でも使いやすい「ZENオールド明朝」や「EB Garamond」のフォントを使用していて、文書っぽさが感じられる。文学オウンドメディアである今回のサイトにあっている。

▼TOPページ
・「Novels」や「Essays and more」は、一覧と最新話へのリンクがあるので、初めて読む人、いつもサイトをチェックしている人によって目的のページにすぐに飛べる。

・MVのイラストはスクロールすると少し幅が小さくなって、その下のコンテンツである「Novels」と「Essays and more」でも右に固定配置される。
→世界観を壊さないため、いろんなイラストを使わないようにしているのかな、とも感じた。

▼下層ページ
・小説やエッセイのページでは左サイドに「Novels」と「Essays and more」のコンテンツをそのまま固定配置。見出しだけとかじゃないので、ここでも一覧か最新話かすぐに移動ができる。（PCのみ）
→小説などの種類が増えてきたらどうするんだろう？また変わるのかな…？

＜アニメーション＞
・ハンバーガーボタンはhoverで線が2pxずつ上下に動く。

レスポンシブ

・下層ページのMVがPCとSPでかなり違う。SPでは閲覧の邪魔にならないように最低限の要素に減らしている。