search

shinonome-inc / design-basic

https://design-basic.netlify.app/
BSD Zero Clause License
2 stars 1 forks source link

yuipon/Yui Ikeda #56

Open yuipon-ous24 opened 2 years ago

yuipon-ous24 commented 2 years ago

introduction

what is design

Figma

color scheme

Web page

trace

final

ここでやること

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

色の濃さや、位置のずれなどによって、見やすさが全然違っていた。 余白の問題が間違えやすかったので、デザインを作成するときに気を付けようと思った。

Can't Unsee スコア　池田優衣

yuipon-ous24 commented 2 years ago

UIとは、ユーザーインターフェイスの略で、画面上で見られる情報(フォントやデザイン等)すべてがUIにあたる。 UXとは、ユーザーエクスペリエンスの略で、商品やサービスに触れて、ユーザーが感じることすべてがUXにあたる。

yuipon-ous24 commented 2 years ago

Figmaで複製をするときは、右クリックしてDuplicateを選択する。

または、Alt キーを押しながら、ドラッグする。

yuipon-ous24 commented 2 years ago

コメントを追加するときはツールバーの吹き出しアイコンを押して、コメントを置きたい場所をクリックする。

CRUDとは、Create(登録)、Read(読出)、Update(変更)、Delete(削除)のこと。

いらなくなったコメントは削除するのではなく、解決済みにすることで非表示にする。

解決済みにしたコメントを見るときは、吹き出しアイコンを押して、 右側ツールバーの上部にある Search の右の 丸の中に横棒が何本かあるアイコン を押して、 Show resolved comments を押す。

yuipon-ous24 commented 2 years ago

左サイドバーの Pagesの＋ボタンからページを新規作成できる。

オブジェクト作成に使うのはペンツール、シェイプツール、テキストツール。

右サイドバーの矢印が４つ中心に向いているアイコンをクリックすると、オブジェクトに対してフレームの大きさをフィットさせることができる。(resize to fit)

フレーム外のオブジェクトを表示するには、フレームを選択して、右サイドバーの Clip content チェックを外す。

作業を一つ戻るのは、Ctrl + z または 左上のFigmaマーク押して、 Edit からの Undo を押す。

yuipon-ous24 commented 2 years ago

レイヤーの重なりは、オブジェクトを右クリックしてメニューを出して変更する。

Bring to front(最前面に置く),Send to back(最背面に置く),の変更が可能。 目のアイコンは表示・非表示、鍵のアイコンはロック。

グループ化したいときは左サイドバーでグループにしたいものを選択して Ctrl + G 。

yuipon-ous24 commented 2 years ago

グループ化・フレーム化は Control + G。 グループ化・フレーム化解除は Shift + Control + G。

グループ・フレームは右サイドバーから変更できる。

グループとフレームの違いは、Constraints と Auto Layout があるかないか。 基本的にフレームを使う。

yuipon-ous24 commented 2 years ago

確認問題1

フレームのアイコンを選択して画面を1回クリックすると、 100 × 100 のフレームが出てくる。

確認問題１全問正解だった。 上下関係を変えるときは、左サイドバーを使うほうが楽にできる。

yuipon-ous24 commented 2 years ago

ツールバーの機能を学んだ。 メニューはいくつかに分類されていて、階層式になっている。

yuipon-ous24 commented 2 years ago

キャンバスの移動は、Space を押しながらドラックをするか、トラックパッドで二本指でスクロールするか、ツールバーの手のアイコンからハンドモードにするか。

オブジェクトのサイズ変更は、対象の図形を選択して上下左右にある白い四角をドラッグする。

オブジェクトの移動は、+ Shift キー で水平・垂直の移動、+ Option キーで複製した上での移動、+ Option キー + Shift キーで水平・垂直に複製した移動が可能。

余白の計算は、オブジェクトを選択した状態で、Option キーを押しながら、比べたいオブジェクトにマウスカーソルをかさねる(ホバーする)。

yuipon-ous24 commented 2 years ago

