ウェブデザイナーもウェブコーディングを学ぶ必要がある

ウェブデザイナーもウェブコーディングを学ぶ必要がある

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

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

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

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

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

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

便利な反復開発プロセス

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

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

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

開発時間を短縮

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

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

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

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

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

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

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

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

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

最後に

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

注1 Mathis-Lukas——「デザイナーはプログラマではない」——コードを無視する

注 2 Spolsky-Joel - 「デザイナー プログラマー」と呼ばれる役職について説明しています - 「プログラム マネージャーになる方法」 - Joel on Software

<<:  iframe ページパラメータの文字化けの問題について議論

>>:  CSS3 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

推薦する

Nginx で WordPress を設定する方法

以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...

Flex プログラム Firefox で中国語を入力すると文字化けするバグ

Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...

HTML チュートリアル: よく使われる HTML タグのコレクション (5)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

Nginx のインストールと設定ルールの詳細な紹介

目次1. nginxのインストールと操作(Mac OS環境) 2. nginxルールの設定3. コマ...

Jenkinsはマイクロサービスをパッケージ化してDockerイメージを構築し、実行します。

目次環境の準備始める1. GitLabリモートリポジトリがマイクロサービスプロジェクトを作成する2....

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

MySQL での置換例の詳細な説明

MySQL での置換例の詳細な説明replace into は insert と似ていますが、rep...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

Vue補間式とv-textディレクティブの違い

目次1. プラグイン式を使用する2. プラグイン式でv-cloakを使用してちらつきの問題を解決する...

QQtabBar による CSS 命名仕様 BEM の詳細な紹介

QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...

Centos7 に PHP と Nginx をインストールする詳細なチュートリアル

Centos のサーバー側への適用がますます普及するにつれて、Centos7 もますます使用されるよ...

vue+django でファイルをダウンロードする例

目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...

Ubuntu 18.04 のすべての Python ライブラリを一度にアップグレードする方法

ピップとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンインストー...