【個人開発】初心者がもんたの森というな無料画像サイトを作った話
はじめまして！もんたです。
最近、趣味で作った『もんたの森』っていう無料で画像を保存したりコピーしたりできるサイトを作ったので、学んだことのアウトプットとしていろいろ話していきます！
初心者の人がこの記事見て個人開発にチャレンジしてもらえればなと思います！
あ、そういえばいろいろやらせてもろてます。
よかったら覗いてみてあげてください。
【最近始めたnote】
趣味で読んだ本について書いてます
【あまり使っていないX（Twitter）】
描いた絵をシェアしたりしてます
今回作ったやつ
背景
時は数年前まで遡る。
新卒でWebエンジニアとして働き出した「もんた（23）」は不安を抱いていた。
🐶「え？みんなエンジニアとして優秀すぎね？2年目でこんなレベルなれるん？ほんま？なれる気せんねんけど…！詰んだ☆」と…
そんなある日、一人の老人が声をかけてきた。
👴『ちょっと待たんかそこの坊や。』
🐶「な、なんですか？」
👴『お主Webエンジニアとして働いておるが、周りとのレベルの差に「自分の将来あんなふうになれるのかのぅ…」と不安を抱いておるようじゃな』
🐶「え、なんでわかるんですか！？」
不思議なおじさんであったが、もんたはそのおじさんをどこか信用していた。
🐶「そうなんです…周りの先輩みたいにBIGになれるか心配で…」
👴『個人開発じゃ』
🐶「え？」
👴『個人開発をしてお主もエンジニアとしてBIGになるのじゃ』
🐶「こ、個人開発…！？む、無理ですよ僕にそんなこと…」
👴『お主ならきっとできるさ。どんなものを作りたいか聞いてやろう。ほれ、こっちにきなさい』
…
おじさんから個人開発の極意を学んだもんたは個人開発に駆り出すのであった…！！！
次回 あのおじさんは誰
冗談はさておき。ガチ理由は以下です。
こっからガチのやつ
自分はよく会社のSlackで自分の描いた絵を送ったりするのですが、わざわざデスクトップのフォルダ開いてそれをはっつけるのが煩わしく思ってました。
そんな時、「Webアプリを作ってぱっと保存しちゃって使えるようにしたらええやん！みんなも使えるように一石二鳥やん！ついでにちいかわ超えてろ！」と考えました。（←アホ）
あとは、個人開発したやつをデプロイしたことがなかったので、デプロイの勉強も理由です。
アプリの概要
基本的使い方としては、画像一覧から好きな画像を選択し、「コピー or ダウンロード」するだけです。
ちなみにお気に入り機能もあります。
ハートアイコンをクリックすると画像をお気に入り登録することができます。
お気に入り一覧は画面右上のお気に入りボタン、スマホだとハンバーガーメニュー＞おきにいりをクリックすることで遷移できます。
検索機能もあり、テキスト検索、画像のタイプ検索、画像カテゴリ検索ができます。
基本的には「やっほい」っていうお気に入りの画像があったら、それをお気に入り登録し、『おきにいり』からコピーしてスラックにはっつけるだけで、すぐにユニークな返しができます！
やっぱり仕事においてユニークな人って思われることって結構大事だと思うので、このアプリ使って「ユニークな人」になってください。
使ってください...!!
デザインを頑張る編
デザインをがんばったよぅ〜って話です！
実はワイが0からやった
もんたの森はデザインももんたが考えました。
デザインツールとしてFigmaを使っています。Figmaほんと使いやすい。好き。
デザインアイデアはicons8を参考にしました。
icons8は一部無料でさまざまな画像アイコンをダウンロード・コピーできるサイトです。めちゃくちゃ使えるのでぜひ使ってみてください！
もんたの森で使っているアイコンもほとんどicons8からダウンロードしたやつを使ってます。
緑を基調としている
もんたの森のデザインは名前の通り、緑を基調としています。
緑を基調に森っぽさを醸し出しています。やっぱりデザインに統一性って大事なんだなと思いました。はい。
やっぱりデザインが統一されているとユーザーの混乱も防げるし、デザインも決めやすくなるしでいいことずくめだなって思いました。
個人的にデザインで気に入っているのはもんたの森の背景にうっすらと森が写ってるところです。
ここがもんたの森のメインと言っても過言ではないと思ってます。この森の画像大好き。
ちなみにもんたの森のogp画像もFigmaを使って作成しました。
ここも森っぽさがあってめちゃくちゃ好きです。
生意気なこと言いますが、改めてデザイナーさんってすげぇって思いました。
シンプルにデザインを考えるってめちゃくちゃ大変なのに、それプラスユーザー体験とか考えないといけない…
考えただけで鼻血出そうになりました。
:::note info
- デザインに統一感を持たせることの重要性
- デザインから考えると実装のイメージがしやすくなる
- Figmaの基本的な使い方
- デザイナーさんはすげぇ
:::
開発について編
次は「開発について編」です。
ざっくりアーキテクチャやどんな技術を使ってるか、こだわりポイントについてとか話します。
アーキテクチャと使用技術
もんたの森のアーキテクチャはこんな感じになってます。
フロントエンドはReactとTypeScriptを使っています。
サーバーサイド言語はGolang（フレームワークにGin）、データベースはPostgreSQLを使っています。
また、もんたの森では画像ストレージとしてCloud Storageを使っています。
技術選定の理由ですが、Reactは勉強のため、Go、PostgreSQLは一番慣れている言語だからです。（浅い）
余談ですが、もんたの森の開発をし始めてしばらくしてから会社で新しいプロジェクトにアサインされ、そのプロジェクトでごりごりにReact使っており、比較的スムーズに業務に移れたので勉強してよかったなと思ってます。幸運。
フロントエンドのデプロイはnetlify。バックエンドはFly.ioを使ってデプロイしています。
また、もんたの森はGitHubのmainブランチにpushされると自動でデプロイがされるようになっています。
こここだわったよ〜
続いて、「こここだわったよ〜」です。
デザインをこだわったのはもちろんですが、実装面でもこだわった部分があります！
こだわりポイント① 無限スクロール
こだわりポイント①は無限スクロール処理です！
以下のように、下にスクロールすると画像を取得し、表示する様になっています。
私の大好きなicons8さんも無限スクロール処理が実装されている＋個人的にページャーよりもユーザーの必要な行動が少ないという点でユーザー体験が高いと考え、実装することにしました。
ライブラリはreact-infinite-scrollerを使っています。
公式ドキュメントはもちろん、こちらの記事も実装する上でめちゃくちゃ参考になりました！あざっした！
こだわりポイント② 画像にタイプとカテゴリをもたせる
2つ目は「画像にタイプとカテゴリを持たせる」です。
いろんな画像サイトを調べて思ったことなのですが、画像のタイプと画像のカテゴリをつけてるサイトって意外と少ないと気づきました。
画像にタイプやカテゴリがあるだけで他の画像サイトよりも検索しやすさがUPすると思い、画像タイプ＆カテゴリ機能を実装することにしました。
また、自分の考える使い方としては、「パッと使いたい時にさっと調べてコピーして送信する」です。
なので、検索のしやすさが大切と考え、画像にカテゴリやタイプをつけることにしました！
画像タイトルの下にタイプとカテゴリがあり、クリックすることで同じタイプ、カテゴリの画像の一覧ページにジャンプするようになっています。
こだわりポイント③ 画像お気に入り機能
最後は画像のお気に入り機能です！
お気に入り機能ではユーザー視点と開発者視点の2つメリットがあります。
ユーザー視点ではすぐわかるように、画像をお気に入り登録することでお気に入りページから一覧で確認できるので、すぐに使いたい画像をダウンロード・コピーができます。
開発者視点では、お気に入り登録された数を表示することでシンプルに「どれだけ使われているかわかるのでモチベーションになる」からです！
画像の閲覧数も表示しているのでそこからもどれだけ画像が見られているかわかります。
これが増えてるとやる気が湧いてきます。
今後は？
今後の活動としては、ユーザーが毎日使いたくなるようなサービスを開発したいと考えています！
最近「行動経済学」なるものがなにやらイケイケらしいので、行動経済学について学び、それをサービスに落とし込み、ユーザーが毎日楽しく使えるようなサービスの開発をしていきたいです！
あとはシンプルにエンジニアとしてサービス開発に必要なスキルを学んでいきたいと思っています。
おわりに
いかがでしたでしょうか。
今回は個人で開発した「もんたの森」というWebアプリの概要とこだわりポイントについて話しました！
この記事を読んで少しでも個人開発に興味を持ってくれる人が増えたらなと思います！
僕みたいなぺーぺーエンジニアでも時間かければ「それっぽいのは作れる」ってことを知れたのはいいことだなと思いました。
今後もエンジニアとして学びを続け、多くのユーザーに毎日使われるサービスを開発できればなと思います！
否！作ります！！！
最後までお読みいただきありがとうございました！🐶
Discussion