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

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

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

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

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

Avatar for 448jp | OKI Yoshiya

448jp | OKI Yoshiya

June 02, 2023

More Decks by 448jp | OKI Yoshiya

See All by 448jp | OKI Yoshiya
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
11k
人はなぜコミュニティとつながると幸せを感じるのか
Avatar for 448jp | OKI Yoshiya 448jp
3
480
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
Avatar for 448jp | OKI Yoshiya 448jp
0
4.3k
合意形成のためのFigma活用術
Avatar for 448jp | OKI Yoshiya 448jp
1
270
書く・即・DONEな仕組みをNuxtで作る
Avatar for 448jp | OKI Yoshiya 448jp
0
470
Figmaで神速ドキュメント作成術
Avatar for 448jp | OKI Yoshiya 448jp
3
2.8k
今から始めるFigma超入門
Avatar for 448jp | OKI Yoshiya 448jp
0
1.8k
零細Web制作会社のリモートワーク事情
Avatar for 448jp | OKI Yoshiya 448jp
0
550
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
Avatar for 448jp | OKI Yoshiya 448jp
2
860

Other Decks in Design

See All in Design
分散するデザイン組織をつなぐ　デザインミートアップの取り組み/nikkei-tech-talk49
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
160
I.A. como meio, não como fim. Como avaliar o valor entregue?
Avatar for Viviane Delvequio videlvequio
0
450
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
320
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.6k
Debiasing Your Software Design Decision-Making @ Flowcon '26
Avatar for Kenny Baas-Schwegler baasie
1
150
「親切なオンボーディング」 が招く罠　ー　AI時代のUXデザイン
Avatar for 小神 godlingkogami
1
170
Edmonton River Slidedeck
Avatar for Edmonton River edmontonriver
0
210
(2026 FlowCon Keynote) Sociotechnical Architecture Finding Flow
Avatar for xinyao xinyao
0
110
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
2
3.4k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
170
2026-04-06 CMU School of Design "Vision-Driven Design"
Avatar for Hiroshi Ishii ishii_mit
0
130

Featured

See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.1k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
580
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
730
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
440
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
380
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k

Transcript

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

    FRI
  2. None

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

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

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

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

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

  8. 作りました （デモ）

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