WNT-Technology

Technology

Bootstrapで「触れるワイヤーフレーム」を作成！効率的にサイト制作を進めよう！

※この記事は2013年10月11日に執筆された記事です。現在は仕様が異なる可能性があります。

こんばんは、ハロウィンパーティのコスチュームを購入したものの、着ていく勇気がまだ出せていないマークアップSです。

本サイトで何度か取り上げているTwitter Bootsrtap。
この便利なフレームワークを使って実際にサイト制作を行いましたので、その制作過程などをご紹介致します。
また、このようなCSSフレームワークを使う事を前提とした新しいWEB制作のワークフローについても触れて行きたいと思います。

今回扱った案件

img_markup_131011_01

弊社ゲーム開発部からリリース中の「デッキメイク勇者」のサイト。

スマートフォン対応もされていなく、ちょうどリニューアルを検討中だったこちらのサイトをTwitter Bootsrtapをベースにしたレスポンシブ対応のサイトにリニューアル致しました。

制作フロー

デッキメイク勇者以外にもBEEWORKS GAMESのタイトルサイトはスマートフォン対応もされていないものが多く残っているので、今後他のタイトルにも同様に展開できるように、テンプレート化する事も想定して制作フローを組みました。

担当者と打合せ、リニューアルの詳細な要望などをヒアリングします。
Twitter Bootstrap公式サイトで使えるパーツを確認し、手書きでワイヤーフレームを作成します。
2.を元にコーディング、これがそのまま触れるワイヤーフレーム（プロトタイプ）になります。
担当者と打合せ。実機にて動作確認を行い、レイアウトや要素のサイズ感などの改善点をヒアリングします。
3.を調整し、再度実機確認。ここで大枠のワイヤーフレームがFIXします。
5.に現状サイトの要素（画像・テキスト）を反映。CSSでアキや文字色など細かいデザイン部分も調整します。
最終確認、公開
他タイトルに展開できるようにエレメントを精査し、テンプレートファイルを作成します。

手書きのワイヤーフレームと制作途中のプロトタイプ

完成したサイトがこちら

http://beeworksgames.com/deckmake/

主なカスタマイズしたポイントなど

装飾用画像を設定（body背景、ナビボタン、アイコンなど）

img_markup_131011_03

ナビの位置がPCだと上に、スマホだと下に表示

img_markup_131011_04

スクリーンキャプチャに連番を自動表示

img_markup_131011_05

テンプレート化

img_markup_131011_06

今後他のBEEWORKS GAMESのタイトルサイトも同様に、リニューアルを行って行きます。それに向けて必要なパーツを洗い出し、エレメントの一覧ページも作成致しました。
http://webnaut.jp/markup/demo/131011-bwg/template/element.html

今後はテンプレートにある要素を組み合わせてページを作成し、そこにデザインパーツを載せるだけでサイトが完成します。

まとめ

今回のサイト制作で取り入れた最初にコーディングしたデータを作るフローはアジャイル型／イテレーション（反復）開発等と呼ばれています。
元々ソフトウェア開発などでよく使われる用語ですが、最近ではWEBアプリをはじめWEBサイト制作でも取り入れられるケースが多くなってきました。

これまでよく採用されていた要件定義→設計→実装→テストを一本の流れで行うフローをウォーターフォール型と呼び、簡単にアジャイル型との比較を図にすると以下のようになります。

img_markup_131011_00

WEBサイト制作におけるそれぞれの工程での大まかな作業内容とメリット／デメリットをまとめますと、

【ウォーターフォール型】

1 手書きやパワーポイントでワイヤーフレームを作り構成を確認

2 PSD等のデザインツールでカンプを作成、デザイン確認

3 コーディング

4 実機にて動作確認

メリット

・各フェーズにおいて、成果物を明確に定義できるのでスケジュールや進捗、コストを把握しやすい。

・工程が分かれているので、リソースを集中して一気に制作を進められる。

デメリット

・実機で確認するまで動きのイメージが付きにくい。

・コーディング後やテスト工程で仕様変更や不具合があった場合に前工程への手戻り工数が大きい

【アジャイル型】

1 プロトタイプをコーディング（これがワイヤーフレームになる）

2 実機にて動作確認〜調整

3 1、2を繰り返してブラッシュアップ

4 デザインを反映して完成

メリット

・ワイヤーフレームの段階で実機確認ができ、実際のサイズで使用感を確かめながら進められる

・実際に動く画面、機能を試すことができるので仕様の間違いや要求の漏れに早い段階で気づくことができる

・ソースをそのまま使用できれば、デザイン反映が容易になる

デメリット

・全行程で作業担当者が動くため、全体のスケジュールや進捗が把握しづらくマネジメントのコントロールが難しい

・素早く実装するための優れた技術スキルだけでなく、仕様変更への柔軟な対応力やコミュニケーション能力が求められる。

と言った形で、スマートフォンサイトを始めマルチデバイス対応が求められる昨今、
組んだものを素早く実機で確認するという工程の重要性も高まり、アジャイル型の制作フローが注目されています。

クライアントワークで気を付けるポイント

CSSフレームワーク、特に今回使用したTwitter Bootstrapは非常にUIが豊富で様々なパターンのコンテンツ制作に対応できますが、やはり案件によってカスタマイズして実装していくケースは必ず発生します。
それに当たってはフレームワークのCSS構造を正しく理解し実装していく必要がありますし、パーツ数の多いフレームワークほど一部を変更した際の影響範囲も気にする必要があります。

また、クライアントとのコミュニケーションも重要になってきます。
工数やスケジュールを圧縮するためにフレームワークを使ってみたものの、細かいカスタマイズが積み重なり、最終的にフレームワークを使わずに1からコーディングする作業と同じぐらいの工数がかかってしまうという恐れもあります。

フレームワークの特性を把握し、カスタマイズできる範囲やそこにかかる工数をクライアントに提示／説明できるようにする事も重要です。
その上でうまく活用して頂ければと思います。