0からはじめるWebデザイン_05

502 Views

August 07, 22

スライド概要

0からはじめるWEBデザイン #05 Figmaでサムネイル作成に挑戦!
8/8 (月) 20:30-

profile-image

テクノロジーやWEB制作まで、分かりやすく解説するイベントをやってます!

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
2.

オンライン学習アプリ 家庭で共有する電子カルテ VR交通事故疑似体験 VRを用いた被曝体験シェア SDGsボードゲーム

3.

一般社団法人 未来技術推進協会 テックコミュニティ「シンギュラリティ・ラボ」 WEBデザイナー くろ たく よう 黒 卓陽 1993年東京生まれ。日本と台湾のハーフ(名前は日本)。 法政大学デザイン工学研究科都市環境デザイン工学科卒業 地図制作会社、ゲーム会社のデザイン職を経て、現在WEBデザイナー。 シンラボでは、HP制作から、ブランディング、イベント企画などを担当。

4.

一般社団法人 未来技術推進協会 テックコミュニティ「シンギュラリティ・ラボ」 広報チームメンバー うがじん 宇賀神さん 1986年生まれ。東北大学経済学部経営学科卒業。 電機メーカー、広告、金融で広報職・営業職を経験、ITアプリのマーケ ティングを経て、現在は官公庁系の事業推進に携わる。 シンラボでは、HP制作から、ブランディング、イベント企画などを担当。

5.

一般社団法人 未来技術推進協会 テックコミュニティ「シンギュラリティ・ラボ」 広報チーム・事業創出チーム・テクノロジーチームメンバー ともさん 1993年生まれ。日本大学大学院理工学研究科精密機械工学専攻修了。 通信機器メーカにて、IoT機器、ネットワーク機器のソフトウェア開発に 従事後、システムインフラ構築業務を経て、現在は金融系システム運用 に携わる。 シンラボでは、HP制作から、ブランディング、イベント企画などを担当 する他、Webアプリケーション開発に携わる。

7.

本イベントの目的: 高クオリティーのWEB制作のハードルを 極限まで低くしたい 基礎を抑えつつ、全体像が見える感じにしていきます。 基礎と応用を行ったり来たりします。

8.

質問回答コーナー イベント申込サイトでご記入いただいた内容から

9.

T様 恥ずかしくないプロの仕上げをするにはどうすればよいか、知り たい たくさん作り、たくさんフィードバックを受け、恥をかくしかないですね〜 というか、デザイナーにとって大事なのは、恥ずかしさを捨てることだと思ってます。

10.

K様 資格がなくてもセンスの良いポスターを作るコツはなんでしょう か? たくさん作り、たくさんフィードバックを受け、恥をかくしかないですね〜 というか、デザイナーにとって大事なのは、恥ずかしさを捨てることだと思ってます。

11.

S様 Webアプリでタイマーを作ろうとしているのですが、どんなサ イトや本などが参考になるでしょうか? 機能だけならJavascript / jQueryの本とかですかね。 アプリ自体を作成したことはないので、あとはわからないです。m(_ _)m

12.

S様 ①WEBに限らない話ですが最新の技術的な情報はどのように収 集されてますか? ②バックアップやバージョン管理でGitHubの使い方は覚えたほ うが良いでしょうか? 宜しくお願いいたします。 ①このシンギュラリティ・ラボですよ!テック・コミュニティ強し。 ②なるたけWordpressでサイト構築し、マイグレーションでバックアップとってます。

13.

I様 figmaから実装へはどれだけシームレスに連携できるのかどうか 教えてください。 デザインによるんです。。が、ほとんどのサイトでシームレスにできないと思います。 レスポンシブを反映する仕組みが不十分なので。

14.

K様 photoshop, illustratorの勉強をしました。Figmaも使えると良い と聞いたので、学びたいです。 Illustratorと似てるので、1週間くらいで大体使えるようになると思います!

15.