キャンバスの拡大・縮小のショートカット

拡大： ^ 縮小： -

選択部分の拡大：Space + Z + click 選択部分の縮小：Space + Option + Z + click

Shift + 1：全画面表示　(対象物にフィットした表示) Shift+ 0：100%表示

yuipon-ous24 commented 2 years ago

ファイルを何かしたいときは、中央のツールバーのプルダウンメニューから操作する。 複製、削除、移動、バージョン履歴の確認、書き出しなどができる。

ファイルのバージョン履歴の確認について プルダウンメニューから Show Version History を選択する。 自動で保存されるが、＋ ボタンからバージョンの保存ができる。

yuipon-ous24 commented 2 years ago

コンポーネント：一括変更を行うことが出来る！

Figma のコンポーネント機能では、コンポーネントという親を決めることが出来る。 そこから派生したインスタンス(子要素)を WEB ページのデザインに設置することで、複数箇所に設置した部品を一気に編集することができるようになる。

コンポーネントは、中央のツールバーのひし形４つのアイコンをクリックすることで、作成できる。 (Command+Option+K)でもできる。 コンポーネント化したいオブジェクトを選択して、右クリックして、Create Componentをクリックする方法もある。

レイヤーパネルで見るとオブジェクトのアイコンがひし形が４つに変化する。 このアイコンが表示されているものが、マスターコンポーネント。 マスターコンポーネントを複製すると、再利用する用のオブジェクトが用意される。 これを instance(インスタンス)と呼ぶ。instance のアイコンはひし形１つ。

左サイドバーから、Assets タブをクリックし、マスターコンポーネントの一覧を表示する。 表示された一覧から、追加したいコンポーネントをドラッグ＆ドロップすると、instance が追加される。

インスタンスの変更は、継承元であるマスターコンポーネントには反映されない。 インスタンスの解除は、選択したインスタンスを右クリック、Detach Instanceを選択する。（Command + Option + B）

コンポーネントのインスタンスを選択している時に、右サイドバーに表示される ▽から別のコンポーネントをインスタンスを選ぶことで変更できる。 その横のひし形 4 つのコンポーネントのアイコンから継承元のコンポーネントを確認できる。 三点リーダーを押して表示されるメニューからもDetach instance,Reset all overrides,Reset sizeができる。

yuipon-ous24 commented 2 years ago

オブジェクトの結合・合成

結合・合成ができるのはグループ化やマスクが適応されていない、シェイプレイヤーに限られる。

Union Slection 重なっているシェイプを合体した形状にする。 色が違う場合は、前面のオブジェクトの色が適用される。

Subtract Slection 前面のシェイプで背面のシェイプを型抜きした形状にする。 Union Slection の反対の操作。

Intersect Slection 前面と背面の交差した部分の形状にする。

Exclude Slection 前面と背面の交差した部分を型抜きした形状にする。 intersect Selection の反対の操作。 色が違う場合は、前面のオブジェクトの色が適用される。

IMG_2255

yuipon-ous24 commented 2 years ago

結合・合成したパスを一つのパスに変換する ショートカットキー：Command + E

1 つのパスに変換させる操作をFlatten Selectionと言い、適応させたい結合・合成したオブジェクトを選択し、 ツールバー中央から Flatten Selection を選択することで適応させることが出来る。

これによってデータの中身が単純化されて同じ見た目でも容量を軽くすることができる。

yuipon-ous24 commented 2 years ago

マスク　オブジェクトを複数選択する！

ショートカットキー : ^ + Command + M

マスクは背面のレイヤーの形に前面のレイヤーを切り取る事ができる。 複数のオブジェクトを選択した状態でツールバー中央のUse as maskをクリックすると、マスクが適用される。

画像にマスクを適応させるには、背面レイヤーに切り抜きたい大きさのシェイプを配置し、 前面レイヤーに切り抜きたい画像を配置しマスクを適応すると、画像を切り抜くことが出来る。

yuipon-ous24 commented 2 years ago

