【④設計(デザイン)編】Vite+React+TypeScript+GitHubPagesで爆速サイト公開

Last updated at 2023-12-17Posted at 2023-12-06

はじめに

業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい...ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに

...と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな...そこまでに公開できたらいいな」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。

折角なので、制作の過程も含めて記事化してみました。

ちなみに、公開サイトはこちら↓
https://yutamanaka.github.io/FragranceFinder/

本記事では、設計(デザイン)の経緯についてまとめました

この記事は下記のような人を対象にしています。

「diagrams.net(旧draw.io) + Notion」でデザイン設計すれば間違いなし！

私はあくまでフロント/バックエンドエンジニアなので、デザインは不得手かつ興味がありません
ただし今回はフロントの実装のため、デザイン設計は必要不可欠です。
取り急ぎ、参考になりそうなサイトを一通り漁り、良さそうな点をメモしていきました。

セレス...選択肢が画像で初心者にも優しそうだが、スマホだと上下にスクロールしまくらないといけないのがだるい。自分が選んだ選択肢が表示されるのは見やすいが、タップ数が増えている。最初に男女選ばされる。
Coloria...すっきりシンプル。👍👎が選びやすい。進み具合がシンプルに表示されているのがいい。最初は画像がなく、途中からはあるが選びやすい。解答項目が多すぎる設問がある。ロード中に出てくる香水のイラストがいい。
Liberta Perfume...すっきりシンプル。香水に詳しい人にのみ、好きな香料と苦手な香料を聞いている
Primaniacs...レスポンシブじゃない。結果の画面の見せ方が好き。
Demeter...ほっこりした感じ。yutakaperfumeっぽくない。ジャーナリングのアプリみたい
Jo Malone...チャットのように出てくるのが面白い。シンプルでいい
ドミノピザ...右下の質問の数の表示がいい

また、基本のトンマナは回答ページにリンクを貼る下記サイトと揃えることにしました。

大体どんなパーツが必要か把握できたので、続けてdiagrams.netで画面設計しました！

デザイン業務を経験したことがないポンコツエンジニアのため、個人開発では「パワーポイント」で画面設計していました

今回は以前から気になっていたdraw.ioで設計してみようと思い、使ってみました。
結果、めっちゃ簡単+便利でした！
感じたメリットは下記の通り。

個人開発のデザイン設計についてまとめました。