Open azuma502 opened 2 years ago
[x] いいデザインって何だろう？
学んだこと： UXにおいて、図や地、文字の位置関係によって違和感に感じたりすることがあるため、正確に位置などを決めることが大事。Can’t Unseeのhardモードは、２つの画像にぱっと見て違いが見られないが何か違和感を感じることがあった。それは、フォントの空白の違いやマークの場所など、数ミリの違いだった。これからは既存の色々なデザインを見る時、細かいところまで注意して観察したい。
学んだこと： 図形を描くとき、Shiftを押しながら描くと正確な図形ができる。
学んだこと： コンポーネントを利用すると編集がとてもやりやすくなる。 文字の大きさ16が基本。 Shiftを押しながら線を引くと真っ直ぐに引ける。
まとめ： variantsの操作 ・通常の状態: default ・ホバーしている状態: hover ・使えない状態のボタン: disabled ・ボタンを押し込んでいる状態: active 学んだこと： constraintsはグループではなく、フレームに変換する パスツールは、ハの字に使う。また折り返すときは、altキーを使う。
学んだこと： ボタンを選択するときは左側の一覧から選択する
学んだこと： 沢山のプラグインがあることが分かった。沢山いじって慣らしていきたい。
まとめ： CMYK / RGB CMYK→減法混合 / 減法混色 混ぜると暗色 印刷に使用 RGB→加法混合 / 加法混色 混ぜると明色 コンピューター・テレビ
色相：色そのもの（赤/青） 明度：色の明暗 彩度：鮮やかさ
明度と彩度が同じ色相グループ→トーン
同系色配置３パターン ①明度/彩度だけが異なる ②トーンオントーン ③隣接色の組み合わせ
隣接色 / 対照色 / 補色
色のもつ意味
学んだこと： 繰り返し読み返して、理解を深めたい。 色にも、色々な感情を表すことができる。
学んだこと： アイコンパーツの形を種類ごとに変えることで、パッと見で何を表しているか分かる。 variant化：使い回し可能 英字表記 prepare：大きめの括り inner veiw：小さめの括り
まとめ： Atomic Design(アトミックデザイン) atoms(原子）,molecules（分子）,organisms(有機体）,templates(テンプレート）,pages(ページ）の 5 つの階層 コンポーネントの命名：階層名(atoms,moleculesなど)/パーツ名/(状態) アセット：assets/素材名
学んだこと： コンポーネントの命名は日本語を使わない。→誰もが分かり、そのまま使用できるようにするため
まとめ： カラー： カラーはなぜこの命名規則でしょうか？ →同系色の色も識別がしやすくなったから。基本色を頭につけることで、詳細名だけよりもイメージがしやすくなった。 色名を検索すれば、直ぐに出てきて使いやすいから。 色命名使用する（HTML color picker)→http://www.htmlcsscolor.com/ white->gray->blue->green->yellow->orange->red->violet->black の順番 基本色名_詳細色名_透明度
テキスト： 文字の大きさはh1,h2,h3,XL,L,M,S,XS,XXSの 9 種類
学んだこと： レスポンシブ対応にしないと、PCで作ったものがスマホでみると見えにくくなる。 今はレスポンシブ対応が主流。 レスポンシブ対応説明→https://basic-frontend.4nonome.com/bootstrapGit/350/ →https://www.kagoya.jp/howto/it-glossary/web/responsive/ ブレークポイント基本（参考にする）→https://getbootstrap.jp/
まとめ： アウトライン化→パス化 文字を図形化 元に戻せない→フォントの情報を text styles に登録しておく オブジェクト名→logo マウスアクションを伝える interactive components→variants(hover?/deforte?)状態をより説明する
introduction
what is design
[x] いいデザインって何だろう？
学んだこと： UXにおいて、図や地、文字の位置関係によって違和感に感じたりすることがあるため、正確に位置などを決めることが大事。Can’t Unseeのhardモードは、２つの画像にぱっと見て違いが見られないが何か違和感を感じることがあった。それは、フォントの空白の違いやマークの場所など、数ミリの違いだった。これからは既存の色々なデザインを見る時、細かいところまで注意して観察したい。
Figma
学んだこと： 図形を描くとき、Shiftを押しながら描くと正確な図形ができる。
学んだこと： コンポーネントを利用すると編集がとてもやりやすくなる。 文字の大きさ16が基本。 Shiftを押しながら線を引くと真っ直ぐに引ける。
まとめ： variantsの操作 ・通常の状態: default ・ホバーしている状態: hover ・使えない状態のボタン: disabled ・ボタンを押し込んでいる状態: active 学んだこと： constraintsはグループではなく、フレームに変換する パスツールは、ハの字に使う。また折り返すときは、altキーを使う。
学んだこと： ボタンを選択するときは左側の一覧から選択する
学んだこと： 沢山のプラグインがあることが分かった。沢山いじって慣らしていきたい。
color scheme
まとめ： CMYK / RGB CMYK→減法混合 / 減法混色 混ぜると暗色 印刷に使用 RGB→加法混合 / 加法混色 混ぜると明色 コンピューター・テレビ
色相：色そのもの（赤/青） 明度：色の明暗 彩度：鮮やかさ
明度と彩度が同じ色相グループ→トーン
同系色配置３パターン ①明度/彩度だけが異なる ②トーンオントーン ③隣接色の組み合わせ
隣接色 / 対照色 / 補色
色のもつ意味
学んだこと： 繰り返し読み返して、理解を深めたい。 色にも、色々な感情を表すことができる。
Web page
学んだこと： アイコンパーツの形を種類ごとに変えることで、パッと見で何を表しているか分かる。 variant化：使い回し可能 英字表記 prepare：大きめの括り inner veiw：小さめの括り
まとめ： Atomic Design(アトミックデザイン) atoms(原子）,molecules（分子）,organisms(有機体）,templates(テンプレート）,pages(ページ）の 5 つの階層 コンポーネントの命名：階層名(atoms,moleculesなど)/パーツ名/(状態) アセット：assets/素材名
学んだこと： コンポーネントの命名は日本語を使わない。→誰もが分かり、そのまま使用できるようにするため
まとめ： カラー： カラーはなぜこの命名規則でしょうか？ →同系色の色も識別がしやすくなったから。基本色を頭につけることで、詳細名だけよりもイメージがしやすくなった。 色名を検索すれば、直ぐに出てきて使いやすいから。 色命名使用する（HTML color picker)→http://www.htmlcsscolor.com/ white->gray->blue->green->yellow->orange->red->violet->black の順番 基本色名_詳細色名_透明度
テキスト： 文字の大きさはh1,h2,h3,XL,L,M,S,XS,XXSの 9 種類
学んだこと： レスポンシブ対応にしないと、PCで作ったものがスマホでみると見えにくくなる。 今はレスポンシブ対応が主流。 レスポンシブ対応説明→https://basic-frontend.4nonome.com/bootstrapGit/350/ →https://www.kagoya.jp/howto/it-glossary/web/responsive/ ブレークポイント基本（参考にする）→https://getbootstrap.jp/
まとめ： アウトライン化→パス化 文字を図形化 元に戻せない→フォントの情報を text styles に登録しておく オブジェクト名→logo マウスアクションを伝える interactive components→variants(hover?/deforte?)状態をより説明する
trace
final
ここでやること