Web構築の早技 〜効率的・効果的にWebを作るための進め方〜 セミナーに参加してきました
こんにちは。
Webデザイナーの野尻です。
我々が身を置いているウェブという業界は非常に進歩が著しく、日進月歩ならぬ「秒進分歩」なんて言葉で表現されたりします。半年まで通用していた手法や進め方が、あっという間に時代遅れということもザラにあります。
相応に製作者が保有すべき知識やスキルも、常に最新かつ効率的なものを追い求めることが必要とされます。（改めて考えてみると恐ろしい業界にいるものだなと思います）
重要なのは、「変化に対応する」ということで、そのための情報収集やトライ＆エラーは今後もずっと必要だと考えております。
そんなわけで、日々の業務効率化のヒントを得られないかと、2017年2月9日に開催された下記のセミナーに参加してきました。
「Web構築の早技 〜効率的・効果的にWebを作るための進め方〜」
http://www.opencu.com/2017/01/web-hayawaza/
ウェブ業界では著名の長谷川恭久氏と、若くしてロフトワークシニアデザイナーの肩書をもつ寺井翔茉氏による講義・トークセッションとなります。個人的に長谷川恭久氏のブログ「could」はデザインの考え方において非常に影響を受けています。
以下セミナーの内容をレポート形式でまとめたいと思います。
※一部私個人の解釈が含まれている部分があります。実際の講義の意図と相違が生じている可能性がありますが、予めご了承ください。
概要とゴール
Web構築を行うプロセスにおいて、Webディレクター／デザイナーが「早くする」ことに注目が注がれ、そのメソッドにも日々試行錯誤がされています。
スケッチツール、モックアップ作成ツールなどのラフの作成、さらにリーン、アジャイルなどプロセス自体が早く回る仕組みなど、「早くする」ことは、Webを作る側、最終的に使う側、プロジェクトメンバー全員にとってさまざまなメリットがあります
例えば…
・具体的な議論ができる
・必要／不要などの判断がしやすい
・下流工程での寄り戻しが少ない
・トライ＆エラーを多くできる
ただし、ただ早いだけでは意味が無く、意思疎通をしながら、きちんとして早く進めることが重要となります。
「自プロジェクトにおいて」「効率的かつ効果的なやり方」を選択して採用すること
をゴールに、Web構築のディレクション／デザインにおける、効率的・効果的なテクニック＝「早技（はやわざ）」と定義し、イベントにて共有いただきました。
セッション１：「早技のための、デザイン提案方法」 by 長谷川恭久氏
現状を取り巻く環境の変化
※以下箇条書きで失礼します
・デバイスの販売台数
⇒PCは2010から低下している
⇒スマホ・タブレットは2011年に逆転、さらに差が広がっている
⇒スマホが世に浸透し始めた2009年からたったの2年で逆転
⇒2年で常識が変わる
★だから短い期間でアップデートが必要
・例：PCサイトメインの時代（2011年ころまで）に良く使われていた「デザインカンプ」
⇒クライアントにデザインを説明するワークフローの一部だった
⇒スマホ・タブレットのシェア拡大により、マウス＆キーボード → 「スワイプ」に
⇒大抵誰が使っても同じ操作感のマウス＆キーボード
⇒対して、「スワイプ」は人によって概念が違う（右手を使うか、左手を使うか、など）
⇒さらに、人によって持っているデバイス表示領域が全く違う
⇒デザインカンプのような静止画では想像が難しい
⇒状況は変わっている、以前のやり方ではコミュニケーションロスが発生している
・上記を打開するために生まれた手法
⇒ワイヤーフレーム
⇒情報の優先度・情報構造を明示
⇒ムードボード
⇒雰囲気をすり合わせる（トーン＆マナー）
⇒スタイルガイド
⇒デザインの属人化を防ぐルール
・様々な「手法」があるが、これらが今後も常に最適解ではない
⇒時代の流れに応じて変化する必要がある
デザインに関する最前線ツール紹介
長谷川氏が実際に最前線で使用しているツールを紹介いただきました。
Sketch Auto Layoutは導入を検討していましたが、実際の動きを実演して頂き、さらにモチベーションが高まりました。
下記にツールを紹介します。
・Sketch Auto Layout
可変に対応したデザインツール
・Principle
デザインデータから簡単にUIアニメーションが作成できるアプリケーション
・bodymovin
githubを通じて、アニメーションの微妙なニュアンスをデザイナーとエンジニアで共有できる
https://github.com/bodymovin/bodymovin
・Adobe Comp CC
スマートフォンやタブレット上での自然なジェスチャーで、印刷やWebなどのレイアウトを簡単に作成
実際に新しい手段を導入するためには
長谷川氏のこれまでの経験から、現場への新しいツール導入の際に起こりうる問題と解決方法を紹介頂きました。
・手段先行では現場は変わらない
⇒新しい手段の導入は、基本的に現場の反感を買う
⇒現場を少しずつ変えながら手段を最適化していく
⇒そうしないとなかなかうまくいかない
・現場を瞬時に変える魔法は存在しない
⇒ツールに頼りすぎると痛い目をみる
⇒早く作れる、進められる場づくりは結局のところ、
①時間
②根気
③工夫
⇒これだけ。このリソースを確保することが必要
デザインの言語化・伝え方
デザインの伝え方には前提として、クライアントと「目的を共有」しておくことが大切ということでした。
これは普段から意識していたことでしたので、再認識することができました。
・デザインの伝え方
⇒デザインの目的は何か？
⇒目的に関係したデザイン要素は？
⇒それは目的を達成するために効果的か？
⇒なぜそう思うのか？
・デザインのブラックボックス化（作った人にしか意図が分からない状態）を抑えるためには
⇒早い段階でデザインを「共有」する
⇒途中経過を（クライアントに）見せる、過程を見せる・意図を言葉で伝えることが大切
⇒作りかけの恥ずかしい段階でも、作り込むまえに見せる
⇒方向修正が容易
・そのために早く見せる手段を試す
⇒テンプレートなどをガンガン使うなど、なんでも良い
⇒Adobeカンプなど
⇒打ち合わせの間にやってしまう ということもできる
★肌にあうものを見つける
⇒手段は積極的に「使ってみる」ことが大切
早くするための３つの課題
新しいツールを職場に導入するに当たって、どのように上司を説得するかという観点でアドバイス頂けました。
①社会の変化・ツールの変化に対応しているか
⇒扱っているツールが社会の変化に対応しているかどうか、適切かどうか
②仕事環境に合うワークフローは何か
⇒こんなツールがあったらいいのにという切り口からスタート
③啓蒙するためにできることは何か
⇒それがどれくらいビジネスに＋になるのか を中心に話す
セッション２：「現状のWeb制作環境と早技の可能性」by 長谷川泰久 氏 × 寺井翔茉 氏
長谷川泰久 氏 と 寺井翔茉 氏による、トークセッションのような形式で普段の制作現場で、仕事を「早くする」ために活用しているツールやテクニックをご紹介頂きました。
印象に残った内容を下記に記載します。
squarespaceをモックアップに活用
squarespaceは海外で提供されているホームページ作成サービスで、非常にクオリティの高いテンプレートを数多く提供しています。
https://www.squarespace.com/
これを活用して初期段階のモックアップをクライアントに提供してしまう、というのがとても興味深かったです。
メリットとしては、
・それなりの見た目があっという間にできる
・デザインされすぎていないテンプレート
⇒その後のデザインの余地がある
・検証しながら作れる
・ほぼ完成形に見える
などがあります。
テンプレートの種類が非常に豊富なので、様々なクライアントに対応可能ですし、そのままサービスとして提供することもできます。
スタートアップのウェブサイト構築に、AIによる自動Webデザイン＆コーディングを活用
特にスタートアップの企業などで、小規模・少額でウェブサイトを作りたいというニーズに対して、
Wixが提供する、「AIによる自動Webデザイン＆コーディング」をご紹介頂きました。
http://www.wix.com/about/adi-get-access
なんと、いつくかの質問に応えるだけでウェブサイトができてしまうというシロモノです。
「ウェブサイトがとりあえずあれば良い」初期状態クライアントには、この形でまずは運用スタートしていただき、運用の中でウェブサイトにおける様々な必要性を認識してもらうことがおすすめとのことです。
例えば集客のためのSEOや広告出稿、分析・解析などの必要性はクライアントに「実感」が必要となります。
プレゼンテーションや丁寧なコミュニケーションによって伝えることもできますが、それ相応のコストがかかるのが現実です。
一度体験してもらうと、説明にも納得してもらいやすいとのことでした。
これも、「早く」仕事を進めるうえでとても有効な手段だと思いました。
セッション３：チームディスカッション
参加者が置かれている立場別にチーム分けを行い、それぞれのチーム内で「早業」を披露するという主旨でディスカッションが行われました。
私の肩書はデザイナーですが、最近の立ち回りはディレクションが多いので、ディレクターのチームに入れてもらいました。
この中でオススメ頂いたツールをひとつ紹介します。
・ペーパープロトタイピング用アプリ「POP」
https://itunes.apple.com/jp/app/pop-prototyping-on-paper/id555647796?mt=8
紙などに描いたアプリのワイヤフレームをiPhoneのカメラで撮影して取り込み、その取り込んだ複数のモックアップ画面のボタン部分などに仮のリンクボタンを設定し、画面同士をリンクでつなげてプレビューすることで、簡単な画面遷移をシミュレートして確認することができるアプリです。
ipadなどを活用して、打ち合わせの場でクライアントにイメージを伝えるのに便利そうです。
ちなみに私からは、普段業務で活用している「チャットワーク」を活用したクライアントとのコミュニケーションを「早業」としてオススメしました。
せっかくなので、ざっくりとチャットワークのメリットを下記に記載します。
・chatwork
・複数参加者を設定したチャットグループを無制限に作成可能
⇒クライアント別に分けておくと、各案件の状況がリアルタイムに把握できる
・時系列でプロジェクトのやり取りが把握できる
・複数人が共通のタイムラインに参加できる
・参加者全員でタスク管理
・参加者全員でファイル共有
・基本無料、メールアドレスのみで登録可能
⇒クライントに打ち合わせの場などで登録してもらいやすい
私個人の解釈が多々入っている部分がありますが、以上が大筋本セミナーの内容となるかと思います。
まとめ
終電の都合上、残念ながらセミナー後の懇親会には参加できませんでしたが、非常に参考になる内容を受講できたと思います。
導入を検討していたツールを実際使ってみようというモチベーションにも繋がりましたし、今仕事をするうえで抱えている問題意識は最前線の現場でも持たれているものだということを認識できことも良かったです。
特に「Sketch Auto Layout」を用いた可変レイアウトデザインと、squarespace活用したモックアップ作成は積極的に活用していきたいと思います。
導入初期の大変さはあると思いますが、ちょっとしたワクワク感もあります。
頑張っていきたいと思います。
