[前半]デザインツールの未来(そして、なぜ開発者が気かける必要があるか)

Philip Ardeljan    
ミニマリストの美学を持ち、人間中心のデザインを根ざすプロダクトデザイナー
この記事は、著者の許可を得て配信しています。
https://www.getmotion.io/blog/the-future-of-design-tools/

以下が今回私がお話する内容です:

1.現在のデザインツールのランドスケープの概要
2.今後について話す
3.開発者がこれを考慮する必要がある理由について話す

準備はいいでしょうか? では、始めましょう!

追伸 始める直前に言いにくいのですが、これはユーザーインターフェイスツールとビジュアルデザインツール用であるということをご理解ください。「最終」設計を出力できるものということです。 したがって、Balsamiqおよびその他のUXワイヤーフレームツールは含まれていません。

現在の状況

現在、多くのデザインツールがあります。 ただ、我々はデザインツールがどうあるべきなのか、はっきりとしたことは分かりません。 ただ、色々な考えはあります。今、私たちはその答えを出そうとしている最中なのです。それでは始めましょう。

従来のツール
Photoshop / Sketch / Figma / Adobe XD

まだデザインツールをちゃんと理解していないと感じるのは、Photoshopがデザインツールのランキングで依然として上位ランクにあるからでしょう。Photoshop は1990年にリリースされ、その主なセールスポイントは、ラスタグラフィックスを編集できることでした。

新しいツールを従来のツールと同じように見るのは公平ではないように思われるかもしれません。 多くの人が同じファイルで作業できるマルチプレイヤーマジックのせいで、斬新な感じがするだけです。しかし、実際はそうではありません。 それらはすべて同じパラダイムに基づいています。 レイヤーもあるし、それらを操作するのも同じです。アートボードまたは画像をスタティックな画像形式にエクスポートするか、キャンバスを職場の仲間と共有するか、の違いです。

これらのツールが従っているもう一つのパラダイムは、デザイン時にすべてがキャンバス上で行われるということです。そのキャンバスはHTMLベースではありません。すばらしいですね。オブジェクトを非常に自然な方法で操作できるのです。好きなものを描いたり、図形やビットマップを追加したりできます。 しかし、ストップするところは、Webときれいに統合しているところです。 例えば

長方形を作成して塗りつぶしの色を指定すると、これがFigmaで指定されたCSSになります。開発者にとって本当に素晴らしい機能です。 ポップインできて、オブジェクトのさまざまなCSSプロパティを確認できます。 しかし、それはそこでストップします。 開発者が間違ったバージョンを使用しないように、アートボードとファイルの名前を正しく使用する必要があります。このオレンジ色の四角形とその周囲のオブジェクトとの関係にはつながりがありません。

私はただ明確にしたいだけで、Figmaをバッシングしているわけではありません。実際のところ、現時点では私の一番のお気に入りのデザインツールです。開発者とデザイナーはこのFigmaの曖昧なプロセスを理解するためには長い時間が必要です。彼らのガイドは素晴らしいものです。

しかし、事実、制限要因はあの言葉にあります。そう「キャンバス」という言葉です。Figmaにはキャンバスがあります。 それは2D WebGLレンダリングエンジンを使用して構築されています。 HTMLの上に構築されているのではありません。 2D WebGLレンダリングエンジンを使っているのには正当な理由があります! さまざまなレンダリングの問題があり、(今のところ)Webブラウザーはネイティブプラットフォームと同じレベルではないのです。

でも私は楽観主義者です。物事の展開次第では、Figmaが将来花開くかもしれません。そして、私もそれでいいと思っています。彼らがプッシュしている最新の機能である「自動レイアウト」は、CSSのルールをfigmaエクスペリエンスにもたらします。これで私をとてもハッピーです。

これは、特にFigmaについては話すことがたくさんあります。Sketchと他のすべてはどうでしょうか? まあ、Figmaの方が少しだけ勝っている状況です。Sketchは依然王様ですが、Figmaは今成長段階にあります。 次のグラフは、状況を把握するのに便利です。

Figmaは次のカテゴリのツールへの素晴らしい前触れとなっています!

ノーコードツール
基本的にWebflowです。

Webflowは、ブロック上のいわばかっこいい子供のようなものです。若くて新しく、無限の可能性を秘めています。彼らのウェブサイトのキャッチフレーズは、「コーディングなしで、より良いビジネスWebサイトをより速く構築する。」 です。つまり、明らかに、彼らはno-codeのデザイナーのために設計しているということです。もちろん、デザイナーのためだけではありません。 彼らは21世紀のDreamweaverになる可能性を秘めていると私は信じています。

高校生の時にDreamweaverを開いて、機能的なWebサイトを一緒にハックすることから始めたデザイナーは何人いるでしょうか? 相当の人数の人がそうだと思います。 いい感じのWebflowチャネル。 あなたはウェブサイトを構築し、そのおしゃれなGUIのボタンでまるで自分がプロになったように感じることができます。 初心者なのにも関わらず、自分がプロになったように感じられるなんてとても魅力的です。Webflowは、次世代のデザイナーの心を鷲掴みにするでしょう。

「公開」をクリックするだけで、誰かにライブWebサイトへのハイパーリンクを即座に送信できるというのは本当に驚くべき機能です。 ハイパーリンクはWebの基盤です。 クリックするだけです。デザイナーがその機能をより効果的に使えこなせるようになれば、最高です。静的な.pngファイルに毎回勝つでしょう。