View(ビュー)：フレーム・キャンバスの表示に関する設定をする機能。 　右ツールバー右上の%をクリックして設定する。 　Zoom to fit : Shift + 1 　Zoom to 100 : Shift + 0

Pixel Preview：ベクター表示とピクセル表示の切り替え。 　ベクター表示： UI の細かい調整 　ピクセル表示：実際に画面でどのように表示されるのかをチェックする

Pixel Grid：フレーム上に表示されるグリッド(格子線)を表示/非表示を選択することで切り替えることができる。 　ショートカットキー : Shift + Command + '　

Snap to Pixel Grid：1px ごとにスナップするかしないかを選択することができる。

Layout Grid：フレーム上に表示されるレイアウトの表示・非表示を切り替える事ができる。

Rulers ：キャンバス表示されている定規の表示・非表示を切り替えることができる。 　使用することでオブジェクトの配置作業時に設定したガイドに対して補助機能が働く。 　ルーラー外までガイドをドラッグ＆ドロップ、または、Deleteキーでガイドを消去できる。

Multiplayer Cursors：チームメンバーのカーソルを表示・非表示の選択をすることができる。

yuipon-ous24 commented 2 years ago

レイアウトグリッド

フレームを選択し、右サイドバーのプロパティパネル Layout Gridから+でレイアウトグリッドを追加することが出来る。

9個の点々のアイコンをクリックすると、Grid,Columns,Rowsの 3 種類のグリッドを選択することが出来る。 Grid(グリッド)：格子 Columns(カラムズ)：縦のガイド・・・便利！ Rows：横のガイド その他の設定

Count: カラム数 Color: カラムの色 Type: Left,Right,Stretch,Center Width: カラムの幅 Gutter: 全体の余白の部分の幅 Margin: 同じ向きの両端の余白

yuipon-ous24 commented 2 years ago

確認問題2

問題１はpxの単位をつけ忘れてしまった。

問2の問題は全然やり方が違っていたから、時間がものすごくかかってしまった。 使う画像をコンポーネントせずに、そのまま使ってしまった。

直角三角形を作るときに、検索したら、正方形から１点を消去して作る方法が出てきたが、できなかったので、正方形を２つ用意してマスク機能を使って作成した。 解説動画でペンツールを使えばいいことを学んだ。

CONCEPT などの文字がこげ茶色なのに気づかなくて、黒色を使っていた。題材を注意深く確認しようと思った。

フレーム化するのも忘れていた。

ボタンなどは、フレームで作る方がいい。

テキストの基本サイズは16px。

問４は、やり方がわからなくて、何もできなかった。 まず、山の形に沿ってペンツールでなぞって、残したい部分を囲む。塗りつぶす。 上下関係を変えて、画像を上、シルエットを下にしてマスクをする。

問３と問５はできていたので、よかった。

yuipon-ous24 commented 2 years ago

数値入力とスクラブ入力 数値入力: 自分で数値を決められた場所に入力または矢印キーで調整して数値を変更するやり方 スクラブ入力: ドラッグ操作によって数値を変更するやり方

右サイドバーで、サイズ、回転の角度と角の変更ができる。

yuipon-ous24 commented 2 years ago

オブジェクトの整理

オブジェクトを複数選択して、 右サイドバーのプロパティパネル上部から操作することができる。

オブジェクトのホバーからでもできる。 オブジェクトホバーは選択したオブジェクトの位置によって３種類のアイコン表示になる。

1 番右のプルダウンメニューから３種類の等間隔に並べることができる。

Tidy up この機能を使うことによって等間隔にないオブジェクト同士を自動で等間隔に並べることができる。 Tidy up がされると、プロパティパネルに間隔が何 px なのか表示され、幅の調整もできる。

Distribute Vertical Spacing: 垂直方向に等間隔

Distribute Horizontal Spacing: 水平方向に等間隔

パスにも適用できる。 オブジェクトをダブルクリックしてパス編集モードにし、 パスポイントを複数選択してから整列機能を使う。

