Web担当者必見！ワイヤーフレーム作成時の注力ポイント9個と便利ツール20選
ホームページを作成する際、必ずといっていいほど作成するのが本番用デザインの設計図である「ワイヤーフレーム」です。 ワイヤーフレームは一般的にWebディレクターが作成しますが、デザイナーに渡した時に「どう作ればいいかわからない」などのフィードバックを受けた経験はないでしょうか。 プロジェクトを円滑に進めるためのコミュニケーションツールでもありますので、あくまで設計図とはいえ適切に作成したいものです。 そこで今回は、ワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。 ワイヤーフレーム作成で悩んでいるWebディレクターの方は、参考にしてみてください。 参考： 新人Webディレクターの基礎、制作の現場で使うワイヤーフレームの作り方｜ferret ワイヤーフレーム作成の注意ポイント9個 1. アイデア出しは個人でしっかりと行う http://mindmap.jp/00
Webサイトのアイデアを形にする！ワイヤーフレームやフローチャートに使える素材のまとめ
最近のWebサイトで使われているさまざまなレイアウト、ヘッダやフッタやナビゲーションやコンテンツのパターンがキット化されたワイヤーフレームやフローチャートを作成するのに役立つ無料素材を紹介します。 ランディングページや縦長ページをはじめ、コマースサイト、企業サイトなど、多種多様な案件に対応できます。スマホ用ナビゲーション100種類とかは勉強にもいいですね。 Platforma Web Wireframe Kit(.psd, .ai, .sketch) 最近のWebサイトで使用されているさまざまなコンポーネントがキット化されており、組み合わせるだけでさまざまなページのワイヤーフレームを作成できます。無料版と有料版があり、無料版でもかなりのボリュームです。 iOS Wireframe Kitも無料でダウンロードできます。
ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」
ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」 本制作をする前にワイヤーフレームで制作して、UIやUXなどをクライアントと確認するというのはWEB業界では慣習的になっていますが、今回紹介するのは、そんなワイヤーフレームづくりに便利なキットを集めたエントリー「40 Free Wireframe Templates for Mobile App, Web and UX Design」です。 Carbon Material Design eCommerce Wireframe Kit (PSD & Sketch) WEBからiOS、AppleWatchまで様々なタイプのワイヤーフレームが紹介されています。今日はその中から特に気になったワイヤーフレームをピックアップして紹介したい
魔法！Webレイアウトを数回のクリックで『Velositey』#Photoshop
さっさと仕事を終えて帰宅に向かいたいWebデザイナーさんへ朗報ですよ！ Photoshopと合わせて使える便利機能を見つけたので紹介します。 Velositeyは、Webレイアウトを数回のクリックで完成できるPhotoshop用のプラグインです。例えば、以下のようなレイアウト。Photoshopを起動してから、わずか4回のクリックで完成です。 ワイヤーフレームにも使えますし、ここからさらに作り込んでWebデザインとして完成させることも可能ですね。 それでは実際に上のレイアウト作成にかかった『4クリック』を振り返ってみます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 💬 𝕏（twitter）は
ワイヤーフレーム作成時に役立つツールや素材、参考になるショーケース - NxWorld
ワイヤーフレームとは、簡単に説明するとコンテンツやレイアウトなどを示した設計図や構成図のことを言い、これをしっかり作っておくことでデザインやコーディングといったその後の作業をスムーズに進めることができます。 単にワイヤーフレームと言っても「ツールやソフトを使用する」「基本的に全て手書きで行う」など人によって作り方は違うと思いますが、個人的にワイヤーフレーム作成時に便利だなと感じたツールや素材を紹介します。 また、専門ギャラリーや参考になるショーケースなども併せて紹介するので、あまりワイヤーフレームを見たことないという人はそちらも参考にしてみてください。 便利ツール インストールしたりソフトへの拡張機能として使うものなどもありますが、今回はオンラインで使用するツールを紹介します。 中には使用する為には登録が必要なものや場合によっては有料になるツールもありますが、ほとんどフリーで作成も保存もで
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
The what, when and why of wireframes « User Pathways
I recently presented at a conference on the humble wireframe and thought it would be a good idea to run through some key points. I have also noted that some feel the wireframe is dead, though if anything its more alive now than ever. Pay heed to 37 signal’s take on the subject… If a wireframe document is destined to stop and never directly become the actual design, don’t bother doing it. If the wi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワイヤーフレーム、モックアップ、プロトタイプの違いと、それぞれの特徴
最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ
神アップデート！プロトタイピングツール「Prott」のワイヤーフレーム機能がめっちゃ良い！｜男子ハック
新着記事
Designers Toolbox: OS Form Elements
http://www.designwalker.com/2010/05/wireframe-resource.html
http://www.designwalker.com/2009/04/wireframe-2.html