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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
yoko / Naoki Yokomachi
November 28, 2024
Technology
61
1
Share
Figmaで始める意識低い系Webデザイン
Figmaで始める意識低い系Webデザイン
『デザインなんも分からんけどとりあえずどのボタン押せばいい感じのデザインが作れますか?』
yoko / Naoki Yokomachi
November 28, 2024
More Decks by yoko / Naoki Yokomachi
See All by yoko / Naoki Yokomachi
Code Interpreter で、AIに安全に コードを書かせる。
yokomachi
0
7k
Building a Personal AI Agent with Strands Agents × Amazon Bedrock AgentCore
yokomachi
1
27
Strands Agents × Amazon Bedrock AgentCoreで パーソナルAIエージェントを作ろう
yokomachi
2
290
身体を持ったパーソナルAIエージェントの 可能性を探る開発
yokomachi
1
160
AITuberKit+Bedrock AgentCoreで作る 3Dキャラクターエージェント
yokomachi
2
2.3k
ご飯食べながらエージェントが開発できる。そう、Agentic Engineeringならね。
yokomachi
1
360
"人"が頑張るAI駆動開発
yokomachi
1
830
AIハッカソンで1人雰囲気SDDをした学びの共有
yokomachi
1
37
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
580
Other Decks in Technology
See All in Technology
20年前の「OSS革命」に学ぶ AI時代の生存戦略
samakada
0
300
AIを共同作業者にして書籍を執筆する方法 / How to Write a Book with AI as a Co-Creator
ama_ch
2
130
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
16k
レビューしきれない?それは「全て人力でのレビュー」だからではないでしょうか
amixedcolor
0
290
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
4
23k
Choose your own adventure in agentic design patterns
glaforge
0
120
JEDAI in Osaka 2026イントロ
taka_aki
0
280
ハーネスエンジニアリングの概要と設計思想
sergicalsix
9
4.3k
猫でもわかるKiro CLI(CDKコーディング編)
kentapapa
1
130
弁護士ドットコム株式会社 エンジニア職向け 会社紹介資料
bengo4com
1
130
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
74k
AI時代における技術的負債への取り組み
codenote
0
1.3k
Featured
See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
64
53k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8k
[SF Ruby Conf 2025] Rails X
palkan
2
960
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
380
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.8k
Abbi's Birthday
coloredviolet
2
7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Color Theory Basics | Prateek | Gurzu
gurzu
0
290
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4k
Building Adaptive Systems
keathley
44
3k
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の話でした 他にも様々な便利機能がたくさんあるわけですが、 必要になってから覚えればいいの精神で個人的に触っています ので、今日紹介した以上のことはほとんど知らない初心者なので、 私になにか聞かれてもわかりません! 一緒に勉強していきましょう!
文字と四角とレイアウトだけでこれくらいは作れるよ、という参考 アセットからアイコンだけ使用 ※これは今裏で作っているポートフォリオサイト
文字と四角とレイアウトだけでこれくらいは作れるよ、という参考 アセットからアイコンだけ使用 ※これは今裏で作っているポートフォリオサイト 完