Tidy up 機能を使えばスマートセレクション機能を用いて順番を変更することもできる。 Tidy up ができていると、ピンク色のドットやラインが出現する。。 これらをドラッグすることで、間隔や並びの変更が簡単にできる。

yuipon-ous24 commented 2 years ago

オブジェクトに色をつける。

右サイドバーのプロパティパネルにあるFillまたはStrokeの横にある+をクリックすることで 選択中のオブジェクトに塗りを適用することができる。

Hex, RGB,CSS,HSB,HSLの形式でカラーコードを指定することができる。 Hex または RGB が無難。

color-picker2 fill-pattern

yuipon-ous24 commented 2 years ago

ブレンドモード：画像やオブジェクトを加工する機能。 カラーピッカーのしずくアイコンからは、オブジェクト単体に適用させる場合。 プロパティパネルのLayerからは、異なるレイヤー間に適用させたい場合に使う。

16 種類ある。

Normal Darken Multiply Color Burn Light Screen Color Dodge Overlay Soft Light Hard Light　明るさが増す Difference　色の反転 Exclusion　色の反転 Hue Saturation Color Luminosity　モノクロ

yuipon-ous24 commented 2 years ago

ストローク(単純な線だけでなく、破線・矢印など様々な表現ができる)

右サイドバーのプロパティパネルStrokeからストロークを選択して、操作する。

1.線の太さ

2.線の位置 線をオブジェクトに対してInside・Outside・Centerのどこの位置につけるか設定することができる。 出来るだけ inside でデザインを作るようにする。

3.詳細設定 3 点リーダーから詳細設定のウィンドウが開く。 advanced-stroke

yuipon-ous24 commented 2 years ago

ペンツール

アンカーポイント(ドット)をクリックでどんどん打っていきオブジェクトを作成する。

アンカーポイントをドラッグして現れるハンドルを操作することで曲線が表現できる。 ・ハンドルの向き: 曲線の方向 ・ハンドルの長さ: 曲線の強さ

Bend toolというものに切り替えることでハンドル操作でなくても曲線を調整することができる。

ペンモードの終わらせ方 パスを終了させたい時はescキーまたはツールバーのDoneボタンをクリックして終了。

ペンやシェイプで作ったオブジェクトの編集 編集したいオブジェクトをクリックしてもすぐ編集できない。 選択した時にツールバー中央に現れるオブジェクト編集ボタンをクリックするか、 オブジェクトをダブルクリックすることでアンカーポイントが表示され、編集できるモードになる。

ペイントバケット パスを始点と重ねて閉じるとクローズドパス、重ねない場合はオープンパスが生成されます。 クローズドパスの場合のみ、ペイントバケットツールを用いて中を塗りつぶすことができます。 右ツールバーのFill から塗りつぶせる。

鉛筆ツールはキャンバス上でドラッグ操作によるフリーハンドパスを描くことが可能。

yuipon-ous24 commented 2 years ago

エフェクト

エフェクトをつけたいオブジェクトを選択し、 右サイドバーのプロパティパネルにあるEffectsからつけることができる。

エフェクトには以下の４種類がある。

Inner shadow: オブジェクトの内側に影をつける Drop shadow: オブジェクトの外側に影をつける Layer blur: オブジェクトをぼかす Background blur: オブジェクトの背面レイヤーをぼかす

太陽のアイコンから詳細に設定することができる。

X: 影の X 座標 Y: 影の Y 座標 Blur: ぼかしの強さ Spread: 影の広がり具合 カラーピッカー：カラーの透明度

yuipon-ous24 commented 2 years ago

テキストの設定

  1. font-family
  2. font-weight (文字の太さ)
  3. font-size
  4. line-height (行の高さ)
  5. letter-spacing (文字間隔)
  6. 段落間隔・・・編集しない!!
  7. resize (サイズ変更)
  8. text-align (水平方向の文字の配置方法)
  9. テキストの縦位置・・・編集しない!! text-style
yuipon-ous24 commented 2 years ago

