こんにちは、uni-browserの財前航介です。
Webサイトを作成されるとき、皆さんはどのようにしてWebサイトを設計するでしょうか。
Webサイト作成でも、ITシステム開発でもそうなのですが、「認識相違」というのは、いつでもトラブルの元です。
それを防ぐためには、開発に携わる人や、そのWebサイトのユーザーの認識を、誤解のないように統一しておく必要があります。
「プロトタイプ」と呼ばれる、Webサイトの試作品を作成することは、ユーザーと開発者の間での認識の違いを回避するために、とても有用な手段です。
この記事では、その「プロトタイプ」にどんな種類があるのかについて、詳しく見ていきましょう。
プロトタイプの必要性
突然ですが、「丸の上に線を描いて」と言われた時、あなたならどんな図形を描くでしょうか。
こんな感じでしょうか。
それとも、
こんな感じでしょうか。
どちらも正解ですね。
Webサイト作成や、ITシステム作成では、こういったことがしばしば起こります。
そしてこういった些細な誤解が、大きなトラブルになることもあります。
どういう事かと言うと、WebサイトやITシステムの開発は、お客様に対して、オーダーメードの製品を作ることが非常に多いです。
その場合、計画の段階で、ある程度「どれぐらいの期間と開発費がかかるか」ということを事前に試算しておいて、その見積もりを元に開発に取り掛かります。
しかし計画段階でお客様と開発者の間で、完成品に対する認識のズレがあり、そのことに気づかないまま開発を進めてしまった場合…
いざお客様に製品をお渡ししたときに、
「思ってたのと違う！！！」
ということになります。。。
そして、WebサイトやITシステムに対して、その「修正」を行うためには、その分の「追加期間」が必要です。
当然、その修正期間の間も、開発者の人件費はかかり続けているわけですから、「開発費」も膨らむことになります。
しかし、開発費は最初の計画の段階で、ある程度見積もりを出しているわけですから、その見積もりと、実際にかかった費用に差異が出てしまった場合、「この差異はどちらの責任なのか」という話になります。
「どちらがその追加分の開発費を支払うのか」ということですね。
これは難しい問題です。
IT系の開発の現場ではこういったことが、些細なことから、大きなトラブルまで、本当に頻繁に起こっています。
大規模な開発になればなるほど、それに関わる人も増えるわけですから、「全体としてどうあるべきか」ということを認識できている人が少なくなってきます。
私もエンジニアになりたての頃は、自分がどんなシステムを作っているのかもよく分らないまま、上から降りてきた設計書の通りにプログラムを書いていた覚えがあります。
そして数か月後、
「結局このITシステムって、何をするためのものなんだろうね」
みたいな会話を、同僚としていた覚えがあります笑
（新人エンジニアの方は、僕の真似をしてはいけません。）
大規模な開発になると、複数の会社が分担してシステムを作っていることも少なくありません。
そうなってくると、「そもそもシステムの全体像を把握している人が、自社にいない」ということも普通にありえます。
上司に聞いても、
「ちょっとそれは、うちじゃ分からないな～」
なんて返されることもあります。
そうなってくると、上から降りてくる「設計書」などに記載されている指示を元に開発をするわけですが、もしそこに、ボタンを配置する位置の記載に添えて、「丸いボタンの上に横線を引く」などと書かれていたらどうでしょうか。
そこまで大規模なWebサイトやITシステム開発でないにしても、これに近いことはあらゆる開発業務で起こりえます。
「ボタンの上の線」程度でしたら、少し見た目を修正すれば済む話かもしれませんが、もしこれが、もっとシステムの根本に関わる部分だったらと思うと、ゾッとしてしまいます。
Webサイトの色々なページから呼び出されている共通的なパーツであったり、ITシステムの根幹を成すようなプログラムで、こういった認識違いが起きてしまうと、その一か所を修正するだけで、全体に影響が出てしまいます。
もう一度、全ての機能において、動作テストをやり直さなければいけなくなるかもしれません。。。
そして、それによって開発期間は伸び、それによって費用も膨らんできて…
このように、Webサイト作成やITシステム開発では、「計画の段階で、認識のズレをなくしておく」というのが、非常に、非常に重要です。
その為には、「言葉」による伝達では、限界があります。
そこで、「プロトタイプ」と呼ばれる試作品を、開発の計画段階で作成し、「WebサイトやITシステムの実物に近いものを見ながら、皆の認識を合わせていく」という手法が考え出されました。
システム開発の現場では、「プロトタイピングモデル」などと呼ばれる開発手法です。
実際に「試作品」を見ながら開発を進めていけるのであれば、認識のズレは大幅に減りそうですよね。
こういった背景から、（特にオーダーメードで作成する）Webサイト作成やITシステム開発においては、「プロトタイプ」を作ることは、非常に重要であると言えます。
ただ、一口に「プロトタイプを作る」といっても、その作り方には何種類かのパターンがあります。
プロトタイプの種類
Webサイト作成におけるプロトタイプは、おおまかに、以下の３種類に分類できます。
- ペーパープロトタイプ（ワイヤーフレーム）
- デジタルツールによるモックアップ作成
- HTML等の実装
ペーパープロトタイプ（ワイヤーフレーム）
「ペーパープロトタイプ」などという、気取った横文字の言葉があるのですが、結局のところこれは、「紙に描く」ということです。
画面の見た目や、画面遷移などが分かるように、紙やホワイトボードにアイディアを記載していきます。
実際のユーザーがWebサイトを用いるシチュエーションを考えながら、その流れに沿ったシナリオ通りの画面遷移が記載できるように意識します。
「ワイヤーフレーム」という言葉は、必ずしも紙に描かれたものだけを指すわけではないのですが、画面の設計を記載する際、実際の画像を用いず、代わりにテキストで説明書きを加えたようなものを指します。
開発者とお客様との間で認識合わせをするためのツールとしては、やはり紙に描いた設計図では、少し心もとない部分があります。
しかし、ペーパープロトタイプは、とにかく素早くアイディアを形にできますし、チーム内での認識合わせなどには大きな効果を発揮するでしょう。
デジタルツールによるモックアップ作成
「モックアップ」とは、上記の「ワイヤーフレーム」から一歩進んで、実際の画像やテキストを用いた試作品です。
モックアップを作成する場合は、「ペーパープロトタイプ」でなく、「デジタルツール」を用いた作成の方法が適しているでしょう。
たとえば、「Sketch」と呼ばれるデジタルツールがあります。
こういったツールを用いれば、実際にHTMLやその他のプログラムなどを実装して試作品を作成する必要はなく、疑似的に、実際のWebサイトの見た目を再現したものが作成できます。
開発者とお客様の認識合わせの場などでは、最低限このレベルの試作品があれば、双方の認識のズレを大きく減らすことができるでしょう。
HTML等の実装
可能であれば、実際にHTMLなどを用いて、完成品に近い形のWebサイトをお見せするのが理想的です。
というのも、この方法であれば、試作品で用いたソースコードなどを、実際の開発にもそのまま流用することができるのです。
仮に、紙面やその他のデジタルツールを用いて試作品を作成していた場合、
「試作品の時はできると思ってたけど、いざやってみたら技術的にできない！」
なんてことになってしまうこともあり得ます。
「これは技術的に可能だ」「この部分の実現は難しい」という判断を、実際に実装しなくても行える知識やスキルを持っている人であれば、この方法は不要かもしれません。
しかし、ミスや認識のズレを少しでも減らすためには、より実際に使われる状態に近い形のものを用いるのが理想です。
ただ、「計画の段階でHTMLの実装までやるのであれば、その後の開発では何をやるのか」と思われてしまうかもしれません。
基本的にこの時点では、写真やテキストなどのすぐに差し替えが効く部分は、ダミーのものを用います。
そして、HTML・CSS・JavaScriptなどの実装を通して、機能的な実現可能性のみを確認します。
開発後に認識のズレが発覚して一番困るのは、「全体に関わる部分」です。
ですから、Webサイト全体の「共通機能」とも呼ぶべき、「JavaScript」や「CSS」を、この時点である程度実装しておくことは、後の開発の手戻りを防ぐために、非常に有効です。
そのため、もし可能なのであれば、HTML・CSS・JavaScriptによって実現されている機能面は、試作品の時点で作成し、お客様にもお見せしておいた方が良いでしょう。
画像や、テキストなどはある程度のもので構いません。
もしデータベースからデータを持ってくるのであれば、この時点では、データベースへの接続は不要でしょう。
プロトタイプ用の固定値を返せば良いです。
IT技術を用いた開発に携わっていらっしゃる方であれば概ね同意頂けると思うのですが、IT開発では、プロジェクトの「最初に」苦労しておいた方が、絶対に良いです。
プロジェクト前半で、どれだけ後半のことを具体的に考えながら準備できるかで、その後の開発の効率、ひいては、プロジェクトの成否が決まります。
計画段階で適当にやってしまったプロジェクトがどうなるかは、きっとあなたも知っているはずです…笑
ぜひとも実際にユーザーが使うときのイメージが湧くようなプロトタイプを作って、開発後半の準備を万全にしておきたいものですね。
まとめ
本日は、Webサイト作成などにおける「プロトタイプ」の重要性と、その種類についてお話をしました。
Webサイト作成における「プロトタイプ」には、主に以下の３種類があります。
- ペーパープロトタイプ（ワイヤーフレーム）
- デジタルツールによるモックアップ作成
- HTML等の実装
もし可能であれば実際にHTML等を実装して、より実際に使われるものに近い形でプロトタイプを共有できると良いですね。
本記事が、少しでも皆様のWebサイト作成の助けになれば幸いです。
最後まで読んで下さり、ありがとうございました。
コメント