N様 素人感がなくなるデザインのポイントがあれば伺いたいです。 「素人感がない」デザインをパクってみてください!まずは写経ですね。

16.

K様 ①Figmaはどのくらい現場で使われているのか。 ②XDとの違いは? ①僕の仕事では、ほとんどFigmaです。残りWordpress ②プレビューのしやすさ

17.

M様 おすすめの勉強方法 フリーランスへの近道 まさにこの勉強会で基礎知識を習得し、実践し、実績を積んでみてください。 1人でやるのが不安な方は、ぜひシンギュラリティ・ラボで。

18.

N様 カンプ制作やバナー制作の時、どのソフトが一番使いやすいです か。 カンプはFigma、バナーはIllustrator。個人差はあるかもですが、、

19.

他にご質問あれば、Zoomのコメントへ。 あとで質問コーナーも設けます!

21.

〜本日の講義〜 目的:Figmaに「慣れる」 ① Figmaの導入と扱い方(復習) ② サムネイルを作ってみましょう! ③ Figmaと利用シーン

22.

本日の講義① Figmaの導入と扱い方 簡単導入!今すぐやってみましょう♪

23.

Figmaをはじめる https://www.figma.com/ にアクセス

24.

Figmaをはじめる メールとパスワードで、アカウント作成

25.

新しいファイルを作成

26.

基本的な操作方法 フレームを作る 中身を描く ダウンロード

27.

基本的な操作方法:フレームを作る

28.

基本的な操作方法:フレームを作る

29.

基本的な操作方法:フレームを作る

30.

基本的な操作方法:中身を描く

31.

基本的な操作方法:中身を描く 四角形、丸、三角 など フリーで描く 文字

32.

基本的な操作方法:エクスポート

33.

本日の講義② 使ってみましょう!! サムネイル作成

34.

外部ツール:写真切り抜きサイト 写真の背景を 切り抜いてくれる https://www.remove.bg/

35.

外部ツール:写真切り抜きサイト https://www.remove.bg/

36.

背景を変えると...? https://www.remove.bg/

37.

何か、サムネイルを作ってみましょう!! https://thumbnail-gallery.net/ https://81-web.com/

38.

本日の講義③ Figmaと利用シーン プロトタイピングとは?

39.

Figmaはサムネイル作成に向いていない

40.

なぜ、Adobe Illustratorを使うのか? • フォント • テクスチャ作成 • ブラシツール がデザイン制作では圧倒的。 さらに、 • 複数アートボードの同時書き出し が実務レベルで圧倒的。

41.

Figmaは、WEBデザインの「プロトタイプ」 ①編集が楽! ②コーディングする人に伝わる ③クライアントに伝わる コーディング前にフィードバックを完結させる

42.

なぜFigmaを使うのか? 理由: ・WEBアプリだから(ログインするとすぐ使える♪) ・プラグインが充実 ・無料だから ・資金調達100億ドルを達成し将来性があるから

43.

<< トークタイム >> ID:@009rkfgg 「シンラボ」公式LINEできました! 本日の資料や、今後のイベントのご案内をお送りさせて いただきます。 QRかID検索で友達追加後、参加者名をお送りください。

44.

イベント企画・運営・登壇者、募集! イベント参加者数:月200名以上 イベント開催実績:約400回 Techplayフォロワー:2000以上 ID:@009rkfgg ご興味がある方、LINEにいただければと思います! QRかID検索で友達追加後、参加者名をお送りください。

45.

HP制作・運営してみたい方 運用サイト:5つ オウンドメディア制作実績あり 未経験から転職実績あり オンライン説明会へ、お気軽に! https://sinlab.future-tech-association.org/online-session/

46.

次回:0からはじめるWordpress 次回:0からはじめるWEBデザイン SimilarWebで探す カスタムフィールドと デザインアイデア カスタム投稿タイプ オウンドメディアも、自由に作る 8/18(木) 20:30〜 8/15(月) 20:30〜