概要

1年生の進級制作展で制作したサイトで、岐阜県各務原市にある「トリミングサロン Merci Dog」さんのWebサイトをリニューアルという形で新しく制作しました。犬の柔らかく優しい雰囲気を出せるように意識して制作しました。また、microCMSを導入することで、お知らせとメニュー表を更新できるようにしました。

制作の流れ

制作の主な流れはプレゼンテーション資料にまとまっています。

ヒアリング・デザイン

ノートにワイヤーフレームのラフスケッチを描き、Figmaで制作しました。
ヒアリングには計9回ほど行き、お店の方のご要望に合わせてデザインを考えていきました。アクセントカラーにオレンジを使うこと、ダルメシアン柄のデザインを一部に使用することなど、細かい部分も齟齬がないようにしっかりと打ち合わせを行いました。様々な年代のお客様が来るお店ということで、アクセシビリティを意識して文字やボタンのコントラスト比を考えながらデザインしました。

コーディング

お店の方のご要望の一つに、「検索結果の上位に来るようにしたい」というものがありました。そこで私は、SEOを意識して制作しなければいけないと思い、適切なHTMLタグの使用やalt属性の設定など、基本的なSEO対策を心がけました。そして、サイトパフォーマンスにもこだわりたいと考え、ヘッドレスCMSであるmicroCMSに挑戦することにしました。その結果、Lighthouseで高得点を取ることができました。

CMSについて

上記でも触れたように、今回サイトの更新部分にはmicroCMSを使用しました。初めての経験でわからないことだらけだったため、セミナーに参加したりネットで調べたりしながら作業を進めていくのがとても大変でした。先生にもアドバイスをいただきながらなんとか実装することができ、完成したときは大きな達成感がありました。

苦労した部分

今回協力してくださったお店の方は、サイトの知識があまりない方でした。そんな中で、しっかりと意見を擦り合わせていくことがとても大変でしたが、クライアントの理想とするサイトになるように努力しました。そして、今回のサイトで初めてmicroCMSに挑戦したので、コーディングの部分でも悩んだりすることが多かったです。しかし、なんとか諦めずにサイトを完成させることができました。

制作を通して

今回の課題で、実際のお店のサイトを制作するという経験ができました。大変なことばかりの制作でしたが、完成作品をお店の方に見せに行った際に「学生でこんなにしっかりとしたものが作れていてすごい」といった感想をいただけて、本当に嬉しかったです。
今年の4月以降にお店の方が実際にサーバーを用意してこのサイトを使ってくださるということで、世の中にあるたくさんのサイトの一つを制作することができたという実感を得ることができました。実際に公開され、ユーザーに利用されることを前提とした制作を経験できたことで、責任感や達成感を強く感じるとともに、今後の制作にも活かせる貴重な学びを得ることができました。
そして、今回は自分が触れたことのないmicroCMSにも挑戦することができました。今回の経験をもとに、ポートフォリオをNext.jsで制作するという挑戦ができたと思うので、自分にとってとても大きな成長につながった作品です。

5/15追記：お店の方にこのサイトを実際に使ってもらえることになり、お店のサーバーにアップロードしました。本日お店に伺い、サイトの運用について簡単に説明をさせてもらいました。今後は、お知らせなどがたくさん更新されていくと思うので、とても楽しみです。実際に使ってもらえて本当に嬉しいです。