font-family デフォルトではRobotoというフォントに設定されています。 プルダウンまたは直接フォントを入力して適用させましょう。 Google fontsにあるものが適用できます。 基本的には Google fonts から選ぶようにする。

font-size フォントのサイズを px の単位で指定できます。 小数点は避けましょう。 Web の基準の大きさは16px. そこから大きく外れてしまうと、大きすぎたり、可読性が落ちる原因になる。 10px 未満は極力設定しないようにする。

resize(サイズ変更) ・Auto width ・Auto Height ・Fixed Size　の3種類。

テキストの三点リーダーから編集 Decoration から、アンダーラインと、文字の真ん中のラインが引ける。 Latter case で大文・小文字の設定、 Number で数字の表示の設定ができる。

yuipon-ous24 commented 2 years ago

画像のエクスポート

エクスポート機能を利用することで PNG/JPG/SVG/PDF 形式でエクスポートすることができる。

エクスポートの手順 エクスポートはオブジェクト、グループ、フレームを選択している時に現れる右サイドバーのプロパティパネルからできる。

エクスポートしたいオブジェクト、グループ、フレームを選択。 エクスポートの詳細設定を行う。 エクスポートを行う。 export

yuipon-ous24 commented 2 years ago

制約(constraints) constraints を設定することによって、フレームのサイズが変わった時に、子要素のオブジェクトがどのような変化をするのか制約をつけることができる。

フレームオブジェクトの子要素を選択すると右サイドバーのプロパティパネルに Constraints が現れます。 グループセレクションには現れないので注意!!

controlキーを押しながらサイズ変更をすることで constraints を無視したサイズ変更が可能。 constraints3

yuipon-ous24 commented 2 years ago

Auto Layout

Auto Layout 機能とは padding を自動で調整してくれたり、要素をリストのように等間隔で並べたい時などに重宝する機能。

オブジェクトを選択して右サイドバーのプロパティパネルから Auto Layout をつける。 グループまたはフレームセレクションにつけることが可能。

padding をつける

枠線の部分で padding 調整ができ、右側のアイコンをクリックすることで表示されるウィンドウから上下左右別々の値を設定することができる。

space-betweenを設定すると、各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せることができる。

Resizing には以下の３種類がある。 ・Hug contents: 子要素の幅に合わせて可変 ・Fill container: 親要素いっぱいに広げる ・Fixed width/height: 幅/高さ固定 auto-layout-padding

yuipon-ous24 commented 2 years ago

Variants 機能　バリアント

Variants 機能はコンポーネントの管理をよりわかりやすくできる機能。 類似している複数のコンポーネントの関係性を明らかにしたり、パーツは同じでも状態によってデザインが変わる場合などに有効。

バリアント機能を使うときは、すべてのオブジェクトをコンポーネント化してから！

マウスアクションによる見た目の違い、サイズの違いの場合は、 conponent 機能ではなく、Variants 機能を使う。

・通常の状態: default ・ホバーしている状態: hover ・使えない状態のボタン(フォーム送信に必要な情報が入ってない時など): disabled ・ボタンを押し込んでいる状態: active

ボタンを全て選択し、右サイドバーのプロパティパネルCombine as variantsから Variants 機能を適用させると、状態が違う同じパーツもまとめられる。

Variants を使えば、カラーなど他のプロパティを増やすのも簡単。 Variants 右上の 3 点リーダーから増やすことが可能で、プロパティの並び替えや、名前の変更もできる。

combine-variants2

yuipon-ous24 commented 2 years ago

確認問題３

1.右ツールバーのHの横にある２つのCが縦向きに向かい合ってるようなマークを押すと、縦横の比が固定される。

7.エフェクトは右ツールバーからつけることができる。 影をつけたり、その影の位置をずらしたり、影に色をつけることができる。

8.constrains(制約)をつけるのは、マスターコンポーネントで、centerやscaleなど状況に適した制約をつけるようにする。

10.button/blue/default のように名前をつける。 すべてコンポーネントして、最後にVariantsする。 Properties の名前も変えて、わかりやすくする。

