【個人開発】素人が1から開発したアプリを裏話と共に振り返る
アプリの紹介
このアプリは、ネタやアイデアを投稿するアプリです。
このアプリの最大の特徴は、私が確実に具体的なアドバイスをすることです
noteではコメントが来るのは稀ですが、このアプリなら確実に具体的なコメントが来ます。
1クリックで登録できるので、気軽に投稿してみてください。
最初に
前回の記事は、ios版のアプリを公開した後に書いたので、今回の記事はWeb版の公開後に書きました。
前回は開発の大きな出来事を書きましたが、その後はあまり大きな出来事はなく淡々と開発していただけなので、今回の記事はアプリの機能を開発の裏話と共に紹介する内容です。
使用技術
iosアプリはフロントエンドにreact nativeを使用しましたが、Web版はdjangoのテンプレート機能以外は、全て素のHTML/CSS/JavaScriptを使用しています。
react nativeを使用した後だと、全てをtypescriptで記述できて、スタイルの変更を用いた動的なサイト設計が容易なreactを使おうかなとも思いましたが、めんどくさいのでやめました。
またreact nativeではstyled-componentsを使用していたので、UIは可能な限りスマホ版を流用しています。
デザイン
デザイン設計
デザインに関しては完全に素人なので、最初からデザインを決めず
とりあえず作る
↓
不満に思った部分を変えてみる
↓
改善したと思ったら変更を適用、そう思わなかったら元に戻す。
という原始的な手段を繰り返してデザインを設計していきました、一つのプラットフォームに集中するならこの手法は悪くないと思いましたが、複数のデザインを平行して進めるならやるべきではないと思います。
配色
背景色に灰色と白色、メインカラーにティールブルー、アクセントカラーにライトイエローを使用。
最初はメインカラーがライトイエローだったが、改修していくうちに逆転してしまった。
ヘッダーのみ黒と水色の組み合わせです、これはReactの公式サイトからパクリました。
サイトアイコン
favicon.icoは、絵師さんに書いてもらったアイコンを流用しました。
素晴らしい方なので、アプリのアイコンなどが必要でしたら依頼してみてください。
デスクトップ版のデザイン
サイトは使用頻度が高いページはデスクトップ版とスマホ版で別々のファイルで表示していますが、iosアプリからデザインを流用する都合上、あまりデスクトップ版に時間はかけられませんでした。
結果として画面分割という攻めたデザインになりました。
個々のページの紹介
検索ページ
検索ページは小説家になろうなどの小説投稿サイトを強く意識した作りになっています、投稿がタイトル、概要、本文、タグという要素で構成されているのもその影響です。
検索対象の指定、多様なソート、除外検索など、かなり詳細な検索が可能ですが、これらはすべて神ライブラリwhooshのおかげです、ライブラリ開発者様には足を向けて寝れません。
投稿ページ
一番作るのに時間がかかった部分です、画像入力が可能で、内容に合わせて大きくなる入力フォームの作成するために、リアルで5日分の時間を費やしました(途中めちゃくちゃ迷走した影響が大きいですが)
最終的にnoteのような可変テキストエリアを複数用意して、画像を挟むことで解決しました(4日分はこれを思いつくために使った)
デスクトップ版ではプレビュー機能があります(正直なくてもいいですが、ないと画面が寂しいため追加しました)
トップページ
トップページではゲストユーザー登録が可能です、実装する予定はなかったのですが、ios版ではほぼゲストユーザー登録しか使われなかったので、web版でも実装しました
デスクトップ版ではとりあえず画面を埋めるために、サブ画面にお勧めの投稿を置きました
ユーザーページとマイページ
あまり語ることはないですが、デスクトップ版はサブ画面に投稿作品などが表示されます。
終わりに
ここまで見てくださりありがとうございます。
最後に、サイトに投稿したお気に入りのアイデアを書いておきます。
法律を全面的に押し出した観光地
黒部宇奈月温泉は宇奈月温泉事件という法律を学ぶ上で知らない人はいないレベルの超有名な事件の舞台であり、それを観光に活かしている。
それをパクってその土地で起きた裁判についての記録を町に設置しまくって、法律系の知識を持つ人を楽しませたり、観光しながら法律について学んだりできるようにする。
例:裁判スタンプラリー
パンフレットを見ながら、各地に設置された建物とそこに関する裁判の記録や法に関する面白い説明を見る、全て終わらせたら、オリジナルの法律冊子をもらえるなど。
この記事が気に入ったらサポートをしてみませんか？