ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ

私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？

[yoiIT]

官公庁や金融系はワイヤーフレームが納品物として定められていることも多い。5000ページあるパワポ資料の共通パーツ変更とか狂気の沙汰。

[paradisemaker]

これ、狙いはよく分かるしずっと試行錯誤してるんだけど、複雑なツールやサイトを作る時は結局、専門性による分業がトータル効率良かったりするんだよね...

[masatomo-m]

HTMLプロトタイプというか、とりあえず素のBootstrapでできるところまででブロックレベルでのイメージを掴むというのは今更ではあるがまああり。でも実際のイメージはモックまで作らないと固まらないよね

[wumf0701]

俺もこれやろうとしてる。でも個人レベルでやっててもチームとしてできるようにならないとなかなか成果にならないと思い中。リーマンとはいえWeb屋を名乗るなら基本的なHTMLとCSSのスキルが備わっててほしいんだよな。

[sogitani]

プロトタイプをHTMLで作るというのも一つのポイント。HTMLを扱える人ならカスタマイズも自由にできるし、きっとこっちの方が楽だと思います。

[gnt]

Windowsはろくなワイヤフレームツールがないのでそれもありかも

[natu3kan]

ケースバイケースだろうなあ

[KoshianX]

ペーパープロトタイプのあとはまあコーディングしちゃったほうが早いってのはわかるよな……。

[ryun_ryun]

それもありかも。bootstrapなどを使えば、むしろワイヤー描くより早い気がする。

[sometk]

クライアント案件だと難しい

[yomikodesign]

なんかこれはこれで大変なんだなあ、って印象が残りました。

[yo_waka]

僕もそういえばHTMLで作る派だった

[hiddy216]

なぜパワポを叩くのか、、、可哀想すぎる。パワポでも画面設計やるけどね？論点はツールではないよ。制作サイドのリテイクを減らす苦労は至極分かるが、結局ゼロにはならないので、どこで刻むかというだけ。

[inouetakuya]

“「完成したデザインを見なければ判断できない」というクライアントも多く、結局はビジュアルデザインが仕上がってから設計に関するフィードバックが来ることが多かった”

[sumege]

“一見レイアウトが完成しているように見えるため、デザイナーがそれに引っ張られて、安易にそのレイアウトを踏襲するという「完成度の高いWF」と同じ問題が起きがちだった。” あるあるw

[hama_shun]

設計者が HTML + CSS + JS までできるなら、規模によっては良さそう。

[motofu]

こういうのをやるためには、社内もクライアント側もワークフローを色々変えないといけない。でも、やりたいなー

[k12u]

Web制作屋がパワポ・・・「それはすごいですね」みたいな真顔棒読みするしかない感じ

[niseissa]

ちょっとだけ立場は違うけど、答えはひとつだ。

[sigwyg]

HTMLプロトタイプは細かい角丸とかに突っ込まれ出すと泥沼に陥るので、けっきょくは進め方だよなあと思う。WFは企画段階であーでもないこーでもない言うときには良いものよ

[Kmusiclife]

だんだん時代が変わってきたなぁ。

[teracy_junk]

優秀なディレクタとある程度の能力のプログラマと優秀なデザイナがいないで単純に真似したら大火傷するなと思いました（小並感）

[ikosin]

“HTMLプロトタイプにしろ、WFにしろ、未完成のものから完成品を想像するのは結構リテラシーが必要”

[utility1]

パワポ芸でやっちゃってる。10年ぐらいこれでやってるから、そのほうが早いと思っちゃうんだよなあ。今まさにリンクの指示書いてるけど、HTMLならそもそもリンク入れてるよね。。慣れるまでの時間がなあ。。

[kamayan1980]

素朴な疑問。パワポやexcel資料を嫌う人は、お客さんからパワポやexcelで資料をもらったときはどうしてるんだろうか。自分たち用に作り直すのかな。

[Dursan]

直接当該箇所にコメント出来ないと フィードバックする方は負担が大きくなるなあ（小並感

[masayoshinym]

“プロトタイプにすることでビジュアルデザイン以降の差し戻しが減るんじゃないか、というのはあまり期待しない方がいい”これはどうやってもなくならないので割り切った方が良さげ。

[shimanto40]

“AdobeからXD”

[vanbraam]

"結局はビジュアルデザインが仕上がってから設計に関するフィードバックが来ることが多かった"が"作り直しなどの手間は増え"ず"恐れることはまったく"ない,との事.でもこれ請負契約じゃない気がする

[itouhiro]

「先日AdobeからXDというプロトタイピングツールがリリースされたように、今後はプロトタイピングツール多様化・充実が予想されます。私たちも将来、ツールを使うワークフローに移行するでしょう」

[june29]

「プロトタイプは、あくまでプロトタイプである」という共通認識があれば上手くいくケースもありそう。雑につくったプロトタイプに引っ張られてプロダクトコードの質が低下するのが怖いな、という懸念がある。

[basseyboost]

bootstrapの次の段階

[akirafukuoka]

ワイヤーフレームからプロトタイピングへ。マルチデバイスに向けて複雑化しているからこそ移行すべき。

[shoshirasaka]

いい記事

[kaipu1224]

Excelのセル結合されまくりの画面イメージしか見たことないや( ´Д｀)=3

[derby]

プロトタイプ公開してほしい。

[labduck]

実体験として、実際に動いているのを触ってもらえるのでイメージがつきやすいしいい印象をもたれやすいのはいい。が、見た目に話題が向きがちなので意識してコントロールする必要あり。

[deg84]

制作会社よりも代理店がパワポでワイヤー作って送ってくるの良くあった。まあスキルが無いのと思考停止なんだろうな…

[mut00tum]

あーよさげ。懸念点は「直感的に書き直せない」かな。GUIでのレイアウト変更って意外と強力なツールだったりするからなー。