LOGzeudon

名古屋で働いているWebデザイナーのブログです

WCAN 2015 Winterに参加してきました

f:id:rokuzeudon:20151220031702j:plain

12/12に開催された「WCAN 2015 Winter」に参加してきました。特に印象に残っていることをまとめてみました。

イベントの様子の写真は、WCANのイベントレポートに掲載されているものを使わせていただいています。

イベントについて

有限会社アップルップル」さん主催の、名古屋では有名なWebのイベント、WCAN。今回は、6名のライトニングトークと、3名のメインセッションで構成されていました。

長谷川さんの「プロトタイピング」に関するセッションに興味があって参加しました。そのため、当ページではその感想のところでやたら熱量がこもっております。

会場は大学院でしたが、「大学院とは何だろう」と考えさせられるほどに煌びやかでした。高級ホテルのような内装、随所にあるデジタルサイネージ、絶景の男性トイレ…。
同日、同じ建物内で懇親会があり、そちらにも参加しました。

あたかもプロのようにプロトタイプを活用する方法

f:id:rokuzeudon:20151220032240j:plain

Web業界で有名な長谷川恭久さんによる講演でした。

以下、学んだことを交えて、自分が誰かに説明するようなつもりで文章にしてみます。

そもそもプロトタイプとは

「プロトタイプ」とは、「実際の動きを確認することのできる試作データ」だと私は捉えています。

建築では、実際に施工に入る前に建築模型をつくります。自動車でも、生産する前に原寸大のモックアップをつくります。
これらの目的は、チーム内やクライアントと進捗・方向性を共有し、問題点を早い段階で改善すること、プロジェクトの進行をスムーズにすることです。

ですが「Webサイト(またはアプリ)」の制作では、「デザインカンプ」はあれど、つくる(実装する)手間のためかプロトタイプは一般的ではありませんでした。
デザインカンプは、私の周りではいずれかが多いです。

  • ただのPDFデータ
  • 画像化したデザインデータをブラウザ上で見れるようにしたデモサイト

デザインカンプでは、実際の画面遷移の動きなど「使ってみないとわからない」ところが確認できません。
そのため、ある程度構築した段階でも、クライアントから「やっぱりここをこうしたい」といった修正…「出戻り」が発生しがちです。
一度構築した後にデザインを修正しコードも書き直す…というような、誰も得しないロスを減らすのにプロトタイプは役立ちますし、簡単に作れるサービスやツールも登場してきています。

目的を明確にすることが大事

プロトタイプをつくることが目的になってはダメ。
チームやクライアントと何を確認したいのか、目的意識をはっきりさせる必要があります。

画面遷移を共有するなら、ProttInvisionなどのサービスを、ラフやワイヤーフレームの段階から利用するとスムーズ。
画像化したデザインデータをブラウザ上で見れるようにし、さらに画面遷移を確認することも容易です。
個人的には、現時点ではProttの方が使いやすいです。トランジションのコピペができるのが便利。

アニメーションを確認するなら、「Principle」などのサービスやKeynoteやAfterEffectなどのアプリでもできます。

まだまだありますが、このように様々なツールがあり、それぞれ特徴や強みがあるので、目的に応じて使い分けることが大事。
ただし、様々なツールを使いこなすことを目的にするのも本末転倒なので、2種類くらいのツールを使えるようにしておくと良いです。

デザインプロセスをオープンにしよう

プロトタイプは「出戻り」を減らすためのツールです。
出戻りがゼロになることは無理ですが、出戻りによるロスを最小限に抑える努力は常にできます。

大事なことは、「いち早く」共有すること。
プロジェクトを進める中で、デザインをチームやクライアントと少しでも早く共有する習慣をつける必要があります。

また、プログラムだとGithubなどでプロセスをオープンにすることができますが、デザインではそうした文化はあまりありません。
プロセスをオープンにすることで、いろいろな人のアドバイスを受けられるし、共同制作もしやすくなります。
プロトタイプは、デザイン制作におけるブラックボックスのオープン化にもつながるのです。

講演を通して

プロトタイプ自体は以前から興味があるものの、その必要性について自分の中で言語化できていませんでした。
なぜプロトタイプが必要なのか、どのようにプロトタイプと向き合うのか、わかりやすくまとめられていたのがすごく参考になりました。

また、スライドショーが圧倒的にキレイで、動きも滑らか、大変インパクトのあるものでした。
さらに、発表の裏で、Twitterでタイマー仕込み?の補足情報が流れるという仕込みがありました。時間を計る役割もあったのかな?
内容が大変良かったのはもとより、そうしたさまざまな工夫、事前準備の緻密さにも感銘を受ける素晴らしい発表でした。

HTML6 でも CSS4 でもない Web 技術のゆくえ

f:id:rokuzeudon:20151220032251j:plain

株式会社サイバーエージェント ahomu(佐藤歩)さんによる講演。

ahomuさんご自身のブログで、スライドやフォローアップの内容がまとめられています。

havelog.ayumusato.com

 個人的に印象的だったのは以下の内容です。

  • IE各バージョンサポート終了の流れと、伴って今後発展しそうな技術(SVG、flexboxなど)
  • 全てのWebをHTTPSにする動きと、その背景
  • 物理の世界にアクセスするWeb技術のAPI(様々なセンサー…環境光、対物間距離など)
  • 次世代Webアプリ(Progressive Web Apps)
  • モバイルWebの高速化(Accelerated Mobile Page)

勉強不足で、後半になるにつれて「よくわからないけどなんかすごそうだぞ」という感じで聞いていました。。

新しいWeb技術、特にブラウザの枠を超えたいろいろな技術について、積極的に学んでいかないとWebデザイナーとしては時代に取り残されてしまうような気がしています。
でも、どんな技術を学ぶのがよいのか、今後台頭しそうなのかを判断するのが難しい。
そこで参考になる一つのまとめとして、今回の発表はありがたかったです。

10年後も(たぶん)Webとかの仕事で食っていける仕事の考え方

f:id:rokuzeudon:20151220032259j:plain

株式会社インプレス Web担当者Forum編集長 安田英久さんによる講演。

想定オーディエンスを「主にWebサイト制作を生業としている方(それ以外の方でもOK) で、若い方。」とされていました。
聞いていて、「そうだなあ」と思いつつも自分の中でハッキリ言語化できていないテーマではあったので、その点でありがたい講演でした。

共感したところは以下の内容です。

  • お金は、価値を提供した対価としてもらうもの
  • 価値があるかどうかを判断するのは、あくまでもクライアント
  • 期待を超える価値を提供できると強い
  • 制作の基本はマーケティング
  • マーケティングの基本はコミュニケーションの基本
  • とにかくユーザー中心に考えよう

また、今と昔の「Web担のターゲットの違い」についてのお話は面白かったです。
記事の一環として自社サイトでペルソナ分析をやってみたら、もともと想定していたペルソナと実態が全く違いすっ転んだ!というお話。

ペルソナ作りの過程は記事としても公開されているので、読むと面白いです。

web-tan.forum.impressrd.jp

おまけ

懇親会

ahomuさんやアクアリング鶴舞ラボの方などとお話ができて、楽しい時間を過ごせました。
ビンゴでPS4が当てられなかったことと、腹痛により途中退場したのが悔しい。
尚ビンゴでは、ポップコーンが当たりました。提供の鈴木一弘税理士事務所様、ありがとうございました。

ロゴコンペ 落選

欲張って3案だしましたが入選すらしませんでした。未熟!!!!
次回出すかどうかはさておき、デザイナーとしてもっと精進したいと思います。