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
900

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

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

Other Decks in Design

See All in Design
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
260
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
160
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
390
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
120
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.6k
新卒の目から見たサイボウズのデザイン組織
Avatar for 小林諒大 ryota5884
0
290
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
Avatar for Saiko.T _psyc0_
0
360
Liquid GlassとApp Intents
Avatar for touyou touyou
0
650
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
330
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
190
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
PRO
0
100
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
350

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
61
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
110
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
95
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.5k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
76
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
97

Transcript

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

    FRI
  2. None

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

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

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

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

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

  8. 作りました （デモ）

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