デザイン

デザイン

スマホアプリ開発に役立つワイヤーフレームのデザインスケッチ23選 Webデザイナー向けフリー素材

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、23 Beautiful Wireframe Sketches for Web Designers
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

436 views

読了時間 : 約5分53秒

これから紹介するきれいなワイヤーフレームを利用することで、あなたの作業が早くなります。それに、サイトを構築したり、ソフトの速度を速めたり、サイト全体の構成を簡単にすることができます!

 

もしプロトタイプとワイヤーフレームの違いがわからなければ、下の説明を見てください。

 

ワイヤーフレームはローファイデザイン描写です。詳細がなく、静止画で、定型で、実質(機能)が不足しています。モックアップは、ミドル・ハイデザイン描写です。しかし、かなりの量の詳細がありますが、これも静止画です。

 

一方プロトタイプは、ダイナミックです。あなたが何を選んでも使うことができます。プロジェクトの一部や特定のものだけでも使用できます。プロトタイプは、概観や雰囲気が最終的なデザインと見分けがつかない時があります。しかし、これはシミュレーションにすぎません。

 

プロトタイプは魅力的ですが、必ずしも必要ではありません。重要なのはデザインがきちんと動くということです。

 

プロトタイプをつくるには

ページのフローを描きます。(どのようにユーザーを誘導するか)

 

各ページをローファイで作る。有用性の試験をし、結果を記録する。

 

ハイモデルがあなたが思い描いているようになるまで、詳細を付け加える。

 

 

上はプロトタイプについて書いてあります。いくつかはワイヤーフレームやモックアップでも使えます。

 

それでは、私たちが選んだ23のワイヤーフレームデザインを見てください。これらはサイトだけでなくアプリを作るときにも使えます。このリストはデスクトップでもモバイルでも使うことができ、あなたの作業に役立ちます!

 

これらは、一般的でより具体的なワイヤーフレームです。いくつかあなたのエンターテイメントや天気アプリに合ったワイヤーフレームが見つかるでしょう。

 

そして、これらのワイヤーフレームは、顧客にデザイン全体を見せる前に、最初のいくつかの部分だけを見せることができます。これらから、触発されてあなたの作業をよりよいものにしてください。

 

 

 

Wireframe Effectively on the New, Improved 970 Grid System

 

ページのレイアウトを作る事は、ウェブデザインにおいて一番重要です。この時、グリッドシステムを使うのが一般的です。グリッドシステムは、ワイヤーフレームでデザイン構成をする時に使われます。ここでは、ワイヤーフレームを効果的に使うための970のグリッドシステムが紹介されています。

 

 

 

Weather Analytics Application by Michael Pons

 

 

この実例は、世界レベルでインターフェイスを使っている人達が、バックエンドと複雑なデータをつなげるという難しい作業をした結果です。彼らは、稼動する日に情報をカタリストに変換する様に作りました。利用者はまずこのチームのアプローチを見ます。

 

 

 

Wheel Of Om Nom Wireframes

 

デザインの質を上げるためのいろいろな方法があります。工程の合理化、エラーや余分な工程の削除に役立ちます。プロジェクトの最初から最後まで何が起こっているか把握することは大事です。これが、ワイヤーフレームが重要な工程である理由です!ここには、ワイヤープレームのいい例があります。ここを見て、たくさんの事を学んでください。

 

 

 

E-Commerce wireframe Concept design

 

 

これは、特に電子商取引分野の独特の必要条件に関する問題解決法を探している顧客にとって、とてもよいUI/UXワイヤーフレームです。このワイヤーフレームは電子商取引サイト向けのテンプレートができており、再生するだけになっています。

 

 

 

Mobile Wireframe Kit PSD

 

 

これは、構成を考えるときに大いに役に立つワイヤーフレームです。デザイン、構成がとてもよくできています。PSDで作られています。すぐにダウンロードして、確認してください。

 

 

 

Wireframe Examples

 