default : 普通の色 hover : 薄めに active : 濃く暗めに

yuipon-ous24 commented 2 years ago

Prototype プロトタイプ

プロトタイプは制作した UI に近い形でデザインを確認することができる機能。

プロトタイプを作るには右サイドバーのプロパティパネル上部からモードを切り替える。

Interactions Interactionsの+ボタンを押して、 Tap -> Noneと書いてある部分をクリックすると詳細設定ウィンドウが現れる。

詳細ウィンドウで設定することは以下 ・trigger: クリック・ホバーなどどんなアクションをきっかけにページが変わるか ・actions: どのようにページが変わるのかなど ・遷移先 スマホはtap,PC はclickがトリガーであることに注意が必要!!

Overflow behavior 英語の通り、デバイスからはみだしている場合、どのような挙動をするか設定できる。

実機で確認したい場合、Figma Mirrorというスマホアプリを使うことで Wi-fi 経由でプレビューを見ることができる。

https://www.figma.com/mirror にアクセスすることで別タブでプレビューを見ることもできる overflow-behavior 。

Show prototype settings プレビューするデバイス、プレビューの背景、最初のフレームを設定できる。

prototype-settings 。

yuipon-ous24 commented 2 years ago

確認問題4

全然できなかった。

オブジェクトを選択して、Prototypeにして、Interactionsの＋ボタンを押して、 On click にして、Navigate to → フレーム選択

yuipon-ous24 commented 2 years ago

コミュニティのプラグインとファイル

プラグインとは Figma 内で利用できる拡張機能のこと。 Figma に提供されていない機能を有志の方が作成したもので、作業を効率的に進められるようになるものがたくさんある。

ファイルは世界中のデザイナーや企業がデザインシステムを公開している宝庫のようなものです。 コンポーネントをどのように管理しているのか、どのようなデザインが今流行っているかなど色々な作品をチェックして自分の知識を増やすなど、参考にする。

プラグインは、デザインファイルに移動し、ツールバー左のFigmaアイコンからプラグインを選択し、立ち上げることで使用できる。

参考になりそうだと思ったファイルは複製して自分のところに保存して、いつでも参照できるようにしておくといい。 右上のDuplicateボタンを押すと複製され、Draftsから参照できるようになる。

plugins

yuipon-ous24 commented 2 years ago

Plugins プラグイン

Instance Finder コンポーネントからインスタンスがどこでどのくらい使われているのか確認することができる。 これによって、使わなくなったパーツを削除することができるなど、プロジェクトの整理整頓に役立つ。

Auto flow 要素と要素を繋げたい時に自動で矢印・点線などを結んでくれるプラグイン。

Japanese Font Picker 日本語フォントを Figma 上で試すことができるようになる。

Unsplash・Iconscout 画像を検索・挿入できるプラグイン。

Wireframe ワイヤーフレーム制作の効率を上げてくれるプラグイン。 ヘッダー・フッター・記事など一般的に使う要素のパーツを用意してくれる。

Chart グラフを作成してくれるプラグイン。 このプラグインはグラフのタイプや値の数などを指定するだけでランダムに表を制作してくれる。 ただし、折れ線グラフ、エリアグラフしか無料枠では作れないので注意が必要。

QR Code Generator QR コードで表示したいサイトの URL を入れるだけで生成してくれる便利なプラグイン。

Wave & Curve 波線を作る時に便利なプラグイン。 波の数、高さ、傾き具合などを視覚的に設定するだけでベクターデータとして挿入することができる。

yuipon-ous24 commented 2 years ago

光の三原色と呼ばれる色彩、RGBは、 Web 上やテレビのディスプレイなどで表現される基本の色

減法混色(CMYK)と加法混色(RGB)

CMYK とは Cyan、Magenta、Yellow、Key plate(≒ 黒、墨)から頭文字 1 文字ずつ取ったものが CMYK 。 これらは混ぜると暗い色へと変化していくため、減法混合や減法混色と呼ばれる。 印刷の際に使われる。

