FigmaでUI制作をしてみたが早々に次のフェーズに進んだ件(Flaskで簡単なWebサービスを作ってみる[第2回])
はじめに
PythonのWebアプリケーションフレームワークFlaskを使って、「消耗品買い物リスト」を作ってみます。
前回まで
あっという間に6月が終わりました。
在宅勤務だと本業に注力できてしまう環境なので、
意図的に個人開発の時間をブロックしないと進まないですね…
やっていきます。
UI設計・デザイン
前回でSpreadsheet + GASで簡単なプロトタイプを作成し、使用感と課題の検証ができました。
もうプログラムを書き始めたいのですが、その前に少しだけ我慢をして、
画面とUIの設計に取り組みます。
どんな画面があって、各画面ではどんな要素があるのか、が分かるものです。
合わせてデザインも少し考えてみます。
ちなみに結論から言うと、
自分で納得のいくデザインを作るのは難しいと判断し、
早々とこのステップは完了させました。
Figmaに登録
設計にはFigmaを使います。
プロトタイピングツールとして良いという話をよく聞くのと、
ざっと見た感じ気に入ったのが理由です。
以下のサイトを眺めつつ、実際に触ってみました。
1-1. Figmaの概要 | UI/UXデザインツール『Figma』入門 – chot.design –
テンプレートをひたすら眺め、小道に迷い込む
デザイン経験ほぼゼロな自分がゼロから作るのは無理筋なので、
先人の知恵とデザインを借ります。
「figma mobile template fee」などのキーワードで
ググって出たサイトを片っ端から見ていきます。
イケてるデザインがたくさん見つかりましたが、
実際に素材やテンプレートを使ってデザインを組もうとすると途端に違和感が。
下手に凝っても良くないので、要素が分かれば良いと割り切って簡素なものを図形作成機能で作りました。
こんな感じ。
おそろしくダサいので、フォントと配置と配色を考え直します。
すこしだけまともになりました。
参考
ここまでやって
- 画面設計はともかく、デザインに凝りだすと圧倒的経験不足により時間が掛かり過ぎる
- BootstrapやSemanticUIのようなデザインライブラリを使えば、ある程度見栄えが整ったものができそう
などなど考え、UI設計はこのあたりで締めて、先に進めることにします。
理解しているつもりでしたが、「画面設計」と「UIデザイン」は明確に切り分けて作業しないと泥沼になりますね…
終わりに
次回から開発に入っていきます。
まずは、本番へのデプロイ、CI/CDの整備あたりをやっておいて、素早い修正とリリースを繰り返せるような環境を作ります。