【Figma実践】WEBデザインで、ポートフォリオサイトを作る！ノーカット制作の流れ。

[@Spidey-Coco]

もう何十回も繰り返しみてます！ デザイン制作中をみれるって貴重で勉強になります。 音楽も心地良いです✨

[@hirocode]

めちゃめちゃ嬉しいです😭ありがとうございます🙇❗️

[@kico9462]

すごい早くて目が追いつかないとこもあるけど、通しで見れるのはとってもありがたいです。何度も見ます。ありがとうございます！

[@hirocode]

こちらこそ嬉しいコメントいただきありがとうございます🙇‍♂️‼️

[@yukaabematsu6770]

ありがとうございます！

[@hirocode]

Super Thanks初めていただきました😭より参考にしていただけるような動画出せるように頑張ります！ありがとうございます🙇❗️

[@yu3-zd5oj]

見ていて色々と勉強になります。ポイントなども解説してくれて理解しやすいです。

[@hirocode]

嬉しいコメントいただきありがとうございます🙇❗️

[@yukaabematsu6770]

長年、印刷物の制作をしていますがいい加減WEBデザインもしないといけないと思い独学しています。 今更、学校で学習するのも余計な時間がかかりそうなので、こうやって独学を応援してくれるHIROさんのKZbinがありとても助かります！！ありがとうございます！

[@hirocode]

嬉しいコメントいただきありがとうございます🙇そう言っていただけて動画作成している甲斐があります！こちらこそありがとうございます😆❗️

[@スーパー釜玉うどん]

1時間程度でここまでできるのか…すげぇ

[@hirocode]

ありがとうございます🙇‍♂️❕ ただ、作る前にこういう構成でこんなイメージにしよう！みたいなイメージは結構固めた上で取り組んでます😆❗️

[@naninani14889]

いつも役立つビデオありがとうございます❤　ヘッダーを作る、とかコーディングの流れ！みたいなビデオにすごくお世話になりました。今回も見ていて参考になりましたが、 今後にもしまた「一緒に作って、一緒にコーディングする」タイプのビデオ作ってくださったら嬉しいです🍀 やっぱり一緒にやるともっと吸収できるし、身につくのが実感できるので！ヒロさんのコーディングすごくわかりやすくて参考になります〜👍

[@hirocode]

コメントいただきありがとうございます😊♪ ”一緒に作る”というの凄く良いと思いました😱❕デザインもコーディングも"一緒に作る"をコンセプトで今度絶対動画作ってみます！ とても有益なコメントいただきありがとうございます🙇‍♂️❗️

[@kuronecotan]

XDの更新が止まったので、Figmaを勉強中です。 コーディングを踏まえたデザインのコツまで知ることができて有用でした！ デザインに凝ると自分でコーディングするのに苦労しそうだな…と思っていたので８の倍数は大ヒントでした。 他にもFigmaの小技が詰め込まれていたので、手を動かして真似して覚えていきたいと思います。

[@hirocode]

僕も以前はXDでしたがFigmaに完全移行しました😆❗️ 参考にしていただけたようで嬉しいです☺️♪ 嬉しいコメントいただきありがとうございます🙇❗️

[@yura_san]

いつも素敵な動画ありがとうございます！ HIROさんのデザインはスッキリしていて、まとまりがあって見やすくてとても参考になります。 自分はXDを使用していますが、使い方も似た感じもあるので、(できるかできないかはさておき)やってみよう！と思えるのでとてもありがたいです😊 これからも楽しみにしています！

[@hirocode]

そう言っていただけてとても嬉しいです😭❕ありがとうございます🙇‍♂️❗️

[@柴ナル]

関係ないけどタイピングの音が心地良いです😂❤

[@hirocode]

ありがとうございます😆❗️❗️

[@akiram-m8r]

今ならUizardに手書きラフをアップロードして、AIにワイヤーフレーム化してもらい、figmaへエクスポートして作業すると早いですかね？細かい調整や今後のやり易さはたしかにすべて自分で作ったほうがいいですね

[@なし-i8v]

いつも参考にある動画投稿くださりありがとうございます。質問させてください。 ヒロさんはfigmaでデザインするときは各セクション毎に組まれたUIキッドみたいなものを使うことはありますでしょうか

[@れんれん-y9s]

