三矢水産様（サービスサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回、リニューアルのもう一つの目的として「EC販売の売上を伸ばしたい」というご要望をいただきました。そのため、「オンラインショップ」ページでは、PCサイトならではの仕掛けを施しています。

具体的には、「人気商品ランキング」コンテンツに掲載されている1位～6位までの商品のお写真にカーソルを合わせると、2枚目のお写真が切り替わって表示される仕組みを採用しました。アップで質感が伝わるカットや、さまざまな味わい方をイメージできるカットなど、商品ごとの魅力を多面的に訴求できる仕掛けとなっています。

また、サービスサイトのすべてのページにおいて、「オンラインショップ」ページへの導線ボタンを画面右下に固定表示しています。ページを閲覧し、旬の海鮮や本場の大ぶりな蟹に心が惹かれたタイミングで、「オンラインでも購入できるなら見てみたい！」と感じられるよう、ワンタップでアクセスできる導線設計に仕上げました。

スマートフォンサイトでは、「函館旅行で海鮮料理を楽しみたい方」や「函館駅周辺で接待向けのお店を探している方」などの個人ユーザーをメインターゲットとしているため、スマートフォンとPCの使用比率を9：1に想定し、モバイルファーストで設計しております。

ユーザーが最も知りたい「店舗情報」ページまでスムーズにアクセスできるよう、アイコン付きの導線ボタンを画面右上に固定表示しました。「店舗情報」ページでは、“函館駅から徒歩3分” という立地の魅力が一目で伝わる、分かりやすい地図をファーストビュー直下に掲載しています。駅からのルートを視覚的に示し、実店舗の外観のお写真もあわせて配置することで、初めての方でも安心してご来店いただける構成に仕上げました。

さらに、「営業時間」「定休日」「座席数」「予約方法」「支払方法」など、来店前に知りたい情報を1ページに集約し、ユーザビリティに配慮した設計としています。

本格的な海鮮料理の魅力を繊細に伝えるため、細部までこだわったデザインに仕上げました。

ホームページ全体はブラックを基調とし、金粉のあしらいを加えることで、上質で落ち着いたお客様ならではの世界観を演出しています。同時に、蟹や活イカ、いくらなどの鮮やかな色彩や、透き通るような鮮度を際立たせる効果がございます。

海鮮料理や大型生け簀のお写真には、スクロールに合わせてモノクロからカラーへ切り替わるアニメーションを実装しました。視線を自然に誘導し、本場ならではの豪華な料理や活きた海鮮の臨場感を印象的に伝えています。

システム面では、函館で獲れる旬の魚介を販売できる「オンラインショップ」を、EC-CUBEをベースにオリジナルCMSとして自社開発しました。お客様自身で管理画面から商品情報を登録でき、お写真や説明文、価格などの更新はもちろん、人気商品のランキング設定や「冷凍」「冷蔵」「常温」といった保存方法のアイコン表示にも対応した、柔軟なシステム設計となっております。

また、「タラバガニ」「毛ガニ」「ズワイガニ」「ウニ」「魚卵」「ボタンエビ」など、11種の商品ページをそれぞれ作成し、商品の魅力や産地直送の流れを分かりやすく掲載するとともに、商品情報を連携表示できる仕様を実現しました。