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
870

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

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
320
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
Avatar for 448jp | OKI Yoshiya 448jp
0
3.9k
合意形成のためのFigma活用術
Avatar for 448jp | OKI Yoshiya 448jp
0
140
書く・即・DONEな仕組みをNuxtで作る
Avatar for 448jp | OKI Yoshiya 448jp
0
400
Figmaで神速ドキュメント作成術
Avatar for 448jp | OKI Yoshiya 448jp
3
2.5k
今から始めるFigma超入門
Avatar for 448jp | OKI Yoshiya 448jp
0
1.7k
零細Web制作会社のリモートワーク事情
Avatar for 448jp | OKI Yoshiya 448jp
0
440
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
Avatar for 448jp | OKI Yoshiya 448jp
2
770
コーディングを神速化するJetBrains IDEのご紹介～基本機能からHTML/CSSまで～
Avatar for 448jp | OKI Yoshiya 448jp
0
350

Other Decks in Design

See All in Design
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
Avatar for HIROYUKI SAITO crearedesign
0
310
#Dubois Challenge 2025: Economics
Avatar for Anthony Starks ajstarks
1
180
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
11k
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
860
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
910
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
860
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
430
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
380
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
Avatar for Andrew Shapiro ashapiro
0
150
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
850

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
9k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
209
24k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
460k

Transcript

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

    FRI
  2. None

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

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

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

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

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

  8. 作りました （デモ）

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