EVENT

Web構築の早技 効率的・効果的にWebを作るための進め方

ポジティブな「朝令暮改」、そして「爆速改善」がサービスを進化させる──Web構築において、高速でプロジェクトを進めるメソッドやツールの開発は日々続けられています。例えば、スケッチツール、モックアップ作成ツールなどのラフの作成、さらにリーン、アジャイルなどプロセス自体が早く回る仕組みなどあります。これは、Webを作る側、作られたWebを運営する側、プロジェクトメンバー全員にとってさまざまなメリットがあるからです。

しかし、ただ「早い」だけでは意味が無いことは当然です。

様々な関係者との意思疎通をきちんと図りながらも、早く進めることが重要です。ゴールは「日々のWebプロジェクトにおいて効率的かつ効果的なやり方」を選択し採用すること。その現状を共有・議論すべく、ロフトワークが主催するクリエイティブやビジネスに関する学び合いを促すプラットフォーム「OpenCU(オープン・シーユー)」では、2017年2月8日(水)にイベントを開催しました。タイトルは『Web構築の早技』です。

作り手側は制作環境をいかに整備すべきか、あるいは現場で実践するために必要なことは何かを参加者と共に考えました。

講師は、Webデザイナーの長谷川恭久さんに依頼しました。デザインやコンサルティングを通じて長年Web構築の現場に携わり、関連書籍も執筆。現在はスタートアップなどの企業に向けてデザインプロセスの改善や運用サポートも行うなど、第一線の実践者でもあります。

冒頭は、長谷川さんの講演では「定番」だという1枚のスライドから始まりました。

2年前の当たり前が、2年後の非常識に。現場の「当たり前」を疑う意識を

長谷川:このスライドは1995年に「Windows95」が発売してから、2013年までのデバイス販売台数のグラフです。2011年にはスマートフォ ンなどのタッチデバイスがパソコンを抜き去り、すでに大きな差が付いています。

私がなぜこのスライドを見せるのか。それは「2年前の当たり前」が「2年後の非常識」になる可能性があるからなんです。つまり2009 年や2011年のWeb制作の「当たり前」も、すでに非常識になっている可能性は考えないといけない。

ですので、本日のテーマである「早技」についても、過去に常識だった制作のノウハウを「そのまま」受け継ぎ、単純に「早く」しようとするのは、非常識でナンセンスなことかもしれません。

現場を瞬時に変える魔法は、ない。

※1:要素やポジションをを規定したワイヤーフレームに具体的な色や画像の指定をしたもの。

長谷川:とはいえ、制作のスピードをより高め、効率的に業務を遂行するために、新しいツールの導入やワークプロセスの再設計は重要です。本日は早技を、日々のWebプロジェクトにおける、効率的かつ効果的な進め方、と定義して作り手側で取り組むべきことを中心に議論できればと思います。

効率化について講演すると、「導入する予算がない、周りから理解されない、ワークフローが違いすぎる」などの返答がきます。それは私も実際に現場で経験していますから、気持ちはよくわかる。それらをどうやって取り入れていけばいいのかを、私が複数の会社で得た経験からお話します。

まず、手段が先行しても現場は変わりません。どれほど素晴らしいツールでも、同僚やクライアントからは「なぜ変えるのか?」と反発が起きるでしょう。だからこそ、現場の環境を少しずつ変え、納得をしてもらいながら、手段を最適化していくことが大切です。現場を瞬時に変える魔法なんて存在しないんです。特にツールから変えると痛い目にあいます。

現場を変えるプロセスとして作り手側ができる工夫の一つに、「デザインのブラックボックス化を抑える」というやり方があります。例えば、エンジニアは一つのプログラムをメンバーを全員で作り上げていく方法論を確立しています。一方で、デザイナーは「このPSDファイルは私のもの」といったように共有する概念があまりなく、また共有しにくい環境にもなっているはずです。私も最初はやりにくかったし、恥ずかしいかもしれませんが、「途中経過をちゃんと見せて方向性を示す」と、ブラックボックス化は防げます。

