【個人開発】コンセプトを味わうコーヒーショップ「珈琲と音楽」をオープンします

![bandicam_2023-10-29_11-11-14-900.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/3e195d59-2511-edce-fb0b-97d90bda6b66.jpeg)

# はじめに

こんにちは、@Sicut_studyです！

コンセプトを味わうコーヒーショップ「 <font color="red">**珈琲と音楽**</font> 」をリリースしました。
企画の立案からWebサイト構築まで行ったので紹介していきます。

今回はWebサイト構築にフォーカスしてご紹介します。

![bandicam_2023-09-02_21-32-22-824.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/c811f81f-4d8a-bb1f-b673-5e9766f1c3d2.jpeg)

https://himaria.jp

# 「珈琲と音楽」 とは

みなさんはコーヒーを普段飲みますでしょうか？
私はコーヒーが好きでよく飲んでいるのですが、コーヒーの話を聞くと多くの方が共通したことを言っていることに気づきました

「コーヒーは苦いもの」
「コーヒーの豆の違いがまったくわからない」

こんな話を聞いているうちに私は思いました

**<font color="red">コーヒーの魅力を知らない人がまだまだ多い**
**<font color="red">美味しいコーヒーを飲む機会がまだまだ日常に少ない**</font>
<font color="red">**コーヒーの魅力を知ってもらいたい**</font>

#### こんな思いから生まれたのが「<font color="red">珈琲と音楽</font>」です

コーヒー豆などを直接買う人は少ないです。種類が色々あってわかりませんし、どこで買えるかもよくわからないと思います。
やはり何かコーヒーの概念が変わる機会を**日常の中に作る**ことが大切だと思いました。

### <font color="red">コンセプトを楽しんでもらって結果的に美味しいコーヒーを飲むような仕組みづくりをしていこう

そこから**音楽のジャケットのようなデザイン性のあるドリップコーヒー**を作成しました

![IMG_2240.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/b17f1deb-3a74-fe7d-2dc4-efc57ccd9c27.jpeg)

![IMG_0459.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/22007b6d-13d4-f1e4-96f7-1e4cbc4cffae.jpeg)


今回はその公式サイトの技術的な話をメインにします。

# Webサイトの構成

珈琲と音楽は以下のアーキテクチャで作成されています。

![test.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/4357f547-1129-c73c-4f04-e2b603bf2a63.png)

開発期間 : 3.5ヶ月
開発人数 : 1人

## フロントエンド

フロントエンドは**Next.js 13**を使っています。

Next.js 13になって`AppRouter`が使えるようになったということで選定しました。また**SEO対策**が楽になるのでそこも大きな要因となりました

CSSはTailwindCSS、ホストはfirebaseを利用しています。
実装自体は概ねスムーズに行うことができました

サイトでは2箇所の部分でスライドショーが利用されているのですが、Next.jsで利用するのは少し苦戦しました (途中で動かなくなったり、いまも若干バグることがあります)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/007713a2-42a8-1c65-5095-b52880e2a732.png)

また**Next.js 13**を初めて触ったのでよく使い勝手がわからずSSRを利用していませんでした。


## BFF

学習がてら**Rust**を選択しました
WebフレームワークはAxumを利用しています
テストを書いていてモックするところがなかなか苦戦しました
APIは5つほどの実装だったので他に比べて触ることは少なかったです

デプロイ先はFirebase(GCP)を使っていたので、**CloudRun**を利用してデプロイしています

## メールサーバ

NodeMailerを利用して実装しました。
ライブラリがかなり優秀だったのですぐに実装が終わりました
こちらもCloudRunを利用してデプロイしています。

https://www.youtube.com/watch?v=ERo_JwWohoQ&t=875s

(いつもお世話になっているshincodeさんの動画で実装しました)


## ヘッドレスCMS

今回なるべく早くリリースすることを目指していたので、DBを持たないで済むように**Contentful**を利用しました

https://www.contentful.com/

もともと`microCMS`を利用していたのですが、料金が高かったため乗り換えを途中でしました。
contentfulは大体使い方は同じなのですが、レスポンスが若干複雑になっており使いづらい感じだったのでRustでContentfulクライアントライブラリを作って利用しました

ネットを探した感じではなかったのでcrateを公開する体験もしました

https://docs.rs/contentfree/latest/contentfree/index.html

## その他

バージョン管理 : Github
開発環境 : Docker, docker-compose
E2E : Kotlin, Gauge, Selenide, Wiremock
ライブラリ : Jest
クリーンアーキテクチャ, TDD

