Super easy wireframing tool Brainstorm software ideas in quickest time and continue with architecture diagrams, UI flows, product graphics, sitemaps, user testing and much more...
前回、「IA One Sheeters」をご紹介しましたが、もちろんそれらを指してすべてが「IAタスクである」とは言い切れません。ただ少なからずIAというロール(役割)において関係してくるタスクであることは間違いないと思います。 そこで今回は、そのサンプルにもあった「ワイヤーフレーム」についてのツールを紹介します。 そもそも画面のレイアウトおよび原稿の整理という意味では、いろいろなツールが関係してきます。Web制作の現場においてはWebデザイナーやWebディレクターというロールが関わり、タスクベースにするとどのロールがそのタスクを遂行するのかが混乱しがちです。この連載ではWebデザイナーを対象として、ツールの使い方やぶつかる課題にフォーカスをあててみたいと思います。 ワイヤーフレームについて ワイヤー(線形状)でフレーム(枠)にしていくことから名前がついたと思われますが、もともとはCG(
はじめに コンピュータやインターネットの発展によって、大量のデータを集積し、分析することが容易になってきました。しかし、データそのものに関心が集まる一方で、データの「見せ方」については、あまり注意が払われていないのが現実ではないでしょうか。 データは、人が理解することで初めて価値を持ちます。そして、その理解のカギを握っているのは、データを人の目で知覚可能な形へと「可視化」するプロセスに他なりません。データはただ表示すれば良いと安易に考えるのはやめて、表現力豊かな可視化のテクニックを追求してみませんか? 本連載では、具体例やサンプルコードを交えながら、情報可視化の基礎から実践までを解説します。 情報可視化とは何か 「可視化(Visualization)」とは、画像やアニメーションのような視覚的表現を使用し、人に何らかの意味を伝達することです。特に「情報可視化(Information Vi
UXデザインのプロセスは、UCD と呼ばれるユーザー中心設計の考え方をベースとしています。ユーザー中心設計の考え方とは、プロジェクトの各工程でユーザーを取り入れるというものです。主に、ユーザー調査の結果を要求分析に取り入れること、設計段階ではプロトタイプ制作とそのユーザー評価を行うこと、そして運用の中で継続的にユーザーからのフィードバックを収集することが重要とされ、製品/サービスのライフサイクルを通じてこれを繰り返します。つまりUXを向上させるためには、Try(試しにやってみる)と Catch(状況を把握して分析する)のセットを反復的に行うことが大切です。 これは別の言い方をすると、デザインには決まった答がなく、常に試行錯誤が必要だということです。反復的デザインは、各フェーズ単位、プロジェクト単位、そしてより大きな事業やブランドといった単位で多層的に試みることが求められています。 ウォータ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA(情報アーキテクチャ) 1.基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にIA(インフォメーションアーキテクト)が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA(情報アーキテクチャ)研修の講師をしてみた。:そのフォローアップ | future-proof
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。 旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC:RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
スマートフォン、タブレット、ラップトップタイプのタブレットなど、タッチデバイスに最適なナビゲーションの考察を紹介します。 単に見た目のレスポンシブではなく、操作性を考慮したレスポンシブです。 Responsive Navigation: Optimizing for Touch Across Devices 下記は各ポイントを意訳したものです。 各デバイスのサイズ 各デバイスのタッチ方法 タッチデバイスに最適なナビゲーションの位置 デモ スマフォ・タブレット・ラップトップタブレットのサイズ まずは、デバイスごとのスクリーンサイズを確認してみます。 過去2ヵ月にリリースした主要なスマートフォンのサイズ一覧です。
最近 UX と UI を混同して表記されているのを見かけるようになりました。私もウケやすいということで、混同させたことがあります。しかし実際のところ UX と UI は同義語ではありません。良い UI デザインをすれば、UX が向上する可能性はありますが、必ずしもそうではありません。逆もしかりです。最近も UX と UIの違いを分かりやすく表現しようと、シリアルとボールの写真を使った例が登場しましたが、「そうでもない」という意見も多数ありました。 それでは、なぜ混同されやすいのかというと、今のスマートフォン向けのデザインを見るとヒントが隠されています。例えば Twitter クライアントの中で人気のある Tweetbot を見てみましょう。このアプリの中で装飾と呼べるデザインはどれだけあるでしょうか。ほぼ皆無だと思います。 スマートフォンという小さなスクリーンには、UI しか存在しません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く