yuki / Yuki Makino

[fuwafuwatrain]

introduction

• 課題を始める

what is design

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

Figma

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

color scheme

• 配色について考える

Web page

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

trace

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

final

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

ここでやること

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

[fuwafuwatrain]

感想・学び
最初は、細かい違いに気づくことができなかったが、徐々に細かい違いに気づけるようになった。
ぱっと見て、こっちのほうがよい！と思うものも多くあり、直感的によいと思うデザインには根拠があるということを学んだ。

調べた言葉
alignment　整列
capitalization　大文字
ratio　比率、比
vertical　垂直の、縦の
text tracking　文字間隔
text wrapping　テキストの折り返し
font weight　フォントの太さ
tint color　淡彩

[fuwafuwatrain]

Figmaを使ってみる

【うまくできなかったこと】
ファイルを複製する段階で、プルダウンメニューが表示されずに行き詰ったが、PGritで質問することで解決につながった。
その後、門田さんとDAWNで画面共有をしながら問題を解決したが、その先の「share」→「Anyone with the link」→「can edit」のところを設定することはできなかった。
そのままで先に進んでよいとのことだったので、先に進むことにした。

【学んだこと】
Figmaの画面配置
Figmaの機能がある場所

【今後の課題】
英語に慣れる！

[fuwafuwatrain]

Figma 基本操作1

【学んだこと】

• コメント機能
  吹き出しのアイコンを押してコメントモードにすると、好きなところにメントを追加することができる。
  メンションや返信もできる。

• コメントのCRUD
  C：登録機能（Create）
  コメントを登録することができる。
  R：読出機能（Read）
  コメント一覧を見ることができる。
  解決済みのものも表示することができる。
  U：変更機能（Update）
  コメントを編集することができる。
  D：削除機能（Delete）
  コメントを削除することができる。

• コメントの解決
  不要になったコメントは削除するのではなく、解決済みにして残しておく。
  コメント欄をすっきりさせることは大事！

【参考にしたページ】
https://blog.senseshare.jp/crud.htm

【感想】
今回は、不明点もなく、スムーズに学習することができた。

[fuwafuwatrain]

Figma 基本操作2

【学んだこと、やったこと】

• ページの作成
  ページ作成後、「Page_test」に名前を変更
• フレームの作成、色を設定
  iPhone13 miniのフレームを作成、色を黄色に変更
• オブジェクトを作成
  シェイプツールの、RectangleとEllipseでオブジェクトを作成
• オブジェクトに対してフレームをフィットさせる
  resize to fitで、オブジェクトに対してフレームをフィットさせる
• フレーム外のオブジェクトの表示
  Clip contentで、フレームからはみ出している円のはみ出ている部分も表示

【感想】
スムーズに学習することができた。
感覚的に使える部分とそうでない部分とあるので、繰り返しいろいろな機能を試しながら学習していきたい。

[fuwafuwatrain]

Figma 基本操作3

【学んだこと、やったこと】

• レイヤーの種類
  レイヤーの種類は、アイコンで判断することができる
• レイヤーの重なり
  レイヤーパネルでドラック＆ドロップ、もしくは、オブジェクトも右クリックして直接操作
  Ellipse1をRectangle3の後ろに入れ替えた
• レイヤーの管理
  Rectangle2を非表示にした

【感想】
スムーズに学習を進めることができた。
オブジェクト、レイヤーなど、用語にも慣れてきた。

[fuwafuwatrain]

Figma 基本操作4

【学んだこと、やったこと】

• フレームセレクション
  フレームを入れ子状のグループにすること。
  複数のオブジェクトをまとめて管理したいとき、複数のオブジェクトに背景をつけたいときに使う。
• グループセレクション
  ただ単にグルーピングしたいとき。
  複数のオブジェクトを一つのレイヤーとして扱うことができる。
• フレームセレクションとグループセレクションの切り替え
  フレームとグループは切り替えることができる。
• グループとフレームの違い
  詳しい違いは後ほど理解で大丈夫。
  基本的に案件ではフレームを使うことがほとんどなので、とりあえずはフレームを使うと間違いない！

【感想】
最初、操作を間違ってしまい、うまくグループ化できなかったが、冷静に対処することで複数のオブジェクトをグループ化することができた。
言葉には慣れてきたので、操作に慣れていきたい。

[fuwafuwatrain]

確認問題1

【学んだこと】
新しく学んだことは、バージョンの保存方法。
また、グループ化と解除のショートカットについて調べて学ぶことができた。

【参照ページ】
https://web-design.school/tutorials/figma/grouping

