WEBからスマートフォンまでワイヤーフレームのための素材キット30選「30 Fresh Web UI, Mobile UI and Wireframe Kits」
WEBからスマートフォンまでワイヤーフレームのための素材キット30選「30 Fresh Web UI, Mobile UI and Wireframe Kits」 WEBサイトを制作するために作成するワイヤーフレーム。サイトの作りを決定する重要なものです。作り方は制作する人によって大きく変わると思うのですが、今日はワイヤーフレームをより簡単に作成するための素材キットを集めたエントリー「30 Fresh Web UI, Mobile UI and Wireframe Kits」を紹介したいと思います。 Website Wireframes Kit for Adobe Fireworks (.png) 手書き風のものから、キッチリ作られたものまで様々な素材キットが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Wireframe
画面レイアウトを考える その２ワイヤーフレームに含まれる構成
サイトの表示に使用するレイアウトサイズの決定と同様に、ページの姿形を作る前に決めておきたいのが、ページの各スペースに割り振る機能についてである。この段階はサイト構築工程の中で、ワイヤーフレーム制作と呼ばれるポイントで、厳密に言うと情報アーキテクトの仕事に分類される。デザインカンプ（Design Composite）ということもあるので、レイアウトデザインとの境目は微妙なところだ。ワイヤーフレームはサイトのルックアンドフィールを決める基盤になると同時に、サイトの構造を確認するラフにもなる。それだけに、どんな規模のサイト制作でも経ておきたい工程だ。 各機能の名称を把握 ページの機能、といってもどんなものがあるのか、まずは確認することから始めたほうが良さそうだ。これから確認するページの機能、これは結構媒体や書籍によっても呼び名が統一されてなかったりするが、事実上の標準はここに挙げた呼称となるので
ワイヤーフレームをそのまま生かして画面仕様書を作る（PowerPointのノート表示モード）
はじめに † Webサイト開発の企画設計段階では、 →ワイヤーフレーム（情報設計）作成 → ワイヤーを元にクライアントとコミュニケーション（情報構造について詰める） →個別ページの画面仕様書（外部設計書）作成 → クライアントとコミュニケーション（外部設計について詰める） と進んでいくことが多いです。 ワイヤーフレームはPowerPointでつくっていますが、その後個々の画面遷移やボタンクリック時の動きなどを画面仕様としてまとめていく際に、改めてExcelなどで作り直すのは手間もかかるし面倒です。PowerPointのノート表示を使うと、ワイヤーのパワポ文書をそのまま生かして効率的だったのでメモを残します。 ↑ 解決したいこと † ワイヤフレームは印刷して打合せすることが多いのと、皆さん持っていて共有しやすいため、PowerPointがいい。 画面仕様を書く時にワイヤーあるいはデザインカン
Visualize Website Structure – Sitemap
2014年8月17日 Webサイト制作, 便利ツール Webサイト制作の準備編２：Webサイトの構成図（サイトマップ）。どのページがどこへリンクするのか、ページの重要度など、Webサイトの構成を図にまとめておくと製作途中で変更があった場合でも整理しやすくなります。Webサイトの構成図を作るときのポイントと便利なオンラインツールをまとめてみました。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その2 目標：Webサイトの構成を明確にする 必要なもの：紙とペン 対象レベル：超初心者OK！ 目次 誰のため？何のため？Webサイトを作り始める前に。 Webサイトの構成図を簡単に作れる便利ツール ←今ここ Webサイト設計図 – ワイヤーフレームの作り方 PhotoshopでWebサイトのデザインをしよう Photoshopでスライスし、パーツ画像を作成するコツと方法
Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する
2013年3月23日 Webサイト制作, 便利ツール Webサイトのデザインを始める前に、レイアウトやページ内で使われる機能を「設計図」として作っておきます。ワイヤーフレームと呼ばれるWebサイトの骨組みをしっかり作っておくと、デザインする段階でスムーズに仕事がすすみます。またクライアントとの打ち合わせでも大活躍。ここではワイヤーフレームを作る為の便利なオンラインツールと「ワイヤーフレームは手描き派！」という人のためのPDFテンプレートを紹介します。 ↑私が10年以上利用している会計ソフト！ オンラインで使えるワイヤーフレーム作成ツール iPlotz iPlotzのWebサイト とにかく多機能でおすすめ。ワイヤーフレームを作る他にプロジェクトマネージメントもできます。オンラインでシェアしたり、JPG, PNG, PDFでの書き出し可能。 トライアルをするにはまずトップページから「Get S
使えるワイヤーフレームの書き方
もっと現場で使える「本気のワイヤーフレームの書き方」を公開しました。 ワイヤーフレームの書き方は、それこそディレクターさんによって千差万別。 手書きが一番だ！と叫ぶ人もいれば、Fireworksラブ！なんて人もいて、使用するフォーマットもマチマチ。 なので、ここでは僕がやっている「使えるワイヤーフレーム」を僕なりのやり方で紹介させていただき、読んでいる殊勝なかたがたのお役に立てばなぁと思います。 僕の場合、ワイヤーフレームを使って脳内シュミレート（サイトが使いやすいかどうか？のテスト）をするので、一般的なワイヤーフレームというよりは、どちらかといえばプロトタイプに近いものを作ります。 ピクセルは等倍で、フォントサイズも大まかには合わせて、原稿はすべて入れてしまいます。 なんでワイヤーでそこまでやるんだって？決まっています。そのほうが楽だからです。 ワイヤーの多くは、「あくまでレイアウトの草
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/04/wireframe-2.html
Visual Communication Software To Make Pro Diagrams - OmniGraffle - The Omni Group
http://e0166nt.com/blog-entry-872.html