HTMLプロトタイプ

ワイヤーフレームを作らずHTMLで設計する、
ベイジ独自の制作手法です。

私たちの会社では、画面設計をワイヤーフレームで行わず、HTMLプロトタイプで行うことが主流になっています。基本的な用途や見た目はワイヤーフレームを模しながらも、HTMLで作られたものがHTMLプロトタイプです。一番大きな違いは、ブラウザ上で実際に操作しながら、画面設計を確認できる点です。

私たちがHTMLプロトタイプを推奨する理由

HTMLプロトタイプは、ワイヤーフレームが持つ多くデメリットを解消できます。例えば、以下のような点はHTMLプロトタイプならではのメリットと言えます。

リンク構造、画面サイズや文字量、レスポンシブの振る舞いなどが確認できる
設計時のファイルをコーディングに流用できるため、生産効率が上がる
画面設計の内容をそのままHTMLに反映することができる
ワイヤーフレームに付随する設計ドキュメントが不要になる
エディタによる一括置換が使用でき、変更が速やかに行える
提出用にわざわざ印刷物を必要としない
CMSのテンプレート作成をビジュアルデザインと同時並行で進めることができる

主に制作側の生産性におけるメリットが多いですが、特に設計段階で実際のWebサイトと同じように操作しながら確認できる点は、クライアント企業側にも大きなメリットとなります。実際、今までワイヤーフレームを使っていた複数のクライアント企業から、HTMLプロトタイプの方がはるかに分かりやすく完成形をイメージしやすい、との評価をいただいています。

HTMLプロトタイプによる画面設計は、私たちの会社独自の取り組みで、他社ではほとんど行われていません。これは、スタッフ全員に制作経験があり、HTMLを触れることもその要因です。また、HTMLプロトタイプを素早く作るためのテンプレートなども準備し、体制を整えています。

このHTMLプロトタイプを画面設計における主要成果物として、コンテンツの配置や基本的なレイアウト、最終的な文書構造などの検討を進めていきます。

ベイジは戦略的な設計もさることながら、生産性や効率の良さ、コミュニケーションの取りやすさもとても重視しています。その判断の上で、ワイヤーフレームとHTMLプロトタイプを使い分けています。このように、設計に強いこだわりを持つ私たちのWeb制作をご希望の方は、お気軽にご相談ください。