【感想】
比較的スムーズにできた。
ただ、一つ操作を間違うと焦ってしまうことがあるので、一つ一つ冷静に取り組めるようにしたい。

[fuwafuwatrain]

ツールバーの操作 1

【学んだこと】

• ツールバーの基本操作
• ツールバーの機能

【調べたこと】

• コンポーネント
  コンポーネントとは、デザイン全体で再利用できる UI の部品のこと
• マスク
  ある親要素から子要素が絶対にはみ出ないようにしたい（はみ出た部分はカットしたい）場合に使える

【参照】

• https://www.webcreatorbox.com/inspiration/component-design#:~:text=%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF%EF%BC%9F,%E3%81%84%E3%82%8B%E3%82%82%E3%81%AE%E3%81%8C%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E3%81%99%E3%80%82

• https://nju33.com/notes/figma/articles/%E3%83%9E%E3%82%B9%E3%82%AF#%E3%83%9E%E3%82%B9%E3%82%AF

【感想】
操作や説明は理解することができたが、知らない言葉があった。
調べることで意味や機能を理解することができた。

[fuwafuwatrain]

ツールバーの操作 2

【学んだこと、やったこと】

• オブジェクトとキャンバスの移動・拡大・縮小
• オブジェクト・アートボードのサイズ変更・移動・複製・消去
• オブジェクトのグループ化・回転
• 操作の取り消し・やり直し
• 余白の計測

【感想】
全ての項目をスムーズに学習することができた。
今回は二、三度ずつしか操作を試していないので、今後学習を進めながら操作に慣れていきたい。

[fuwafuwatrain]

ツールバーの操作 3

【学んだこと、やったこと】

• ファイル名の編集・削除・複製・移動
• ファイルのバージョン確認
• ファイルの書き出し

【感想】　
確認問題でバージョンの確認の手順を一度踏んでいたため、スムーズに学習することができた。
今後も、適切なところでバージョンを保存し、わかりやすくしていきたい。

[fuwafuwatrain]

ツールバーの操作 4

【学んだこと、やったこと】

• コンポーネント
  Exerciseという名前でコンポーネント化
• インスタンスの追加・変更・解除
• コンポーネントの置き換え
• コンポーネント化することのメリット
  一括変更を行うことが出来るのが、最大のメリット。
  同じようなパーツを複数使う場合はコンポーネントすることが必要不可欠。

【感想】
今回は、コンポーネント化について、機能だけでなく、コンポーネント化するメリットについても学んだ、
今後は、コンポーネント化の機能を適切に使用して課題を進められるよう、復習に努めたい。

[fuwafuwatrain]

ツールバーの操作 5

【学んだこと、やったこと】

• オブジェクトのパスの結合・合成
  Union Slection
  重なっているシェイプを合体した形状にする。前面のオブジェクトの色が適用される。
  Subtract Slection
  全面のシェイプで背面のシェイプを型抜きした形状にする。
  Intersect Slection
  全面と背面の交差した部分の形状にする。
  Exclude Slection
  全面と背面の交差した部分を型抜きした形状にする。前面のイブジェクトの色が適用される。
• 結合・合成したパスのマージ
  Flatten Selection
• メリット
  データの中身が単純化されて同じ見た目でも容量を軽くすることができる。

【感想】
今回は、オブジェクトの結合・合成についてスムーズに学ぶことができた。
メリットについては、あまり考えたことがなかったが、教材でデータの容量という観点について述べられていたので、そのようなメリットについても考えていきたい。

[fuwafuwatrain]

ツールバーの操作 6

【学んだこと、やったこと】
マスクは背面のレイヤーの形に前面のレイヤーを切り取る事ができる。

• シェイプのマスク
• 画像のマスク

【感想】
今回は、オブジェクトのマスクについて学んだ。
また、公式ドキュメントを読むことで、教材には書いていないことも学ぶことができた。

[fuwafuwatrain]

ツールバーの操作 7

【学んだこと、やったこと】

• ビューの設定
• レイアウトの設定
• ルーラーの設定

【感想】
英語にも慣れてきて、スムーズに操作することができた。
ルーラーは設定できていたが、今回の教材を通して使用方法も理解することができた。

[fuwafuwatrain]

確認問題2

【感想】
今までに学んだことを活かして、試行錯誤しながらではあったが、確認問題を進めることができた。
ただ、ひとつひとつの作業にとても時間がかかってしまうため、操作に慣れることができるように、毎日Figmaを触る時間を作りたい。

[fuwafuwatrain]

プロパティパネルの操作1

