デザイナーはコーディングを学ぶ必要がありますか?

デザイナーはコーディングを学ぶ必要がありますか?

多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは、Web ページ コードを作成するという重労働をプログラマーに任せました。この現象は、Web 開発業界だけでなく、ソフトウェアおよびゲーム開発業界でも見られます。

厳しい現実としては、開発の進行はデザイナーによって停滞する可能性があるということです。最適な効率を追求するには、デザイナーは描くだけでなく、それを作る能力も必要です。この記事では、デザイナーがコーディングを学ぶ必要がある理由をいくつか読者に伝えたいと思います。

現実的で実現可能なデザインを作る

最終製品がどのようになるか明確なアイデアがあれば、デザイナーはより現実的で実行可能なコンセプトを思いつくでしょう。開発プロセスの不可欠な部分として、デザイナーは、使いやすさ、Web アクセシビリティ、実装可能性を考慮しながら、デザインが Web メディアにスムーズに移行されるようにする役割を担っています。ユーザーフレンドリーな Web サイトは、閲覧順序が明確で簡潔であるだけでなく、邪魔になったり雑然としたりすることなく、ユーザーに必要なすべての情報を提供します。 Web レイアウトが実現可能かどうかを知る唯一の方法は、自分で Web ページを構築する方法を学ぶことです。

コミュニケーションを容易にする

設計と実装が分離されているほとんどすべての製品では、設計グループと実装グループが互いの期待に応えることは決してありません。特に、Web サイト、ソフトウェア、ゲームなどの無形の製品ではそれが当てはまります。これは通常、製品の期待と製品の実現可能性の間の妥協に帰着しますが、現時点ではこれを完璧に達成することは困難であると思われます。解決策としては、混乱、誤解、誤ったコミュニケーションを避けるために、デザイナーが自らデザインを実現しようと努めることです。

便利な反復開発プロセス

実際の設計は絶対的なものではありません。私が言いたいのは、デザインは柔軟で使いやすく、システムの本来の意味を歪めることなく、システムの技術的な制限に合わせて変更できるものでなければならないということです。これらの繰り返しの必要な変更は、元の設計者によってのみ実行できます。開発者がデザインをデザイナーに持ち帰って変更を加えるよりも、デザイナー/開発者の方が効率的です。そして、デザイナーと開発者の間には摩擦が生じる可能性があり、実際に起こることがよくあります。

より良く、より調和のとれた結果

私はよく、ソフトウェア、ネットワーク、ゲーム開発をオーケストラに例え、デザイナーを作曲家、開発者を指揮者に例えるのが好きです。もしこの二人が同一人物だったらどうなるでしょうか?交響曲は、驚くほど魅力的で、純粋です!巨匠の傑作であるだけでなく、巨匠自らが監督も手掛けた作品です!

開発時間を短縮

デザイナーがプログラマーの役割も担うということは、デザインとコーディングの進行が同時ではないにしても、順次行われることを意味します。その結果、開発サイクルが短縮されます。効率を気にしない人がいるでしょうか?

デザイナーはより市場志向である

現代のデザイナーは、個人の価値を維持するために能力を向上させる必要があります。一連のスキルを持っているだけでは十分ではありません。デザイナー、フロントエンド開発者、記事執筆者、プロジェクトマネージャーなど、さまざまな肩書きを持つ必要があることがよくあります。

独自の設計を開発者の手中に放置するのではなく、実装することを学ぶことで、あなた自身の価値を高めることができます。結局のところ、履歴書にデザインやコーディングのスキルを記載しても損にはなりません。逆に、金融危機の時代においては、企業のリストラ(大量解雇を参照)とコスト削減により、解雇されることなく自分の重要性を強調することが可能です。

しかし、デザイナーがコーディングを学ぶべき理由はこれだけではありませんが、反対意見もいくつかあります。

ルーカス・マティスの物議を醸した記事「デザイナーはプログラマーではない」( 注1)を引用

デザイナーが独自のデザインを実装する場合、クリーンなコードと優れたユーザー エクスペリエンスという 2 つの異なる目標によって制約されます。これら 2 つの目標は矛盾しています。独自のデザインを実装すると、必然的にコードの品質が損なわれ、インタラクション デザインに役立ちません。

