デザインツールのルーツを知ればまた少し強くなれる - 前編
この記事はくふうカンパニーアドベントカレンダー10日目の記事です
少しだけ前段として私の所属している会社について説明させてください。
くふうカンパニーとは、共同株式移転の方法により、オウチーノとみんなのウェディングの完全親会社として去年設立された会社で、現在は様々な会社がグループ会社として参画しています。
私はDa Vinci Studioというグループ内外の生活を賢く・楽しくするようなサービスをデザイン・テクノロジーの力で支える会社に所属してます。
デザインの歴史と共にツールは移り変わっている
先日、グループ内のデザイナーが集まって勉強会を開催したのですが、今回はその内容を少し広げてお話しようと思います。
勉強会では「ワークしやすいデザインデータの作り方」という切り口で、主にFigmaを用いてデザイナー間だけでなくエンジニアや開発メンバーとコラボレートしやすいデータの作り方について話しました。
そこでは「構造的にデザインデータを作ることで、色々と捗るよ！」的な話をしたのですが、なぜ構造的に作ると良いのか…そもそもいつから構造的にデザインデータを作った方が良くなったのか？という辺りを割愛してしまったので、ツールの変遷をITの歴史と共に振り返ってみようと思います。
※なお、歴史を知ることが重要でないのと、考察も含んで書いているので歴史は割と雑に書いてます。。ツッコミはご容赦ください🙇♂️
印刷(DTP)の時代
まだコンピューターが普及していない時代、AdobeはAppleから依頼を受けレーザープリンター向けに言語やソフトを開発しました。
それまでは活版印刷やオフセット印刷などいわゆるアナログ的な印刷だったのが、PCでデザインしたものをレーザープリンターで印刷するデジタルな印刷へと変わりました。
デザインの変化
「活版印刷などアナログなデザイン」
↓
「PCで組むデジタルなデザイン」
この変化によって、DTPデザイナーという職種が生まれ、デザイン→版下作成→製版と、それぞれの専門家がいる形で作業工程を分業化していたものが、DTPデザイナーだけで完結できるようになりました。
この時、DTPソフトの課題として、
・アナログで出来ていたことをデジタルでもできるようにする
- 自由なレイアウト
- 興味を惹けるタイポグラフィ
- 実際の印刷物と近しいカラーマネジメント
辺りをどう解決していくかが、DTPツールとしての重要指標だったと見受けられます。
つまり、ツールとして求められていたのは、いかにアナログ同等の自由な表現ができるかで、最終的なアウトプットである「印刷される一枚絵」をデジタルで作ることでした。
印刷で使われてるツール
Photoshop, Illustrator, InDesign, Affinityシリーズなお、初期のPhotoshopにはレイヤー機能はまだなく、実装されたのはバージョン3からだそうです。レイヤー機能の出現により順列に意味が生まれ、構造的に意味を成すデザインデータという概念がデザイナーの中で少しずつ一般化していったのではないかと思います。
参考：アップル | Wikipedia, DTP | Wikipedia, Adobe Photoshop | Wikipedia
Webデザインの時代
いわゆる「インターネット黎明期」。
Windows95が日本で流行りYahoo! JAPANが始まったくらいから、「ブラウザでWebサイトを見る」ということが普及し、「Webをデザインする人」 = Webデザイナーという職種が広まりました。（当時はホームページという呼び方がメジャーでした🏠）
一般家庭にPCが普及するようになり、ビルトインされていた「ホームページ・ビルダー」で自分のホームページを作れる！！と感化され、Webの世界に入門する人が増えた時代です。（かくいう私はメモ帳派でした）
当時はまだCSSもなく、テーブルレイアウトでデザインを組むのが主流でしたが、ペイントやPhotoshopで画像を作ったり、imgタグでテーブルにはめ込んだりしていました。
※当時のデザインがどういうものだったか気になる方は阿部寛さんのホームページをご覧ください。（キレイなテーブルレイアウトだろ…これ、現役なんだぜ…）
ここで「一枚絵を作るDTP的なデザイン」から「作った絵をHTMLで組む」という考え方が生まれていきました。
デザインの変化
「印刷物などアナログ向けのデザイン」
↓
「Webの背景や素材に使うデジタル向けのデザイン」
その後CSSが生まれ、FireworksやDreamweaverなどデジタル向けのデザインツールが普及し、「一枚絵を作る」ことから「Webサイトという一枚絵を作りつつ、パーツ用に素材を切り出す」ことができるようにツールも変化していきました。
Webデザインで使われてるツール
Photoshop, Illustrator, Fireworks, DreamweaverWebインタラクションの時代
Flash全盛期。Flash Playerをブラウザにインストールしてもらうことで、HTMLやCSSには難しかったリッチな表現を行えるようになりました。
「リンクをクリックして遷移する」くらいしかアクションすることができなかったのが、「ボタンを押してルーレットを回す」「好きな服を掴んでアバターの服を着せ替える」などインタラクティブにWebサイトを回遊するリッチコンテンツが普及きました。
PCだけでなく、ガラケーでも動かせるような軽量版もあり、見るだけだったWebサイトが「操作して楽しむWebサイト」へと変化しました。
デザインの変化
「絵としてのデザイン」
↓
「操作できるインタラクティブなデザイン」
Flashは簡単なインタラクションやアニメーションならGUIで作ることができ、より高度なインタラクションはActionScriptという言語でプログラミングできる両刀使いなツールでした。
FireworksはWebデザインを組みつつ、ホバーなどちょっとしたインタラクションも作ることができるツールでした。
PhotoshopやIllustratorで素材を作り、インタラクションはFlashやFireworksで組む流れになり、ツールを使い分けてよりリッチなコンテンツを制作する形になりました。
※個人的には、ここでFlasherと呼ばれるゴリゴリに動かしてリッチコンテンツを作り出していく人と、Fireworksで簡易的なホバーアクションなどを作りながらWebデザインメインで作り出していく人とで、Webデザイナーの業務範囲が線引されていったような気がします。
インタラクションで使われてるツール
Flash, Fireworksスマホ・アプリの時代
iPhoneの登場により、Webデザインの世界が一気に変化しました。
デジタル印刷の時代にAdobeと手を取り合っていたAppleが「iPhoneではFlashをサポートしない」という方針を打ち出したのです。
細かい経緯は省きますが、Flashの代わりに使われたのがHTMLとCSS、そしてJavascriptです。
そこからjQueryを筆頭にJavascriptベースでのリッチコンテンツに変化し、スマートフォンに適したWebデザインとしてレスポンシブ・デザインなどの概念が広まりました。
また、Webだけでなくアプリによる新たな体験も生まれ、PCのみで享受していたリッチコンテンツがスマートフォンを介していつでもどこでも触れるように変化しました。
そしてWebやアプリに触れる機会が爆発的に増えたことで、「インパクト重視のリッチコンテンツ」から「日常的に使える便利・面白いサービス」へとコンテンツがシフトし、ユーザビリティが重視されるようになりました。（※ここで言うユーザビリティとはインターフェースだけでなく、生活が便利になるなど広義なニュアンスです。）
この辺りからユーザーインターフェースという言葉が普及し始め、使いやすいWebやアプリなどのサービスを作るUIデザイナーという職種が増えてました。
日常的に使いやすく、長く使い続けてもらうことが重要指標になったことで、広告のようなインパクト重視のデザインでなく、時計やイスなどプロダクト的なデザインをUIとして表現するわけです。
リアルな質感や形状を模倣するスキューモーフィズムなデザインから、余計な装飾を排除したフラットデザイン、そこから物理特性を与えたマテリアルデザインなど、デザイントレンドは変わっていますが、この「日常的に使いやすいプロダクト的デザイン」というのは今もずっと続いています。
デザインの変化
「操作できるインタラクティブなデザイン」
↓
「日常的に使いやすいプロダクト的デザイン」
デザインツールにおいても変化が起こります。
これまではデザインツール = Adobeと言っても過言ではないくらい、Adobe一強でしたが、UIデザインに特化したツール「Sketch」が登場しました。
これまでDTPの頃から存在していたPhotoshopやIllustratorなどは機能拡張してWebデザインもできるようにアップデートしていましたが、そもそもアプリケーションの最終的なアウトプットが一枚絵なので、抜本的なリニューアルまでは行っていませんでした。
しかし、UIデザインに特化したSketchは一枚絵を作り上げるからインターフェースを設計するためのツールとして作られ、表層的なビジュアルを作れるデザインツールから「中の部品を取り替えながら1つの製品を作りれるデザインツール」となりました。
サードパーティ製のプラグインやサービスと連携することで、中の部品など構造をエンジニアへ共有が可能となり、よりデザインデータに構造的意味が加わりました。
UIデザインに向いてるツール
Sketch, Adobe XD, Figma, InVision Studio, STUDIO, Drama プロトタイピングの時代
スマートフォンの爆発的普及により、2016年頃にインターネットの利用がPCを超えるようになりました。（出典：日本経済新聞）
どの企業もモバイル対応に力を入れ、AppStoreには新しいアプリが続々と出てくるようになり、ユーザーのリテラシーも高まりました。「我々もアプリやサービスを作ろう」から「競合他社に負けない素晴らしいアプリやサービスを作らねば」へとIT業界は激化しました。
より良いアプリやサービスを作るための「UX」という概念が強まり、どの企業も「ユーザーについて調査し、課題を見つけ、理想の状態をイメージし、そこに至るまでの体験」を設計するようになりました。
デザインの変化
「日常的に使いやすいプロダクト的デザイン」
↓
「ユーザーにとって最高の状態を作るエクスペリエンス的デザイン」
デザインツールにおいても、「作る」ことから「早く検証する」ことが重要になり、いかに早く（そして低コスト）で作ったものを元にユーザーテストで効果検証できるかどうかと変化しました。
アイディアを手早く検証するペーパープロト、プロジェクトメンバーとの合意形成をとるためのワイヤーフレーム型のプロトタイプ、テストユーザーに触ってもらうためにUIを組んでインタラクションまで作り込んだプロトタイプなど、フェーズに適したプロトタイピングツールが生まれ、今まで以上に「チームでプロダクトを開発する」という風潮が強くなりました。
プロトタイピングに向いているツール
サクッと → Sketch, Figma, Adobe XD, InVision, Prott
しっかり → Marvel, Origami Studio, Flinto, ProtoPie, Framer X, Drama
コラボレーションの時代
そして現在に至ります。
いまやスマートフォンアプリやWebサービスからAR, VR, 3Dプリント, 音声アシスタント, IoT, AI, 機械学習など、さらにテクノロジーが発展し、デジタルデザインの対象物が広まりました。
サービスにおいても身近なものから医療や金融など専門性が高い分野にまでデジタルプロダクトが波及してきています。
もはやデザイナー1人ではどうしようもできないほど複雑化している状況で、いかに最高のモノを作るかと言うと、「その専門家と手を組んで一緒に作る」という形になってきたと私は思います。
デザインの変化
「ユーザーにとって最高の状態を作るエクスペリエンス的デザイン」
↓
「専門性が高いスペシャリストと共創するデザイン」
良いモノを作るには一緒に共創する = コラボレーションしないといけないわけですね。
そして最近のデザインツールは「作ること」から「デザイナー以外も巻き込んで作る」ような機能を持ったものが増えました。
こうして「専門家と一緒にコラボ」し、「素早く効果検証」を行えるように「プロダクト」をデザインする…と、今までの経緯を積み重ねて出来てきています。
コラボレーションに向いているツール
汎用的 → Figma, Sketch, Adobe XD, STUDIO, InVision Studio
エンジニア特化 → Framer X※最近はもっぱらFigmaしか使っていないので、当時使っていた記憶やリリース情報から察して書いてます🙇♂️
違うよ！そうじゃない！等あれば教えてもらえると嬉しいです🙏
まとめ
この数十年の間で、デザインツールは大きく変化を遂げています。
「ツールを正しく使え！」と言うつもりはありません。
目的に合わせて最適なツールを使いこなせる人は強いです。その為にデザインツールのルーツを知ると、見え方も変わってくるのではないでしょうか。
何のためにそのデザイン作業をしているのか
ゴールに向けて適したアウトプットを出していきましょう💪
そしてより良いデザインを生み出していきましょう🤝
おまけ
今後はAIの時代ですかね。
この間行われたAdobe MAXは夢と希望で胸が熱くなりました😃
AIによってアウトプットまでの時間が短縮されるようになると思います。
機械が膨大なデータを元に最適解を出してくれる。
そうなるとデザイナーは何をすればいいのだろうか？いらなくなる？
そんなことはないです
…ないハズだと思ってますｗ
というのも、機械は「人間が良いと思ったもの」を元に最適解を出すので、「こうした方がより良くないか？」という変数は人間からしか出てきません。
機械がアウトプットまでの時間を短縮してくれるなら、我々デザイナーは「より人間らしいエモーショナル」な部分を強めていくといいのではないかと思っています。
某モンブラン氏が語っていたように、インプットをし続けるのが大事です。感性を高めず、審美眼を鍛え続けなければ死にます。しかも機械が圧倒的爆速な分、一気に死にます😇
さらに余談ですが、先日Luminar 4というAIを使って画像レタッチを爆速にイケてる感じにしてくれるアプリがリリースされました🎉（私まったく関係ありませんがｗ）
一足先にAIを使ったデザインツールを体感してみたい方は↓を見てみると良いと思います😄
この記事が気に入ったらサポートをしてみませんか？