243c23d49caaf520

Nuxt+MicroCMSでリニューアルした寿司屋のwebサイト

OVERVIEW

Nuxt + MicroCMSを利用したSPA

YEAR 2019

寿司つるや様のwebサイトをリニューアルさせていただきました。

デザインについて

まずはじめにクライアントの「回らない寿司屋ですが、あまり敷居の高いものだと思わずに、気軽に来ていただける店だということを知ってほしい。」という要望から、

高級感を残しつつも親しみやすいデザイン

を意識しました。それが色使いやフォントに反映されています。

加えて飲食店なので達成すべき目標として「新規お客様の獲得」、「リピート率の増加」があり、そのためにどのような施策を取るべきか考えた結果、

ファーストビューたくさんの料理があること、そしてそれがリーズナブルであること

が伝わるよう設計しました。これがあたかもwebサービスであるかのようなデザインにした主な理由です。

あとはユーザー側が必要な情報に素早くアクセスできるように設計しました。「人々が飲食店のwebサイトに求めるものは何か?」というところを考え、前ページで営業時間やアクセスの情報などが見られるようにしました。

以下気に入っているところ、大変だったところ、頑張ったところを書きます。

商品コンポーネントの表示方法

商品には名前の短いものから長いもの、説明があるもの、ないもの、写真があるもの、ないものなど様々な形があり、その全てを最適な形で表示するにはどのような形がいいのかという部分にはかなり悩みました。現在の形は情報の俯瞰性を保ちつつも、写真がない、文字が長いなどの条件になった時も破綻しないという点で気に入っていますが、比較的年齢が高い層が直感的に操作できないようだったので、その点が少し気がかりではあります。

エンジニアリングについて

Nuxt + MicroCMSをNetlifyにデプロイしています。

サイトを訪れたユーザーが抱く印象が「ちゃんとしているのかな?」と不安になるようではコンバージョンに繋がらないので、クライアント側で情報の鮮度を維持してもらえるようMicroCMSでトップページにある情報は全てクライアント側で簡単に管理してもらえるようになっています。

Netlifyでデプロイしていれば、後から不具合が見つかった時も即座に対処できますし、運用、保守という面でも優れています。

以下気に入っているところ、大変だったところ、頑張ったところを書きます。

トップページのカレンダー部分

トップページのカレンダー部分はプラグインなど使わずに全て自作しています。基本的な休みの日に関しては自動で休み(緑色じゃなくなる)ようにしていて、不定期的な休みの日があればクライアントが入力したMicroCMSからの情報を元に、休み表示、オープン表示を切り替えるようにしています。

余談

このサイトを作ったとき、初めてqiitaに記事を投稿したのが250いいねぐらいついてめっちゃ嬉しかったです。web制作を初めて1年半ぐらい経ちましたが、初めて作ったサイトがこのサイトの前身となるサイトなのでその点を少し感慨深いものがあります。

現在、キーワード「高槻市 寿司屋」で検索した時にこのサイトは2ページ目の最初に位置しています。検索上位はホットペッパーやぐるなび、寿司屋をいくつか紹介したまとめサイトなどが位置している中では健闘している方だと思いますが、後一歩欲しいです。ですが、リニューアル前と比べるとアクセス数、オーガニック検索での到達、離脱率の低下など様々な面で成果が見られて嬉しいです。

WEBSITE