RGB とは Red、Green、Blue の三つの原色を混ぜて幅広い色を再現する加法混合の一種が RGB 。 これら混ぜると明るい色へと変化していくため加法混合や加法混色と呼ばれる。 コンピュータやテレビの映像表示に使われている。

金色・銀色など、表現できないものを特色という。 cmyk-rbg table

yuipon-ous24 commented 2 years ago

色の三属性(トーン) 1.色相 赤・青・緑など私たちが想像する色そのもののこと。

2.明度 色の明暗のこと。色が明るいほど明度が高く、暗いほど明度は低くなる。

3.彩度 鮮やかさの度合いのこと。彩度が高いほど、鮮やかでハッキリとした色合いになり、低いほど薄暗く濁ったような色合いになる。

明度と彩度が同じ色相グループをトーンという。

palette2 pcss

yuipon-ous24 commented 2 years ago

配色

無彩色を使う配色

白、黒、グレーといった無彩色は特定の色を持たないため、どの有彩色と組み合わせてもうまくまとまる。 注意が必要なのは WEB サイトで真っ黒はのっぺり感が出るのでほぼ使わない。 有彩色を黒に近づけ無彩色にするなどちょっとした工夫が必要。

同系色を使った配色

・明度もしくは彩度だけが異なる色の組み合わせ ・トーンは異なるが同じ色相の色の組み合わせ（トーン・オン・トーン） ・隣接色の組み合わせ の3パターン

pcss

yuipon-ous24 commented 2 years ago

色相環の見方

1.隣接色・類似色 隣り合う色を隣接色、30~60 度の色相差がある色を類似色と言う。 近い色になるため、比較的扱いやすい配色。 これらの色を組み合わせると、統一感やまとまりがある印象になる。

  1. 対照色 120~150 度の色相差がある色を対照色と言う。 補色と比較的近い、ダイナミックな印象を与えることができる。 補色と比べる色の距離は近く、選択肢も多いため、より多彩な印象形成が可能。 ロゴなどでは、補色よりも多く使われる配色である。

  2. 補色 正反対にある色（補色）を組み合わせた配色。 色の差が大きいため、ダイナミックな印象、カジュアルな印象を与えることが可能。 お互いの色を引き立てあう効果があるが、使う割合を同じくらいにしてしまうと全体的に散らかった印象になる場合があり、注意が必要である。 color-kinds

yuipon-ous24 commented 2 years ago

色相環から考える配色

使う色味が増えれば増えるほど、統一感が出にくくなるので難易度が上がる。 colors

yuipon-ous24 commented 2 years ago

Adobe Color を使うと、類似色・補色などを自動で選んでくれる。 隣のタブ(テーマ・グラデーションを抽出)などイメージとなる写真から色を抽出することもできる。

https://color.adobe.com/ja/create/color-contrast-analyzer

yuipon-ous24 commented 2 years ago

イメージスケールは日本カラーデザイン研究所が研究・開発した感性マッピングツール。

基本のイメージスケールは、イメージの判断基準である WARM－COOL、SOFT－HARD の座標軸上に単色、形容詞、形容動詞を表現した配色が配置されている。(本来は第 3 軸として CLEAR-GRAYISH の軸があり、3 次元のイメージ空間となっている)

言語イメージスケール 言語イメージスケールでは形容詞や形容動詞など修飾的に使われる語を中心に 180 の言葉がプロットされている。

language

配色イメージスケール 単色と同様、２軸上に配色がプロット、配色を使うことで、単色では表現できなかったイメージもあらわせるようになり、スケール全体に広がっている。 複数の色を組み合わせることで単色より複雑で繊細なイメージの違いを表現することができる。 color-plot

yuipon-ous24 commented 2 years ago

視認性

コントラスト比 コントラスト比は、最大で 21：0、最小で 1:1 の値を取る。 白地に黒文字が 21:0、白地に白文字が 1:1 となる。 コントラスト比が大きい（高い）ほど読みやすくなる。 7.0 : 1以上のコントラスト比が理想的と言われている。

