銀座に店舗を構える老舗書店、株式会社教文館さまのコーポレートサイトをリニューアルいたしました。

キリスト教に関する書籍をはじめ、一般書籍、雑誌、文具まで幅広く取り扱っており、各フロアごとにジャンルや雰囲気が異なるため、ひとつの建物の中で全く違った世界に出会えます。

サイト全体のデザインは、見やすさ・使いやすさを前提に、教文館さまの志や価値が伝わることを重視して設計しています。教文館で働く皆さまの上品さや140年もの歴史があるといった安心感・信頼感を、落ち着いた色調や余白感、フォント等のデザイン要素に落とし込みました。

フッターには関東大震災等を乗り越えて再建された当時のお写真を配置し、歴史がこの地を支えてきたことを象徴しています。トップページのメインビジュアルには現在の外観を据え、支えられてきた歴史があるからこそ、今の姿があるというストーリーを、デザイン全体で表現しています。建物の装飾や素材感もデザインに取り入れ、実空間との統一感を持たせました。

各フロアページは教文館全体としての一貫性を保ちながら、使いやすさを優先としたフロアはシンプルに、お店独自のコンセプトがあるフロアはそれぞれの特徴が伝わるデザインとしています。

機能面では、テキストや画像をある程度自分たちで編集したい、というご要望にお応えするため、「a-blog cms」のカスタムフィールドという機能を活用しました。これにより、HTMLを編集することなく、直感的な操作でテキストや画像を更新できるようになっています。

また書籍一覧ページや催事情報一覧ページでは、フィルタとページネーションを操作した際、瞬時にページが切り替わるような実装をしました。ヘッダーやフッターはそのままに、ページの一部のみを切り替えることで、快適に情報を探せるよう工夫しました。

イベントカレンダーのページでは、催事情報を開始日から終了日まで帯状に表示したい、というご要望がありました。しかし、a-blog cmsの標準機能では実現が難しかったため、外部ライブラリ「FullCalendar」を導入。APIを活用してa-blog cmsのデータをFullCalendarへ連携することで、ご要望に沿ったイベントカレンダーを実現しました。

サイト運営者・ユーザの双方にとって、より使いやすく生まれ変わった教文館さまのコーポレートサイト。お気に入りの一冊や新たな本との出会いを楽しんでいただけたら嬉しいです。