教文館コーポレートサイト制作秘話Vol.2

実際に現地を訪問した際、各フロア（売場）のスタッフの皆さまにインタビューを行いました。140年という歴史の重みだけでなく、一人ひとりの丁寧な接客や、「銀座で働く」という責任感を肌で感じることができ、この経験は今回のサイト全体の設計をする上での土台となっています。

見やすいこと、利用しやすいことを前提としつつ、多く残されている資料を活かして、教文館さまの志や建築の価値が伝わるよう意識して作成してます。教文館で働く皆さまの上品さや140年もの歴史があるといった安心感・信頼感を、落ち着いた色調や余白感、フォント等のデザインの要素に落とし込みました。

サイトの最下部に配置するフッターを、サイト全体を支える要素に見立て、関東大震災等を乗り越えて再建された当時のお写真を配置しています。これは、教文館さまの歴史そのものがこの地を支えてきたことを表しています。

建物に施された特徴的な装飾や大理石等もサイトの装飾・テクスチャとして使用することで、実際の空間との統一感も出し、”教文館らしさ”をより表現しました。

140年の歴史を持つ教文館さまにとっては、その重みや文化的価値を直感的に伝えることが特に重要だと考えました。そのため「売り場のご案内」より先に、会社の紹介文とパララックス演出を配置しています。
「読む、考える、語らう、過ごす。」というコピーと、写真が切り替わる演出によって、銀座に深く根を張る教文館さまの世界観を視覚的に体感してもらう狙いです。

このページを制作するにあたり、教文館さまが大切にしている考え方や、ありたい姿について改めてヒアリングを行いました。あえて他のページとは異なる構成とすることで、言葉をしっかりと受け止めてもらえる設計になっています。

旧サイトにある読み物コンテンツについてもリライトを行っていただき、画像を交えながら、より分かりやすくじっくり読んでもらえるページへとリニューアルしています。教文館さまが「言葉の力」を信じているからこそ、伝えたい想いやメッセージを丁寧に届けられるページであることを大切にしました。

お店独自のコンセプトが強い3つのフロアについては、それぞれの特徴を押さえつつ、「どのフロアも教文館であること」を念頭に置いて統一感を保てるように調整しています。
エインカレムは、店名の由来となったエルサレム郊外にある美しい里山のように、静けさや豊かさを与え「銀座の中で安らぎの空間」を目指したお店です。その想いを表現するため、ミントグリーンや柔らかな曲線、波紋など、自然を感じさせる装飾を取り入れ、心安らぐデザインに仕上げています。

CAFEきょうぶんかんは、カフェのメニューにも使われているイラストレーターさんのイラストを装飾として使用し、「銀座のオアシス」というコンセプトのもと温もりや優しさを感じさせるデザインでまとめています。

ナルニア国は、子どもの本の売場のため全体的に柔らかさを意識しています。店名の由来にもなっている「ナルニア国物語」はロングセラーの大人気作品であり、歴史を大事にしたいという想いがあると伺っています。歴史やロングセラーの重みを大切に、クラシカルでありつつ親しみやすく温かみのあるデザインを意識して制作しました。

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

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

イベントカレンダーのページでは、イベントの催事期間をカレンダー上でどのように表現するかが課題でした。開始日から終了までを帯状につないで表示したかったのですが、a-blog cmsの標準機能だけでは対応できなかったため、別の実装方法を検討する必要がありました。

FullCalendarという外部ライブラリを採用しました。a-blog cmsで登録したイベント情報を表示するため、API（異なるアプリケーションやWebサービス繋ぐ役割）を利用してデータをFullCalendarへ連動し、要件を満たすイベントカレンダーを実装しました。