ゼロイチラボ
ゼロイチラボ
  • 19
  • 123 922
はじめてでも大丈夫!Figmaの基本機能でバナーを作ろう!③
今回はカフェのバナーを作っていきながらFigmaでできる基本機能とよく使うポイントなどを抑えていきましょう!^^
▶︎figmaのインストールページ
www.figma.com/downloads/
▶︎詳しいインストール手順はこちらをご覧ください。
th-cam.com/video/EdAz30Y8NMc/w-d-xo.html
▶︎今回使う.figファイルのダウンロード
drive.google.com/file/d/1mzXFaUueMFBG2FxVWqmVriWncRhVhvQW/view?usp=sharing
----
▶︎FigmaでWebデザインをしていく動画はこちら!(合わせてどうぞ!)
th-cam.com/play/PLEGLLj-BzrHm3TTP3HQ95FbhZZjKjmVTF.html
มุมมอง: 1 850

วีดีโอ

はじめてでも大丈夫!Figmaの基本機能でバナーを作ろう!②
มุมมอง 2.5K2 ปีที่แล้ว
今回はカフェのバナーを作っていきながらFigmaでできる基本機能とよく使うポイントなどを抑えていきましょう!^^ ▶︎figmaのインストールページ www.figma.com/downloads/ ▶︎詳しいインストール手順はこちらをご覧ください。 th-cam.com/video/EdAz30Y8NMc/w-d-xo.html ▶︎今回使う.figファイルのダウンロード drive.google.com/file/d/1mzXFaUueMFBG2FxVWqmVriWncRhVhvQW/view?usp=sharing ▶︎FigmaでWebデザインをしていく動画はこちら!(合わせてどうぞ!) th-cam.com/play/PLEGLLj-BzrHm3TTP3HQ95FbhZZjKjmVTF.html
はじめてでも大丈夫!Figmaの基本機能でバナーを作ろう!①
มุมมอง 8K2 ปีที่แล้ว
今回はカフェのバナーを作っていきながらFigmaでできる基本機能とよく使うポイントなどを抑えていきましょう!^^ ▶︎figmaのインストールページ www.figma.com/downloads/ ▶︎詳しいインストール手順はこちらをご覧ください。 th-cam.com/video/EdAz30Y8NMc/w-d-xo.html ▶︎今回使う.figファイルのダウンロード drive.google.com/file/d/1mzXFaUueMFBG2FxVWqmVriWncRhVhvQW/view?usp=sharing ▶︎FigmaでWebデザインをしていく動画はこちら!(合わせてどうぞ!) th-cam.com/play/PLEGLLj-BzrHm3TTP3HQ95FbhZZjKjmVTF.html
WordPressのテーマ&ブロックエディターでサイトのレイアウトをつくろう第1弾①
มุมมอง 1.8K2 ปีที่แล้ว
WordPressのテーマ&ブロックエディターでサイトを作ろう第1弾です^^ 今回はグラノーラのサイトを作りながら、WordPressの環境構築の仕方、テーマでの機能の把握、ブロックエディターでできることを学びます。 ▶︎デモサイト rita-web.work/granola/ ▶︎LOCAL(環境構築) localwp.com/ ▶︎UNPLANのTwitter unplan_official ▶︎Twitter埋め込み publish. # ▶︎フォント読み込み(Google Fonts) fonts.google.com/ ▶︎WordPreessテーマ:Arkhe arkhe-theme.com/ja/ 運営:ちづみ 098ra0209
WordPressのテーマ&ブロックエディターでサイトのレイアウトをつくろう第1弾⑤
มุมมอง 4873 ปีที่แล้ว
WordPressのテーマ&ブロックエディターでサイトを作ろう第一弾です^^ 今回はグラノーラのサイトを作りながら、WordPressの環境構築の仕方、テーマでの機能の把握、ブロックエディターでできることを学びます。 ▶︎デモサイト rita-web.work/granola/ ▶︎LOCAL(環境構築) localwp.com/ ▶︎UNPLANのTwitter unplan_official ▶︎Twitter埋め込み publish. # ▶︎フォント読み込み(Google Fonts) fonts.google.com/ ▶︎WordPreessテーマ:Arkhe arkhe-theme.com/ja/ 運営:ちづみ 098ra0209
WordPressのテーマ&ブロックエディターでサイトのレイアウトをつくろう第1弾④
มุมมอง 4333 ปีที่แล้ว
WordPressのテーマ&ブロックエディターでサイトを作ろう第一弾です^^ 今回はグラノーラのサイトを作りながら、WordPressの環境構築の仕方、テーマでの機能の把握、ブロックエディターでできることを学びます。 ▶︎デモサイト rita-web.work/granola/ ▶︎LOCAL(環境構築) localwp.com/ ▶︎UNPLANのTwitter unplan_official ▶︎Twitter埋め込み publish. # ▶︎フォント読み込み(Google Fonts) fonts.google.com/ ▶︎WordPreessテーマ:Arkhe arkhe-theme.com/ja/ 運営:ちづみ 098ra0209
WordPressのテーマ&ブロックエディターでサイトのレイアウトをつくろう第1弾③
มุมมอง 6933 ปีที่แล้ว
WordPressのテーマ&ブロックエディターでサイトを作ろう第一弾です^^ 今回はグラノーラのサイトを作りながら、WordPressの環境構築の仕方、テーマでの機能の把握、ブロックエディターでできることを学びます。 ▶︎デモサイト rita-web.work/granola/ ▶︎LOCAL(環境構築) localwp.com/ ▶︎UNPLANのTwitter unplan_official ▶︎Twitter埋め込み publish. # ▶︎フォント読み込み(Google Fonts) fonts.google.com/ ▶︎WordPreessテーマ:Arkhe arkhe-theme.com/ja/ 運営:ちづみ 098ra0209
WordPressのテーマ&ブロックエディターでサイトのレイアウトをつくろう第1弾②
มุมมอง 8523 ปีที่แล้ว
WordPressのテーマ&ブロックエディターでサイトを作ろう第一弾です^^ 今回はグラノーラのサイトを作りながら、WordPressの環境構築の仕方、テーマでの機能の把握、ブロックエディターでできることを学びます。 ▶︎デモサイト rita-web.work/granola/ ▶︎LOCAL(環境構築) localwp.com/ ▶︎UNPLANのTwitter unplan_official ▶︎Twitter埋め込み publish. # ▶︎フォント読み込み(Google Fonts) fonts.google.com/ ▶︎WordPreessテーマ:Arkhe arkhe-theme.com/ja/ 運営:ちづみ 098ra0209
FigmaでWebカンプを作ろう⑦ハンバーガーメニューをつくろう
มุมมอง 9K4 ปีที่แล้ว
FigmaでWebカンプを作ろうシリーズ第一弾最終回です! 今回はハンバーガーメニューの中身とホバーアクションを作っていきます! Figmaを使ったことのない方、Webデザインをしてみたい方向けに解説しています。 ▼Figmaの詳細はこちら www.figma.com/ ▼Webカンプの素材提供は高知県のカツオゲストハウスさんです! 施設も可愛いし、高知の観光はここに行けば色々教えてくれます!^^ katuo-gh.com/ ▼figma・WordPressについて講座を全国各地で開催しております!仕事の獲得なども細かくレクチャーしてますので、ぜひご参加ください! skill-lab.site/
FigmaでWebカンプをつくろう!⑥スマホ版デザインをつくろう!
มุมมอง 9K4 ปีที่แล้ว
FigmaでWebカンプを作ろうシリーズ第一弾です! 今回はスマホレスポンシブを作っていきます! Figmaを使ったことのない方、Webデザインをしてみたい方向けに解説しています。 ▼Figmaの詳細はこちら www.figma.com/ ▼Webカンプの素材提供は高知県のカツオゲストハウスさんです! 施設も可愛いし、高知の観光はここに行けば色々教えてくれます!^^ katuo-gh.com/
FigmaでWebカンプをつくろう⑤PC版を完成させよう
มุมมอง 6K4 ปีที่แล้ว
FigmaでWebカンプを作ろうシリーズ第一弾です! 今回はPC版を完成させていきます! Figmaを使ったことのない方、Webデザインをしてみたい方向けに解説しています。 ▼Figmaの詳細はこちら www.figma.com/ ▼Webカンプの素材提供は高知県のカツオゲストハウスさんです! 施設も可愛いし、高知の観光はここに行けば色々教えてくれます!^^ katuo-gh.com/ ▼figma・WordPressについて講座を全国各地で開催しております!仕事の獲得なども細かくレクチャーしてますので、ぜひご参加ください! skill-lab.site/
FigmaでWebカンプをしよう!④コンポーネントをつくろう!
มุมมอง 7K4 ปีที่แล้ว
FigmaでWebカンプをしよう!④コンポーネントをつくろう!
FigmaでWebカンプを作ろう!③コンセプト部分をつくろう
มุมมอง 8K4 ปีที่แล้ว
FigmaでWebカンプを作ろう!③コンセプト部分をつくろう
FigmaでWebカンプを作ろう!②ヘッダーをつくろう
มุมมอง 15K4 ปีที่แล้ว
FigmaでWebカンプを作ろう!②ヘッダーをつくろう
FigmaでWebカンプを作ろう!①Figmaをインストール&準備をしよう!
มุมมอง 31K4 ปีที่แล้ว
FigmaでWebカンプを作ろう!①Figmaをインストール&準備をしよう!

