サイトの骨組みであるワイヤーフレームを制作する作業について

6月初旬に制作を行わせて頂きましたホームページがこのほど公開になりましたので、
近日中にこちらのホームページでもご紹介させて頂くつもりです。
さて、今回はホームページの制作過程にある、ワイヤーフレーム(骨組み骨格)の作成について書こうと思います。
建築などでも見取り図のような図面があるように、
図面や見取り図が必要になる制作の場合には必ず存在します。
これはホームページ制作でも同じです。
ホームページを制作する初期段階として、必ずこのホームページの骨格を決める作業があります。
いわゆるワイヤーフレームという名前で呼ばれていたりしますが、
要は骨格・骨組みです。
お客様と直接お会いしてお打合せが可能な場合には、紙の状態で複数パターンご提示して、
直接その場で紙に修正などを書き込んでいくのです。
遠方のお客様や電話やメールのみのお客様の場合には、画像として用意し、
パソコンでお見せ出来るように致します。
この段階でお客様と緊密に打ち合わせすることが、一番大事なところになります。
ここで手抜きを行いますと、後からの修正で非常に時間がかかることになるのです。
ですので、NEXT-RAYではここを最も大事な作業工程のひとつとして位置づけています。
ホームページ制作に携わる方であればご存知の方も多いかと思いますが、
WEBでこのワイヤーフレームを制作できるサービスが幾つかありますのでご紹介致します。
無料なもの、有料なものとありますが使い勝手は様々です。
私個人も使う場合もありますが、
お客様にご提示するものを制作する場合には、PHOSHOPを利用してワイヤーフレームを制作しています。
職場などでは紙に書いた走り描きを皆で検討していくのがもっぱらです。
骨組みであるこのワイヤーフレームをいつ誰にどのような目的で使用するのかによって、
その緻密さが変わってくるかと思いますので、使うタイミングを選ぶのが大事になります。
日本語サイト
海外サイト
 Website wireframes : https://gomockingbird.com/
 Lovely Charts | Diagram software : http://lovelycharts.com/
Frame Box – Lightweight online tool for creating mockups : http://framebox.org/
Mockingbird : https://gomockingbird.com/mockingbird/
 MockFlow: Online Wireframe Tool : http://www.mockflow.com/
Wireframe Software – Gliffy : http://www.gliffy.com/uses/wireframe-software/
 Lumzy : http://www.lumzy.com/
 Creately : http://creately.com/
 Slickplan : http://slickplan.com/
 iPlotz : http://iplotz.com/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です