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

Поделиться
HTML-код
  • Опубликовано: 4 авг 2024

Комментарии • 61

  • @kico9462
    @kico9462 Год назад +8

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

    • @hirocode
      @hirocode  Год назад +2

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

  • @bob896
    @bob896 3 месяца назад +3

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

    • @hirocode
      @hirocode  3 месяца назад +2

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

  • @yu3-zd5oj
    @yu3-zd5oj 5 месяцев назад +2

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

    • @hirocode
      @hirocode  5 месяцев назад

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

  • @yura_san
    @yura_san Год назад +4

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

    • @hirocode
      @hirocode  Год назад +1

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

  • @naninani14889
    @naninani14889 Год назад +3

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

    • @hirocode
      @hirocode  Год назад +1

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

  • @kuronecotan
    @kuronecotan 6 месяцев назад +1

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

    • @hirocode
      @hirocode  6 месяцев назад

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

  • @user-ol4ku4vx8x
    @user-ol4ku4vx8x Год назад +6

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

    • @hirocode
      @hirocode  Год назад +2

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

  • @user-ef2pf7fw6z
    @user-ef2pf7fw6z 16 дней назад +1

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

    • @hirocode
      @hirocode  15 дней назад

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

  • @user-vd6cg1kn8n
    @user-vd6cg1kn8n 9 месяцев назад +1

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

    • @hirocode
      @hirocode  9 месяцев назад +1

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

  • @user-fx6hc6gr8n
    @user-fx6hc6gr8n Год назад +2

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

    • @hirocode
      @hirocode  Год назад +1

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

    • @user-fx6hc6gr8n
      @user-fx6hc6gr8n Год назад +1

      ありがとうございます!

  • @user-nc5sm1rq2f
    @user-nc5sm1rq2f 8 месяцев назад +1

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

    • @hirocode
      @hirocode  8 месяцев назад

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

    • @user-nc5sm1rq2f
      @user-nc5sm1rq2f 8 месяцев назад +1

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

  • @Aya-uy4hq
    @Aya-uy4hq 3 месяца назад

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

    • @hirocode
      @hirocode  3 месяца назад +1

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

  • @oz.3140
    @oz.3140 Год назад +2

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

    • @hirocode
      @hirocode  Год назад +1

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

  • @user-hq6cg7km1k
    @user-hq6cg7km1k Год назад +2

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

    • @hirocode
      @hirocode  Год назад

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

  • @user-ro2os6oj9t
    @user-ro2os6oj9t Год назад +1

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

    • @hirocode
      @hirocode  Год назад +1

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

  • @punz.3rd
    @punz.3rd Год назад +2

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

    • @hirocode
      @hirocode  Год назад

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

  • @fuse-mo6on
    @fuse-mo6on 2 месяца назад +1

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

    • @hirocode
      @hirocode  2 месяца назад

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

    • @satsukifuse2313
      @satsukifuse2313 2 месяца назад +1

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

  • @min-hg3nq
    @min-hg3nq Месяц назад

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

    • @hirocode
      @hirocode  28 дней назад

      おっしゃる通りです‼️

  • @user-pn4fk9ew5h
    @user-pn4fk9ew5h 7 месяцев назад +1

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

    • @hirocode
      @hirocode  7 месяцев назад +1

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

    • @user-pn4fk9ew5h
      @user-pn4fk9ew5h 7 месяцев назад +1

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

    • @hirocode
      @hirocode  7 месяцев назад +1

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

    • @user-pn4fk9ew5h
      @user-pn4fk9ew5h 7 месяцев назад +1

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

  • @user-tx9re5mg2x
    @user-tx9re5mg2x 6 месяцев назад +1

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

    • @hirocode
      @hirocode  6 месяцев назад

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

    • @user-tx9re5mg2x
      @user-tx9re5mg2x 6 месяцев назад +1

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

  • @user-1pati-binbotti
    @user-1pati-binbotti 3 месяца назад +1

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

    • @hirocode
      @hirocode  3 месяца назад +1

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

    • @user-1pati-binbotti
      @user-1pati-binbotti 3 месяца назад +1

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

  • @user-tx9re5mg2x
    @user-tx9re5mg2x 5 месяцев назад +1

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

    • @hirocode
      @hirocode  5 месяцев назад

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

  • @user-kl4mp7fe5b
    @user-kl4mp7fe5b 22 дня назад +1

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

    • @hirocode
      @hirocode  22 дня назад

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

    • @user-kl4mp7fe5b
      @user-kl4mp7fe5b 21 день назад +1

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

    • @hirocode
      @hirocode  21 день назад

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

    • @user-kl4mp7fe5b
      @user-kl4mp7fe5b 21 день назад

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

  • @kotohakotonoha
    @kotohakotonoha 5 месяцев назад +1

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

    • @hirocode
      @hirocode  5 месяцев назад

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