# 10/3(月) machidaさんデザインペアプロメモ

- デザインをどこからあてていくか
- 輪郭から作っていく。目に入る大きいところから作っていく。
- デッサンと似てる。
- ⇆プログラミングは細部から作っていく(違い)

- ロゴ
- 暗めな色の方が良い(業務アプリなので)
- 色には彩度と輝度というのがあるが、彩度が低い(鮮やかじゃない)ものが良い
- 鮮やかな色はアクセントとしてつけたい所にだけつけると良い
- 例:Gmailは全体がグレーで、いろんなグレーを使っている
- [GoogleFonts](https://fonts.google.com/?category=Sans+Serif,Display&preview.text=Fjord%20Choice&preview.text_type=custom&sort=popularity&thickness=6):画像として作る必要がないので楽。これをそのままコピペすると選んだフォントで表示される。
- san serif:ゴシック体
- スマホ版だと「Fjord Choice」だと長そうなので、「FC」の方が良さそう。ロゴはFCでサービス名はFjordChoice。

- GitHubやTwitterのアイコン
- [6,825,000\+ free and premium vector icons, illustrations and 3D illustrations](https://www.iconfinder.com/) が便利
- https://www.iconfinder.com/search?q=github&price=free が使えそう

- スマホ対応
- 新しいissueのアサインを依頼されるときは大抵土日で、machidaさんは土日は外出していてスマホで見ることが多い。→なので、した方が良い
- `table`タグを使う場合、`table`タグはスマホ対応ができないので、スクロールしかない
- 参考：bootcampの管理者画面
- スマホの時だけ、レビュー依頼されたPullRequestを`display: none`にしたら良いかも。

- 利用規約
- 一応あった方がいい
- bootcamp内で使うものなので、「bootcampの利用規約にじゅんじます」とかでも良い

- 分かりやすいデザイン
- ?マークで補足するのはGOOD
- ?マークで補足するなら、カラム名前は「pt」とか短めでいいかも
- アイコンと名前の「PR一覧」のリンク
- これは?マークで補足必要ない
- リンクが貼られていることをデザインで伝えればいい(下線つけるとか、マウスが上に乗った時だけデザイン変わる等)

- Tailwindで使えるカラー一覧
- https://tailwindcolor.com/
- ↑がTailwindが用意しているカラー一覧
- 私のサービスは1ページだけなので、Tailwindだけ導入して、daisyUIは入れず、1からCSS書いた方が良いかもしれない

- tailwindだけ入れるメリット
- `margin`とか入れる時普通だと`1px`とか`13px`とか自由に何pxか選べる。自由に選べる分デザインが崩れやすくなる。
- tailwind(CSSフレームワーク)は、`4px`,`8px`と決まった数字しか当てられない。/色もhttps://tailwindcolor.com/ のしか使えない。→制限をかけることでデザインが崩れにくくしてくれる
- クラス名をつけなくていい(皆が使う一番のメリットは多分これ)。普通にCSSを書くと、自作したクラスを他でも使っててデザインが崩れる、とかがある。

- ソート
- アルファベット順だと探しやすくて良い
- インクリメンタルサーチをつけてもいいかも