Zenn
🕌

フロントエンド苦手だったけど、Tailwind UIを使って見やすいプロフィールサイトを作った話。

2023/10/30に公開
Go
Next.js
Vercel
Cloudflare
Tailwind CSS
tech

こんにちは。今回は、フロントエンドが超絶苦手な私が、スッキリ見やすい（と自分では思っている）プロフィールサイト作成サービスを作ったので、その過程や使ったものを紹介していきます。

作ったサービス

誰でも簡単に、個人のプロフィールサイトを作成できるprofioというサービスを作りました。

https://profio.jp

私の自己紹介ページはこちらです。

https://profio.jp/me/totsumaru

言語、使っているサービスなど

  • フロントエンド: Next13（App Router)
  • バックエンド: Go 1.20
  • 画像ストレージ: cloudflare R2
  • BEホスティング: render
  • FEホスティング: vercel
  • DB: Postgres: render
  • ドメイン: お名前.com
  • DNS: cloudflare
  • 認証: supabase

苦戦したこと

やはりフロントエンドです。

元々バックエンドエンジニアなので、バックエンドのAPIを構築することはそれほど大変ではありませんが、フロントエンドを作るのがネックでした。

  • Next.js(App Router)の作法
  • UIのデザイン

この辺ですね。

そもそもReactもそれほど分かっていなかったですが、「モダンな技術をキャッチアップしよう」という気持ちでリサーチ&採用しました。

おそらく無駄なコードは多く、改善の余地は大いにあるはずですが、useStateなど基本的なhooksを使えばある程度の挙動を制御することができ、公式docなどベストプラクティスからコードを多用することでクリティカルな問題は解消できました。

UIが苦手すぎる

仕組みはできたけど、ユーザーに提供する見た目には全然なっていない！！

そこで、思い切ってtailwindUIを購入しました。
こちらはTailwindcssで作られたUIコンポーネント集で、価格は買い切り$299（45,000円くらい）です。

学習コストに比べたら圧倒的に安いと思って購入しました。


UIはコピペで楽々

特段動きのあるリッチなサイトを作ろうとしている訳ではないので、tailwindUIのコピペで8割くらいのUIが完成しました。

無料のtailwindコンポーネントライブラリはいくつかありますが、コンポーネントの量、デザイン、統一感では個人的に圧倒的にtailwindUIが優れていると思います。


※こんなのも結構簡単に作れました

仕上げはChatGPT

やっぱり登場します、ChatGPT。ロジックが絡まないところ（文章やデザイン）は安心して任せることができます。

tailwindUIもコピペしただけではダークモード対応など無駄なクラスが入っているので、そういうのを除きながら、微妙なデザインやレイアウトを修正してもらいます。

loadingの処理などもChatGPTに任せました。

〇〇をいい感じのレイアウトに修正して。

このプロンプトを投げまくってましたが、GPT-4は本当にいい感じに仕上げてくれました。

画像はcloudflare

技術ブログのようにMarkdownで自己紹介が書けるようにしており、かなり自由度が高いサイトを作りました。

ある程度の枚数の画像を保存しても安いことと、ユーザーが増えた時のために画像のホスティングを調べたところ

  • cloudflare images
  • cloudflare R2

のどちらかになりました。（下りに料金がかからないのが大きい）

1つのバケットの中で管理したいということと、リサイズなどはそれほど重要ではないということからR2を選択しました。

動的なOGP画像を生成

プロフィールサイトということで、個人が楽しんでSNSなどに共有して欲しいと思いOGP画像をユーザーに合わせて動的に変更することにしました。

canvaでベースの画像を作り、動的なところ（アバター画像,名前,自己紹介)はvercel/ogを使って合成しました。
※ちょっと文字が小さいですね...笑


こんな感じです。

ここもChatGPTにレイアウトをお願いすれば綺麗に出力されたので、自分では微調整のみです。

開発期間

構想から作成まで4日ほどで完成しました。

機能はまだまだ追加していく予定ですが、最低限の機能を持ったプロフィールサイトになるまでに4日で行けました。
tailwindUIとChatGPTが無かったらもう少し微調整が必要だったと思いますが、既製品を使えばかなり工数を削減できます。

最後に

tailwindUIはすでにフロントエンドをバリバリ作れる人は必要ないですし、ちょっと手が出しにくい費用感ではありますが、ここが苦手な人にはとても有用なツールです。

爆速で綺麗なUIが手に入ります。

開発依頼などありましたら、ぜひTwitterのDMなどに送ってくれると嬉しいです。
それではまた！

Discussion