Webディレクター、Webデザイナー必見!伝わるワイヤーフレーム26選

close web

ワイヤーフレームは、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)

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

33,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 33,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

SHARE

RELATED

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