1.0UX TIMEShttps://uxdaystokyo.com/articlesユークスhttps://uxdaystokyo.com/articles/author/uxdt/rich600338<blockquote class="wp-embedded-content" data-secret="vqftKllUAi"><a href="https://uxdaystokyo.com/articles/wireflame_for_check_item/">ワイヤーフレームは具体的要素とその配置を確認するもの</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/wireflame_for_check_item/embed/#?secret=vqftKllUAi" width="600" height="338" title="“ワイヤーフレームは具体的要素とその配置を確認するもの” — UX TIMES" data-secret="vqftKllUAi" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2018/07/UX漫画_08水野ヘルプ_FB.jpg600314ホームページやWebアプリを作るにために、開発実装前に作成されるワイヤーフレームの役割について今回はご紹介します。 デザイナーの方であれば、デザインを行う前にまずワイヤーフレームも作成する方も多いかと思います。しかし、いざ作成に取り掛かろうとした時、結局どこまでワイヤーフレームに落とし込むべきか悩んだことはないでしょうか？また、ワイヤーフレームを作っていざ開発に入ると、出来上がった仕様が微妙に違ったり、思っていた構造とは異なるものになってしまった！なんて経験はないでしょうか？ ワイヤーフレームは情報設計のためのもの 「ワイヤー（線）」と「フレーム（骨組み）」を語源とするワイヤーフレームは、一言で言うと情報の設計図の役割を果たします。そのため、どこに（Where） / 何を（What） / どのように機能するか（How）が伝わるように作成する必要があると言えます。 つまり、要素がどこに配置され、何を表示し、それがどのように機能するのか、ということです。最終的な完成形に必要な要素（アイテム）は具体的な形でワイヤーフレーム上になければいけません。 見た目だけのビジュアルは要らない！ ワイヤーフレームの段階で、要素のデザインは必要ですが、それ以外の色や形のビジュアルデザインは要りません。なぜなら、ワイヤーフレームを見たメンバーは視覚的要素に惑わされて製品の本質を理解しないまま開発が進んでしまう可能性が高いからです。 ワイヤーフレームでの確認内容は、その人の立場によって変わります。例えば、エンジニアの場合「どんな機能を実装する必要があるか」を確認しますし、デザイナーの場合は「ユーザーにわかりやすい動線はどうするか」などでしょう。クライアントは「サービス・製品がどのように動くか」を確認するかと思います。 であれば、ワイヤーフレームの段階ではまずその要素だけであれば十分と言えます。この点さえ含まれていれば、各メンバーは開発に入る前の段階で、議論し修正を加えることができます。つまり、具体的な要素の内容とそれに付随するデザイン以外は要らないということです。 情報が設計されたワイヤーフレームは、コミュニケーションを取るための手段にもなり、手戻りやはじめに作ったワイヤーフレームと異なるものが出来上がるという失敗を無くしてくれます。 具体的な要素の確認と配置がワイヤーフレームの役割 ワイヤーフレームはそのページの中の要素を書き込み、どこに配置するかを決定させるものです。ここでデザインの良し悪しを評価することはありません。 良くある失敗としてダミーテキストやダミー画像の採用がありますが、ダミー要素では、どの要素なのか不明瞭なのでNGです。逆にワイヤーフレームは具体的な内容が含まれた要素を見るために利用します。具体的な内容が含まれた要素が確認できれば、カラーや見た目のビジュアルデザインの工程に移ります。 関係格言：ダミー要素だけのデザイン制作は危険！文字・画像もUIデザインの重要な要素 ワイヤーフレームのまとめサイト 以下のサイトでは、完成したWebサイトとワイヤーフレームの両方を見ることができます。ワイヤーフレームの段階でもどのような画像が来るかを示す必要があるため、ダミー画像になっている部分は良いとは言えないですが、ワイヤーフレームでは要素だけを作っていることが理解できます。 参考記事：Wireframe Showcase