FITC 2016 Day1
--------------------------------
完璧なWebデザイナー
with Ryan Stewart, Brian Thomas
--------------------------------
皆さん、FITCにようこそ！
今日はまず、始めに、完璧なWebデザイナーになるための道筋を
伝えていきます。
そして、その間に、どういう形にすれば、美しいWebになるのか？
そのためにどんなWebツールをAdobeが用意しているのかを一緒にお伝えしていきます。
ライアンスチューアート、シニアプロダクトマネージャ
もう一人はミューズのプロダクトマネージャです。
Adobe にはミッションがあります。あらゆる形態でのクリエイティビティを
推し進めていくこと。皆さんのクリエイティビティに触れられることを期待しています。
同時に美しいWebデザイナーも信じており、
そのためには何をしていくのか、非常に沢山のことを皆さんと見ていきたいと思います。
一つ目にするのは、クリエイティブな会社を見て感じることは、
Webが魂を失いつつあるという事実です。
たとえばここにある会社Airbnb Kickstartar, Lyft, 53, TIDAL
クリエイティブな仕事をしているということで有名だと思います。
こういった企業は革命を起こしているわけです。
プロジェクトのサポート、テクノロジー、宿泊、クルマ、
でも Webサイトはどうでしょう？非常につまんないWebサイトばかりなのです。
どこも見た目は同じです、大きな写真、大きなヘッダー
カラフルなアクションボタン、派手な色がついているために、
なんとなく押してしまうという。
それがまさに、Webが魂を失いつつあるという所以なのです。
革新的な企業なのに、どこも同じに見えてしまうのです
私たちだけがこういうことを言っているわけではありません。
ノアストークスは、魔法はどこにいってしまったの？
Webはつまらないものになってしまったの？と皆が言っています。
一つの理由、２つの側面があること、
何が観察されるのか？二つの陣営があって、そこに対立があるからです。
一つ目、Webというと、アクセスのしやしさ、ユーザビリティ
経験を自分たちでコントロールできる、ユーザーの体験はコントロールできるというのが一つ。
基本的な、根幹を使うことで、Webは基本的な目的を果たす役目をになっています。
もう一方の陣営は美しく、表現力、クリエイティビティ、
感情的な繋がりを作ることを重要視する陣営です。
この二つの陣営は相対していたのですが、この振り子が左側に振り切れてしまった感がします。
しかし、ここには理由があると思っています。
こんな風に陥ってしまった理由があります。
革新的企業でも、Webだとつまらなくなってしまう理由があります。
それは、デバイスが原因です。
多数のデバイス、いろいろなスクリーンのサイズが登場してきました。
これまでのように単純にWebを作りさえすれば良い時代はおわりました。
スマホではどうなる？タブレットでは？テレビでは？ゲーム機では？
デバイスは素晴らしいが、頭痛の元でもある。
どうやって対応していけばいいのか？
そこでソリューションを見つけようとしてたどり着いたのが
レスポンシブデザインです。
ここでのアイデアは、画面がどんなサイズであったとしても、
サイトをちゃんと設計すれば、どんなサイズにもかかわらず、
しっかり美しいサイズで表示させようというアプローチです。
非常に柔軟なWebになってきているが、
それを実現しようとすると、疑問がでてくる。
デザイナーが作ればいいのか？開発者が作ればいいのか？
最適な方法は？
ブライアントーマス：
それが、私たちがかかげたミッションにたちかえります。
完璧なWebデザイナーとは？
ちゃんとクリエイティブな、デザイナーとはどんな人であればいいのか？
それは開発者なのか？デザイナーなのか？
ここでまず自問自答するのは、コーディングが必要なのか？
技術的な知識をもっていないと、完璧なWebデザイナーになれないのだろうか？
もっと直感的にグラフィックデザインに代表されるデザイナーがやるべきなのか？
ということで、こういった完璧なWebデザイナーは
ビジュアルデザイナー、仕事の背景として、グラフィックデザインをしていた
人達にクリエイティビティをまかせればいいのか？
なぜかといいますと、ちゃんとした証があるのです。
レスポンシブデザインはかなり前から言われていることです。
実は、テランスコンランという人がとても好きで、
PLAIN SIMPLE USEFUL という本を書いています。
この本のなかでコンラン氏は、レスポンシブな部屋であると書いています。
聞いた感じ、おかしく聞こえるかもしれません。
固定の家具なり、物が置いてあります。
それにもかかわらず、レスポンシブであると表現しているのか？
スマートホームの話しでは無い。それなのにどうして、
インテリアがレスポンシブであると言えるのか？
この本を読むにしたがって、それが分かってきました。
一日の何時であるのか？何に使われているのか、関係なく、
部屋で起こる状況に常に対応しているということが分かったのです。
ですからデザイナーは直感的な感覚がレスポンシブである認識は
Webが始まるずっと前から感じていたのです。
Webにそのレシポンシブを当てはめると、妙なことが起こってくるのです。
どういう風にコーディングしていくのか？
クリエイティビティの源は、技術的な知識にそのまま変換していくことが出来ないからです。
やはりここは、デザイナーではなく、開発者、レスポンシブデザインに必要なツールに、
お鉢がまわってきます。
この数年間をみていると、さまざまなツールが用意されています。
こういうツールを使って、短時間で効率的に作れるようになってきています。
こういった新しいツールで効率はあがってきていますが、
実際に作るとなると、また壁にぶつかっていきます。
Webブラウザも考えると、非常に複雑になってきています。
EvolutionOfTheWeb.com
Webの時代を進化を表してきた図です。
新しいフレームワークもさまざまなものが出て来ていることがわかる。
これをみて、非常につまらないWebになってしまう、根源にたどりつきます。
制作コストを考えると、どうしても近道を辿ってしまうのです。
本当に目にするレイアウトがここに２つ紹介しています。
最も簡単にできるレイアウトだからです。
先ほどデザイナーの話しをしたとき、直感がレスポンシブになるのだが、
そこにはコーディングが欠けている、
デベロッパーはツールが沢山あるのだが、出来上がったWebを見ると、
ブランドを表現するには貧弱な非常につまらないWebにしかなっていない。
ここにはヒーローが必要なのです。
だれが完璧なWebデザイナーになれるのか？
その先の道を教えてくれます。
窮極の答えは、ここに居る皆さん達です。
デザイナーであろうが、デベロッパーであろうが、関係ありません。
それが端的に言えるのは、日本です。
この数週間、日本の皆さん、クリエイティブエージェンシーの皆さんと話して、
日本こそ、そういった魔法を現実の世界にする、
既成概念にとらわれないアイデアを持った人達が沢山居ると実感しています。
この一年あたり、実感したことがあります。
デザイナーであろうが、デベロッパーであろうと、
クリエイティブなフローの中にいるということです。
このクリエイティブフローとは何なのか？
それは「こころもち」です。
邪魔されない、心地いい環境下のなかで、仕事を継続してし続けるということです。
クリエイティブフローで重要なのは、気もちいいと思えるコンフォートゾーンのことです。
我々は様々なツールを提供しています。
皆さんのクリエイティブフローに没入できることが重要なのです。
コーディングが重要なのか？そうでないのか？
それはあまり意味のないことになります。
ですから、デベロッパーであり、コンフォートゾーンがコーディングしている時で、
ライブラリが使えるのであれば、ブラケットというツール、
コードの編集ができるツールを提供しています。
皆さんがコーディングもできる、デザインもできる、であれば、
そのギャップを埋める DreamWeaver が提供されています。
ビジュアル的に見せるのが美しいのかに没頭したい場合は Muse を提供しています。
ここ一年は大きな動きがありました。
Bootstrap のサポートを始め、非常に短時間でレスポンシブなデザインを始めることができます。
非常に美しいビジュアルなツールで、ブレイクポイントをみながら作業を続け、
ワークフローを進めることができます。
Brackets Code Editor で、コードがプロセスの中で重要なことを認識しており、
ツールの中に含めるということをしています。
非常に美しい体験が Dw の中で行えるようになっています。
less とか sass とかも使えるようになっています。
やはりこれまで長きにわたって、レスポンシブデザインのワークフローに関わりたいと思っていました。
そのために Photoshop を使って、Web用に大きな画像を作り、モバイル用には小さい画像を作っていました。
好きなだけ、クリエイティブな作業をしていくことができました。
ただ、自分がつくった二つのサイズは分かりますが、その間のサイズ、タブレットでどう見えるのかはわかりませんでした。
実際にはデザイナーとしての仕事が終わったら、Photoshop のファイルをデベロッパーに渡して、
実際に機能するwebサイトにするという作業が進みます。
こういったことに対応すべく Muse の新しいバージョンを用意しています。
デザイナーは、プロダクションの中で、自由なスタイルで作業していくことができます。
コーディングの知識なく、作業を進めていくことができます。
間のサイズの画面は Muse がサポートしてくれます。
一枚のページのみのデザインという考え方を払拭することができます。
Muse のデモで見せてもらいます。
今週リリースしたばかりの最新版になっています。
ここまで何年も費やして、コンセプトを実現できるよう考えてきました。
これまで、どうしても固定サイズのデザインが基本となってきました。
実際 Muse というのは、Webデザイナーのための製品として成立してきています。
グラフィックデザイナーにとって、どうやったら機能する実際に動くデザインが作れるのかを
サポートしてきました。
Photoshop , InDesin, Illustrator を使ってきたのであれば、非常に馴染みのあるデザインです。
すべてがフリーフォームでデザイン上の制約は必要ありません。
質の高いタイポグラフィーにもアクセス可能です。
Adobe TypeKit が使えるようになっており、直接利用可能です。
WebFont を使って試してみたいと思います。
簡単にアセットを取り込むことが可能です。
イラストレーターの画像を取り込むと自動的にSVGに変換されます。
CCライブラリのアセットから、画像を持ってきます。
アプリケーションを切り替える必要が無くなります。
非常に使い易くなっています。
簡単になじんで頂くことが可能です。
ここからはレスポンシブデザインの機能について紹介しましょう。
いままではサイズが固定だったと思います。
今回の Muse は非常に柔軟になっています。
いろいろなサイズでどう見えるのか、都度確認することが可能です。
スクラバーを持って拡大すると、大きくなった時にどう見えるのか、確認することができます。
コンテンツドリブンデザイン。
コンテンツ駆動型のデザインです。
レイアウトがどのタイミングで変えないといけないのかが分かるようになっています。
今デザインするにあたって、コンテンツ駆動型でなければいけないと思っています。
二つ３つのデバイスだけではダメで、どんなサイズの画面でも適切に表示できないといけないのです。
画面の比率をかえていくと、割合が崩れるタイミングで、新しいブレイクポイントが必要になってきます。
切り替えが必要になってきます。
新しい切り替えポイントで、大きいサイズのデザインを試していくことができます。
リサイズをして、空間を作ってみて、小さい切り替えポイントに変化していくと、
どういう想定しない結果になるのかを心配することなく、新しいブレイクポイントで、
フリーフォームで作業を続けていくことができます。
より完成に近づいている様子を見ていってもらいます。
レイアウトとメニューが変わってきているのがわかります。
一番素晴らしいところは、いったん完了すると、そのままプロダクション用Webとして
HTML/CSS/JavaScript が生成され、すぐに使えるのです。
その結果、ビジュアルとして作ったものを反映したHTMLが作られるのです。
このプロレスに非常に誇りを持っています。レスポンシブデザインという概念を
本番環境で使ってもらえるよう、このツールが実現しているからです。
Adobe としては Dw がいろいろ機能を提要してきましたが、
今度は Muse を使ってデザインをしていけるのかをお知らせしました。
他のツールを使っている人でも、
すごいことをもう一回Webにもってこようよ！というのがメッセージです。
様々なアイデア、最新のツールについて、フィードバックをお願いします。