デザイナーのためのコーディング–どれだけ知っておくべきか？

あなたが優れている何かを取り、それからあなた自身をさらに押し進めてください。

デザインコミュニティの大部分は、デザイナーがコーディングすべきかどうかについての議論に閉じ込められています。 両方を行うことができるユニコーンを探すことを好む人もいれば、存在しない、または邪魔になるだけだと主張する人もいます。

多くの設計者は、設計者と開発者が協力する必要があると考えていますが、各分野は彼らが知っていることに固執する必要があります。 他の人は、複数の帽子をかぶっている専門家に問題がないと考えています。 多くの開発者は、脅威をコーディングするデザイナーを見ており、他の開発者は、彼らを自分の言語を話すことを学んだ歓迎された協力者と見なしています。

「共通理解」と呼ばれるスイートスポットは、おそらくその中間にあるでしょう。 コードについて少し知っているということは、デザイナーがエキスパートコーダーになる必要があるという意味ではなく、単に開発者の視点を理解しているということです。

UI、つまり「プレゼンテーション層」はデザイナーの遊び場ですが、それだけに焦点を当てることは、建物のファサードだけを考慮することに似ています。 優れたデザイナーは、自分のデザインを提供する技術的基盤に精通していると、デザイナーがより印象的になるだけでなく、キャリアの見通しが大幅に向上することを理解しています。

InVisionのデザイン教育担当副社長であるAaronWalterは、Toptal Design Talksの記事で次のように述べています。「HTMLやCSS、おそらくJavaScriptの書き方を少し知っていれば、デザイナーを殺すことはありません。」

「設計者がコーディングを学ぶべきか」というトピック全体が熱く議論されています。 優れたデザイナーの中にはコーディングも得意な人もいますが、多くの人は、特定のスキルに細心の注意を払うことで専門家が強くなると信じています。 多くの人はまた、今日、マルチスキルのデザイナーであることは大きなプラスであり、コーディングなどの別の有用なスキルをデザイナーが身に付けていることを妨げるものは何もないはずだと信じています。

問題は、設計者がどれだけのコーディングを知っておくべきかということです。 設計者は時間を無駄にしたり、開発者の領域に境界を越えて足を踏み入れたりする可能性がありますか？

基本的なHTMLとCSSを知っていることの利点

設計者は、 HTML （ハイパーテキストマークアップ言語）およびCSS （カスケードスタイルシート、HTMLドキュメントのコンポーネントスタイルを記述する言語）によって駆動される「フロントエンド」（プレゼンテーションレイヤー）と呼ばれるものに関する基礎知識を習得することで大きなメリットが得られます。 、そしておそらく基本を学ぶことがいかに簡単であるかに驚くでしょう。

HTMLとCSSにはプログラミングロジックは含まれていません。 HTMLの文字Mは、「マークアップ」を表します。これは、ページの構成要素であるページ要素のコード化された構造を説明する方法です。 CSSとJavaScriptを使用したHTMLは、ワールドワイドウェブの基盤技術のトライアドを形成します。

素人の言葉で言えば、HTMLはブラウザに何を表示するかを指示するアーキテクチャマップであり、CSS（カスケードスタイルシート）はブラウザに表示方法を指示するコードです。

比喩的に言えば、HTMLがページのスケルトンである場合、CSSは高さ、体型、肌、目の色、髪の色などを記述します。言語は、タイポグラフィ、色、位置、寸法を決定する非常に単純なコード構造を持っています。

コードを理解し、コーディングする方法はピクセルを理解することです

フロントエンドUIのコーディング方法とプレビュー方法を学ぶことで、設計者はさまざまなデバイスで表示したときにどのように表示されるかをすぐに確認できます。 設計者がHTMLとCSSを試してみると、すべてがピクセルで測定されていることに気付くでしょう（「ems」やパーセンテージなど、最終的にピクセルに変換される他の測定単位があります）。