【学んだこと】

• 数値入力とスクラブ入力
  数値入力：自分で数値を決められた場所に入力または矢印キーで調整して数値を変更するやり方
  スクラブ入力：ドラッグ操作によって数値を変更するやり方
• 位置とサイズの変更
• 回転の角度と角の半径
  角の半径をそれぞれに設定したりコーナーの滑らかさを設定することができる。

【感想】
今回の内容は、難しくなくすぐに理解することができた。
細かな調整をするときは数値入力のほうが調整しやすいのかなと思った。

[fuwafuwatrain]

プロパティパネルの操作2

【学んだこと】

• オブジェクトの整列
• 等間隔に整列
  パスにも適用できる。
• スマートセレクション
  文面だけでは理解することができなかったが、公式ドキュメントを見て理解することができた。

【感想】
今回の内容は、スムーズに理解することができた。
自分でいろいろと操作を試してみることで、どのように変化するかを見ることができた。

[fuwafuwatrain]

プロパティパネルの操作3

【学んだこと】

• オブジェクトに色を塗る方法と塗り方のパターン
  参考のページを見ることで、カラーコードについても学ぶことができた。
• ブレンドモード
  参考リンクから詳しく学ぶことができた。
  オブジェクト単体に適用させる場合と、異なるレイヤー間に適用させたい場合で操作するところが違うので、気をつけたい。

【感想】
今回は、参考ページからも多くのことを学ぶことができた。
今後も、公式ドキュメントなどを読み返し、学びを深め、いろいろなことを試していきたい。

[fuwafuwatrain]

プロパティパネルの操作4

【学んだこと】

• ストロークの使い方
  選の位置はInsideが一般的
• ストロークの詳細設定

【感想】
今回は、ストロークの使い方や詳細設定について、今までなんとなくしかわかっていなかったことをしっかりと理解することができた。

[fuwafuwatrain]

プロパティパネルの操作5

【学んだこと】

• ペンツールの使い方
  曲線を描くことができた。
• ペンやシェイプで作ったオブジェクトの編集
  編集する方法を学んだ。
• 鉛筆ツールの使い方

【感想】
今回は、ペンツールを使って曲線を描くことができた。
曲線を作る操作は少し難しかったので、慣れていきたい。

[fuwafuwatrain]

プロパティパネルの操作6

【学んだこと】

• エフェクトのつけかた
  Inner shadow：オブジェクトの内側に影をつける
  Drop shadow：オブジェクトの外側に影をつける
  Layer blur：オブジェクトをぼかす
  Background blur：オブジェクトの背面レイヤーをぼかす
  いずれも太陽のアイコンから詳細に設定できる。

【感想】
今回は、エフェクトのつけ方を学んだ。
Drop shadowが使われているところが具体的にイメージできなかったので、普段の生活で使われているところがないか探してみたい。

[fuwafuwatrain]

プロパティパネルの操作7

【学んだこと】

• テキストの設定
  font-family：Google fontsにあるのもが適用できる
  font-weight：文字の太さ
  font-size：pxの単位で指定できる。小数点は避ける。Webの基準の大きさは16px
  line-height：行の高さ。段落内の行間隔を空けるのに役立つ。
  letter-spacong：文字間隔が指定できる。
  段落間隔（編集は避ける！）
  resize：サイズ変更。配置される文字によって確保する領域が固定か固定じゃないのかで使い分ける。
  text-align：水平方向の文字の配置方法を指定できる
  テキストの縦位置（編集は避ける！）

【感想】
今回の内容は、Wordと似ているものが多く、理解しやすかった。

[fuwafuwatrain]

プロパティパネルの操作8

【学んだこと】

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

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

【感想】
他のアプリケーションと同じようにエクスポートすることができることが学べた。

[fuwafuwatrain]

プロパティパネルの操作9

【学んだこと】

• constraints機能
  constraintsを設定することによって、フレームのサイズが変わったときに、子要素のオブジェクトがそのような変化をするのか制約をつけることができる。
  Webページのデザインをする際、デバイスが変わったときにどのように表示されるかを制御でき、コンポーネント化と組み合わせて使うことによって、UIデザインのシステム構築が効率的にできる。

【感想】
constraints機能について、使用によってどのように変化するかを学ぶことができた。
ただ、あまり具体的にイメージできていな部分もあるので、今後学習を進めながら学びを深めていきたい。

[fuwafuwatrain]

プロパティパネルの操作10

【学んだこと】

• Auto layout
• Advanced layout
• Absolute layout

