個人開発デザインをどうするか問題を解決する旅

個人開発中のSmoky Chatのデザインどうしようか問題解決の流れをスクラップのテストも兼ねて記録してみる。

作っているもの

隙間時間にちょっと雑談するチャットアプリを開発中という話｜おのけー｜note
個人的に今チャットアプリを開発中です。巷にはチャットアプリはあふれきっていて何でそこにまたチャットアプリを作ろうと思ったのかという話です。

立てたIssue

Which CSS library to use? · Issue #3 · dorokei/smoky-chat · GitHub
Which should I use? Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. Material-UI: A popular React UI framework React compon...

解決したい疑問点

• CSSライブラリ何を使うのか？(tailwindcss? bulma? materialUI? bootstrap?)
• デザイン決定の流れは？
  • ワイヤー作成？
  • 何使う(sketch? figma?)
  • いきなりコード書き始めちゃだめなの？
  • デザイナーに依頼すべき？

「webデザイン 流れ」でググる。

大体

• 1. サイトの企画、方向性決定
• 2. ワイヤー作成
• 3. デザイン
  • レイアウト、配色、フォントなど決定
  • カンプ(フォトショなどで作る見た目のみのデザイン、英語は comprehensive layout らしい)作成
  • コーディング HTML CSSに落とし込む
  • レスポンシブ化
• 4. 実装

みたいな流れらしい。

過去の個人開発ではいきなり 4. 実装 をやっていた。slackを参考に作りながらCSSをいじっていた。ライブラリはBulmaを使用してた。

過去の個人開発

Stacknote
Stacknote is an application that can create long sentences by stacking short sentences like a chat application. It makes your writing surprisingly efficient.

何はともあれワイヤー作る。ラフスケッチで構わない。

ワイヤー作成には Sketch、Figma等色々ツールがあるが、とりあえずiPadのprocreateでお絵かきしてみようと思う。

トップページイメージ

制限時間10分のチャットルーム(休憩室)開設ボタン
制限時間25分のチャットルーム(カフェ)開設ボタン
が存在する。

開設ボタン押下語の入室前ページ

招待された人もまずここに来る。ここでマイクの許可を得る。ルーム情報が表示され、入室ボタンがある。

チャットルーム

チャットルームイメージ。参加者、クローズまでのタイマー表示。喋っている人は音声アナライザーの波形が動く。途中入退室可。

もうちょっと推敲しないと、、💦

初期のイメージ画像

複雑なアプリではなくUIもシンプルなので、上記のワイヤーで作成着手しよう。
tailwindcssは結構手間がかかるかなと思ったけど、オンライン上に情報が多いし、https://tailwindcomponents.com/ にサンプルも多そうなのでこれでいこうかと。