あなただけの一品を。オプティークHARUTAサイト制作秘話

メガネって、かけるだけで雰囲気がガラッと変わる不思議なアイテム。
似合うメガネを見つけたい、miyossyです！

さて、あんどぷらすでは、静岡市葵区に店舗を構える眼鏡専門店『オプティークHURUTA』さまのコーポレート兼ECサイトを新たに制作いたしました。

制作実績はこちらから

本記事では、サイト制作の裏側や重視した点についてご紹介しています。ぜひご覧ください！

株式会社メガネの春田さまについて

今回サイト制作をさせていただいたオプティークHARUTAさまは、老舗眼鏡店『株式会社メガネの春田』さまから生まれた新しいスタイルのショップです。

ここでは、その株式会社メガネの春田さまについて、少しご紹介します！
始まりは昭和6年、島田市に眼鏡店を開業されたことに遡ります。長い歴史を持つ株式会社メガネの春田さまは、静岡の地に根ざし、長年にわたり地域の皆さまの「見える」を支え続けてこられました。

現在は静岡市伝馬町に店舗を構え、時代に合わせたサービスと変わらぬ丁寧な接客と技術で、多くのお客さまから信頼を寄せられています。

オプティークHARUTAさまについて

21年前、当時では珍しいコンセプトショップの立ち位置で誕生したオプティークHARUTAさま。目が悪くなったから行く、のではなくファッションとして自分らしさを楽しむために選ぶ 、今では当たり前になりつつある価値観を早くから大切にしてきたお店です。

店内は、ぬくもりを感じさせる和モダンな空間。間接照明にやさしく照らされたメガネたちは、まるでひとつひとつが輝いているかのように存在感を放っています。ブランドの枠を超えて並ぶ光景は、直営店のように洗練されており、見る人を惹きつける魅力に溢れています。

長く愛される定番フレームから、トレンド感のある最新モデルまで、40種類以上のブランドが揃っています。
ファッション性と機能性を兼ね備えたアイテムが充実しており、どんな世代・ライフスタイルの人でも、自分にぴったりのメガネに出会えそうです！

サイトリニューアルのきっかけ

以前のウェブサイトでは、店舗の雰囲気が十分に伝わっておらず、その世界観をしっかりと表現できる新しいサイトを求めておられました。また、商品や情報をよりスムーズに見つけられるよう、検索機能の利便性を高めることも目的の一つです。

このような背景からサイトのリニューアルがスタートしました！

今回の制作メンバーはこちら！

サイト制作のこだわり

さて、ここからはデザインを担当したtenさんとディレクターのyuiさんへのインタビューをもとに、制作過程やサイトのこだわったポイントについてご紹介します！

ー初めてお店を訪れた時のこと、覚えていますか？

初めて実店舗を訪問した時、印象的だったのは「古さと新しさが同居する空気」でした。
築およそ100年の建物をリフォームし、柔らかな曲線を取り入れた空間は、古今融合を体現したような独特の雰囲気。店内には、日本の有名ブランドから海外ブランドまで、幅広いラインナップのメガネが整然とディスプレイされていました。

ースタッフの方とはお話しされましたか？

メガネへの深い知識や技術へのこだわり、そしてお客様１人ひとりに寄り添う丁寧な接客に感動しました。この信頼できる専門性と人の温かみが共存している空気感こそが、オプティークHARUTAさまらしさだと感じています。
その想いをもとに、『多彩なメガネと心のこもった技術で、あなただけの一品を。』というコンセプトを掲げて、制作を進めることになりました。

ーデザインにおけるテーマやコンセプトを教えてください！

メガネを形として見つめ直すと、基本は２つの円でできています。左右のペア感を活かしつつ、あえて左右非対称（アシンメトリー）をコンセプトに、静かで落ち着いた印象の中にもさりげない動きを演出しました。上品さと個性を両立させたデザインです。

ーメインビジュアルの写真で、メガネの下にあるものはなんですか？

銭箱です！今回サイトを制作するにあたり、「実店舗の雰囲気をオンラインでも感じていただけるようにする」ことを意識し、店舗のショーケースで展示されている銭箱をモチーフとして使用しました。サイト上で銭箱を目にしたユーザーが「あの店だ！」と直感的に認識していただけるようにし、リアルとデジタルがつながる体験を狙いました！

