幻冬舎様

多様な書籍をもつ出版社のサイトリニューアル。ユーザー体験から考える "出会える" サイトのUI/UX設計

エンタメ作品からビジネス書、文学作品まで幅広いジャンルの書籍を手掛けられている幻冬舎様。

今回は、Webサイトへの流入数・コンバージョン率の増加を目指し、ユーザー体験を向上させるためにUI / UXを設計しました。

また、書籍情報の更新などのWebサイト運営にかかる人的コストを削減するためにMovable Typeを導入。
Movable Typeと連携するオリジナルの更新システムを開発し、効率的にサイトを更新できる仕組みづくりを手掛けました。

ユーザーに新たな発見を提供するUI設計

Webサイトのリニューアルに先立って、幻冬舎様を交えてワークショップを開催。ペルソナやカスタマージャーニーマップを作成し、ユーザーに提供するべき体験価値を導き、リニューアルコンセプトを策定しました。

コンセプトは「多種多様な本の情報をわかりやすく展示し、 "いま読みたい本" に出会えるサイト」。
ユーザーが興味を持ちそうな本を提案し、新しい本との偶然の出会いを提供できるUI設計を行いました。

CMSにはMovable Typeを導入し、書籍検索機能の拡充を行いました。

ユーザーが多様な属性で書籍を絞り込めるようにする一方で、「今月のベストセラーランキング」や「旬な本を集めた特集」といったコンテンツを幻冬舎様自身でピックアップし、Webサイトに掲載できる仕組みを構築しました。

さらに、書籍の詳細ページにはおすすめ機能を搭載し、関連書籍への興味を引き出す仕組みを取り入れています。

書籍情報の変換ツール開発による管理業務の効率化

サイト管理者の業務負担を軽減するために、書籍情報の管理・更新がスムーズに行える仕組みを導入しました。

書籍情報を効率的に管理するために、CMS「Movable Type」を導入。基幹システムからエクスポートされたデータをMovable Typeにインポートさせるための変換ツールを独自で開発しました。

従来はExcelデータを手作業でコピー&ペーストする必要がありましたが、このツールにより、書籍情報の更新がスピーディーに行えるようになり、運用コストが大幅に削減されました。

プロジェクトメンバーの振り返り

幻冬舎 山本様(編集本部 コンテンツビジネス局 副部長)

TAMさんとの打ち合わせを重ねて、出てきた課題の一つが "幻冬舎が持つ幅広いジャンルの書籍をどうみせるか" という点でした。
今回のリニューアルを通して様々なユーザー層に配慮したバランスの取れた設計が実現されたと思います。

トップページのファーストビューで流れる書籍の表紙画像は、各作品の個性を際立たせ、ユーザーに新たな発見や出会いへの期待感を与える構成となっており、シンプルながらも印象的なデザインです。実際にサイト経由の売上増加は期待以上の効果でした。

リニューアルに伴い社内からも「デザインが洗練され、視認性が向上した」「部署間の連携が円滑になった」「サイト更新の手間が軽減された」といった前向きな意見が集まっております。

今後、さらに多様化する作品の形態にも柔軟に対応可能な設計になっている点も、弊社の根本課題をしっかりと理解いただけているからこその構造だと思います。

幻冬舎 柳生様(編集本部 コンテンツビジネス局 課長代理)

かゆいところに手が届く会社さんです。
当初は別のシステムを使ったサイト構築を要件としていて、その実績からTAMさんにお声がけしました。

弊社内のフロー等もヒアリングいただいた上で、そのシステムと併せてご提案いただいたのがMovable Type。メリット/デメリットを検討したところ、確かにMovable Typeに分があることがわかり、また費用に関してもフレキシブルに相談に乗ってもらえたため、TAMさんの提案を採用。各CMSへの理解度の高さを感じました。

結果、データ入力の省力化で人件費が削減できたのはもちろん、CMSが使いやすくセキュリティも強固になったため、社内他部署のスタッフも使える体制に。
情報が各部署からしっかり集まるサイトになり、結果PVが約3倍になりました。情報が見やすくCVにもつながりやすくなり、また著者や読者の方々にSNSでシェアしてもらいやすくなったのもこの要因です。

ドキュメントが充実していて、こちらのやるべきことと期日がわかりやすく、進行に関して不安に思うことはありませんでした。コーディングに関しても最新の技術をキャッチアップしつつ、バランス良く取り入れていることが制作物の隅々に感じられ、安心してお任せできました。

CREDIT

  • TEAM

    Producer中牟田 怜士

    Director神嵜 雅弘

    UX Designer吉本 隆浩

    Art Director杉本 正隆

    Designer福田 嵩大 / 古閑 萌子

    Front-end Engineer松井 朋子 / 鈴木 大 / 花井 路晃

    Backend Engineer浅野 高正

タムくん

いつでもお問い合わせください。

TAMにご興味を持っていただきありがとうございます。
専門性の高い多様なメンバーが揃ったTAMと、共創プロジェクトをはじめませんか?
ご相談・ご質問は、こちらからお気軽にお問い合わせください。