ワイヤーフレームは実寸で作るべし
アプリでもウェブサイトでも、設計段階で、ワイヤーフレームを作る場面は多いと思います。手書き、PowerPoint、Cacoo、Illustrator、Sketchと、ワイヤーフレームを描くツールはさまざまですが、守るべきルールが1つあります。それは実寸で（実比率で）作るということです。 ワイヤーフレームは場所取り合戦 ワイヤーフレームとは、「何を、どこに、どのくらいの大きさで」表示するのかを設計する、画面設計書です。実際に画面を実装する段階で悩まないように、事前に設計図を作るのが目的です。 画面のなかで、伝えたい事、目立たせたい機能は山ほどあります。それらをすべて大きく目立つところにレイアウトすることはできません。機能をグルーピングし、強弱をつけて画面に配置してゆく必要があります。まさに、画面要素の場所取り合戦なのです。 実装前にワイヤーフレームでお客様と共有 全ての画面を、デザインした画
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
さまざまな種類のワイヤーフレームを集めたサイト「UI Tiles」
デザイン設計時にワイヤーフレームを使って構成を確認・設計することで、完成までのイメージを頭に想像できるとともに、進行・作業をスムーズに行うことが可能となります。今回はそんな設計時に利用したい、さまざまな種類のワイヤーフレームを集めたサイト「UI Tiles」を紹介したいと思います。 シンプルなテイストのワイヤーフレームが多数まとめられており、設計するサイトに合わせ選択し活用することができそうです。 詳しくは以下 ランディングページやブログ、フォト・ビデオのギャラリーページ、カレンダー、チャット、プロフィールなど、種類が豊富。aiやPhotoshopデータといった形式があるので、使うメディアによって使い分けも可能。ベースがシンプルなので、いろいろなデザインに応用できるのも嬉しいところ。 個人・商用ともに利用可能とのこと。企画書への添付はもちろん、イメージ作成などにも場合によっては利用できるか
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ
2015年10月22日 Webデザイン 私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ 冒頭でも述べたように、Webデザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、あなたはデザイナーです。指示された通りに動くマウスカーソルではありません。ワイヤーフレームを作るのは、多
Illustratorで美しくデザインされた、ユーザーフローを設計するワイヤーフレーム用のAI素材
Webサイトのユーザーフローを設計する、美しくデザインされたワイヤーフレーム用の素材を紹介します。 通常は有料ですが今週末まで無料なので、ダウンロードはお早めに！
商用利用無料、今時のスマフォアプリ用のワイヤーフレーム素材 -App Wireframes Kit
スマフォアプリ用のさまざまなUIエレメントが用意されたベクターベースのワイヤーフレーム素材を紹介します。 App Wireframes Kit ダウンロードできる素材のフォーマットは、2種類。 .psd .ai どちらもベクターベースで作られているので、サイズ変更やカラー変更なども簡単にできます。 App Wireframes Kitには、スマフォアプリ用のさまざまなコンテンツが収められています。 素材の利用にあたってはロイヤリティフリーで、個人でも商用でも無料で利用できる、とのことです。詳しくはダウンロードファイルの「License.txt」をご覧ください。 ダウンロードはページの下の方からです。
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
ワイヤーフレームやサイトマップを無料で作成できるオンラインサービス・アプリケーション集
ウェブサイトのワイヤーフレームやモックアップ、サイトマップ、フローチャート、ダイアグラムなどを無料で作成できるオンラインサービス・アプリケーションを紹介します。
ブレないワイヤーフレームを作るコツ
すべてのワイヤーフレームは平等ではない 「ワイヤーフレーム制作の５つのアプローチ」で一見同じようにみえるワイヤーフレームにはそれぞれ特徴があり、目的に応じて使い分けた方が良いという話をしました。違うアプローチが幾つもあることは分かりますが、ではどのようなときにどれを使えば良いのでしょうか。選択するためのチェックポイントは４つあります。 ワイヤーフレームを作る目的はなにか 作ることで何を達成させたいのかを明確にします 制作プロセスのどのフェイズで用いるのか どのタイミングで作るかによってワイヤーフレームが果たさなければならない役割は変わります 誰がワイヤーフレームを見るのか クライアントなのか、デザイナーなのか、開発者なのかで異なりますし、彼等のプロジェクトに対する理解度にもよります 誰がワイヤーフレームを活用するのか ワイヤーフレームを使ってデザインをするのか、開発を進めるのか、それとも特
Mockingbird has Shut Down
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
ワイヤーフレーム / モックアップを作成するためのフリーアプリ10 – creamu
ワイヤーフレーム / モックアップを作りたい。 そんなときにおすすめなのが、『10 Completely Free Wireframe and Mockup Applications』。ワイヤーフレーム / モックアップを作成するためのフリーアプリ集です。 なかなかいい感じのが揃っていますよ。 Pencil Project ワイヤーフレームが作れる有名なFirefoxアドオン Web Site Wireframe Tool オンラインでシンプルにワイヤーフレームを作って、パーマリンクで共有できるサービス Hot Gloo – The Online Wireframe App Flashベースのワイヤーフレーム作成アプリ。現在無料 DUB – DENIM Windows, Unix, Mac OS Xで利用できるデスクトップアプリ Mockingbird UIの綺麗なMockingbird
A UI Design and Prototyping Treasure Chest - Web Design Ledger
One Ping Pingback: 10 Excellent Tools for Creating Web Design Wireframes | Tools 40 Comments Cool round-up. Stuff like this keeps me sane =) Great Post! I found a few things to download I didn’t already have. That’s awesome. Thanks so much, guys- you have no idea how much time this will save me. thnx for featuring my work here … TWICE 🙂 cheers m. Great post of ending 2009 i like it, here is all s
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
2013年3月23日 Webサイト制作, 便利ツール Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派！」という人のためのPDFテンプレートを紹介します。 ↑私が10年以上利用している会計ソフト！ オンラインで使えるワイヤーフレーム作成ツール iPlotz iPlotzのWebサイト とにかく多機能でおすすめ。ワイヤーフレームを作る他にプロジェクトマネージメントもできます。オンラインでシェアしたり、JPG, PNG, PDFでの書き出し可能。 トライアルをするにはまずトップページから「Get S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://designaholic.cc/2011/02/post-82.html
http://www.designwalker.com/2010/05/wireframe-resource.html
新着記事
http://www.designwalker.com/2009/04/wireframe-2.html
IDEA * IDEA