測定値とコード構造、つまりページの表示方法を理解することで、フロントエンドの開発プロセスをより深く理解できます。 その結果、設計者は自分の設計と、そのプロセスでより効率的に設計する方法についてより深く考えるようになります。 彼らは、何が簡単に達成できるのか、そして何がより困難になるのかを知るでしょう。

フロントエンドJavaScriptとAjaxのノウハウがデザイナーをユニークな資産にする

これは物事が複雑になり始める場所ですが、多くの楽しみが起こる場所でもあります。 デザイナーが分析的な思想家であるか、非常にやる気がある場合、JavaScriptとAjax（非同期JavaScriptとXML）を学ぶことで多くのことを学ぶことができます。 なんで？

フロントエンドUIの技術的知識を示し、Ajaxに精通していることは、開発者の尊敬を得るのに大いに役立ちます。 JavaScriptとAjaxを参照できるようになり、それらの使用方法により、UIの特定の機能の設計など、特に洗練された設計アイデアを開発者に明確に伝える設計者の能力が向上します。

テクノロジーがどれだけ遠くまで到達できるか、そしてテクノロジーをどこまで革新に向けて推進できるかを正確に理解していれば、デザイナーの視点は広がります。 コーディングやさまざまなテクノロジーを深く掘り下げる必要はありません。デザイナーがHTML、CSS、JavaScriptの基本を知っていて、Ajaxを散りばめていれば、それらはすでに競合他社よりもはるかに進んでいます。 これらは、どの企業や製品チームにとってもユニークな資産になります。

デザイナーはJavaScriptの基本でそれを次のレベルに引き上げることができます

設計者はここで立ち止まり、開発者がバックエンド（データアクセス層）を実装することもできますが、スクリプトを追加することで設計をより動的にすることができます。 Web用のプログラミング言語であるJavaScript（スクリプト言語）を入力してください。

Webがまだ進化していた2000年代初頭、FantasyやFirstbornなどのエージェンシーは、JavaScriptを珍しく、革新的で、創造的な方法で利用したときに、Webデザインコミュニティに大きな印象を与えました。

JavaScriptは、HTMLとCSSの両方を更新および変更でき、データの計算、操作、および検証を行うことができます。 動的な相互作用の表示、要素のアニメーション化、バックエンドまたはサーバーとの応答性の高い通信の作成などに使用できます。

フロントエンド開発でJavaScriptを使用して達成できることには制限がありません。 これはプログラミング言語です。関数、オブジェクト、ロジック、条件文、数学、数学、その他の数学です。これは、一部の人にとっては少し難しい場合があります。 しかし、特にクライアントの大多数が何を必要としているかを考えると、学ぶのはそれほど難しくありません。

コードを学ぶことで、開発者とのコラボレーションが向上します

男性と女性がお互いの心を読むことができれば、ロマンチックな関係はより簡単になりますか？ 一部の人々はそう思います。 同じことがデザイナーと開発者にも当てはまります。

開発者がどのように考えているか、そして彼らが仕事をするために何が必要かを知ることは、デザイナーをあらゆる学際的なチームにとって素晴らしい資産にするでしょう。 このアプローチは、チームの他のメンバーに何を期待するかについてより多くのアイデアを持っているため、内部コミュニケーションだけでなくアイデアの売り込みにも役立ちます。 設計者がこれを行うことができれば、より堅牢なソリューションをクライアントに提案するためのより良い立場に立つことができます。

コードを書くデザイナーはより多くの仕事の機会を見るでしょう

すべての設計作業の機会において、コーディング方法を知ることは、スクリーニングプロセスだけでなく日常業務にも大きな違いをもたらす可能性があります。 Toptalには、このハイブリッドプロファイルを持つ専門家にとって多くの機会があり、スタートアップは、初期段階のアプリケーションの設計とフロントエンドの両方を引き継ぐことができる人々を見つけたいと熱望しています。

