Taku_HU

[Taku-sun]

introduction

• 課題を始める

what is design

• いいデザインって何だろう？

Figma

• 確認問題 1
• 確認問題 2
• 確認問題 3
• 確認問題 4
• コミュニティ

color scheme

• 配色について考える

Web page

• 画面遷移図制作
• Atomic Design
• テキスト・カラーなどの登録
• デバイス対応
• デザイン・動きを伝える

trace

• ヘッダーを作る
• トップを作る
• カフェ紹介を作る
• カードを作る
• ニュース・イベントを作る
• プランを作る
• フッターを作る
• ページを完成させる

final

• 最終課題画面遷移図
• 最終課題トップページ制作

ここでやること

1. 終わったら該当の課題にチェックを入れる
2. その課題の中で理解するのに苦労したことや参考になった記事などを貼り、何を学んだのか積極的に発信する
3. 課題を進めていく中で発見したこと、勉強会や定例会などで吸収したことを積極的に記入する
4. 自分の知識を蓄積するノートとして活用する

[Taku-sun]

#操作2

○便利そうなSS

• Option キーは中心を起点にサイズが拡大・縮小します。
• Shift キーは縦横の比率を固定したまま拡大・縮小を行うことが出来ます。
• Optionキー + Shift キーは中心を起点に比率を固定したまま拡大・縮小を行うことが出来ます。

[Taku-sun]

#操作4

○感想
コンポーネントについて全然理解できていない。一旦進むが、今後再度壁にぶつかりそう。

[Taku-sun]

#操作5

○勉強になった点

ロゴは svg などのデータ形式に出力するわけですが、Flatten Selectionにすることによってデータの中身が単純化されて同じ見た目でも容量を軽くすることができます。

[Taku-sun]

#操作6

○つぶやき
オブジェクトの結合のIntersect Slectionとマスクは同じ？

[Taku-sun]

#操作7

○勉強になった点

ピクセルプレビューはベクター表示とピクセル表示を切り替えることが出来ます。
ベクター表示では UI の細かい調整などの場合に使い、ピクセル表示は実際に画面でどのように表示されるのかをチェックを行う場合に使用されます。

[Taku-sun]

#操作7

○感想
ルーラーとグリッド便利。
ルーラーを活用して、整列したデザインを作ろう。
グリッドは全体のバランスを定量的に把握するために使おう。

[Taku-sun]

片山特性、ゆきだるま〜！

[Taku-sun]

#操作3

○学んだこと
　図形の色塗りは、図形の色を変えるのではなくて、fillのよこの+から、上のレイヤーに色を追加する感じ。

[Taku-sun]

#操作9
constraintsは固定したところの比率を保ったまま、外のフレームのサイズを変更できる機能的なイメージ。
Commandキーで無効化出来る。

[Taku-sun]

#プロトタイプとは？
プロトタイプは制作した UI に近い形でデザインを確認することができる機能です。
実装前に問題点を洗い出したり、概念をテストすることによって作業の後戻りをある程度防ぐことができます。

[Taku-sun]

#interactions

スマホはtap,PC はclickがトリガーであることに注意

[Taku-sun]

#色について考える

ライトトーンとビビッドトーン好きだな〜！

[Taku-sun]

#色について考える2

参考記事が参考になりすぎる。
色について悩んだら読み返そう。

デザイナーじゃなくても知っておきたい色と配色の基本
デザイン戦略

[Taku-sun]

#補足

色を選ぶ際に、Adobe Colorも便利!!

Adobe Color

[Taku-sun]

#色について考える3

参考になります。

[Taku-sun]

#色について考える4

コントラスト比は、最大で21:0(黒と白)、最小で1:1

好ましいのは7:1

以下のAdobe Colorが参考になる。

Adobe Color

また、色盲対応しているかのチェックにも以下のAdobe Colorを活用しよう。

Adobe Color

[Taku-sun]

#Atomic Design

[Taku-sun]

#テキスト・カラーなどの登録

・色名は基本色名_詳細色名で表す
・基本色名は Color Wheel の 6 色（red, orange, yellow, green, blue, violet）と白黒灰 3 色(white, black, gray) を合わせた 9 色を使う
・詳細色名は HTML CSS Color Pickerで検索してヒットした色名を使う
・色の並べ方はwhite->gray->blue->green->yellow->orange->red->violet->black
・透明度が 100%でない場合は基本色名_詳細色名_透明度のようにする

参考記事：https://qiita.com/gotchane/items/5a84c6acd9312f70be77

[Taku-sun]

#デバイス対応

ページ上で右クリック>検証

でデバイスが異なるときの見え方の確認ができる。

[Taku-sun]

#デザイン動きを伝える

ロゴ等を作成した際は、拡大・縮小してもフォントの配置等が崩れないように、outline化するようにする。