ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- 今回は、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.ヒロコード』をチャンネル登録する 👇
th-cam.com/users/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
------------------------------
BGM：トーマス大森音楽工房
/ freemusicthomasoomori
------------------------------
#webデザイナー #figma #webdesign
![[ไฮไลต์] แบดมินตันชาย วิว กุลวุฒิ (ไทย) vs LEE Zii Jia (มาเลเซีย) รอบรองชนะเลิศ | โอลิมปิก 2024](http://i.ytimg.com/vi/mvBiEAqlssw/mqdefault.jpg)
すごい早くて目が追いつかないとこもあるけど、通しで見れるのはとってもありがたいです。何度も見ます。ありがとうございます！
こちらこそ嬉しいコメントいただきありがとうございます🙇♂️‼️
もう何十回も繰り返しみてます！
デザイン制作中をみれるって貴重で勉強になります。
音楽も心地良いです✨
めちゃめちゃ嬉しいです😭ありがとうございます🙇❗️
見ていて色々と勉強になります。ポイントなども解説してくれて理解しやすいです。
嬉しいコメントいただきありがとうございます🙇❗️
いつも素敵な動画ありがとうございます！
HIROさんのデザインはスッキリしていて、まとまりがあって見やすくてとても参考になります。
自分はXDを使用していますが、使い方も似た感じもあるので、(できるかできないかはさておき)やってみよう！と思えるのでとてもありがたいです😊
これからも楽しみにしています！
そう言っていただけてとても嬉しいです😭❕ありがとうございます🙇♂️❗️
いつも役立つビデオありがとうございます❤ ヘッダーを作る、とかコーディングの流れ！みたいなビデオにすごくお世話になりました。今回も見ていて参考になりましたが、
今後にもしまた「一緒に作って、一緒にコーディングする」タイプのビデオ作ってくださったら嬉しいです🍀
やっぱり一緒にやるともっと吸収できるし、身につくのが実感できるので！ヒロさんのコーディングすごくわかりやすくて参考になります〜👍
コメントいただきありがとうございます😊♪
”一緒に作る”というの凄く良いと思いました😱❕デザインもコーディングも"一緒に作る"をコンセプトで今度絶対動画作ってみます！
とても有益なコメントいただきありがとうございます🙇♂️❗️
XDの更新が止まったので、Figmaを勉強中です。
コーディングを踏まえたデザインのコツまで知ることができて有用でした！
デザインに凝ると自分でコーディングするのに苦労しそうだな…と思っていたので８の倍数は大ヒントでした。
他にもFigmaの小技が詰め込まれていたので、手を動かして真似して覚えていきたいと思います。
僕も以前はXDでしたがFigmaに完全移行しました😆❗️
参考にしていただけたようで嬉しいです☺️♪
嬉しいコメントいただきありがとうございます🙇❗️
1時間程度でここまでできるのか…すげぇ
ありがとうございます🙇♂️❕
ただ、作る前にこういう構成でこんなイメージにしよう！みたいなイメージは結構固めた上で取り組んでます😆❗️
関係ないけどタイピングの音が心地良いです😂❤
ありがとうございます😆❗️❗️
いつも参考にさせていただいております。
ページの端を折るような処理はどのように行っているのでしょうか？
ありがとうございます☺️♪
四角を作って、その四角をダブルクリックするとパスの編集モードになります。左上のペンツール（もしくはpキー）でパスを増やしたり移動したりできるので、それでこの形を作っています😆❗️
初めてのホームページ作成の参考にさせていただいています。わかりやすい解説ありがとうございます。グループ化の際にCommand+Gを押しながら範囲を取り込もうとするとCommand+Gを押している間常にグループ化されてしまい、範囲指定し終わった時にはグループが10個ほど出来てしまって毎回消しているのですが、どのようにすればグループを1つに制限できるでしょうか。
ありがとうございます😊♪
グループ化したい要素を選択した後にcommand + Gを押せば大丈夫です！
要素を複数選択するには、画面をドラッグして選択するか、Shiftを押しながら要素をクリックしていけば複数選択できます😆‼️
ありがとうございます！
有益な動画ありがとうございます！
19:21のようにウィンドウを切り替えても右側に画像を固定する方法はどう行うのでしょうか！？
自分もこのように楽に画像を貼り付けたいです…
コメントありがとうございます☺️♪
yoinkというmacの有料アプリ（買い切り）を使ってます😆❗️有料ですがめちゃくちゃオススメです❗️
@@hirocode
ご返信ありがとうございます！
有料なんですね！かなり便利なので検討してみます^ ^
いつも素敵で分かりやすい動画をありがとうございます！
Figmaで作成されたWEBデザインはどのツールにプラグインされているのでしょうか？
私はSTUDIOにしかプラグインする方法しか知らず...お教えいただけますと幸いです！
ありがとうございます😆❗️基本的にノーコードツールは使用せず、自分でコード化しています❗️
投稿ありがとうございます。Webデザインに興味があり、見よう見まねでFiguma触ってます。サイズ計算の電卓はどうやって使えばいいんですか？プラグインですか？
こちらこそコメントありがとうございます😆❗️
動画内ではAlfredというアプリ使っています！
macお使いであればspotlightで同じように計算できます☺️♪
最近、Webデザインに興味がありHIROさんのTH-cam、書籍、ユーデミー、Google検索などで独学勉強しています。切羽詰まりますが。めげずに頑張りたい。HIROさんみたいに早くてきれいでみやすい、サイト作れるようになりたい。頑張ります。HIROさんっ弟子さがしてませんか？笑なりたいです・・・。
独学勉強中なんですね😲❗️独学だと何をどうやっていいか分からないこと結構あると思うのでほんと根気が必要ですよね😭💦
そう言っていただけてとても嬉しいです🤗♪僕としてもより良いコンテンツ発信して参考にしていただけるように頑張ります❗️デザインの勉強応援してます😆❗️
変わった打鍵音のキーボードですね。何使われてるんですか？
コメントありがとうございます😊♪
キーボードはロジクールのMX Keysを使ってます😆❗️
チャレンぢんぐな動画。漢気あふるる。しかし、手元のワイプが欲しいなぁ。w ショートカットめちゃくちゃ使ってる音がw
ありがとうございます🙇♂️❗️そういったご意見ありがたいです😭
いつも動画でFigmaのお勉強させていただいております！
質問があります。コンテンツの理想のサイズ比率についてです。
私もFigmaで1440pxサイズで制作しているのですが、コンテンツの横幅は880px~1000pxで縦幅サイズは気にして制作したことがなく
プレビューで1画面で収まればいいかくらいでした。
ですが、1画面で見切れてしまうことがあるので、
ヘッター固定、PC下のメニューのバーを配慮してコンテンツを1画面で収めるには
コンテンツ縦幅なんpx意識して作成すると良いかわかりますでしょうか？
コメントありがとうございます❗️
ページの高さについてはコンテンツ量に応じて変わってくるのでサイトごとで全く異なってきますが、最初に表示される領域であるファーストビューは、パソコンサイズで大体600pxから800pxくらいを目安にすることが多いです😆‼️
大変具体的にありがとうございます！！
参考になります！
初心者です。ワイヤーフレームはコンポーネント化とかせずにとりあえず見た目を作って、デザインカンプ作るときにコンポーネント化とかオートレイアウトすればいいですか？
おっしゃる通りです‼️
Webデザインなどとは遠い世界のおばちゃんなのですが、ちょっとだけデザインに興味があり、よく分からないけれど拝見させて頂きました。
HIROさんおすすめの eagle を試しに使ってみたいのですが、色々調べたら拡張機能？？？というのが必要とありました。
拡張機能のアプリ？を入れないとeagleが使えないのでしょうか…？おすすめの拡張機能とやらを教えて頂けると助かります。
（windows11とipad proを持っています。）
お忙しいかと思いますが…よろしくお願いいたします。
ご視聴いただきありがとうございます🙇❗️
eagleはmacにインストールするだけで使えて、拡張機能は画像保存を便利にしてくれるサポート的な役割なので、拡張機能なしでも使うことができます！
ただ、eagleはmacOS専用で、残念ながらwindowsとipadだと使用することができません😭
デザインをはじめられるのであれば、figma、もしくはもっと初心者向けのcanvaなどはwindowsでも使えるのでオススメです😆❗️
win、mac対応のアプリと書いてある記事をいくつか読んだので、使えるのかと思いました。使えないのですか…残念です。
HIROさんのおススメで、数日前からfigmaを使ってみました。私にはまだ難しいですが、思ったよりも感覚的に使えるのですね。
Canvaも少し触ってみました。イラレやフォトショよりは何とか使えるかもしれないと希望を持ちました💦
超初心者の面倒くさい私の質問にも優しく答えてくださり感謝です！
HIROさんの話し方が落ち着いているので、パソコン苦手意識のある私でも落ち着いて観ることができます。
ありがとうございます！これからも楽しく拝見させて頂きます♪
ごめんなさい💦 調べたら全然windows対応していました！！！
30日間無料で使えるので使ってみてください🙇❗️
私も丁度「Windowsの無料体験版ダウンロード」 を目にしたところでした😊これ違うのかなぁと悩んでいたところでした。
何度も返信頂きありがとうございます♪
トライしてみます！
この電卓機能はプラグインですか？実際の電卓たたいてるのがストレスなので使いたいです…
あと、WFの段階では細かなmargin設定などは省かれてますね。XDだと最初にある程度のコンポーネント化が求められたりしますが、この動画の場合は、WF完成後にパーツを作り混んでいって、それをコンポーネント、バリアントで作っていく流れなので、今までの僕のやり方と真逆で、しかも、こっちの方が早いなと思って勉強になりました。やはり最初に拘るよりも速度感はありますよね？
あまり複雑な機能は使ってない印象です。この動画を見る前に、最新の難しいオートレイアウトとか学んだ後に見ているので、少し拍子抜け？悪い言い方でしたら申し訳ございません、どんなケースに使うのだろうとか思ったりもしています。
僕はalfredというアプリを使ってますが、macであればspotlight検索でも同様に計算できたかと思います💡
細かいところから作業するとどうしても全体のバランス取りにくくなってしまうので、全体の雰囲気やバランス見ながら徐々に小さい部分に目を向けていくって方がうまくいくと思います😆❗️
Figmaの機能面で言うと、おっしゃる通り複雑な機能はあまり多用してないですね😅
この動画の対象があくまで初学者の方メインと考えているので、このような作り方がわかりやすくて良いかなと思っています！
実際僕とかが複数ページにわたるWEBサイトを組んでいくとするとほとんどオートレイアウトやコンポーネントで組んでいくって形になるので、その形で説明してしまうとFigma使い始めの方は理解できずに苦しむことになると思ってます💦
もう少し複雑な組み方の動画ももしかしたら今後出すかもです😆❗️
@@hirocode 僕はヒロさんの動画だけでFigmaをマスターしようと思います。色んな方の動画だと、同じツールでも理解度や熟練度、同じ機能でもやり方・順番などが異なるために、師匠は1人と絞っております。もともとXD使いでしたので、思いのほか、Figmaでの基本的な制作は現場で実践でやらせて頂いております。ヒロさんのお陰です。このまま、おっしゃるような、応用的な制作も拝見してみたいです。もちろん、それだけ大掛かりな制作を再現するのは大変なことだと思うので、仮想として一部でも拝見できましたら幸いです。必ず、師匠に追いつけるように日々精進いたします。あと、電卓アプリありがとうございます。試してみます。
質問です！
グリッド機能は何のために使うのですか？左右に余白を作って中心にデザインをしていくのが普通なのでしょうか。
始めたばかりでわからないので教えて頂きたいです！
コメントありがとうございます😆❗️
左右に余白を作って中心にデザイン
＞＞ 一般的なサイトは、大きなスクリーンでもコンテンツが見やすいようにサイトの横幅に制限をかけています（横に広がりすぎないように）。これを1000~1200pxくらいで設定することが多いため、グリッドでガイドを設けています！
グリッドを設けることで、シェイプやテキストを配置する際にガイドにスナップ（吸着？）してくれるので作業も便利になります😆❗️
@@hirocode
ご回答ありがとうございます！
そういうことだったんですね！
それを踏まえてデザインしていきます！
ありがとうございます！！
基本的な部分になりますが、MacとWinの違いがありそうですが、margin値が出てくる時がありますよね… 59:04 のように上下左右の値が。これ、Shift+マウス移動で出てきますが、ヒロさんのように瞬時に出てくることがありません。これがあるのと無いのとでは大きな違いだなと感じてますが、これはFigma特有の機能って訳では無いのですかね？だとしたら、お門違いな質問を書いてしまい、申し訳ございません。
コメントありがとうございます☺️♪
ここの説明なくてすみません💦 macだとoptキーを押したままにすると要素同士の距離が表示されるので、windowsだとaltキーがそれに当たるかと思います！opt（alt）キー押したまま離れた要素にカーソル持ってくとその要素との距離も計れるって使い方もできます😆❗️
要素の置き換えが元の要素をコピーした上でCmd、Shift、R押したけどできないんですが理由があるのですか？
コメントありがとうございます😆❗️
仕様は変わってないので、おそらく入力ミスの可能性が高いです🤔
cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか❓
また、右クリックから「貼り付けて置換」で同様の操作が実行されるので、こちらも合わせて使用したら原因わかるかもです❗️❗️
@@hirocode
cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか＜これ試したけどさっきと同じ様に要素の名前変更にしかなりませんでした
貼り付けて置換とは右クリックした後にどこに出て来るのでしょうか(未だ出てこないので)？
cmd+r がリネームのショートカットなので、shiftキーが正しく効いていないようです🤔 オブジェクトを右クリック（通常のクリックでなく右クリックです。デスクトップでの右クリックと同様にコンテキストメニューが表示されます）すると、上から、コピー・ここに貼り付けに続けて3つ目に表示されます！レイヤーを右クリックした場合、上から2つ目に表示されます。
@@hirocode
コマンドとオプションと押したらできました！
わざわざありがとうございます
今figma勉強してます！これはなんですか？ /1:06:35
コメントありがとうございます🙇❗️cmd + yでアウトラインモードに切り替えることができます！このモードでは後ろにあるレイヤーやロックされているレイヤーを確認、選択することができます😆❗️