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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• https://www.figma.com/

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

新しいファイルを作成

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

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

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

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

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

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

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

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

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

• https://www.remove.bg/

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

• https://www.remove.bg/

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

• https://www.remove.bg/

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

• https://thumbnail-gallery.net/
• https://81-web.com/

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

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

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

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

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

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

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

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

• https://sinlab.future-tech-association.org/online-session/

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