【感想】
使い方を学ぶことはできたが、サイトで使うパーツはどのように作れるかをいろいろな例から考え、自分で手を動かして慣れていく必要があると感じた。

[fuwafuwatrain]

プロパティパネルの操作11

【学んだこと】

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

【感想】
枝分かれするVariantsのところがわからなかったが、講師の方に質問することで理解することができた。
また、参考ページの「Variantsとcomponentの使いわけ」を読んで、使い分けについても少しは理解することができた。
復習を重ねながら、理解を深めていきたい。

[fuwafuwatrain]

確認問題3

【感想】　
今まで学んだことを活かして、スムーズに進めることができた。
ショートカットなども活用しながら、効率的に進められるようにしていきたい。

[fuwafuwatrain]

プロトタイピング

【学んだこと】

• プロトタイプとは
  プロトタイプは制作したUIに近い形でデザインを確認することができる機能。
  実装前に問題点を洗い出したり、概念をテストすることによって作業の後戻りをある程度防ぐことができる。
• Interactions
  trigger：どんなアクションをきっかけにページが変わるか
  actions：どのようにページが変わるかなど
  遷移先
  ※スマホはtap、PCはclickがトリガーであることに注意が必要
• Overflow behavior
  デバイスからはみだしている場合、どのような挙動をするか設定できる
• Show protptype settings
  プレビューするデバイス、プレビューの背景、最初のフレームを設定できる

【感想】
実際に動くことはワクワクすると感じた。

[fuwafuwatrain]

確認問題4

【感想】
どんなトリガーに対して、どんな動きをするかを考えながら手を動かすことで、スムーズに取り組むことができた。
難しさはほとんど感じなかったが、一部の機能しか試していないので、今後はいろいろな機能を試してみたい。

[fuwafuwatrain]

コミュニティ

【学んだこと】

• プラグイン
  便利な拡張機能をインストールした。
• ファイル
  ファイルを複製する方法を学んだ。

【感想】
今後は、拡張機能を使って、効率的によりよいデザインを作っていきたい。
また、どのようなデザインが流行っているのかなど、情報収集も続けていきたい。

[fuwafuwatrain]

色について考える1

【学んだこと】

• 色の作られ方
• 減法混色(CMYK)と加法混色(RGB)
  CMYKとは
  Cyan、Magenta、Yellow、Key plateから頭文字1文字ずつ取ったもの。
  混ぜると暗い色へ変化していく。
  印刷の際に使われる。
  RGBとは
  Red、Green、Blueの三つの原色を混ぜて幅広い色を再現する加法混合の一種。
  混ぜると明るい色へ変化していく。
  コンピュータやテレビの映像表示に使われている。
• 色の三属性（トーン）
  色相
  赤・青・緑など、私たちが想像する色そのもののこと。
  明度
  色の明暗のこと。
  彩度
  鮮やかさの度合いのこと。
  明度と再度が同じ色相グループをトーンという。

【感想】
色の基本について学ぶことができた。
今まであいまいだった言葉の意味を再確認することができた。

[fuwafuwatrain]

色について考える2

【学んだこと】

• 無彩色を使う配色
  無彩色は、どの有彩色と組み合わせてもうまくまとまる。
  WEBサイトで真っ黒はのっぺり感が出るのでほぼ使わない。
• 同系色を使った配色
  明度もしくは彩度だけが異なる色の組み合わせ
  トーンは異なるが同じ色相の色の組み合わせ（トーン・オン・トーン）
  隣接色の組み合わせ
• 色相環の見方
  隣接色・類似色
  対比色
  補色
• 色相環から考える配色

【感想】
色相環の見方など、今まで少しだけ学校で習ったことがあることを再度確認することができた。
普段から、色の配色に着目してみるとおもしろそうだと思った。

[fuwafuwatrain]

色について考える3

【学んだこと】

• 色のもつ意味
• 言語イメージスケール
• 配色イメージスケール

【感想】
いろいろなロゴから、色の持つ意味を学ぶことができた。
デザインするときには、目的やイメージに合わせて適切な配色ができるように、もっと色について考えてみたいと思った。

[fuwafuwatrain]

色について考える4

【学んだこと】

• コントラスト比
  7.0:1…レベルAAA（十分）
  4.5:1…レベルAA（最低限）
  3.5:1…レベルAA18（大きいテキストであれば可能）
• アクセシビリティ

【感想】
私自身、軽度の色弱があり色の見え方について悩んできたので、コントラスト比やアクセシビリティなどに十分配慮しながら、デザインしていきたい。

[fuwafuwatrain]

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

【学んだこと】

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