方向性を示した段階の進捗率が10%なら修正は利きますが、デザインカンプ(※1)で90%まで作ってからの方向転換は、精神衛生上もよくないですからね。

それから、デザインのあり方を言語化しておくのも有効です。例えば「デザインしたパーツの色がなぜ黒でなければいけないのか」といった情報をデザイナーでない人が理解できるようにし、クライアントが感覚で判断しないように論理的に伝えられるようにするのも重要だとだと感じます。

Web構築の現場で早技を実践するための3つのポイント

長谷川:ここまでの内容を、Web構築の現場で早技を実践するためのポイントとしてまとめます。

1.社会の変化に適応できているか問いかける
スマートフォンの利用状況などの社会変化、利用者の体験に適応できているのかを常に問い直しましょう。

2.現状のワークフローを常に疑い、自身のおかれている環境に合うワークフローは何かを模索する
「このツールならスムーズにやりとりできる」といった理想論で構いません。新しいツールや方法を試し、その価値を知りましょう。

3.啓蒙するためにできることは何か考える
ツール先行ではなく、ビジネスにどれくらい寄与するか、プロジェクト全体にどれだけメリットがあるのかを考えて伝える努力をしましょう。

Web構築を劇的に早くする魔法はありません。ですが、常に「早めに共有するための手段」は試しましょう。それはもしかしたら紙に書いて見せることかもしれないし、SketchやAdobe Comp CCを使う方法かもしれない。自分のワークフローや手段に合うものを見つけて、積極的に取り入れてほしいと思います。

ロフトワーク寺井が語る、「クライアントワークは既成事実を一緒につくる」

長谷川さんの講演後には、ロフトワークのクリエティブディレクターである寺井 翔茉も登場してのトークセッションに。

寺井は「長谷川さんがお話されていたポイントは僕もクライアントワークで意識しています」と賛同した上で、モックアップツールを打ち合わせで触りながら仕様を詰めていくというナレッジを共有。心がけているのは「クライアントから承認を得るのではなく、一緒に作っていくというコミュニケーション」だといいます。

以下、長谷川さんと寺井によるトークセッションの一部を紹介します。 

 
ロフトワーク シニアディレクター 寺井 翔茉

Webサイト構築サービスでプロトタイプしてしまう

寺井:ロフトワークの寺井です。普段はディレクションを専業に、デザイナーと協力しながらクライアントワークを進めています。長谷川さんのように実際にデザインする立場ではなく、ディレクターとしての工夫をお話できればと思います。

先ほど、長谷川さんがおっしゃった「早く見せる工夫」は僕も実際に挑戦しています。

具体的には、新しいWebサイトの構造と要素を定義をイメージするためのモップアップ作成のプロセスで、SquarespaceというWebサイト制作サービスを使っています。PCサイト用の素材がスマホ用としても同時に確認できたり、単純なワイヤーフレームよりも実際の見た目に近いものを体験できたりするのが利点です。修正や調整もブラウザからできるので、クライアントとも具体的にイメージを握りやすくなります。

長谷川:Squarespaceは海外のツールで、現状は日本語化もされていませんよね。なぜSquarespaceなんですか?

寺井:シンプルなテンプレートが選べるのが大きいですね。ワイヤーフレームを、ラインやブログ、テキストなどシンプルな要素のみで構成するのと一緒で、Squarespaceは、日本語フォントが選べなかったり、見た目のコントロールが利きにくいことが、イメージだけを大枠で掴むのにはかえって相性がよいんです。イメージ段階でデザイン要素が入りすぎると、デザイナーがいざデザインとして仕上げる際にバイアスがかかって、モックアップに引っ張られてしまうという問題が起きやすいと感じています。それから、ブラウザベースなので、ライター、クリエイター、クライアントなど制作に携わる関係者が触りやすいのも利点です。

長谷川:たしかにウィンドウサイズを変えた時の見え方を検証するのに、早い段階で体感しやすいWebサイト制作サービスを利用するのはいいですね。「このツールが正解」というより、使いやすいものを選べばいいとは思います。