おそらくあなたがハードワークをすることがなくなり、スマートに仕事ができるようになるでしょう!それにはワイヤーフレームがカギです!あなたは、このいろいろなワイヤーフレームのサンプルがあるこのリンクを保存しておきたくなるでしょう。

 

 

 

Kitchenware Pro – Wireframe Kit

 

Kitchenware Proもあなたが近くに置いておきたくなるワイヤーフレームになります。たくさんの種類があり、全てでなくてもその中のひとつが、あなたの発想の源になるかもしれません。

Virgil App Wireframe

 

 

これは、アプリを開発する時の導入部分を作るときに役立つワイヤフレームの例です。これは公共交通機関でバスの到着時間を知らせる為、特別に作られたものです。これは最小のインターフェイスで作られており、とてもいいサンプルです。

 

 

 

App design | Phase 2: Wireframes

 

これは、ラジオのストリーミング放送用に作られたUXフローの概要です。このサンプルは、とてもよく作られていて、プロジェクトをはじめる時に役に立つでしょう。

 

 

 

Colorframes

 

 

このデザイナーのワイヤーフレームとスケッチブックを見てください。そして、仕事量を減らすヒントを得てください。

 

 

 

Wireframe & UI Elements

 

 

これは、あなたが仕事のヒントを得るためにいいワイヤーフレームとUIサンプルのセットです。

 

 

 

iOS 8 UX Flows

 

 

この例は、プロジェクトの一部分です。デザイナーは、iOS 8で作業しており、これはワイヤフレームの工程を再生したものです。

 

 

 

PSD Web Design – One Page Website Wireframes

 

 

あなたが1ページサイトのワイヤフレームのアイデアを探しているなら、ここを見るといいです。ここにはたくさんの例があります。

 

 

 

Movies app wireframe by Vladimir Vorobyev

 

 

 

これは、Vladimir Vorobyevが作った、とても使いやすい動画アプリ用ワイヤーフレームです。これは、ミリメートル紙でできており、最小のデザインです。

Vim Interactive homepage concept

 

 

あなたが、デザイナーのスケッチをもっと見たいと思ったら、このワイヤーフレームを見てください。ここからアイデアが生まれるでしょう。このサンプルは、双方向サイト用のホームページです。

 

 

 

Wireframe

 

 

もしあなたが、もっとワイヤーフレームの例を見たいというのであれば、ここを見てください。このサンプルはとても詳しく書かれてあり、あなたがアイデアを生みだすのに役立ちます。

 

 

 

 

Wireframes by Evgeny Vasenev

 

 

Evgeny Vasenevが選んだ、とてもよい彼のプレゼンテーションのフォーマット用ワイヤーフレームとパンフレットのフォーマットです。

Interactive Sketching Notation

 

 

このサンプルは、ワイヤーフレームの概要と相互作用のための表記法のスケッチの一部分です。このサンプルは、利用者がインターフェイスを見てわかるように作られていて、作業がわかりやすく、早くなるようになっています。

 

 

 

Annotating Wireframes

 

 

これは、わかりやすいイラストで、インスピレーションがひらめくヒントになります。これは、プロジェクトをはじめる時に役に立ちます。

 

 

 

Moderation Dashboard Wireframes

 

このサンプルには、ダッシュボードを作るときのアイデアがいくつかあります。すべてがわかりやすく、とても詳細に書かれています。

Basiliq – Freehand UI Kit by Cloud Castle

 

これは、手書きで、Cloud CastleのUIキットで作られています。あなたがアイデアを生み出すのに役に立つでしょう。

Layout sketches – Eddie Lobanovsky

 

 

このプロジェクトを見てください。このサンプルは、手書きのレイアウトで、あなたのインスピレーションを引き出すように作られています。

 

 

 

Wiki Wireframe

これは、記録用のレイヤーを含むワイヤフレームの工程を再生するだけです。このサンプルは、UXとUIで使えます。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