それでも、お互いのビジネスを詮索することを嫌うデザイナーやプログラマーがいます。 脅迫されている人もいれば、挑戦されている人もいれば、怠惰すぎて何か新しいことを学ぶことができない人もいます。 しかし、真実は、それぞれが選択肢を分析し、成功の可能性を高めるものに焦点を当てる必要があるということです。

デザイナーはすべてを学ぶのに十分な時間がないかもしれませんが、バニラHTMLとCSSを知っていれば、繁栄するキャリアと行き止まりのキャリアを大きく区別するのに十分なはずです。 設計者が最初のステップを実行するのは、迅速で簡単なプロセスである必要があります。 彼らが知るほど、彼らは仕事の機会に関して彼らの視野を広げることができます。

設計者はコーディングを学ぶ必要がありますか？

他のチームと協力する適応性と柔軟性、さまざまなプロジェクトに取り組む能力、およびさまざまな責任を引き受けるための幅広いスキルが常に求められています。 エキサイティングなスタートアップや大手テクノロジー企業での非常に切望された仕事に関して、他の人よりも優位に立つことを望まないデザイナーはどこにいますか？

設計者には、アプローチ、プロセス、設計ツールの備蓄、および成果物がありますが、それは方程式の一部にすぎません。 さまざまなデジタルテクノロジーを使用してUIデザインがどのように提供されるかを調査し、理解を深めることで、デザイナーを次のレベルに引き上げ、優れたデザインを提供する能力を高めることができます。

ますます多くのデザイン分野での仕事の機会には、HTML、CSS、JavaScriptを使用した基本的なWeb開発やプロトタイピングスキルなどの「便利なもの」が含まれています。 どれだけ引き受けるかは、各デザイナーが決定します。 明らかに必要性はそこにあります。

AIはフロントエンド開発者を排除するつもりですか？

ただし、1つの疑問が残ります。設計者向けのコーディングは、長期的に関連性を維持するのでしょうか。 設計者の間には、AIと機械学習を使用することで、設計者がコードなしですぐに設計できるようになるという気がかりがあります。 ドラッグアンドドロップして画面上で物事を動かし、ボタンを押すだけで、AIがすべてをコード化します。 言い換えれば、これらのタイプのフロントエンド開発者の仕事はすぐに消えてしまいます。

設計者が懸念している場合、答えは短期的か長期的かを考えることにあるかもしれません。 近い将来、AIが引き継ぐことはなく、コーディングを行う設計者の需要は依然として高い可能性があります。 短期的には、目立つようにしたいデザイナーは、JavaScriptやAjaxなどの特定の基本的なコーディングスキルを武器に保持する必要があります。

デザイナーのためのコーディングの習得はキャリアを後押しします

スキルセットを成長させ、向上させたいと考えているUIデザイナーには、自由に使えるいくつかのオプションがあります。 彼らはさまざまなデザインスキルを磨き、ビジュアルデザイン、UX、さらにはUXリサーチなどの他の役割に移行することができます。 また、はしごを段階的に上って、より上級、プリンシパル、リード、マネージャー、およびディレクターレベルの役割にすることもできます。

ただし、キャリアを実際に高めるために、設計者は開発についてさらに深く掘り下げたいと思うかもしれません。 今日のデジタル製品を推進するさまざまなテクノロジーに関する深い知識を習得することで、非常に望ましい一連のスキルを身に付けることができます。 これにより、大小の企業での雇用機会への扉がさらに開かれます。

デザイナーはコーディングする必要がありますか？ 多分そうでないかもしれません。 しかし、コーディングする、または少なくともさまざまなテクノロジーに関する深い知識を示す設計者は、あらゆる学際的なチームにとって大きな資産となり、長期的には間違いなく報われるでしょう。

Toptal Designブログでさらに読む：

• モバイルUXの設計原則とベストプラクティス
• モバイルUXデザイン–ベストプラクティス、制約、および開発者との連携
• 異文化デザインとUXの役割
• デザインの原則とその重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例