いつも参考にさせていただいております。 ページの端を折るような処理はどのように行っているのでしょうか？

[@hirocode]

ありがとうございます☺️♪ 四角を作って、その四角をダブルクリックするとパスの編集モードになります。左上のペンツール（もしくはpキー）でパスを増やしたり移動したりできるので、それでこの形を作っています😆❗️

[@HayateIkeda-z7y]

最近、Webデザインに興味がありHIROさんのKZbin、書籍、ユーデミー、Google検索などで独学勉強しています。切羽詰まりますが。めげずに頑張りたい。HIROさんみたいに早くてきれいでみやすい、サイト作れるようになりたい。頑張ります。HIROさんっ弟子さがしてませんか？笑なりたいです・・・。

[@hirocode]

独学勉強中なんですね😲❗️独学だと何をどうやっていいか分からないこと結構あると思うのでほんと根気が必要ですよね😭💦 そう言っていただけてとても嬉しいです🤗♪僕としてもより良いコンテンツ発信して参考にしていただけるように頑張ります❗️デザインの勉強応援してます😆❗️

[@punz.3rd]

チャレンぢんぐな動画。漢気あふるる。しかし、手元のワイプが欲しいなぁ。w ショートカットめちゃくちゃ使ってる音がw

[@hirocode]

ありがとうございます🙇‍♂️❗️そういったご意見ありがたいです😭

[@user-tx9re5mg2x]

基本的な部分になりますが、MacとWinの違いがありそうですが、margin値が出てくる時がありますよね… 59:04 のように上下左右の値が。これ、Shift+マウス移動で出てきますが、ヒロさんのように瞬時に出てくることがありません。これがあるのと無いのとでは大きな違いだなと感じてますが、これはFigma特有の機能って訳では無いのですかね？だとしたら、お門違いな質問を書いてしまい、申し訳ございません。

[@hirocode]

コメントありがとうございます☺️♪ ここの説明なくてすみません💦 macだとoptキーを押したままにすると要素同士の距離が表示されるので、windowsだとaltキーがそれに当たるかと思います！opt（alt）キー押したまま離れた要素にカーソル持ってくとその要素との距離も計れるって使い方もできます😆❗️

[@user-tx9re5mg2x]

この電卓機能はプラグインですか？実際の電卓たたいてるのがストレスなので使いたいです… あと、WFの段階では細かなmargin設定などは省かれてますね。XDだと最初にある程度のコンポーネント化が求められたりしますが、この動画の場合は、WF完成後にパーツを作り混んでいって、それをコンポーネント、バリアントで作っていく流れなので、今までの僕のやり方と真逆で、しかも、こっちの方が早いなと思って勉強になりました。やはり最初に拘るよりも速度感はありますよね？ あまり複雑な機能は使ってない印象です。この動画を見る前に、最新の難しいオートレイアウトとか学んだ後に見ているので、少し拍子抜け？悪い言い方でしたら申し訳ございません、どんなケースに使うのだろうとか思ったりもしています。

[@hirocode]

僕はalfredというアプリを使ってますが、macであればspotlight検索でも同様に計算できたかと思います💡 細かいところから作業するとどうしても全体のバランス取りにくくなってしまうので、全体の雰囲気やバランス見ながら徐々に小さい部分に目を向けていくって方がうまくいくと思います😆❗️ Figmaの機能面で言うと、おっしゃる通り複雑な機能はあまり多用してないですね😅 この動画の対象があくまで初学者の方メインと考えているので、このような作り方がわかりやすくて良いかなと思っています！ 実際僕とかが複数ページにわたるWEBサイトを組んでいくとするとほとんどオートレイアウトやコンポーネントで組んでいくって形になるので、その形で説明してしまうとFigma使い始めの方は理解できずに苦しむことになると思ってます💦 もう少し複雑な組み方の動画ももしかしたら今後出すかもです😆❗️

[@user-tx9re5mg2x]

@@hirocode 僕はヒロさんの動画だけでFigmaをマスターしようと思います。色んな方の動画だと、同じツールでも理解度や熟練度、同じ機能でもやり方・順番などが異なるために、師匠は1人と絞っております。もともとXD使いでしたので、思いのほか、Figmaでの基本的な制作は現場で実践でやらせて頂いております。ヒロさんのお陰です。このまま、おっしゃるような、応用的な制作も拝見してみたいです。もちろん、それだけ大掛かりな制作を再現するのは大変なことだと思うので、仮想として一部でも拝見できましたら幸いです。必ず、師匠に追いつけるように日々精進いたします。あと、電卓アプリありがとうございます。試してみます。

