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

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

多くの場合、 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 でフォ​​ーム検証を実装するためのサンプル コード

推薦する

MySQL における識別子の大文字と小文字の区別の問題の詳細な分析

MySQL では、テーブル名の大文字と小文字の区別の問題が発生する可能性があります。実際、これはプラ...

jsを使用してサーバーに写真をアップロードする

この記事の例では、参考のために画像をサーバーにアップロードするためのjsの具体的なコードを共有してい...

JS が WeChat の「クソ爆弾」機能を実装

みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...

CSS を使用して適応型の幅と高さを持つ 16:9 の長方形を実装する例

先ほど、適応幅と高さが1:1の正方形を作成する方法について説明しました。 https://www.j...

レスポンシブレイアウトについて知っておくべきこと

1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...

入力テキストボックスの長さをコンテンツに応じて変更する方法

初め:コードをコピーコードは次のとおりです。 <input type="text&q...

要素内の TimePicker は時間の一部を無効にします (分単位で無効)

プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効...

js キャンバスはランダムなパーティクル効果を実現します

この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

HTML で余分なテキストを省略記号に変換する方法

HTML で余分なテキストを省略記号として表示したい場合は、いくつかの方法があります。 1行テキスト...

mysql 5.6.23 winx64.zip インストール詳細チュートリアル

WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...

nginx 設定ファイルで環境変数を使用する方法

序文Nginx はパフォーマンスを重視して設計された HTTP サーバーです。Apache や li...

MySQL 8.0 アトミック DDL 構文の詳細な説明

目次01 アトミックDDLの紹介02 一部のDDL操作の実行動作の変更03 DDL 操作のログを表示...

JSはBaidu Newsナビゲーションバーの効果を実現

この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...

Linuxでテキスト比較を実現するコツを教えます

序文コードを書く過程で、必然的にコードに何らかの変更を加えることになります。しかし、変更を加えるとき...