昨日、ワイヤーフレームとは何なのか問題についてのスライドを公開した。非常にあっさりしたスライドなのでひとまず見てみてほしい。 前々から、ワイヤーフレームはスペック検討が主旨であり、デザインやレイアウトといった見てくれの検討をするものではないというのを必要に応じて述べているんだけども、その言説がパーマリンクを持ってないのが不便だなと改めて思ったからでもある。 ワイヤーフレームとは何なのか問題そのものだけでなく、関連して思っていることはいろいろあり、そうした背景のようなものの一部を以下に述べておきたい。 つい今週開催されてたMAX Japanで、Adobeが日本特有のデザインプロセスに対するソリューションとしてXD用にQuick Mockupなるものを発表したようだが、これも結局、ワイヤーフレームなのか、デザインの中間成果物なのかがはっきりしない印象がある。日本特有のデザインプロセスっていうの
「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」と言われてしまうのでしょうか。また具体的に何をすれば、ワイヤーフレーム通りではなくなるのでしょうか。今回はそのあたりの原因と対処方法を考えてみたいと思います。 「ビジュアルを作る力」と「情報を理解・提案する力」 ズバリ結論を言いますが、ワイヤーフレーム通りじゃん…と言われてしまう人は「ビジュアルを作る力」と「情報を理解・提案する力」が弱いと言えます。 ビジュアルを作る力は幅広い表現の中から適切な手
Webサイト制作時に作成する「ワイヤーフレーム」。デザイナーの方は、ディレクターからワイヤーフレームを受け取り、それを元にデザインに着手することが多いと思います。 では、デザイナーの方がディレクターにステップアップし、実際にワイヤーフレームを作成する側の立場になった際、どのような点を押さえておくべきでしょうか。“デザインのラフ案”のように作成してしまうと、トンマナを確認するものなのか、構成を確認するものなのかとクライアントが困惑してしまい、本来確認すべきポイントがかすんでしまうなどという事態に陥ります。 ワイヤーフレームの役割をきちんと理解した上で、プロジェクトの内容に応じて最適なワイヤーフレームを作成できるよう、基本的なポイントについて紹介します。 ワイヤーフレームはチーム全員のイメージを共有するツール そもそもワイヤーフレームとは、これから作り上げるWebサイトの設計図としてクライアン
ワイヤーフレーム通りにデザインしてしまうデザイナーさんへ私がまだデザイナーとして働き始めて間もない頃、よく言われた言葉の中に「もっと自由にデザインしてくれていいんだよ！」というものがありました。しばらくはその意味がわからなかったのですが、後になって渡されたワイヤーフレームと自分のデザインを見比べると、何も変わっていないな…と気づくことが多々ありました。今回はそんな、ワイヤーフレームとデザインについて考えてみようと思います。 冒頭でも述べたように、Web デザイナーとしての経験があまりないうちは、どうしても渡されたワイヤーフレームに引っ張られてデザインしてしまうこともあるかと思います。もちろん、ワイヤーフレーム通りのレイアウトが求められることもあるでしょう。しかし、 あなたはデザイナーです 。 指示された通りに動くマウスカーソルではありません 。ワイヤーフレームを作るのは、多くの場合プロジェ
先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください！ １.ワイヤーフレームを作る意味とは ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進めるときにまずすること、ワイヤーフレームはなぜ必要か、ワイヤーフレーム制作で意識するポイントについて解説していただきました。 ワイヤーフレームを書く前に 案件を進めるとき、まずすべきことはプロダクトの目的とゴールの再確認です。 最終的に作っているものの方向性を見失わないようにするために、 何が目的でそれを実装するのか？ なんで必要なのか？ それを作ることによって何を解決するのか? を考える必要があ
Please notice: This domain name registration has expired and renewal or deletion are pending. If you are the registrant and want to renew the domain name, please contact your registration service provider. Bitte beachten Sie: Diese Domainregistrierung ist abgelaufen und die Verlängerung oder Löschung der Domain stehen an. Wenn Sie der Registrant sind und die Domainregistrierung verlängern möchten,
ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fluid UI http://www.fluidui.com/ プレビュー機能で画面遷移も作れる UIパーツが本物にかなり近い形で表現されています(むしろそのまま？)。UIパーツはWireframe、iPhone、iPad、Android、Android 4.0、Android Tablet、Windows Phoneの中から自由に選べます。かなり豊富です。またオリジナル画像をアップロードして使うこ
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
Small IA 宣言――個人的には、こういうアプローチを明示することが一番わかりやすいと思います。 4月頭に、Web広告研究会でIAセッションを実施するのですが、そのすり合わせの会で、ツルカメの森田さん・GREEの村越さん・インテリジェントネットの和田さん・専修大の上平さん・日本アドバタイザーズ協会の林さんとでそうした議論があったのでボクの意見を加えてブログに書いてみます。 最近「サービスデザイン」や「UX」で語られる内容を聞いていても個人的には「?」なことが多いので、そうした考えをオープンにしてみようと思います。 ボクの手元では、いわゆるワイヤーフレームを設計している中で衝突する問題と対峙していることが多いです。そのため、その問題解決方法としてのワイヤーフレームの設計は「超」が付くくらい重要です。 そんな中で、サービスデザインやUXの話を聞くと正直むず痒くて仕方ありません。多分「サービ
巷で良く聞かれる「UXデザインとは？」意味が広義にわたるため明快に答えることが出来る人はなかなか少ないのではないでしょうか？ただ「ハラハラという会社で提供するUXデザインとは何？」と聞かれたらこう答えると思います。 “ルック＆フィールによって発生する体験の価値をよりよくする為の作業” UXデザインを正しく運用・開発するためにはIA（情報アーキテクチャ）とそれを実行する手法（ステートメントシート、ペルソナ、カスタマーエクスペリエンスマップ、ワイヤーフレームなど）を組み合わせる必要があります。 今回はそういったツールの中で制作過程におけるレイトステージにおいて弊社で最もハードに使われる「ワイヤーフレーム」と「プロトタイプ」を組み合わせる開発方法を少しだけご紹介いたします(あくまでもアプリの操作法では無くワークフローの一部を抜粋したものになります) 基本的な流れはワイヤーフレーム→プロトタイプの
InspirationUI UI and Wireframe Sketches to Keep You Inspired Gisele MullerOctober 22, 20136 Comments05.6k If you have a website or app you need to design, throwing your ideas on paper and putting together wireframes is a great way to begin the process. To show you how important wireframes can be, in the past we’ve shown you 10 Free UI Wireframe Kits, 13 Super Useful UI Wireframe Tools and some wir
After more than two decades and over 1,000 apps shipped, we know what it takes to ship insanely great software. Our professionals work collaboratively across disciplines to create unequaled software. Our core process focuses on quality, performance, and sustainability. End to End Design & Development Remote Team Augmentation Enterprise Software Solutions We work with our clients through every stag
Since 2009, we’ve been designing, building and operating software products and services
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