7.0 : 1 … レベル AAA(十分) 4.5 : 1 … レベル AA(最低限) 3.5 : 1 … レベル AA18(大きいテキストであれば可能)

アクセシビリティ

コントラスト比は背景色とテキストやアイコンの比率でしたが、配色パレットが色盲の方にとって優しくない場合もある。

Colors はアクセシビリティを考慮したカラーがまとめられている。 Figma のプラグインにあったので、追加した。 Colors 16

yuipon-ous24 commented 2 years ago

画面遷移図とロジックパーツ

プロジェクト進行において、要件を形にする際に、簡易なアイコンとラインを用いてシステムを設計したり整理する。 そこで使うアイコンやラインのことを、ロジックパーツと呼んでいる。 このパーツを使って作る図をフローチャート、または画面遷移図と呼ぶ。

フローチャートとは、処理やユーザーが利用する際の流れを図にしたもの。 画面遷移図とは、Web ページの遷移を図にしたもので、表示されるページを主体に操作などの注釈を加えたものが多い。 つまり、画面遷移図も 1 つのフローチャートである。 これらはフレームワーク設計やコーディングの前に、目標物の共有やその後の設計をスムーズにするために制作する。

画面遷移図の種類 (3種類)

  1. 画面名で作る 最もシンプルな画面遷移図が、画面名だけを線で結んで作成する方法。 アイデア出しの段階でよく作られる画面遷移図。 flow-chart

  2. 画面デザインを繋げる 画面を作ってから遷移図を作成する方法。 UIやUXについて検討を行うために作られたり、デザインの説明を行う場合に使用されることが多い。 どこを押せばどうなるのかなどがわかりやすい一方、デザインができないと遷移図が作れないため、デザインと実装を同時並行で行うのには向いていない。 flow-chart-prototype

  3. 様々なパーツで作る Play Ground で採用されている手法。

yuipon-ous24 commented 2 years ago

パーツの意味と使い方

このパーツで作られた画面遷移図を元にエンジニアは実装をする。一種の仕様書と言える。

icon-parts

line-parts

これらのロジックパーツはプロジェクト共通のもの。 パーツを使う際は、Figma 左サイドバーのAssets→Shinonome Logic parts から使用する。オリジナルのアイコン等を作る場合は、必ずコンポーネント化する。 ※Assets にローカルのパーツしかない場合は Assets の本のアイコンから、Shinonome Logic parts が適用されているか確認。

yuipon-ous24 commented 2 years ago

view/views の違いは URL が一意に定まるか定まらないかの違い。 URLが一意に決まるときは、viewを使い、 決まらないときは、viewsを使う。 ページが可変かどうかということが、URL が一意に定まるかどうかの違い。 view views

アイコン同士を繋げる パーツ同士を繋げる際に、ラインパーツを使う。 Shinonome Logic parts の矢印や破線を使っても問題ないが、プラグインAuto flowがとても役立つため、基本的にはプラグインを使う。 ロジックパーツを移動すると矢印も追従してくれる、矢印の長さの調整が不要である点などがメリット。

パーツに適した設定をして繋げたいパーツ２つをShiftを押しながら選択すると、ラインでアイコンを繋げることが出来る。 how-to-autoflow

yuipon-ous24 commented 2 years ago

定例会で学んだこと

写真を綺麗に並べたいときは、横に並んでいる２つを選択してオートレイアウトで間隔をそろえる。 次に、その下の2つを同じように操作する。 最後に、２つと２つを選択して、縦の間隔をそろえる。

定例会 UIトレース

yuipon-ous24 commented 2 years ago

38 画面遷移図制作 プラグインの Open Autoflow を使うときに、線の位置が気に食わないときは、途中に小さい四角のオブジェクトをおいて、仲介すればいい。 月別アーカイブをドロップダウンで表示するときは、汎用的な 0000年00月 というページ１つでいい。 破線と矢印の使い分けや、view と views inner と view の使い分けが難しかった。 スクロールダウンボタンの存在忘れない！