ワイヤーフレームをphpで書いてみるTweetここ4年くらいずーっと思ってたことなんですが、ワイヤーってパワポじゃなくてphpで書いた方がいいんじゃないか。いうことで、今やってる大規模コーポレートサイトのリニューアル案件で実践してます。ウェブサイト設計の業界メインツールはパワポだと思うのですが(なんかいいツールがあれば教えてください)、単発キャンペーンサイトならまだしも、コーポレートサイトの設計をやる場合は主に以下の点でめんどくさいです。グローバルナビなど反復要素が多いので、修正が入ると全ページ修正しないといけない(マスタを駆使しているとはいえ、限界が)カラム幅や文字サイズのアタリがつけづらい。デザインしてみて初めて「文字多すぎるやん」となることしばしば。オンマウスなどのインタラクティブ挙動が表現しづらい。遷移先をいちいち書き込まないといけない条件分気によるレイアウト違いを、いちいち分離して表現しないといけない。トップページだけフッターリンクに項目が追加される場合とか。メールに添付したり、いちいちストレージにアップして連絡するのがめんどくさいまぁphpつくること自体が目的なんではなく、別にhtmlでもいいんですが、どうせならphpの方がさくっと効率化できるからいいよねと。あ、俺の立場はプロデューサーやIAであって、プロの実装屋ではありません。実装の方々からするとメリットとデメリットも変化するんでしょうか。この方法のメリット上で書いたことが解決できるぞ!ということでやってみてるんですが、一言で言うと「手触り感が伝えられる」ことがすごいいいことだなぁと思いました。クライアントに見せてないからどうなるかは分からんですが。逆に言うとパワポのワイヤーはあくまで「理論上のものである」というのが分かりました。カテゴリー→サブカテゴリー→サブサブ...と辿るのが王道のサイト設計とはいえ、今やってる案件みたいに膨大にカテゴリが多いサイトでは、末端ページに行くまでになんぼクリックせなあかんのじゃい、となる。設計段階でモックがあれば、「じゃあナビをドロップダウンにするか」とか「ショートカット銅線入れるか」とか「インデックスページをカットするか」みたいな判断がしやすい。重要なのが、仮にナビをドロップダウンさせるとなった場合に第何階層から第何階層へショートカットさせると一番気持ちいいかといったディテールの議論ができるところかなぁと思ってます。いう設計にした際にカテゴリ移動がしやすいかどうかまで確認できます。人に使ってもらってナンボのウェブサイトですから、あくまで「ルールとして成立している設計である」以上に、なんだかんだで「使いやすい」というところまで設計で担保しておきたいです。デメリットとにかく時間がかかるはじめて作ってるんで試行錯誤中ですが、一回テンプレ作ったら今後はそれを改修すれば速くなるでしょう。資料として残らないモックで確定した後、デザイン中に裏でパワポにすればいいのではないかと。今後の展望wordpressでやった方が絶対早いよなー。ナビゲーション項目とか全部ベタ書きでやってますが、入力内容が特定の名前でphpファイルで出力されるようにしてればナビの実装が激速化するんではないかなと。とここまで書いて思ったんですが、「ワイヤーで設計する」というよりも、設計とモックアップを同時に作っちゃうと表現した方が正確かも。「手触り感」がクライアントに伝わりやすくなるのがいいなぁと思ってます。お仕事コメントコメントをどうぞ(承認後に反映されます)返信をキャンセルする。(8)aboutわたしについて楽器と機材を紹介するライブ情報リンク当サイトについて意識低い系UXストラテジストいまさしのライフログFacebookRSS著者:いまさし都内の某デジタルエージェンシーで働く意識低い系UIストラテジスト。休日はジャズベーシスト兼ゲーマー。imasashi.net。