ーサイトで特に印象的だったのが、回転するメガネのアニメーションです。この演出を採用した理由を教えてください！

スクロールにあわせてメガネが回転しながら動く演出により、見る人を惹きつけ、最後まで楽しみながら閲覧できるように設計しました。実際のメガネを１枚ずつ撮影したコマ送り方式なので、わずかにカクカクした動きがありますが、その手作り感がオプティークHARUTAさまらしい温もりを感じさせると考えています。

ここの工程がすごく大変だったそうで…詳しく聞いてみました！

ー 具体的にどのような流れで形にしていったのでしょうか？

ターンテーブルを使って２度ずつ回転させながら撮影。その枚数は134枚にもなりました。その後、撮影したデータからメガネを切り抜き、トップページの構成を考えながら微調整します。一番苦労したのはこの工程で、ピクセル単位で位置を合わせながら、スクロールとの動きを検証する作業に１週間ほどかかっています…
最終的にブラウザ上で滑らかに回転するメガネが実装された瞬間は、感動で胸がいっぱいになりました！

ーServiceセクションの演出も素敵でした！ここももしかしてこだわりが..？

メガネが時々ぼやけるような演出を加えることで、まるで実際に度付きメガネを試しているような感覚を表現しています！スクロール速度やレスポンシブ対応のズレ、タイミングなど実装面で非常に難易度の高い箇所でしたが、エンジニアの方と何度も検証・修正を重ね、ようやく理想的な動きを実現できました。

ー このフォントを選んだ理由などがあれば教えてほしいです！

英語フォントには、Forumを使用しています。縦長で優美なフォルムが特徴で、築100年の建物をリフォームし、新しい価値を吹き込んだ店舗の姿とも響き合います。日本語フォントにはNoto Serif JPを選定。クラシックで洗練された印象があるため、エレガントなForumと調和すると考えました。

ここからは、機能面でのこだわりについて、ディレクターのyuiさんにインタビューしていきます！

ー 多くのブランドを扱う中で、難しかったことや工夫したことはありますか？

ブランドによって販売形態が異なることが難しかったです。サイトで販売できない商品についてはカートボタンの代わりに「お問い合わせボタン」を表示する仕組みをメタフィールドで作り、お客様がスムーズにお問い合わせできる導線を確保しました。

ー  私自身、メガネにあまり詳しくなくて… 初心者でもわかりやすい工夫はされていますか？

オプティークHARUTAさまのお客さまは幅が広いため、メガネに詳しいひともそうでないひとも、求めているメガネに出会えるようなサイトを目指しています。商品一覧ページの絞り込みでは直感的に操作できるようにし、サイズ表記についてはFPD値を３つに区分することで、初心者でもイメージしやすい工夫を施しています。
※FPD値とはフレーム間距離（Frame Pupillary Distance）の略でメガネフレームの左右のレンズ中心間の距離のことです。

ー お客さまだけでなく、運用するスタッフにとても使いやすいサイトになっていると聞いたのですが…

今回は店舗レジで使用しているCSVを活用して、Shopifyに商品を登録していくことができるように、アプリの開発をしました。ひとつひとつ商品情報を登録するのではなく、CSVで一括登録が可能になったことで、運用の負担軽減にも寄与しています。

まとめ

サイト制作の裏側を少しでも楽しんでいただけたでしょうか？

今回の制作では、単に見やすいサイトを作るのではなく、『訪れる体験そのもの』をデザインしました。
オプティークHARUTAさまが大切にしている温かみ・職人技・美しさを感じてもらえるように、ページの構成や動き、言葉の選び方の細部まで想いを込めて制作しています。

オプティークHARUTA ECサイト

さあ、あなたらしい1品を探してみませんか？

投稿者プロフィール

miyossy

冬より夏派

最新の投稿

• web2025.11.20あなただけの一品を。オプティークHARUTAサイト制作秘話
• イベント2025.11.12Zoho inspire参加レポート
• イベント2025.11.05あんどぷらすのまるっと相談会
• コラム2025.10.07【究極の２択】スタッフの素顔を覗く社内アンケート