デザイナーが取っているアプローチは堅実であり、そのうち実行されるでしょう。 本当です。 no-codeについては以上です。ほとんどがWebflowであり、デザイナーたちがWebflowを正しく使い、パフォーマンスにもう少し注力すると、それらが新しい基準になることでしょう。

ハイブリッドなツール
Hadron / Modulz

これらは、先ほどのWebflowよりもさらにかっこいい子供たちです。私はまだHadron、 Modulzなどのハイブリッドツールについて100%理解できていません。私はただ、その背後にある考え方が大好きで、それらのツールが新しい基準になってほしいと願っています。しかし、私は多くのデザイナーがハイブリッドツールを使う準備ができているのかどうか、全く分かりません。

これらのツールはWebflowとどう違うのでしょうか? ハイブリッドツールは、コードを嫌って使わないということはありません。 実際、開発者とデザイナーが協力することを奨励しています。デザイナーと開発者が一緒にUIで作業する必要があると主張しているのです。デザイナーにはカラーパレットが必要で、開発者には入力ボックスが必要ですが、それについては問題ありません。GUIは両方のワークフローをサポートするはずです。 主なポイントは、彼らが一緒に作業をしなければならないという点です。

モジュール:「私たちの使命は、デジタル製品チーム間の断絶を修正することです。」

そして

「全員が自分の製品でコラボレーションできるようにする。 一緒に。」

Hadron:「Hadronは、同じ目標に向かって一緒に作業をし、アイデアを深め、互いに学び合うデザイナーと開発者のための開発環境です。」

 

かなりパワフルで、分かりやすい発言ですね。 個人的に、私はこれが好きです。これが気に入らない人もたくさんいると知っています。関心の分離は本物です。 多くの開発者は、その意味が時間と共に忘れされ去られた信条のように、ほぼ盲目的にそれを信じています。 ちょっと、詩的になってしまいましたね。 しかし、本当に、そうなんです。 HTML / CSS / JSは分離されている必要があります。分離しなければ、どうあるべきなのでしょうか。その長年そそり立っている塔でさえ、あらゆる面で攻撃されています。 では、なぜデザインツールと開発者ツールを分離する必要があるのでしょうか?

純粋なコードツール

大多数のデザイナーに関係しないので、これは興味深いバケットです。 多くのデザイナーは、ブラウザーでのデザインに慣れていません。コードエディタを使用することにものすごい抵抗があるのです。でも、この点においては問題ありません。とにかく、多くの開発者が使い慣れているツールがこの種類のツールです。Bootstrap、Tachyons(および他の87364873フレームワーク)。 Animate.cssのようなAPIでさえ、デザインツールの一種です。

追記

開発者が遊んでいる実験的なツールがあります。 RenéやCiceroneのようなツールです。私が今までに出会ったツールで、独自のひねりを加えたものです。非常に多くのアプリが消え去ってしまいました。R.I.P Macawよ、私はあなたの存在に全然気づいていませんでした。


コメントを読む

新着ピック  






















新着ニュース

【都市封鎖に備える】 オフィスにあるデスクトップに自宅からリモートアクセスして業務継続する方法 【完結・RRAS編】 | Developers.IO

AppSyncのクエリからStep Functionsのステートマシンを起動して時間のかかる処理を非同期に実行する | Developers.IO

クラスメソッドに新卒入社し10年目になるワイがキャリアや思い出を振り返り、そして卒業する | Developers.IO

君もクラメソオフィス(仮想)からオンライン会議に参加できるぞ!Lens StudioでオリジナルのLensを作成する方法 | Developers.IO

既存の S3 バケットでオブジェクトロックを有効化する手順 | Developers.IO

ドコモショップ六本木店のスタッフが新型コロナに感染--九州支社の社員も陽性

SIMフリースマホの「SIMフリー」って何? 気を付けるべき点は?【2020年最新版】

XplentyからAmazon Redshiftに接続してみた | Developers.IO

Zoombombingは犯罪 米司法省が警告

Zoom、北米のWeb会議の暗号キーを誤って中国データセンター経由にした問題について説明

[アップデート] CloudWatch Contributor Insights が一般利用可能になりました | Developers.IO

Zoom、パスワード強化と「待機室」追加 “Zoombombing”対策で

“半開き”で撮れるのが便利で面白い 「Galaxy Z Flip」のカメラで遊んでみた

2020年3月にリニューアルしたDevelopers.IOの変更点をインフラ側から紹介します | Developers.IO

【都市封鎖に備える】 オフィスにあるデスクトップに自宅からリモートアクセスして業務継続する方法 【SSTP編】 | Developers.IO

DataStaxがCassandraデータベースのためのKubernetesオペレーターをローンチ | TechCrunch Japan

GMとHondaが2024年発売の電気自動車2モデルを共同開発 | TechCrunch Japan

不況を生き延びたいならプラットフォームフォーマーを目指せ! | TechCrunch Japan

DB インスタンスのフェイルオーバーが発生しました。原因を特定する方法を教えてください。 | Developers.IO

「ポータブルテレビ」おすすめ3選 お風呂やキッチンで大活躍!【2020年最新版】

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。