ワイヤーフレーム | Accessible & Usable
公開日 : 2015年9月22日 (2019年1月26日 更新) カテゴリー : 情報設計 (IA) ウェブサイトの画面設計をまとめるにあたって、よく使うのが、ワイヤーフレームという手法です。ワイヤーフレームとは、線 (wire) で描かれた枠/骨格 (frame) という意味で、詳細なビジュアルデザインまでは施さない形の、画面構成図/画面設計書のことを言います。 なぜワイヤーフレームを作るのか？ ワイヤーフレームには、大きくふたつの意義があります。 画面デザインの検討やスケッチとして 開発、制作、QAの過程でプロジェクト関係者が立ち返るドキュメント (仕様書) として 私自身は、前者はペーパープロトタイピングでやることが多く、ワイヤーフレームはその清書、つまり後者の、立ち返るドキュメント (画面設計の仕様書) として捉えています。 最近では、ワイヤーフレームの代わりに HTML＋CSS＋
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
UXのプロがアドバイス「Web担のサイトはこう変えるべし」――やってみました「UX診断」 | Web担当者Forum
UXのプロが岡目八目で切り込むのが快感今回、「UXデザインパッケージ」のサービスを体験してみたわけですが、結論から言うと、「さすがUXのプロ」という面と、「まさに岡目八目、外部に頼む価値」という面とがありました。 アドバイスは、現状のWeb担の見せ方をかなり大幅に変えるというものでした。つまり、現状をある意味で否定された形なのですが、それに対して違和感は抱きませんでした。というのも、そうするべきだとして示されている理由が理路整然としていた納得できるものであり、さらに自分でも薄々は感じていた「そうだよね」という部分をえぐられていた内容も多かったからです。 たとえば、アドバイスでは、「移動中などにスマホで友人のフィードで見かけた記事などが気になり、でもそのときは読まずにあとから読む」といった行動にうまく対応できるようにと指摘されています。 これは、言われなくてもわかっているはずのことです（実際
ワイヤーフレーム作成時に役立ちそうなサイトや記事のまとめ | バンクーバーのうぇぶ屋
僕の日本人クリエイター専用シェアハウス『Frog House』の住人の一人が、BCITという名門IT系専門学校へ通っているんですが（彼のような日本人クリエイター留学生の話は来月のセミナーでしたいと思ってます）、そこの課題にどうやら自由な発想でワイヤーフレームを作ってこいみたいな課題が出たらしく、先日『ワイヤーフレーム作る時に使ってる物や参考になるサイトは無いか』と聞かれたので、こりゃ住人に良いカッコするチャンスと思ったから書く、という不純な気持ちで書いています（笑） でも、思っても見たら今までワイヤーフレーム系のネタで書いた事も無いし、良い機会なので、僕が知ってるワイヤーフレームを描く時に便利そうなツールやサイトを、この機会に全部まとめておこうかなと思います。 制作ツールは勿論のこと、素材サイトや確認ツール、なんか色々独断と偏見からワイヤーフレーム描く時便利そうって思える物ばかり紹介する（
ワイヤーフレーム制作のための素材セット「The Ultimate Wireframe UI Kit」
TOP > Design , Photoshop > ワイヤーフレーム制作のための素材セット「The Ultimate Wireframe UI Kit」 サイト制作の前に制作するワイヤーフレーム。サイトの構成や構造をわかりやすく事前に見せるためには非常に有効な手段ですが、作る精度によってはかなりの時間を費やしてしまうこともあると思います。今日紹介するのはそんなワイヤーフレームを制作する時間を短縮してくれる、素材セット「The Ultimate Wireframe UI Kit」です。 ローディング、ボタン、グローバルメニューなどなど、サイトにひつようなパーツが、数多く収録されており、それらを組み合わせえてりようすることで切り貼りでサイトのワイヤーフレームを作ることができます。 詳しくは以下 かなりの種類のインターフェースのパーツが収録されており、その数は60にものぼります。データ
ワイヤーフレーム作成に使える素材集30 – creamu
98375849/ iStockphoto/ Thinkstock ワイヤーフレームに使えるパーツを探している。 そんなときにおすすめなのが、『30 Free Web Design UI Kit Resources』。ワイヤーフレーム作成に使える素材集です。 いい感じのものが揃っていますね。 Free Sketching & Wireframing Kit JANKOによるスケッチ&ワイヤーフレームキット。ai,svg,pdf,epsフォーマットでダウンロードできます Free PSD Kit For Easier Website Wireframing FUELによるUIデザインキット。PSDファイルでダウンロードできます omnigraffle-wireframe-stencils OmniGraffle version 5.x (Mac OS X用)の素材。ボタンやスライダーなど M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
User Flows | 20 Inspiring Examples
