Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figmaで始める意識低い系Webデザイン
Search
yoko
November 28, 2024
Technology
1
38
Figmaで始める意識低い系Webデザイン
Figmaで始める意識低い系Webデザイン
『デザインなんも分からんけどとりあえずどのボタン押せばいい感じのデザインが作れますか?』
yoko
November 28, 2024
Tweet
Share
More Decks by yoko
See All by yoko
デモ実装で考えるStrands Agentsのいいところ
yokomachi
2
350
ローカルLLMでキャットボットを作ってみた🐈 feat. LangSmith, MCP
yokomachi
1
21
AIエディタ 「Cursor」のすゝめ
yokomachi
1
54
ソフトウェアエンジニア、 セルフプロデュースを始める
yokomachi
1
17
今アツい生成AIツール紹介(2024年10月版)
yokomachi
1
68
JAWS Day 2024に半日参加してきたよ
yokomachi
1
31
AWS re:Invent2023 参加レポート
yokomachi
1
23
最近参加した勉強会・イベントをまとめてレポートするLT(2024/6)
yokomachi
1
32
新潟県柏崎市の「会議改善ガイドライン」を読むLT
yokomachi
1
25
Other Decks in Technology
See All in Technology
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
190
SAE J1939シミュレーション環境構築
daikiokazaki
0
130
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
0
120
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
110
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
100
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.1k
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
210
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
11
3.1k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
7k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Docker and Python
trallard
45
3.5k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Transcript
デザインなんも分からんけど とりあえずどのボタン押せば いい感じのデザインが作れますか? Figmaで始める意識低い系 Webデザイン
yokomachi Naoki 好きな食べ物 茄子
目次 01. 01. Figmaという便利ツールを前に 立ち尽くす初心者 02. 02. 結局文字と四角形が作れれば 最低限OK 03.
03. レイアウトを 使いこなせれば気分は上級者 04. 04. トレンドカラー?カラーパレット? いいからちょっと薄くさせとけばOK 05. 05. 困ったときのアセット 困ってないときもアセット
01. 01. Figmaという便利ツールを前に立ち尽くす初心者
よっしゃ1からWebサイトつくるか! いつもは簡単にお絵かき→コード書き始めてたけど 今回はデザインツールでちゃんとしたやつ作ってみるか!
None
?
… (とりあえずテキストボックスを置いてみる)
None
?
この感じ… ちょっと昔「絵でも描いてみるか」と思ってペンタブ買 ってクリスタを開いた時の感覚と似ている… 何から描き始めればいいのかわからなかった… 筆があっても絵の描き方を知らなかったんだ… ツールがあっても何から始めればいいのかわからない… デザインってなんだ… 何から始めればいいんだ…
ググるか
4 Figmaでできること(例) 文字や図形を入れられるよ 1 オートレイアウトでいい感じに揃えられるよ 2 コンポーネントを作ってインスタンスとして再利用できるよ 3 アセットやプラグインが使えるよ 4
共同編集や開発者向けのdevモードがあるよ 5 などなど…
?
Figmaで何ができるかは出てくるけど、 何からやればいいのかわからない
01. 01. Figmaという便利ツールを前に立ち尽くす初心者 完
02. 02. 結局文字と四角形が作れれば最低限OK
None
!!
そうだ、いつものお絵かきなんて
へっだ とっぷ さい どめ にゅ ー なんか ふった
って感じだ 最悪文字と四角形だけあればええんや
①フレームを選択 四角形(ページ)を作ります。 ②とりあえず デスクトップサイズを選択 ③するとこういう真っ白のページができます
四角形(ヘッダ)を作ります。 ①フレームを選択 ②ヘッダの位置に配置 幅とかは勝手に親要素に吸い付くよ ③分かりやすいように囲み線をつけるよ
文字(サイトタイトル)を入れます。 ①テキストを選択 ②ヘッダの中に配置 ③文字サイズはここから変更
できた! 完璧だ!
02. 02. 結局文字と四角形が作れれば最低限OK 完
03. 03. レイアウトを 使いこなせれば気分は上級者
うーん ヘッダにメニューのリンクを並べたいけど、 なんか手動で位置揃えるのってダサくね?
手動で位置揃え 手動でやってたらツールの意味なくない?
なるほどこういうときのオートレイアウト
オートレイアウト ①オートレイアウトアイコンをクリック ②揃え方向と、要素の間隔を設定 ③自動で整頓されるよ
階層構造にもできる 段組み、自動で改行、後から要素の追加なんかも楽々 ロゴを作ってみる レイアウト機能を使うとちょっと凝ったことも簡単
四角を作る 文字を入れる レイアウトを整える 基本は 👇の繰り返し
03. 03. レイアウトを 使いこなせれば気分は上級者 完
04. 04. トレンドカラー?カラーパレット? いいからちょっと薄くさせとけばOK
ヘッダみたいなものは作れたけどなんかダサいな
色を変えます 右側の「塗り(Fill)」で色を変えられる カスタムでカラーコード指定してもいいが、 デフォのライブラリから選択するのもいい
ちょっと良くなった? フォントをNoto Sansとかにして原色やめとけば丸い
04. 04. トレンドカラー?カラーパレット? いいからちょっと薄くさせとけばOK 完
05. 05. 困ったときのアセット 困ってないときもアセット
簡単なものは自分で作れるけど アイコンとか自作はしてられないな
アセットあります! 多分デフォで使えるアセットがいくつかあります
普段Webサイト見ている割に、 デザインしようと思うとテンプレがわからん
アセットあります!
(Figma Simple Design Systemは) MITライセンスだから使い放題や! (※利用規約には従いましょう)
05. 05. 困ったときのアセット 困ってないときもアセット 完
以上、まず文字と四角形から作るFigmaの話でした 他にも様々な便利機能がたくさんあるわけですが、 必要になってから覚えればいいの精神で個人的に触っています ので、今日紹介した以上のことはほとんど知らない初心者なので、 私になにか聞かれてもわかりません! 一緒に勉強していきましょう!
文字と四角とレイアウトだけでこれくらいは作れるよ、という参考 アセットからアイコンだけ使用 ※これは今裏で作っているポートフォリオサイト
文字と四角とレイアウトだけでこれくらいは作れるよ、という参考 アセットからアイコンだけ使用 ※これは今裏で作っているポートフォリオサイト 完