【Figma実践】WEBデザインで、ポートフォリオサイトを作る！ノーカット制作の流れ。#figma #フィグマ
視聴回数 38,268 回
0
0
今回は、WEBデザインでポートフォリオサイトを制作する流れを、（ほぼ）ノーカットでお届けします😆❕
Figma（フィグマ）を使用したデザインの工程や、併用して使用しているソフトの紹介、デザインする際に意識する点など併せて紹介しています😊♪
🎥 この動画の構成 🎥
00:00 ポートフォリオサイトのWEBデザイン
00:41 新規ドキュメント
01:14 まずはヘッダーから
01:44 グリッド機能
02:16 全体を作っていく
03:24 サイズ計算
04:24 ワイヤーフレームはざっくり
05:13 FigmaフィグマとAdobeXD
07:19 デザインを進める際のバランスについて
10:39 ワイヤーフレームの色
16:15 アウトラインモード
17:13 ダミーテキスト
18:47 写真素材・加工
22:48 画像管理アプリ「Eagle」
25:01 サイトで使用するカラーの選定
27:00 プレビュー確認
28:09 色スタイルの定義
28:54 オートレイアウト機能
29:50 コンポーネント機能
31:21 コンポーネントの変更
31:38 プラグイン「Feather Icon」
32:31 コンポーネントのバリアント
32:56 8の倍数デザイン法
36:55 プラグイン「Japanese Font Mixer」
43:51 要素の置き換え
52:48 ファイル移動補助アプリ「Yoink」
01:05:47 あしらいを加える
01:11:05 統一感を意識する
01:11:52 レイヤーの整理
01:12:43 まとめ
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
http://www.youtube.com/hirocode?sub_confirmation=1
◆ Twitter. ツイッター
https://twitter.com/hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
https://www.instagram.com/hirocodeweb/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
https://amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: https://youtu.be/lv1YPeP1O8k
----------------------------------------------------------
––––––––––––––––––––––––––––––
BGM：トーマス大森音楽工房
https://www.youtube.com/c/FreeMusicThomasOomori
––––––––––––––––––––––––––––––
#webデザイナー #figma #webdesign
Figma（フィグマ）を使用したデザインの工程や、併用して使用しているソフトの紹介、デザインする際に意識する点など併せて紹介しています😊♪
🎥 この動画の構成 🎥
00:00 ポートフォリオサイトのWEBデザイン
00:41 新規ドキュメント
01:14 まずはヘッダーから
01:44 グリッド機能
02:16 全体を作っていく
03:24 サイズ計算
04:24 ワイヤーフレームはざっくり
05:13 FigmaフィグマとAdobeXD
07:19 デザインを進める際のバランスについて
10:39 ワイヤーフレームの色
16:15 アウトラインモード
17:13 ダミーテキスト
18:47 写真素材・加工
22:48 画像管理アプリ「Eagle」
25:01 サイトで使用するカラーの選定
27:00 プレビュー確認
28:09 色スタイルの定義
28:54 オートレイアウト機能
29:50 コンポーネント機能
31:21 コンポーネントの変更
31:38 プラグイン「Feather Icon」
32:31 コンポーネントのバリアント
32:56 8の倍数デザイン法
36:55 プラグイン「Japanese Font Mixer」
43:51 要素の置き換え
52:48 ファイル移動補助アプリ「Yoink」
01:05:47 あしらいを加える
01:11:05 統一感を意識する
01:11:52 レイヤーの整理
01:12:43 まとめ
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
👇『HIROCODE.ヒロコード』をチャンネル登録する 👇
http://www.youtube.com/hirocode?sub_confirmation=1
◆ Twitter. ツイッター
https://twitter.com/hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
https://www.instagram.com/hirocodeweb/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
https://amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
https://amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
https://amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
https://amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
https://amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
https://amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
https://amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
https://amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
https://amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
https://amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: https://youtu.be/lv1YPeP1O8k
----------------------------------------------------------
––––––––––––––––––––––––––––––
BGM：トーマス大森音楽工房
https://www.youtube.com/c/FreeMusicThomasOomori
––––––––––––––––––––––––––––––
#webデザイナー #figma #webdesign