[@Reah-c2f]

Webデザインなどとは遠い世界のおばちゃんなのですが、ちょっとだけデザインに興味があり、よく分からないけれど拝見させて頂きました。 HIROさんおすすめの eagle を試しに使ってみたいのですが、色々調べたら拡張機能？？？というのが必要とありました。 拡張機能のアプリ？を入れないとeagleが使えないのでしょうか…？おすすめの拡張機能とやらを教えて頂けると助かります。 （windows11とipad proを持っています。） お忙しいかと思いますが…よろしくお願いいたします。

[@hirocode]

ご視聴いただきありがとうございます🙇❗️ eagleはmacにインストールするだけで使えて、拡張機能は画像保存を便利にしてくれるサポート的な役割なので、拡張機能なしでも使うことができます！ ただ、eagleはmacOS専用で、残念ながらwindowsとipadだと使用することができません😭 デザインをはじめられるのであれば、figma、もしくはもっと初心者向けのcanvaなどはwindowsでも使えるのでオススメです😆❗️

[@Reah-c2f]

win、mac対応のアプリと書いてある記事をいくつか読んだので、使えるのかと思いました。使えないのですか…残念です。 HIROさんのおススメで、数日前からfigmaを使ってみました。私にはまだ難しいですが、思ったよりも感覚的に使えるのですね。 Canvaも少し触ってみました。イラレやフォトショよりは何とか使えるかもしれないと希望を持ちました💦 超初心者の面倒くさい私の質問にも優しく答えてくださり感謝です！ HIROさんの話し方が落ち着いているので、パソコン苦手意識のある私でも落ち着いて観ることができます。 ありがとうございます！これからも楽しく拝見させて頂きます♪

[@hirocode]

ごめんなさい💦 調べたら全然windows対応していました！！！ 30日間無料で使えるので使ってみてください🙇❗️

[@Reah-c2f]

私も丁度「Windowsの無料体験版ダウンロード」 を目にしたところでした😊これ違うのかなぁと悩んでいたところでした。 何度も返信頂きありがとうございます♪ トライしてみます！

[@Aya_ado]

いつも素敵で分かりやすい動画をありがとうございます！ Figmaで作成されたWEBデザインはどのツールにプラグインされているのでしょうか？ 私はSTUDIOにしかプラグインする方法しか知らず...お教えいただけますと幸いです！

[@hirocode]

ありがとうございます😆❗️基本的にノーコードツールは使用せず、自分でコード化しています❗️

[@いろはす-n1f]

初めてのホームページ作成の参考にさせていただいています。わかりやすい解説ありがとうございます。グループ化の際にCommand+Gを押しながら範囲を取り込もうとするとCommand+Gを押している間常にグループ化されてしまい、範囲指定し終わった時にはグループが10個ほど出来てしまって毎回消しているのですが、どのようにすればグループを1つに制限できるでしょうか。

[@hirocode]

ありがとうございます😊♪ グループ化したい要素を選択した後にcommand + Gを押せば大丈夫です！ 要素を複数選択するには、画面をドラッグして選択するか、Shiftを押しながら要素をクリックしていけば複数選択できます😆‼️

[@いろはす-n1f]

ありがとうございます！

[@user-nc5sm1rq2f]

有益な動画ありがとうございます！ 19:21のようにウィンドウを切り替えても右側に画像を固定する方法はどう行うのでしょうか！？ 自分もこのように楽に画像を貼り付けたいです…

[@hirocode]

コメントありがとうございます☺️♪ yoinkというmacの有料アプリ（買い切り）を使ってます😆❗️有料ですがめちゃくちゃオススメです❗️

[@user-nc5sm1rq2f]

@@hirocode ご返信ありがとうございます！ 有料なんですね！かなり便利なので検討してみます^ ^

[@KentaroxKondo]

コーディングだけじゃなくて、デザインもできた方が良いよな〜 figmaやりますか…😂

[@hirocode]

Figmaおすすめです😎‼️