寺井:僕はSquarespaceをある意味ワイヤーフレーム的に使っているわけですが、長谷川さんはワイヤーフレームの段階で使うツールはクライアントによって変えますか? 例えば、定番のパワーポイントやキーノートを使うこともありますか。

長谷川:いろいろ言われることが多いツールですが、パワーポイントではいけない、ということではないと思います。たとえば、「作ったワイヤーフレームを実際にクライアントが編集したい」という要望がある場合は、広く普及していて手を付けやすいことを考えると、強力なツールになりえたりもします。いずれにしても早く作るためのツールに正解はありません。

寺井:制作体制によっても使えるツールには限りが出てきますね。

長谷川:ええ、どうしても環境に依存します。クライアントと常に並走するパターン、代理店が間に立っていてクライアントに会わないまま進むパターン。それぞれにメリット、デメリットがあります。後者のように会えない場合は、Photoshopを用いて完成形に近いカンプを作ることがベストになることもあります。スピードだけなら手書きが最速ですが、意図が直接説明できない状況では使えませんよね。ちなみに僕は、まずは手書きでワイヤーを書くところから始めることが多いです。

コンテンツの要素から組み立て、「1カラム構成」を基本に

寺井:ロフトワークは受託制作が主となりますが、最近はミーティングで付箋に要素を書き出しながら、クライアントとワイヤーフレームを作る手法を取ることもあります。

長谷川
:それは私もやりますね。Webサイトという概念ではなくコンテンツを主体に考える時に使います。

寺井:クライアントからコンテンツの要素をヒアリングして、優先順位を付けてみたり、グルーピングしてみたりですね。

長谷川:そうです。私は優先順位をつけるときは、なるべく1カラムの構成に落とし込むようにしていますね。よくありがちなのが、「迷ったら横に置く」といったように、コンテンツをずらずらと横に並べてしまう構成なのですが、講演でも言った通りにスマートフォンのことを考えると、スマホは基本的には横にして見ませんからね。

寺井:たしかに、Squarespaceで作る時も1カラムで上から積むように作ります。

長谷川:それに、1カラムから2カラム、3カラムと展開するのは比較的簡単でも、2カラム、3カラムでしっかり作ったものを1カラムに展開するのは難しいんです。

寺井:「情報設計」と「インターフェースの設計」を分けて考える必要がありますよね。まず、ワイヤーフレームの段階でクライアントとは「何の情報を、どう載せるか?」を話します。次に、Webデザイナーと話す時は、掲載するその情報をどう使いやすくしたり、機能にしたりするかを詰めていく。最初の段階でインタフェースレベルまで作り込みすぎると、うまくいかなくなりやすいですね……。

クライアントに「承認を求めない」という進め方
寺井:それから最近は「承認」を取らないという方法も取ります。「このワイヤーフレームで承認をください」というと、クライアントは決済を引き受けなければなりませんから、みんな心のどこかで守りに入ってしまいます。結果、細かいところを気にし始めて躓いたり、何度もやり取りが発生したりする原因になる。そこで、承認を求めるより、「クライアントにアドバイスを求め、既成事実を一緒に作る」というコミュニケーションをとることで、進めやすくなります。

長谷川:そうなんですね。その話を聞いてクライアントワークで思い出すこととして、最近は設問に答えるとWebサイトを自動で作ってくれるWiXのようなサービスがあります。先ほど話題になったSquarespaceがもっと簡単になったようなものです。

デザインや、Webサイトの重要性をクライアント自身がしっかりと理解していない場合、こういった簡易Webサイト制作ツールで作ったWebサイトを実際に運用してもらい、その後、本格的に構築するというプロセスも有効です。そうする理由は、自ら運用して生まれた課題感がWebサイトの重要性、コンテンツ配信システム、アクセス解析といった採用すべき機能や必要なコンテンツに対して、より前向きに取り組もうとなるからです。だからこそSquarespaceといった簡易的なWebサイト作成ツールが進化するのは歓迎しています。「とりあえず必要なWebサイト」なら、それでも十分なクオリティで制作できます。寺井さんや私のようなWeb制作者が本当に必要な仕事にフォーカスできる意味においても、共存しながらうまく利用したいなと思います。