なるべく意識して仕事で開発しているような流れで実装しました

# こだわったところ

Webサイトを作成する上でこだわったところを紹介します。
ショップのコンセプト作りなどに関してはまた別の記事でご紹介します。

## 1. コンセプトを表現するデザイン

**コンセプトを味わうコーヒーショップ**というのをテーマにしているので、デザインがとても大切になります。
実装前にしっかりとサイトのデザインを決めて**figma**で作成をしました

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/28f5a310-c90c-d116-90e3-0552fde72be2.png)

figmaの使い方は全然わかっていませんが、自分なりに使ってみました
会社のデザイナーさんがすごいなと改めて思いました
私は実際にpaddingがいくつなどは細かく設定することはしませんでした

## 2. Webサイトに遊び心をいれる

Webサイトの中に自分なりの楽しくなるような工夫を入れてみました
コーヒー紹介のページではホバーするとレコードが回るようなデザインにしてみました

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![1699083491347.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/29b48e07-56f3-f96b-5974-8b886c8e2483.gif)


こういう工夫が少しあるだけで印象がだいぶ変わるなと感じました
他にもいくつかあるのでぜひサイトをご覧になってください！

## 3. モバイル対応を行う

多くの方がモバイル端末からサイトを閲覧すると考えたので、モバイル対応を実装と同時に行いました

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![bandicam 2023-11-04 17-00-02-923.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/4e241bb6-abd2-e3e0-550c-36e8e6284213.jpeg)

現在一部端末や大きなディスプレイなどではレイアウトが崩れてしまっているのでそちらは需要がありそうなものから修正していきたいなと考えています

# 今回のチャレンジ

今回Webサイトを作成するにあたり以下にチャレンジしました

- Next.js 13を初めて使った
- SEO対策をした
- Contentfulを使った

私は個人開発をする際に何か1つやったことないことにチャレンジするようにしています。

特に**SEO対策**に関しては以下の書籍を読み、対応したことでいままでまったく気にしていなかったHTMLタグの適切な使い方について学べて成長できました
なにか1つSEO対策に挑戦してみるとかなり学びがあるのでおすすめです

[現場のプロから学ぶ SEO技術バイブル](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%AE%E3%83%97%E3%83%AD%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-SEO%E6%8A%80%E8%A1%93%E3%83%90%E3%82%A4%E3%83%96%E3%83%AB-%E7%89%B9%E5%85%B8PDF%E4%BB%98%E3%81%8D-%E8%A5%BF%E5%B1%B1-%E6%82%A0%E5%A4%AA%E6%9C%97/dp/4839966001/ref=sr_1_7?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=26MVM3IIWCT4Z&keywords=seo&qid=1699088107&sprefix=seo%2Caps%2C189&sr=8-7)

# 微妙だったところ

SSRを全く使わずにクライアントですべてやってしまいました
Next.jsをあんまり理解せずにやってしまっていたのでそれでサイトが重くなったり、スライダーが変になったりしています。

これを作ってだいぶ立ちましたが、いまはNext.jsもある程度使いこなせるようになりました

# 次回、衝撃のラスト

次回、「100万円かけて作ったサービスをリリース前に辞めた話」
2024年2月3日公開します。

決断します。お楽しみに。

# おわりに

ここまで読んでいただけた方は**いいね**と**ストック**よろしくお願いします。
@Sicut_study を**フォロー**いただけるととてもうれしく思います。

今週もプログラミング頑張りましょう！

![jisou-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/217ea52d-8130-3266-0619-990fa968408a.png)

# 2024年個人開発一覧

https://qiita.com/Sicut_study/items/34decfb23fd4b78afcd6

https://qiita.com/Sicut_study/items/eb56eb8976d14bfa62c1

https://qiita.com/Sicut_study/items/830d1edbf95e77390690

https://qiita.com/Sicut_study/items/1e82ea0daf964d4b1fa5


# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！

https://projisou.jp

# About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ stand.fm
https://stand.fm/channels/65db27e353b400abe28ec29a
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA

■ プログラミングコーチングJISOU
https://projisou.jp
■ 体験で学ぶ！JISOU
https://experience-learn.connpass.com/
■ 登壇依頼などご依頼はこちらから
himaria.jin.watanabe@gmail.com


# 参考

https://www.youtube.com/watch?v=ERo_JwWohoQ&t=875s

https://www.contentful.com/

https://qiita.com/shoku-pan/questions/bbac7f40da6e7352b166