- 19
- 123 922
ゼロイチラボ
Japan
เข้าร่วมเมื่อ 15 เม.ย. 2019
自分でwebサイトを作れるようになりたい人のために、、figma、WorsPressのレッスンをお届けしています。
初めての方でも楽しんで取り組めるような内容で、おしゃれかつ実際のお仕事にも使えるような実用的なノウハウの提供を目指しています!
1日10分くらいの積み重ねでWebサイトの制作スキルを身につけて行きましょう!^^
初めての方でも楽しんで取り組めるような内容で、おしゃれかつ実際のお仕事にも使えるような実用的なノウハウの提供を目指しています!
1日10分くらいの積み重ねでWebサイトの制作スキルを身につけて行きましょう!^^
はじめてでも大丈夫!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
▶︎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の良さが伝わってきます。有難うございます。
コメント失礼します。 こちらの動画を参考に作成したバナーを、自身のポートフォリオに乗せても問題ないでしょうか?
今回もスムーズに模写できました!ありがとうございます!
癒やされる声で、親切丁寧にありがとうございます!すごくわかりやすいです(*^^*)
質問です。 ブロックテーマで、カスタム投稿をブロックパターンとして設定したい場合,どうしたらいいのでしょうか?
figmaでのバナー作成の方法がわからなかったのでとてもありがたいです(*'▽'*)
ありがとうございました!! とても、勉強になりました
初めまして。コメント失礼致します。 今figmaを勉強中の者です。 ダウンロードはできたのですが、zipを解凍してもファイルが開けません。FIGファイルというものになっています。もし開けない原因がわかりましたら教えていただきたいです。
この動画見ながら、作成しました!苦手意識が一気になくなりました!ありがとうございます!
勉強させていただいてます。 46分20秒ごろにCSS追加と編集をされてるところで質問させてください。 画像の大きさ調整に【①.first-view ②.smb-spider-slider__figure-wrapper ③img】としていますが②だけにmax-widthを当てるとうまくいくと考えたのですがうまくいきません。 CSSの質問となり恐縮ですが、なぜ①②③すべての指定が必要になるのでしょうか。
ものすごく基本的なことをお聞きしますが、Googleドライブからのダウンロード方法はどうやるのでしょうか?
上の欄にある「▶︎今回使う.figファイルのダウンロード」のリンクからダウンロードサイトにアクセスし、右上のダウンロードボタンを押下するとダウンロードが始まりますよー!
ヒラギノがでてきません
1から3まで通して1時間くらいでバナー制作ができて、デザインやバナー制作へのちっちゃなハードルを超えられました◎ありがとうございます! 他の動画でも勉強させていただきます♪
WordPressにはずっと苦手意識があり触るのが怖いレベルだったのですが、とても分かりやすい説明で、再度挑戦してみようかなという気持ちになりました‼︎ 素材も用意してくださってありがとうございます😊 動画を見返しながらやってみます✊
ヒラギノ出てこないのですがどうすれば良いのでしょうか?
質問です! スマホとPCでトップページを作り分けていますが、ページの読み込み速度に影響は与えないのでしょうか? 表示非表示の設定はしていても結局両方のコンテンツは読み込んでいると思うので 遅くなりませんか?
Figmaの使い方の学習に役立たせて頂いています!質問があるのですがこのWEBカンプはポートフォリオへの記載はOKでしょうか。NGでしょうか。よろしくお願いいたします。
ありがとうございます!模写したものとしては掲載OKです!
@@ゼロイチラボ 返信ありがとうございます。ポートフォリオが出来次第、掲載してみたいと思います。
w3がいつも出ないんですがどうしてでしょうか?
windowsはドラックで画像を突っ込めないんですけど分かりますか?
ありがとうございましたー!!
非常に参考になります!!! ありがとうございます😂
すごくわかりやすかったです! 初のエンド案件と、ポートフォリオの大幅改良のため、ワイヤーを作成する大事さを痛感してたところです!笑 無料でここまで本格的なワイヤーの作り方は、どこ探しても落ちてなかったので助かりました!ありがとうございます!!
めちゃくちゃわかりやすい動画ありがとうございました!色々なWebデザインの参考書探しても、HTMLタグとかの基本から始めるものや、完成したデザインを紹介するものばかりで、Webカンプをどうやればいいか右も左もわからず、Figma便利そうだけど使い方調べても全く出てこなかったので、このシリーズの動画ものすごく助かりました!
1から通しで拝見させて頂きました。メニューが英語でとてもとっつきにくかったのですが、この動画シリーズで数時間である程度の操作ができるようになりました。大変助かりました。貴重な動画、ご公開頂きありがとうございました。
ありがとうございます! PCとスマホ版の出来上がりカンプをまとめて書き出し保存(pngなどで) したいのですが、可能でしょうか。
今回のデモサイトの過程はこちらでも確認できます! rita-web.work/snowmonkey/ WordPressテーマSnow Monkeyはこちら snow-monkey.2inc.org/
ヒラギノが出てこないぴえん
日本語でこうした tutorial 系は珍しい 英語だと集中しないといけなくてコスト上がっちゃうから助かります
figuma チュートリアルありがとうございました! 形になっていくのがすごく楽しかったです!
多分、htmlとかやる前にこっちやって、ページがどのように構成されてるか学んだほうが勉強しやすいと思う(語彙力)
@@iHateGoodGussingChild ありがとうございます!そうですね!最初に設計部分から入るとコーディングの見通しもついていいと思います!^^
これは本当にありがたいです。。
めちゃめちゃわかりやすい!!! 一昨年ぐらいに一度トライしたのですが、日本語の情報が少なくて挫折してたのですが 全編拝見したら使えるようになりました! ありがとうございました!
ちづみさん、いつも素敵で分かりやすい動画をありがとうございます。最後にグループ化して名前をつけていく作業について、参考までに教えていただきたいのですが、今回のように英字でつけていくのが主流になっていますか?日本語よりも英字の方が好まれる、などありましたら、教えてください。
ありがとうございます!コードが英字(クラス名など)の関係が大きいですね!日本語でも全然ダメではないと思いますが、基本わかりやすい英字が良いと思います!^^
続き楽しみにしてます!WordPressの方もみてきます!
ありがとうございます!!ぜひぜひ〜!( ´ ▽ ` )
figmaについてあんまり情報がなくて困っていたのでめっちゃありがたいです!!
figma日本語の説明が確かにあまりないんですよね、、、ありがとうございます〜!^^
いい感じにできてますね! ぼくもfigma好きです。framer xもいいですよ!