ワイヤーフレームは、Webやアプリの制作においてポイントとなるプロセスです。

複数のパートナーと協働して制作をするとき、このプロセスにおいて認識を揃えていないと、後で状況がひっくり返ってしまうということにもなりかねません。設定したサイズですべての機能がきちんと機能するか、クライアントや上司の承認が取れているかを確認し、すべてのメンバーが同じ視点と想定で、詳細まで気を配りながら進めていくことが大切です。

ワイヤーフレームをしっかり押さえておけば、スムースで再現性の高いデザインを仕上げることができますし、作業時間や労力の節約にも繋がります。実際のデザインがスタートしてしまってからは、デザイナーはあまり想定外の要求には答えない方が良いです。さもなければ、ワイヤーフレームにフィットしない要素を無理矢理おさめなくてはならなくなり、多大な労力がかかってしまいます。

良いワイヤーフレームを作成するためには、既存の事例からヒントをもらうことも大切です。今回の記事では、プロジェクトのはじめに全体の方針を共有するのに良さそうな質の高いワイヤーフレームを集めてみました。ぜひ参考にしてみてください。

1. Event Management Dashboard Wireframe #1

Event Management Dashboard Wireframe #1
by Bagus Fikri for Fikri Studio

2. Wireframes

Wireframes
by Bagus Fikri for Fikri Studio

3. From wireframes to design

From wireframes to design
by Cuberto

4. Apple Watch WIRE

Apple Watch WIRE
by buatoom for Omise

5. TedTodd Wires


by Alex Sailer for Focus Lab

6. Wireframe day!

Wireframe day!
by aaron stump for InVision

7. Wireframe for a landing page

Wireframe for a landing page
by UENO.

8. Kitchenware Pro — Wireframe Kit

Kitchenware Pro — Wireframe Kit
by Neway Lau

9. Wireframes

Wireframes
by Creativedash

10. Sitemap For Student Guide

Sitemap For Student Guide
by Janna Hagan

11. Ui Sketch

Ui Sketch
by Anthony Lagoon for Underbelly

12. Mac Chat Application Wireframes

Mac Chat Application Wireframes
by Danny Keane

13. UX User Flows

UX User Flows
by Janna Hagan

14. Exelerate Wireframes

Exelerate Wireframes
by UENO.

15. Wireframe options

Wireframe options
by Steven Scarborough for Focus Lab

16. Neverbland Deliverable Deck

Neverbland Deliverable Deck
by Filippo Chiumiento for NEVERBLAND

17. Simplified Checkout Process

Simplified Checkout Process
by Michael Pons for PG

18. IconStore Sneak Peek

IconStore Sneak Peek
by Sebastiano Guerriero

19. User Flow Diagram for Apple Watch App

User Flow Diagram for Apple Watch App
by Marian Mota for SoftServe Design Office

20. Product Website Wireframes

Product Website Wireframes
by Michael Pons for PG

21. wireframes

wireframes
by Anthony Lagoon for Underbelly

22. BattleShare


by spovv

23. Wireframes for Dental Research Website

Wireframes for Dental Research Website
by Adam Butler

24. High Fidelity Dilema

High Fidelity Dilema
by Michael Pons for PG

25. Wireframe Of Nextday

Wireframe Of Nextday
by Leon Qin

26. SelfSurvey — Wire Frames 1.0

SelfSurvey — Wire Frames 1.0
by Sergey Jani for LUFT

Webデザイナーにとって、優れたデザインに触れ、インスピレーションを得ることは大切な仕事です。今回の記事も、みなさんの参考になりますように。

(翻訳:Akiko Ogita)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