サイト制作でプロトタイプを作ってみた
はじめに
今、お友達のWebサイトを制作しているのですが、新しい試みとして、Bootstrapでサイトのプロトタイプを作るということをやってみました。
ドヤ顔するようなものではありませんが…。
なぜプロトタイプを作ることにしたのか
環境によって可変するサイトを制作するのに、平面のデザインカンプを先に見せてしまうと、コーディングや実装をして 「こんなはずじゃなかった」 ということが発生すると 手戻りが多いのではないか と思ったからです。
今までいた職場では、ワイヤーフレームで情報整理をして共有するという文化がなく、いきなりデザインカンプから進めてしまうような制作フローでした。
ワイヤーでは素人にはわからないからと。
そういう気持ちはわからんでもなく、プロトタイプを見たお友達はどう感じるか、私も正直不安でした。
どんなのをつくったか
こんな感じのプロトタイプをつくりました。Bootstrapを使ったのでレスポンシブ対応です。
例えば、ポートフォリオ一覧／詳細、ニュース一覧／詳細など。※WordPressを導入する予定です。
デザイン要素とかほぼないのに、Bootstrapの作法が頭から消えており、時間がかかりましたorz
気をつけたこと
マークアップはこの段階で悩む（デザインから入ると、わからなくなってしまう…）
テキストを「ダミーテキストダミーテキスト…」と入れるのではなく、入手できる情報で当てはまるものがあればとりあえずでもいれました。
プロトタイプのスクリーンショットをとり、チェックポイントを赤入れしPDFで渡すなど、チェックしてほしいところと、無視してもらいたいところとを明確にするようにしました。
返事が来た、そしてこれから
わかりやすくて、イメージがわくと言ってもらえました。
チェックポイントのPDFもわかりやすかったとのこと。
ものすごくホッとしました。
話し合いをして、この段階でレイアウトからガツッと修正が入ったり、思ってたのと違うが発生しましたが、まだ傷は浅いです。
レイアウトを修正した後、素材を一個一個作ってプロトタイプに当てはめたり、余白の調整などをしてコーディングベースでデザインをしていきます。
このコーディングベースでのデザインも新しい試みなので、どうなることやら(笑)
小さく作って共有する
CSSフレームワークの恩恵も受けていますが、小さく作って共有するのはメリットがあるなと感じました。
例えば、今回「トップページをフルスクリーンにしたい」との要望があり、口でレイアウトの変化を説明するのは大変で、動くものを見てもらえば一発です。
今回はサイトの計画から実装まで全部一人で行っていますが、分業の場合は、ワイヤーフレームでスタッフ間の意識を合わせることになると思います。今はAdobe XDなど、実装しなくても動くプロトタイプが作れます。
Web制作、いえ、Webじゃなくても、関わる人がお互いに少しずつ少しずつ、認識を合わせて調整していくという作業が大事 ということがわかりました。
お客様が相手だとなかなかそうは行きませんが、そういう認識が広まるといいなあ。
