はじめに
業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい...ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに
...と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな...そこまでに公開できたらいいな
」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。
折角なので、制作の過程も含めて記事化してみました。
ということで、本記事は下記連載の第3弾となります。
他記事も併せてご覧ください。
【①アイデア選定】
【②技術選定】
【③設計(ロジック)】
【④設計(デザイン)】←イマココ
【⑤環境構築】
【⑥進捗管理】
ちなみに、公開サイトはこちら↓
https://yutamanaka.github.io/FragranceFinder/
リポジトリはこちら↓
https://github.com/YutaManaka/FragranceFinder
本記事では、設計(デザイン)の経緯についてまとめました
対象者
この記事は下記のような人を対象にしています。
- 駆け出しエンジニア
- プログラミング初学者
- 設計のやり方がわからない人
結論
「diagrams.net(旧draw.io) + Notion」でデザイン設計すれば間違いなし！
デザイン設計の流れ
- 参考サイトを漁り、リストアップ
- 参考サイトの中で必要なパーツを抽出
- diagrams.netでひたすら書き、Notionで共有
- GituHubのREADMEに画像をアップ
参考サイトのリストアップ
私はあくまでフロント/バックエンドエンジニアなので、デザインは不得手かつ興味がありません
ただし今回はフロントの実装のため、デザイン設計は必要不可欠です。
取り急ぎ、参考になりそうなサイトを一通り漁り、良さそうな点をメモしていきました。
- セレス...選択肢が画像で初心者にも優しそうだが、スマホだと上下にスクロールしまくらないといけないのがだるい。自分が選んだ選択肢が表示されるのは見やすいが、タップ数が増えている。最初に男女選ばされる。
- Coloria...すっきりシンプル。👍👎が選びやすい。進み具合がシンプルに表示されているのがいい。最初は画像がなく、途中からはあるが選びやすい。解答項目が多すぎる設問がある。ロード中に出てくる香水のイラストがいい。
- Liberta Perfume...すっきりシンプル。香水に詳しい人にのみ、好きな香料と苦手な香料を聞いている
- Primaniacs...レスポンシブじゃない。結果の画面の見せ方が好き。
- Demeter...ほっこりした感じ。yutakaperfumeっぽくない。ジャーナリングのアプリみたい
- Jo Malone...チャットのように出てくるのが面白い。シンプルでいい
- ドミノピザ...右下の質問の数の表示がいい
また、基本のトンマナは回答ページにリンクを貼る下記サイトと揃えることにしました。
大体どんなパーツが必要か把握できたので、続けてdiagrams.netで画面設計しました！
diagrams.net(旧draw.io)のメリット
デザイン業務を経験したことがないポンコツエンジニアのため、個人開発では「パワーポイント」で画面設計していました
今回は以前から気になっていたdraw.ioで設計してみようと思い、使ってみました。
結果、めっちゃ簡単+便利でした！
感じたメリットは下記の通り。
- 基本無料
- Notion経由で簡単に共有
- 共同編集/コメントも可能
- パワポライクに使える
- cssを意識した設計が可能
実際の画面設計例
おわりに
個人開発のデザイン設計についてまとめました。