寺井:たしかにそうですね。僕はSquarespaceをワイヤーフレームやプロトタイプとして使っていましたが、そういう切り分けもありかもしれません。本日はありがとうございました。

執筆:長谷川 賢人
撮影/編集 山口 謙之介(ロフトワーク)

イベント概要

マインドセット・ミーティング・資料の作り方・デザイン手法 Web構築のための「早技」を語るミートアップ

現在、WebサイトやWeb構築を行うプロセスにおいて、Webディレクター/デザイナーが「早くする」ことに注目が注がれ、そのメソッドにも日々試行錯誤がされています。

例えば、スケッチツール、モックアップ作成ツールなどのラフの作成、さらにリーン、アジャイルなどプロセス自体が早く回る仕組みなどあります。

このように「早くする」ことは、Webを作る側、最終的に使う側、プロジェクトメンバー全員にとってさまざまなメリットがあるからです。

例えば…
 ・具体的な議論ができる
 ・必要/不要などの判断がしやすい
 ・下流工程での寄り戻しが少ない
 ・トライ&エラーを多くできる

しかし! ただ早いだけでは意味が無いことは当然です。

早く作るという内容ではなく、意思疎通をきちんとして早く進めることがテーマです。ゴールは「自プロジェクトにおいて」「効率的かつ効果的なやり方」を選択して採用することです。 例えば、流行りのプロトタイプツールを多用したところで、プロジェクトで活きてこないとまったく意味がありません。

そこで、本イベントでは、Web構築のディレクション/デザインにおける、効率的・効果的なテクニック=「早技(はやわざ)」と定義し、イベントにて共有・議論してみたいと思います。

進行役は、自身のブログを拠点に長年Web制作の最前線を伝え、実践を行うWebデザイナー長谷川泰久さん。サポートにロフトワークのシニアディレクター寺井翔茉。

まずは二人から現状の整理やWeb構築における効率や効果などの状況整理をした上で、会場の皆さんがグループでディスカッションしていくミートアップ形式で進行してゆきます。ディクションやデザインで日々試行錯誤を行っている、それ故の悩みなども共有できる場になると予想されますので、ぜひ多くの皆さんの参加をお待ちしております。

開催概要

タイトル Web構築の早技 効率的・効果的にWebを作るための進め方
開催日時 2017年2月8日(水)19:30-21:30
場所 loftwork COOOP
ロフトーワーク渋谷10F
東京都渋谷区道玄坂 1-22-7道玄坂ピア10F
対象 ・Web制作やWeb運用に関わる人
・Web構築のよりよい方法を模索している人
・リーンやアジャイルを実践している人
・デザイン手法の幅を広げたい人
・同業種の人のやり方を知りたい人
参加費 1,500円※領収書可
定員 40名
主催 OpenCU

*イベントの着想について補足

本イベントの着想は、2016年5月発売された『みんなではじめるデザイン批評』という本でした。この本で提案されているデザインスタジオや批評プロセスのやり方の根底に流れる、「よりよい物を効率的に公平に決める」というメソッドにおいて、何はともあれ、「早めに作って共有する」ことの重要性を前段とし、その方法をイベント化することに至りました。本書籍には、帯に長谷川さんもコメントを寄せています。

 

プログラム

19:30
イベントの主旨説明「早技のための、デザイン提案方法」
長谷川 恭久

トーク・セッション 「現状のWeb制作環境と早技の可能性(仮)」
長谷川 恭久
株式会社ロフトワーク 京都ブランチ事業責任者 寺井 翔茉

チームディスカッション

  • 自分の早技を披露しブラッシュアップしよう!
  • 全体共有

21:30
懇親会

Related Event

Loftwork magazine 月に2回、最新情報をお届けするメールマガジン