webデザインとfigmaを学ぶ

いい感じの見た目作れるフロントエンドマンになりたいのでwebデザインとfigmaの勉強します。

参考動画はこちらです。
https://www.youtube.com/watch?v=SQZsNAi9-dk&list=PLIffC5f7SaF3bxKdsnv7StnJybjksq1OJ

デザインの4原則

整列

要素をすっきりとした見た目にし、みやすいデザインにする方法。

近接

関係性の近い要素をひと固まりに見えるようにする方法。

対比

強弱(メリハリ)をつけることによって、優先順位を示してあげる方法。

反復

同じ種類のものは繰り返し使用し、一貫性を持たせる方法。

独学でのwebデザイン勉強法

トレース

• トレース自体には意味がないので自分なりのアレンジをする。
• 使いやすいサイトをトレースサイトに選ぶ
• 色(rgb)は一から作る
• 既存サイトをリニューアルしてみる(使いにくいところとかを見つけて改善する)
• 自分のサイトを作ってみる

いろんなものを見る

• 街中でいいデザインとかを見つけたら写真に撮っておく

Figmaの使い方を学ぶ

https://www.youtube.com/watch?v=htmjI2wpfjY&list=PLpe817jgOmIpcrK1s-z6KTOjli5G1ds0Z&index=1

Figmaって何？

• Figmaとは、「デザインコラボレーションツール」。
• 同時にデザインをしているurlに飛んで、複数人が同時にデザインを編集するとその場で編集が反映されるみたいなことが可能。
• デザインのシェアがとても簡単。

Figmaの機能について

• webの画面を作ったり、アプリの画面を作ったりというのは問題なくできる。
• 「コンポーネント管理」と言って、パーツごとに共通化して管理することができる。
• auto layout と言って、余白を統一に管理していく、修正がしやすいような機能もある。
• スライドとか資料作成とかもできる
• ロゴとかも作れる
• 画像の補正もできる
• 写真の切り抜きとかはできない

Figmaの料金について

• Figmaは基本的には無料
• 無料だけど作れるプロジェクトとかファイルの数には制限がある。
• 有料プランにすると、その辺の制限とか、編集権限を付与できる人数が増える。

Figmaが人気な理由

• コラボレーションしてデザインしていけるから
• シェアが簡単だからデザイナーの作業量が減るから

Figmaのファイル構成について知る

Figmaのファイル構成は以下のようになっている。

「 Team / Project / File 」

• Team - 会社やチームといった単位での入れ物
• Project - そのチームのプロジェクトごとにファイルを作れる入れ物

プロジェクト間のデータの移動はドラッグ&ドロップで簡単にできる。

Figmaでバナーを作ってみる

メモ

• shift + クリックで複数選択
• command + クリックでオブジェクトの階層関係なく選択
• ピンチで実際の幅や高さを変えることなく拡大縮小できる

動画見ながら色々いじってたらなんかいい感じのバナーができました。

FigmaでYoutubeのUIを作ってみる

メモ

• 「material-icon」googleが無料で出してるフリーアイコン一覧サイト。
• 「auto-layout」要素感の幅や位置をいい感じにしてくれる機能。要素を複数選択後、右のサイドバーから設定可。

• 「IOS UI Kit」 https://www.figma.com/file/vxQQrYX6qdIplBLXhlghy6/Figma-iOS-UI-Kit-(Free)-(Community)?node-id=252%3A5572
• コンポーネントのインスタンスは中身のオブジェクトのサイズや位置調整ができない。

コンポーネントをコピーしたものは Figma ではインスタンスと呼びます。これはサイズや色などの変更はできますが、細かい中身のオブジェクトの置いている位置などの変更はできません。これをするにはインスタンスからただのオブジェクトに変換（command + option + b）し、編集後再度コンポーネント化する必要があります。

https://nju33.com/notes/figma/articles/%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B

• option + ドラッグで要素を複製することができる。
• command + R で定規ツールを表示。余白に統一性を持たせたいときに使用。

YoutubeのトップページのUIできました。
いいかんじ。


動画視聴ページのUIできました
いいね！


figmaの基本操作がいい感じにわかりました。
これからは記事のサムネイルはfigmaで作っていきたい！
あとwebサイトのデザインも作ってみたい！

最後までごらんいただきありがとうございました！