川越の商店街サイトをリニューアルして、大切にしたこと・大変だったこと

——地域に根ざした商店街サイトの、舞台裏

川越を中心に、中小企業・団体のホームページ制作をしているGIVの高山です。

今回は、川越の中心を走る商店街「クレアモール新富町商店街振興組合」のホームページリニューアルについてお話しします。

---

クレアモールってどんな商店街？

クレアモール新富町商店街は、西武新宿線の本川越駅エリアとJR・東武東上線の川越駅をつなぐ商店街です。

川越に住んでいる方なら一度は通ったことがある、地元の人の日常に溶け込んだ場所。同時に、観光で訪れる方が蔵の街エリアへ向かう途中に通る場所でもあります。

通勤する人、買い物をする人、観光で訪れる人——本当にさまざまな人が行き交うこの商店街を、どう言葉で表現するか。それがリニューアルの最初の課題でした。

---

コンセプト設計——「いってきます」と「ただいま」をつなぐ商店街

2つの駅をつなぐ「通り道」という物理的な特徴から考えていくと、ひとつの言葉が浮かんできました。

「いってきます」と「ただいま」をつなぐ商店街。

朝、駅に向かう人の「いってきます」。夕方、家に帰る人の「ただいま」。その間をずっとそばで支えてきた商店街。地元の方にとっても、訪れる方にとっても、どちらにも届く言葉にしたいと考えました。

このコンセプトをご提案したところ、組合のご担当者様に気に入っていただき、サイト全体のテーマとして採用していただきました。

---

デザインで大切にしたこと——リアルな「生活感」を届ける

コンセプトが決まったら、次はそれをビジュアルでどう表現するか。

実はここで、かなり迷走しました。

せっかくリニューアルするからと、最初は色数を抑えたスタイリッシュなデザインや、歴史あるクレアモールのノスタルジーを活かした懐かしさのあるデザインも検討しました。でも社内で意見を出し合うと、「クレアモールはもっと賑やかでカラフルなイメージでしょう」という声が多く上がりました。

普段からクレアモールを利用しているからこそ、それぞれに「クレアモールらしさ」のイメージがある。だからこその迷子でもありました。

最終的には、ロゴの色をベースに、元気な黄色をメインカラーとして配色を決定。クレアモールの生き生きとした躍動感や臨場感、リアルを伝えたい。そう考えて、背景には実際の商店街の写真を固定で配置しました。

その上に重ねたのが、クレアモールを利用する人たちをイメージしたオリジナルイラストです。

• 駆け足の女子高生
• サッカーチームの試合帰り、手を繋いだ親子
• 観光を楽しむ二人組の女の子
• 「オープンセール」の看板を出している店員さん
• スマホで写真を撮る女性（後ろ姿）
• 子供乗せ自転車を押すお母さんと、横を歩くサラリーマン風のお父さん

一人ひとりのイラストには、クレアモールらしい「文脈」を込めています。

女子高生が走っているのは、通学で使う子が多いから遅刻しそうな朝の様子を。サッカー少年と親子のイラストは、試合帰りに商店街で買い物をしながら帰る様子を、お母さんの手の買い物袋で表現しました。スマホで写真を撮っている女の子は「クレアモールの今を切り取っている」というイメージで、インスタグラムのフィードが並ぶセクションに配置しています。

イラストのラフは私が描き、清書はイラストレーターのnukui bogardさんにお手伝いいただきました。nukui bogardさんにアドバイスをいただきながら、複数のラフ案の中からどのキャラクターを採用するか、「ここは女の子がいい」「こっちは男の子にしよう」と細かく相談しながら一緒に決めていきました。

本当は最後まで自分で描く予定でしたが、設計・ディレクション・デザイン・コーディングをすべて一人で担当していたため手が回らなくなり、清書（イラストのデータ化）をnukui bogardさんに担っていただきました。おかげで、イメージ通りのイラストに仕上げることができました。

背景の写真は昼間と夕方に撮影したもの計3枚を用意し、アクセスするたびにランダムで切り替わる仕様にしています。同じサイトを開いても、毎回少し違う表情のクレアモールが現れる。それもこの商店街の「リアル」を伝えるための工夫のひとつです。

写真の撮影は、GIVがホームページ制作を担当させていただいている川越の映像制作・写真制作会社、ポケットグラフさんにお願いしました。昼間と夕方、表情の違う時間帯に撮り下ろしていただいた写真が、サイトに奥行きを与えてくれています。

---

大変だったこと——100店舗超の情報を整理する

コンセプトとキャッチコピーが決まり、デザインの方向性も固まった。次は中身を作る番です。ここからが、実は一番大変でした。

クレアモール新富町商店街振興組合のサイトは、組合に加盟している店舗を紹介するサイトです。その加盟店舗が、100店舗を超えます。

リニューアルにあたって、既存サイトの情報をベースにしながら、各店舗の最新情報を収集する必要がありました。組合のご担当者様を通じて加盟店へ連絡していただき、更新情報はGoogle FormsやFAXでも受け付けながら対応しました。

集まった情報はスプレッドシートでリスト化し、リニューアル後のサイトで使うカテゴリー分類やタグ付けも一から整理しました。「どう分けると、サイトを見る人が探しやすいか」を考えながら、100店舗分の情報を一つひとつ確認していく作業でした。

---

公開後も続く、保守という仕事

サイトが公開されて終わり、ではありません。

今も組合のご担当者様からご連絡をいただきながら、店舗情報の追加・編集・削除を都度対応しています。リニューアル後に「各店の公式サイトから情報や画像を抽出して更新してほしい」というご依頼が（もちろん素材使用許可も）あれば、それにも対応しています。

サイトのトップページには新着情報をスライドで表示していますが、その際に使う見出し画像の制作もGIVが担当しています。依頼をいただいたら、なるべくスピーディーに記事と見出し画像を制作して投稿するよう心がけています。情報の鮮度がサイトの信頼につながると考えているからです。

加盟店の情報は日々変わります。開店・閉店・営業時間の変更——組合のご担当者様からご連絡をいただいた際には、なるべく早く反映するよう心がけています。

---

経営者の方へ伝えたいこと

今回の案件を通じて改めて感じたのは、ホームページは「作ること」よりも「使い続けること」が大切だということです。

どんなに良いサイトを作っても、情報が古くなってしまえば、見た人の信頼を損ないます。

「うちのサイト、最後に更新したのいつだろう」と思った方——まずは一度、現状を確認してみてください。

そしてもう一つ。テンプレートで手軽にサイトを作ることもできる時代ですが、コンセプトの設計やオリジナルイラストなど、その会社・団体・場所にしかない「らしさ」を表現することも、ホームページには大切な役割があると思っています。

クレアモールのサイトが「いってきます」と「ただいま」というコンセプトにたどり着いたように、あなたの会社や事業にも、他には出せない言葉やビジュアルがあるはずです。それを一緒に見つけるところから、GIVはお手伝いできます。

---

関連記事

【制作実績】クレアモール川越 新富町商店街振興組合様HP制作

【インタビュー】かわいいデザイン×シンプルな情報設計で「好評価」に！ 好印象ホームページへ大胆リニューアル──クレアモール川越新富町商店街振興組合様インタビュー