ความคิดเห็น

  • @bbcfalcon6205
    @bbcfalcon6205 7 วันที่ผ่านมา

    親切でプロフェッショナルで丁寧で、大変助かっています。Figmaの良さが伝わってきます。有難うございます。

  • @田中愛-l7s
    @田中愛-l7s 5 หลายเดือนก่อน

    コメント失礼します。 こちらの動画を参考に作成したバナーを、自身のポートフォリオに乗せても問題ないでしょうか?

  • @by-li6hw
    @by-li6hw 5 หลายเดือนก่อน

    今回もスムーズに模写できました!ありがとうございます!

  • @by-li6hw
    @by-li6hw 5 หลายเดือนก่อน

    癒やされる声で、親切丁寧にありがとうございます!すごくわかりやすいです(*^^*)

  • @yuuki-ww3hz
    @yuuki-ww3hz 10 หลายเดือนก่อน

    質問です。 ブロックテーマで、カスタム投稿をブロックパターンとして設定したい場合,どうしたらいいのでしょうか?

  • @user-chiffoncake
    @user-chiffoncake ปีที่แล้ว

    figmaでのバナー作成の方法がわからなかったのでとてもありがたいです(*'▽'*)

  • @ホワイトボードアートチャンネル
    @ホワイトボードアートチャンネル 2 ปีที่แล้ว

    ありがとうございました!! とても、勉強になりました

  • @タマゴユデ
    @タマゴユデ 2 ปีที่แล้ว

    初めまして。コメント失礼致します。 今figmaを勉強中の者です。 ダウンロードはできたのですが、zipを解凍してもファイルが開けません。FIGファイルというものになっています。もし開けない原因がわかりましたら教えていただきたいです。

  • @TI-ss1uk
    @TI-ss1uk 2 ปีที่แล้ว

    この動画見ながら、作成しました!苦手意識が一気になくなりました!ありがとうございます!

  • @kazuyanakayama7077
    @kazuyanakayama7077 2 ปีที่แล้ว

    勉強させていただいてます。 46分20秒ごろにCSS追加と編集をされてるところで質問させてください。 画像の大きさ調整に【①.first-view ②.smb-spider-slider__figure-wrapper ③img】としていますが②だけにmax-widthを当てるとうまくいくと考えたのですがうまくいきません。 CSSの質問となり恐縮ですが、なぜ①②③すべての指定が必要になるのでしょうか。

  • @suzushiro0197
    @suzushiro0197 2 ปีที่แล้ว

    ものすごく基本的なことをお聞きしますが、Googleドライブからのダウンロード方法はどうやるのでしょうか?

    • @TatsuyaKato-d2k
      @TatsuyaKato-d2k 2 ปีที่แล้ว

      上の欄にある「▶︎今回使う.figファイルのダウンロード」のリンクからダウンロードサイトにアクセスし、右上のダウンロードボタンを押下するとダウンロードが始まりますよー!

  • @jptk6645
    @jptk6645 2 ปีที่แล้ว

    ヒラギノがでてきません

  • @lifecoachizumi
    @lifecoachizumi 2 ปีที่แล้ว

    1から3まで通して1時間くらいでバナー制作ができて、デザインやバナー制作へのちっちゃなハードルを超えられました◎ありがとうございます! 他の動画でも勉強させていただきます♪

  • @タカギュウ
    @タカギュウ 3 ปีที่แล้ว

    WordPressにはずっと苦手意識があり触るのが怖いレベルだったのですが、とても分かりやすい説明で、再度挑戦してみようかなという気持ちになりました‼︎ 素材も用意してくださってありがとうございます😊 動画を見返しながらやってみます✊

  • @tashu1329
    @tashu1329 3 ปีที่แล้ว

    ヒラギノ出てこないのですがどうすれば良いのでしょうか?

  • @kakaoringo0929
    @kakaoringo0929 3 ปีที่แล้ว

    質問です! スマホとPCでトップページを作り分けていますが、ページの読み込み速度に影響は与えないのでしょうか? 表示非表示の設定はしていても結局両方のコンテンツは読み込んでいると思うので 遅くなりませんか?

  • @荒井悠介
    @荒井悠介 3 ปีที่แล้ว

    Figmaの使い方の学習に役立たせて頂いています!質問があるのですがこのWEBカンプはポートフォリオへの記載はOKでしょうか。NGでしょうか。よろしくお願いいたします。

    • @ゼロイチラボ
      @ゼロイチラボ 3 ปีที่แล้ว

      ありがとうございます!模写したものとしては掲載OKです!

    • @荒井悠介
      @荒井悠介 3 ปีที่แล้ว

      @@ゼロイチラボ 返信ありがとうございます。ポートフォリオが出来次第、掲載してみたいと思います。

  • @channelhibari7305
    @channelhibari7305 3 ปีที่แล้ว

    w3がいつも出ないんですがどうしてでしょうか?

  • @channelhibari7305
    @channelhibari7305 3 ปีที่แล้ว

    windowsはドラックで画像を突っ込めないんですけど分かりますか?

  • @ra-w-f8i
    @ra-w-f8i 3 ปีที่แล้ว

    ありがとうございましたー!!

  • @manfishing1716
    @manfishing1716 3 ปีที่แล้ว

    非常に参考になります!!! ありがとうございます😂

  • @siisaa_diet
    @siisaa_diet 3 ปีที่แล้ว

    すごくわかりやすかったです! 初のエンド案件と、ポートフォリオの大幅改良のため、ワイヤーを作成する大事さを痛感してたところです!笑 無料でここまで本格的なワイヤーの作り方は、どこ探しても落ちてなかったので助かりました!ありがとうございます!!

  • @ともや-h9h
    @ともや-h9h 3 ปีที่แล้ว

    めちゃくちゃわかりやすい動画ありがとうございました!色々なWebデザインの参考書探しても、HTMLタグとかの基本から始めるものや、完成したデザインを紹介するものばかりで、Webカンプをどうやればいいか右も左もわからず、Figma便利そうだけど使い方調べても全く出てこなかったので、このシリーズの動画ものすごく助かりました!

  • @KeisukeOrikasa
    @KeisukeOrikasa 3 ปีที่แล้ว

    1から通しで拝見させて頂きました。メニューが英語でとてもとっつきにくかったのですが、この動画シリーズで数時間である程度の操作ができるようになりました。大変助かりました。貴重な動画、ご公開頂きありがとうございました。

  • @hisa2152
    @hisa2152 3 ปีที่แล้ว

    ありがとうございます! PCとスマホ版の出来上がりカンプをまとめて書き出し保存(pngなどで) したいのですが、可能でしょうか。

  • @ゼロイチラボ
    @ゼロイチラボ 3 ปีที่แล้ว

    今回のデモサイトの過程はこちらでも確認できます! rita-web.work/snowmonkey/ WordPressテーマSnow Monkeyはこちら snow-monkey.2inc.org/

  • @yanagi9008
    @yanagi9008 3 ปีที่แล้ว

    ヒラギノが出てこないぴえん

  • @kisotetsu641
    @kisotetsu641 4 ปีที่แล้ว

    日本語でこうした tutorial 系は珍しい 英語だと集中しないといけなくてコスト上がっちゃうから助かります

  • @iHateGoodGussingChild
    @iHateGoodGussingChild 4 ปีที่แล้ว

    figuma チュートリアルありがとうございました! 形になっていくのがすごく楽しかったです!

    • @iHateGoodGussingChild
      @iHateGoodGussingChild 4 ปีที่แล้ว

      多分、htmlとかやる前にこっちやって、ページがどのように構成されてるか学んだほうが勉強しやすいと思う(語彙力)

    • @ゼロイチラボ
      @ゼロイチラボ 4 ปีที่แล้ว

      @@iHateGoodGussingChild ありがとうございます!そうですね!最初に設計部分から入るとコーディングの見通しもついていいと思います!^^

  • @hiiiii_hoe
    @hiiiii_hoe 4 ปีที่แล้ว

    これは本当にありがたいです。。

  • @HAMAJIGOGO
    @HAMAJIGOGO 4 ปีที่แล้ว

    めちゃめちゃわかりやすい!!! 一昨年ぐらいに一度トライしたのですが、日本語の情報が少なくて挫折してたのですが 全編拝見したら使えるようになりました! ありがとうございました!

  • @kaho9743
    @kaho9743 4 ปีที่แล้ว

    ちづみさん、いつも素敵で分かりやすい動画をありがとうございます。最後にグループ化して名前をつけていく作業について、参考までに教えていただきたいのですが、今回のように英字でつけていくのが主流になっていますか?日本語よりも英字の方が好まれる、などありましたら、教えてください。

    • @ゼロイチラボ
      @ゼロイチラボ 4 ปีที่แล้ว

      ありがとうございます!コードが英字(クラス名など)の関係が大きいですね!日本語でも全然ダメではないと思いますが、基本わかりやすい英字が良いと思います!^^

  • @moimiful
    @moimiful 4 ปีที่แล้ว

    続き楽しみにしてます!WordPressの方もみてきます!

    • @ゼロイチラボ
      @ゼロイチラボ 4 ปีที่แล้ว

      ありがとうございます!!ぜひぜひ〜!( ´ ▽ ` )

  • @moimiful
    @moimiful 4 ปีที่แล้ว

    figmaについてあんまり情報がなくて困っていたのでめっちゃありがたいです!!

    • @ゼロイチラボ
      @ゼロイチラボ 4 ปีที่แล้ว

      figma日本語の説明が確かにあまりないんですよね、、、ありがとうございます〜!^^

  • @uxlordsimplifyingdesignpro5544
    @uxlordsimplifyingdesignpro5544 4 ปีที่แล้ว

    いい感じにできてますね! ぼくもfigma好きです。framer xもいいですよ!