【感想】
大学で、フローチャートのついて学習したので、スムーズに理解することができた。
しかし、自分で一から画面遷移図を作ったことはないので、今後わかりやすい画面遷移図が作れるよう、慣れていきたい。

[fuwafuwatrain]

画面遷移図制作

【学んだこと】

• prepareとcomponentの違い
• Auto flowの使い方

【感想】
ページの一覧やパーツの一覧を書き出すのに、どこがページでどこがパーツなのかが最初はわからなかった。
画面遷移図の制作は難しいと感じたが、重要なところなので復習しながら覚えていきたい。

[fuwafuwatrain]

Atomic Design

【学んだこと】

• Atomic Design
  画面を構成する要素を、atoms（原子）、molecules（分子）、organisms（有機体）、templates（テンプレート）、pages（ページ）の 5 つの階層に分け、最終的な UIとUIの基礎となるデザインシステムを同時に作成する設計方法
  ［利点］
  ・機能やコンポーネント単位で考えることで、デバイスやページの概念に縛られず、動的にデザインできること。
  ・それぞれの階層でコンポーネント化をすることによって修正・変更しやすく、パーツの使い回しもできる。
  階層の明確な分け方はない。
  わかりやすく整理されており、他者から見てもわかりやすいようであればtemplatesの階層が存在しないなどもありえる。

• コンポーネントの命名規則
  ※エンジニアがそのままの命名を使えるよう、コンポーネントの命名に日本語は使わないようにする！
  ・階層名(atoms,moleculesなど)/パーツ名/(状態)
  ・user list など、２単語以上ある場合は-で単語を繋げるのがルール
  ・ケバブケースは UI を実装するフロントエンド でよく使うため
  ・小文字のみ使用

• アセットの管理
  WEB デザインにおけるアセットとは画像やイラスト、アイコンなどサイトで使う素材のこと。
  アセットはassets/素材名としてまとめておく。
  →エンジニアはブラウザ上でデザインを表現をするために、何も手を加えていないアセットが欲しいから

【感想】
イメージは湧いたので、実際にwebサイトを見ながらどのような階層になるかを考えてみた。
命名規則については、今後気をつけながら課題に取り組みたい。

[fuwafuwatrain]

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

【学んだこと】
※これからテキストを使う際には、Shinonome の text-wrap を使う！！

• text-wrap--margin は外側の余白で他の要素との余白を取る際に用いる
• text-wrap--padding は内側の余白で、自分の要素の余白を取る際に用いる

テキストの命名

• font-weight の普通・太いの 2 種類でh1/basic,h1/boldのように登録されている
• h1,h2,h3 は見出しを表すもの

カラーの命名

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

【なぜこの命名規則なのか】

• 同系色の色の絶妙な違いもわかりやすい
• 色名を見ただけで、どのような色なのかイメージしやすい

【感想】　
テキストや色に関する規則を学ぶことができた。
また、paddingやmargineといった余白の違いも理解することができた。
色の命名規則に関しては、理解すると同時にわかりやすさに感動した。

[fuwafuwatrain]

デバイス対応(レスポンシブ対応)

【学んだこと】

• デバイス対応
  スマホ・タブレット・PC など画面幅に合わせてデザインが崩れることがないようにすること
  基本的にはレスポンシブ対応でデザインを作ることが多い
• ブレークポイントとは
  デザインをどの画面幅を境に調整するのか境目のこと
  bootstrap

【感想】　
今まで当たり前のように感じていたデバイスでの見た目の違いについて考えることができた。
今後は、ブレークポイントを意識しながら進めていきたい。

[fuwafuwatrain]

デザイン・動きを伝える

【学んだこと】

• assets を用意する
  アセット：素材のこと（簡単にいうと）
  アウトライン化：パスで構成されたオブジェクトに変換すること
• マウスアクション・タップアクションを伝える
  interactive components
  コンポーネントを選択しているとき、component configurationというウィンドウが開くので、その機能を利用してテキストで伝える
• 文字の折り返しを伝える
  ・改行され下にずっと続いている
  ・...の省略記号で省略する
  ・スクロールでユーザーに続きを読むかどうか判断させるようにする
• パターンを伝える
  ＜例＞
  ・トップページと動画個別ページでデザインが違う
  ・登録チャンネルがない(少ない)場合のデザイン
  ・ログインしている時のしていない時のコンテンツの違い
  ・ダークモードのデザイン

【感想】
今まであまり考えたことがなかったデザインの部分について考えることができた。
様々な立場のことを意識しながらデザインをしたいと思った。