Upgrade to Pro — share decks privately, control downloads, hide ads and more …

神速でワイヤーフレームを作るためのライブラリ

Avatar for 448jp | OKI Yoshiya 448jp | OKI Yoshiya
June 02, 2023
Design
1
860

 神速でワイヤーフレームを作るためのライブラリ

2023/6/2 DIST.39 「みんなのFigma」

Avatar for 448jp | OKI Yoshiya

448jp | OKI Yoshiya

June 02, 2023
Tweet

More Decks by 448jp | OKI Yoshiya

See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
Avatar for 448jp | OKI Yoshiya 448jp
3
300
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
Avatar for 448jp | OKI Yoshiya 448jp
0
3.7k
合意形成のためのFigma活用術
Avatar for 448jp | OKI Yoshiya 448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
Avatar for 448jp | OKI Yoshiya 448jp
0
380
Figmaで神速ドキュメント作成術
Avatar for 448jp | OKI Yoshiya 448jp
3
2.5k
今から始めるFigma超入門
Avatar for 448jp | OKI Yoshiya 448jp
0
1.6k
零細Web制作会社のリモートワーク事情
Avatar for 448jp | OKI Yoshiya 448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
Avatar for 448jp | OKI Yoshiya 448jp
2
760
コーディングを神速化するJetBrains IDEのご紹介～基本機能からHTML/CSSまで～
Avatar for 448jp | OKI Yoshiya 448jp
0
340

Other Decks in Design

See All in Design
BPStudy#213〜ビジネスアナリシスとDDD（ドメイン駆動設計）パネルディスカッション資料 / BPStudy213-panel
Avatar for haru860 haru860
0
450
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
480
PF_濵村ひろみ_202503
Avatar for 濱村ひろみ maru_design78
0
200
株式会社Muture_ソーシャル推進事業
Avatar for Muture muture
PRO
0
110
“ブロック”で作る、WordPress制作フロー変革のすすめ
Avatar for Koots koots2021
4
1.9k
ランドマークが光る！季節を彩るナビ体験 - Mobility Night #3 -
Avatar for tetsuya kitauji kitau
0
100
企画を動かすデザイナーの思考！「広げて絞る」アプローチ。
Avatar for Hikida Kan hikidakan
0
130
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
Avatar for 株式会社カミナシ kaminashi
2
1.8k
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
200
AIで加速するアクセシビリティのこれから
Avatar for Rikiya Ihara / magi magi1125
3
590
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.6k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.2k

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
282
13k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k

Transcript

  1. DIST.39 「みんなのFigma」 で を 作るための 神速 ワイヤーフレーム ライブラリ 合同会社世路庵　沖 良矢　|　2023.6.2

    FRI
  2. None

  3. ワイヤーフレームとは ⚫ ウェブページを構成する要素を列挙した設計図 ⚫ 制作前に情報設計について共有・合意するために作ります ⚫ 視覚表現の質、使いやすさは担保しません

  4. ワイヤーフレームの例

  5. なぜFigmaで作る？ チーム、クライアントの から みんなで作る ワイヤーフレームは作ったら終わりの一方通行な成果物ではありません。情報の順序、 重要度、分類、動線が適切かどうか、議論・検討を重ねて修正を繰り返します。世路庵 では職種に関わらずプロジェクトに携わる全員がワイヤーフレームにコミットします。

  6. ワイヤーフレームの辛み ⚫ 作るときにスピード感が出にくい ⚫ 一定の品質を保つことが難しい ⚫ つい見た目の作り込みをしようとしてしまう

  7. 部品を組み合わせるだけで ワイヤーフレームができたら いいのに……

  8. 作りました （デモ）

  9. ありがとうございました 合同会社世路庵　沖 良矢 @448jp