kk-web

Lovveboxのサイトを作らせていただきました

2024-11-01

VTuberプロダクションの ラブボックス公式サイト を作らせていただきました。

愛らしい感じを最大限に引き出しつつ、ポップでキュートな雰囲気も併せ持つサイトデザインに仕立てようと頑張ってみました。

以下少しだけ開発に関する蛇足です。


ラブボックスさんは VTuber プロダクションなんですが、リアルライブも開催するというちょっと特殊な展開をされています。

今回はデザイン・コーディング・データ連携・ホスティング周りまですべて 1 人で携わらせていただきました。

なので開発自体はものすごくスムーズに進みました。


今回使用した主な技術やサービスは以下のとおりです。

  • React
    • @tsparticles/react
    • Day.js
    • Framer Motion
    • MicroCMS TypeScript SDK
    • Nodemailer
    • React Hook Form
    • react-markdown
    • pattern.css
    • Swiper
    • Zustand
  • Next.js
  • TypeScript
  • CSS Modules
  • Vercel
  • MicroCMS

いかにも自分って感じの選定になりました、バランス感は良いような気はします。(ただし pattern.css は除く)

ただ一方で ARIA や モダンな CSS、FormData 周りについてはまだまだ実力不足を痛感しました。

今後はもっとモダンな知識を身につけていきたいと思います。


今回一番苦労したのはデザイン面でして。

ラブボックスというプロダクション名から、当初素直にピンク基調で展開していこうと決めました。

で、ピンクって個人的にはなかなか扱いづらい色だと思っていまして。

とかく優しい感じ一辺倒だとサイトとしてのインパクトが弱くなってしまうので、どこかでメリハリは聞かせたい。

一方で素材にも限りがあり、比較的短期間での規約でしたので、クオリティの妥協点を見つけるのも大切でした。

なのであまり冒険はせず、基本的にはスタンダードに持っていきつつ、それでいて一定パワーも感じられるような表現の見せ方にはちょっと力を入れました。

もう少し期日と素材があれば画面的なメリハリをもっとつけられたかなーと思いつつ、個人的にはそこそこ良い塩梅に落とし込めたのかなと勝手に満足しています。


そんな感じでした。

今日から無職になりましたので、時間的にはだいぶ余裕があります。

副業でサイト制作やアプリ制作、動画編集の依頼などなんでもお待ちしています。

おそらく単価感としては相当低く、それでいて高クオリティなプロダクトを納品できると思いますので、ぜひぜひ。

© 2018 kk-web