近年、プロトタイプやフレームワークと言った言葉をよく耳にします。
どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。
閲覧環境と利用者の変化
Webサイトの役割の変化について
スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。
PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。
Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。
コミュニケーション的視点の重要性
Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。
利用者の見方が変わって来ているのに、古い手法でアピールするのは無駄も多く、伝わりにくくもあります。
「Webサイトってこんなもの」というところからクライアントも制作者も脱却する時が来ていると感じます。以前とは違い、Webサイトを気軽に閲覧できるようになったという事は「日常のコミュニケーションの内のひとつ」により近づいている事だと考えます。
友人や知人に話しかけるような、実際のコミュニケーションのように伝える事を意識したほうが、より伝わりやすくなるのではないでしょうか？
国内と海外のデザインに対する認識の違い
職人なのかプロなのか？
Web制作者は会社単位であっても、実際には「この人にお願いしたい」という個人ブランドが確立されている事は多いと思います。同じ肩書きであっても大きな能力差があるという事でもあります。
（※もちろん、相性や好みや得意ジャンルなどの関連性もあります。）
制作者はどうしても職人的な思考で動いてると感じています。「良いものを作れば良い」、「わかる人にわかってもらえればそれで良い」、「説明するなんて野暮」みたいな考えの制作者は少なくないです。
その人自身の持つ能力で仕事をするというのは素晴らしい事です。しかし、その人が体調を崩してしまったり、何かあった時に代わりは居ません。
何かあっても代わりがいたり、同じような手法で進める事により、大きな損失を出す事なく合理的に仕事を進めるのが海外のやり方であると何かで読んだ事があります。
出典は忘れてしまいましたが、江戸時代に日本の建築が西洋に大きく遅れをとったみたいな話があって、その鍵が「釘」や「ねじ」の発明だったという話があります。（うろ覚えなので内容は違うかもしれません）
日本建築は釘を使わずに職人の高い技術で家を建ててたそうですが、ここで注目したい点は「合理性」です。使い回しが効いて格段に効率化できる「パーツ」を発明した事で、従来の工程を飛躍的に縮めたという事実。これと同じような事がWebの世界でも起き始めているのではないでしょうか？
オリジナルのデザインについて
企業がWebサイトを持つのが当たり前になってまだ十数年、Webの歴史はそう長くありません。
1990後半の頃はWebサイトを持っているというだけで大きな価値がありました。企業は高いお金をかけて、唯一無二の自分達のWebサイトを作っていました。オリジナリティの高いデザインやレイアウトや装飾が価値を持っていたと言えます。
しかし、今は求められるものが変わってきました。
使い勝手や情報がわかりやすい形で提供されていれば、奇抜なUIや動きなどを求めている方は多くないと考えます。独自のボタン配置や構成に戸惑って迷惑という意見もあります。
ファッションで考えるとわかりやすいのですが、昔は服をオーダーメイドで作っていた時代がありました。時代が変わり少ない時間で大量に服を生産出来るようになりました。自分に合わせて服を作っていくよりも、自分に合う服を買うようになったのです。今は既製品を買うという方がほとんどで、自分の服は全てオーダーメイドでという人はそんなに多くはありませんよね。
Webサイトにおけるデザインも同じです。
オーダーメイド的なデザインよりも使い勝手やわかりやすさが優先される時代になっています。重視すべきポイントが変わって来ているのです。
ブランディング思考によってオーダーメイド的なオリジナリティが優先される場合もありますが、それは一握りの資本力のある大企業などだと思います。
求められるものの優先度が変わっている事を意識出来ていないと何かとずれが生じてきます。
そばとかうどんとか食べたいつもりで座ったら、フルコースしか進めてこないようなのは困りますよね。
Web制作の手法と効率化
クライアントの要望の変化はイコールWebサイト制作の手法の変化へと繋がります。
効率的な制作スタイルと、無駄のない手法での制作体制も考慮する必要があります。
従来のように、ひとつひとつCSSを書いてチェック…みたいな事をやっていると手間もかかり予算規模も膨らみます。
そのような場合に大きく役立つのがBootstrapやFoundationのようなフレームワークです。
フレームワークと設計思想
Web制作に関わる方でBootstrapやFoundationという言葉を知らない人はいないと思います。
出始めはエンジニアでも見映えのあるWebサイトが作れるようになるというイメージでしたが、実は複数人での作業や効率的な制作に多いに役立つものです。
「誰がつくってもそれなりになる」事が特徴の反面、「誰が作っても同じようなデザインになる」と思っていましたが、そこは大きな誤解でした。
サンプルがそうであっただけで、仕組みを使ってデザインをしていく事には影響はほぼありませんでした。
グリッドで組み立てるような合理的な設計思想を知らない方は正直損をしていると思うほどです。
ベースの形をフレームワークによって組み立てていけば、Webサイトの制作スピードは飛躍的に高まります。
フレームワークは「効率的な制作のための手法」です。
合理的・視覚的な制作スタイル
フレームワークでの設計はあらかじめ用意されたパーツのセットを組み上げていくようなものです。
（※ガンダムでいうところのコアブロックシステムのようなものです。）
シナリオとブロックを積み上げる方式
伝えたい事が決まっていても、「どのような事を、どのような表現で、どのような順番で」という事は重要になります。好きな人に告白する時も、シチュエーションやタイミングって大事ですよね。
小説などのシナリオでいう起承転結のような構成の意識が重要です。
構成を考えて行く際には、言葉でのやりとりだけではなかなか伝わらず共有しづらいものです。
通常は図案化したりする事でより理解できます。この手法を取り扱う場合にプロトタイプが大きな役割を担います。
制作方法の変化について
プロトタイプって何？
建築業界では家を建てる前に模型を作ります。
高いお金を払ってるだけに、事前にだいたいの構成や住みやすさなどを視覚的に確認できると依頼者も安心しますよね。Webサイトも建築とまではいかないにしても、依頼者にとっては大きな金額です。
だいたいの使い勝手や構造を事前に理解できたり、意識や方向制を理解できる事は、双方にしてもメリットがあります。出来た後で「なんか違う」というような事も無くなります。
コンポーザー（作曲家）的な発想
先程の述べたのですが、シナリオ（構成）が重要になるという事は作曲に似てるかもしれません。
大きな展開を考えてコード進行や構成を練っていくようなやり方です。
「Aメロ〜Bメロ〜サビ」でいくのか、「サビ〜Aメロ〜サビ」などと言ったように、狙いにそった印象づけを意識しながら組み立てるような感じです。
コース料理をどのような順番で出すと、このお客様は一番満足していただけるのかな？というような考え方です。
実際のWebサイトだと、「事業のポイント〜理念〜メンバー〜概要」なのか「事業のポイント〜メンバー〜理念〜概要」なのかみたいな感じです。
コーポレートサイトでも内容次第で見せる順番や伝えたい優先度は違うものです。
視覚化して共有する
これはStartup Design Frameworkという海外のサービスです。
この動画を見ると役割をもったブロックパーツ（コンポーネント）を組み合わせてシナリオを作っていくような手法というものがどんなものか理解できるかと思います。
実際に視覚化される事でクライアントとのやりとりもスムーズになります。
主題について議論がしやすくなるので、伝える事に関係ないような細かいところに異常にこだわる人とか少なくなります。
ミュージシャンのセッションに近い
大枠（コード進行と展開）決めたら、各々のパートで演奏しようぜみたいなものに近いと言えるかもしれません。大枠で決まったパーツの中に実際の内容を落とし込んでいき、役割をさらに明確化していくようなやり方だと、それだけでも内容をブラッシュアップしていけます。
クライアントも実際の制作の流れをつかめるというメリットがあります。
ライブ感
同じ思いを共有しながら作り上げていくのがプロトタイプの最大の利点だと思います。
環境的な制約はあるかもしれませんが、お客さんの前である程度のパーツが出来上がったりすると、出来ていく感じが伝わり同じ思いを共有できます。
家を建てる時に依頼主が何度も建築現場を見学するような事みたいなものですね。
現時的に可能な制作スタイル
実際の現場にすぐに全て取り入れる事はなかなか難しい事です。社内にもパートナー企業さんにも理解してもらう必要があります。実際に僕がやってるのは下記のようなやり方です。
サンプルサイト
コンポーネント的な考えがわかるようなサンプルサイトをいくつか持ってるので、「実際に形にしていくとこういうようなものになります」というような感じでサンプルサイトを見ていただいています。
口で説明するとなかなか理解できる人は少ないのですが、実際にあるようなサイトをみると一目瞭然です。
まずは他の方が作ってるサイトでも良いので、打ち合わせの際にサンプルを用意しておくのをオススメします。理想は自分で作ったサンプルです。よそが作ったものと自分で作ったものとでは説得力に差が出るものです。
リアルタイムでモックアップ
SkecthやIllustrator、またはgeneratorやフレームワークでモックアップを作っていきます。
構成するパーツのようなものを準備していると、リアルタイムで構成ぐらいを見せられるものを作る事は可能です。ご自身で作るのが出来ない場合はジェネレーターサイトなどをうまく利用して、リアルタイムで提案・共有すると、その場で一緒に作る一体感も生まれます。
ある程度の汎用性のあるパーツやテンプレートを用意するのも大事です。
プロトタイプ手法のメリットとデメリット
これからの手法としてオススメとは言えど、良い事もあれば悪い事もあります。
メリットは効率化と見える化
設計段階から視覚化して共有する事で、価値観のずれがおきにくくなるのは大きなメリットです。
やっている作業内容もどんなものか想像しやすくなる分、「何やってるかわかんないし、ちょちょいって作ってるだけでしょ？」的なところの話もおきにくくなります。
Webサイト制作全体が効率的になります。
※プロトタイプを作るスピード面は悪影響を与えるおそれもあります。
デメリットは新しいものが生まれにくい
プロトタイプからの大きな変更がやりにくいのはデメリットです。
当たり前ですが、今まで見た事もなかったようなものを作るにはむいていません。
（それをホントに望んでるクライアントがどれだけいるかは別ですが）
「これ俺が作ったんだぜ」みたいな事にこだわるデザイナーには面白みが少ないです。
その中でどんだけ面白くできるかで考える事ができる人には楽しいです。
判断基準の徹底
「良い悪いでいうと良い」は捨てる。
職人さんの話とかにも通じるんですが、「良い悪いでいうとやったほうが良い」っていうのはとても危険です。「既製品より職人さんの手仕事のほうが良い」みたいな価値基準にひっぱられがちなのですが、これは「メールで連絡するより手紙のほうが心がこもってる感じがして良い」みたいな事で、根本的な情報を伝えるという目的とはずれるような「論点がずれた判断」に陥る可能性があります。。
価値観をきちんと目的にそって考える事を忘れないでください。
デザイナーの肩書きと役割
大きな意味での相談役・解決役
ただ作れるという人はデザイナーではないと思っています。事業の課題や販売促進などの上でどのような切り口でどのようにアプローチしていくか等の問題に向き合っていかなければ、上記のプロトタイプや制作工程において出来る可能性が変わってきます。
そのような立場でやりとりが出来ていないのであれば、そのように変わっていくほうが良いと考えます。
お客さんとの距離と間合い
仕事を依頼してきた人というだけはなく、理解する事はとても大切です。
僕の尊敬する人達はお客さんを理解し、身内のような思いやりをもってお仕事をしていますし、僕もそうでありたいと思っています。
効率化という反面もありながら、お客さんの事を理解し、より近い存在となれるかを両立しなければ、ただただ生産性があがったというだけでしかありません。
短縮できた時間を価格に反映するという考え方もありますが、制作前のコミュニケーションに時間を割いていくという考え方も大事にしていきたいと考えます。
まとめ：プロトタイプ手法は共有・視覚化というメリットがある
プロトタイプ手法の最大のメリットは共有化・見える化だと思います。早い段階でクライアントと意識や価値観を共有し、目標や課題を解決できる事へ近づける事だと思います。
Web制作者は自分でWebサイトを運営してみると良いと思います。どんな事が課題でどんな事に困っているかを実際に体験すると結構世界が変わります。来訪者のいないWebサイトオーナーの気持ちや、詐欺まがいのSEO業者にでもすがりたいような気持ちは理解できると思います。
ブロガーやSEOのエキスパートとかコンサルの方とか、実際の制作現場で接点のない人達との交流もオススメします。ブログを書いてる人達の行動力や実践力はホントにすごいです。
Web制作の専門的な技術に詳しいだけではいずれ勝負出来なくなります。
制作手法とともに自分達の意識も大きくバージョンアップしていく事も大事だと思います。
僕自身まだまだ試行錯誤の連続なのでこのような話しようよって方は意見交換できると嬉しいです。