独自のデザインを実装するデザイナーは、2 つの問題に直面します。優れた新しいアイデアによってコードが混乱してしまうことを認識しており、また、ユーザー エクスペリエンスを向上させると既存のコードが混乱してしまうことも認識しています。ユーザー エクスペリエンスは細部に大きく左右されるため、この 2 つは相反します。しかし、コードを乱雑にしたくないというユーザーの意向により、こうした細部は最終的に台無しになってしまいます。

これは、「Web 開発純粋主義者」がとる強硬な姿勢を的確に要約しています。彼らは古い考え方を持っており、設計と開発を明確に区別することを主張しています。当然ですが、 デザイナーは人間のために作成し、開発者は機械のために作成します。したがって、UX デザイナーは可能な限り最高のユーザー インターフェイスを設計し、開発者が可能な限り最高のプログラミング決定を下せるようにする必要があります。これにはある程度の真実が含まれていますが、ユーザー インターフェイスに取り組んでいたとき、コードからインスピレーションを得ようとする私の努力は、しばしば失敗しました。一般的に、技術的およびユーザビリティ上の制限を念頭に置いて正しく理解しておくと役立ちます。

最後に

最終的には、開発中のプロジェクトの規模によって、デザイナーと開発者の役割が決まる場合があります。小規模なアプリケーションであればプロジェクトマネージャー( 注2)で管理できますが、大規模なシステムでは必然的に異なる専門家が必要になります。

注1  マティス・ルーカス「デザイナーはプログラマーではない」コードを無視する

注2   Spolsky-Joel - 「デザイナー プログラマー」という職種についての説明 - 「プログラム マネージャーになる方法」 - Joel on Software

著者のジョン・アーバンは、カリフォルニア大学サンディエゴ校でコンピューターサイエンスを専攻する2年生です。

英語原文  http://sixrevisions.com/web_design/why-designers-should-learn-how-to-code/

<<:  MysqlチューニングExplainツールの詳細な説明と実践的な演習(推奨)

>>:  純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

推薦する

jsはブラウザを閉じるときにアカウントのログアウトを処理します

目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...

JS クロスドメイン XML - AS URLLoader を使用

最近、機能拡張の要件を受け取りました。ただし、新しい要件で参照されているデータインターフェイスは、X...

ウェブサイト上のWeiboコンポーネントの再設計の詳細な紹介(写真とテキスト)

前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...

CentOS に Nginx をインストールする方法

公式ドキュメント: https://nginx.org/en/linux_packages.html...

VUE ユニアプリコア知識の簡単な紹介

目次仕様a. ページファイルはVueの単一ファイルコンポーネント仕様に準拠しています。 b. コンポ...

Html+CSS 描画三角形アイコン

まずはレンダリングを見てみましょう: XML/HTML コードコンテンツをクリップボードにコピー&l...

VScode設定のリモートデバッグLinuxプログラムの問題を解決する

VScode リモートデバッグ Linux プログラムの問題について見てみましょう。具体的な内容は以...

Linux のリンク解除機能とファイルの削除方法

1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...

クラウドネイティブテクノロジーKubernetesスケジューリングユニットポッドの使用の詳細な説明

k8s の最小のスケジューリング単位 --- pod前回の記事では、k8s が解決できる問題を簡単に...

MySql データベースにおける単一テーブル クエリと複数テーブル結合クエリの効率の比較

この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...

Vue3 でタイマーコンポーネントをカプセル化する方法

背景一部のショッピング モールの Web ページで商品の詳細を開くと、購入数量を選択するためのカウン...

JS で単一ファイルコンポーネントを実装する方法

目次概要単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

React+Typescriptはカウントダウンフックメソッドを実装します

まず、setIntervalはフックとしてカプセル化されます👇 'react' から...

ES6 Promiseの使い方の詳細な説明

目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...

Dockerイメージを完全にアンインストールする手順

1. docker ps -a 実行中のイメージプロセスを表示する [root@mylinux~]#...