Next.js + Typescript + Django + TailwindcssでSNSを作りたい　Part2

今回はPart2ということでデザイン編です。
デザインに関しては無知なので、あしからず。

Part1はこちらから→Part1

とにかくシンプルで、またこのページに期待と思ってもらうようなページデザインをしていきたい。

ページ構成

まずどのページが必要なのかを思いつく限り上げていきたいと思う。

• トップ
  • 投稿されたものが表示される
• プロフィール
  • ログインしている場合はプロフィールを
  • そうでない場合は認証ページを
• 投稿
  • テキストとソースコード

とりあえずこれさえあれば動かすことはできそう
その他は臨機応変に対応していこうと思う

今回はtailwindcssを使用するので、コンポーネントで用意されているものも使用してみようと思う(ダッシュボードやサイドバー、ヘッダーなど)

デザイン作成ツールはなんでもいいと思う
Figmaとか使ってみたいけど、触ったことないからな
今回はXDを使いたいと思います

まずはカラーを決めたいかな
基本的には3種類を使いたい

最初から、この色って決めるわけではなくて、後からでも変更が簡単なように　設計していけばいいかな

主色を紫にして、黒白グレーは定番、あとは保存作成形に青、削除系に赤を差し色に使えたらと思う
ここはある程度しか決めません

次は大まかなフレームの作成

こんな感じでシンプルなデザインにしたいと思います。
まだまだ足していかないといけないところはあると思うけど、とりあえず先に進めてみよう。

次回は環境構築編