[@user-1pati-binbotti]

質問です！ グリッド機能は何のために使うのですか？左右に余白を作って中心にデザインをしていくのが普通なのでしょうか。 始めたばかりでわからないので教えて頂きたいです！

[@hirocode]

コメントありがとうございます😆❗️ 左右に余白を作って中心にデザイン ＞＞　一般的なサイトは、大きなスクリーンでもコンテンツが見やすいようにサイトの横幅に制限をかけています（横に広がりすぎないように）。これを1000~1200pxくらいで設定することが多いため、グリッドでガイドを設けています！ グリッドを設けることで、シェイプやテキストを配置する際にガイドにスナップ（吸着？）してくれるので作業も便利になります😆❗️

[@user-1pati-binbotti]

@@hirocode ご回答ありがとうございます！ そういうことだったんですね！ それを踏まえてデザインしていきます！ ありがとうございます！！

[@oz.3140]

投稿ありがとうございます。Webデザインに興味があり、見よう見まねでFiguma触ってます。サイズ計算の電卓はどうやって使えばいいんですか？プラグインですか？

[@hirocode]

こちらこそコメントありがとうございます😆❗️ 動画内ではAlfredというアプリ使っています！ macお使いであればspotlightで同じように計算できます☺️♪

[@fuse-mo6on]

いつも動画でFigmaのお勉強させていただいております！ 質問があります。コンテンツの理想のサイズ比率についてです。 私もFigmaで1440pxサイズで制作しているのですが、コンテンツの横幅は880px~1000pxで縦幅サイズは気にして制作したことがなく プレビューで1画面で収まればいいかくらいでした。 ですが、1画面で見切れてしまうことがあるので、 ヘッター固定、PC下のメニューのバーを配慮してコンテンツを1画面で収めるには コンテンツ縦幅なんpx意識して作成すると良いかわかりますでしょうか？

[@hirocode]

コメントありがとうございます❗️ ページの高さについてはコンテンツ量に応じて変わってくるのでサイトごとで全く異なってきますが、最初に表示される領域であるファーストビューは、パソコンサイズで大体600pxから800pxくらいを目安にすることが多いです😆‼️

[@satsukifuse2313]

大変具体的にありがとうございます！！ 参考になります！

[@min-hg3nq]

初心者です。ワイヤーフレームはコンポーネント化とかせずにとりあえず見た目を作って、デザインカンプ作るときにコンポーネント化とかオートレイアウトすればいいですか？

[@hirocode]

おっしゃる通りです‼️

[@田村祐也-s8o]

変わった打鍵音のキーボードですね。何使われてるんですか？

[@hirocode]

コメントありがとうございます😊♪ キーボードはロジクールのMX Keysを使ってます😆❗️

[@アンク-h2c]

要素の置き換えが元の要素をコピーした上でCmd、Shift、R押したけどできないんですが理由があるのですか？

[@hirocode]

コメントありがとうございます😆❗️ 仕様は変わってないので、おそらく入力ミスの可能性が高いです🤔 cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか❓ また、右クリックから「貼り付けて置換」で同様の操作が実行されるので、こちらも合わせて使用したら原因わかるかもです❗️❗️

[@アンク-h2c]

@@hirocode cmdとshiftを押した状態でrを押すイメージですがいかがでしょうか＜これ試したけどさっきと同じ様に要素の名前変更にしかなりませんでした 貼り付けて置換とは右クリックした後にどこに出て来るのでしょうか(未だ出てこないので)？

[@hirocode]

cmd+r がリネームのショートカットなので、shiftキーが正しく効いていないようです🤔 オブジェクトを右クリック（通常のクリックでなく右クリックです。デスクトップでの右クリックと同様にコンテキストメニューが表示されます）すると、上から、コピー・ここに貼り付けに続けて3つ目に表示されます！レイヤーを右クリックした場合、上から2つ目に表示されます。

[@アンク-h2c]

@@hirocode コマンドとオプションと押したらできました！ わざわざありがとうございます

[@kotohakotonoha]

今figma勉強してます！これはなんですか？　/1:06:35

[@hirocode]

コメントありがとうございます🙇❗️cmd + yでアウトラインモードに切り替えることができます！このモードでは後ろにあるレイヤーやロックされているレイヤーを確認、選択することができます😆❗️