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

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

多くの場合、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 背景コントロールプロパティと色遷移を使用してグラデーション効果を実現します。

推薦する

CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...

Vite と Vue CLI の長所と短所

Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...

vue router-view のネストされた表示実装

目次1. ルーティング構成2. Vueページのネスト3. ネストされた関係1. ルーティング構成 定...

docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

目次1. docker-maven-pluginの紹介2. 環境とソフトウェアの準備3. デモ例3....

border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...

WeChatアプレットシングルページアプリケーションルーティングを徹底的に理解するための10分

シングルページアプリケーションの特徴「前提:」Web ページには、クリックするとサイト内の他のページ...

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

さようなら Docker: 5 分で Containerd に移行する方法

Docker は非常に人気のあるコンテナ技術です。K8S によって廃止され、別のコンテナ技術である ...

VSCode と SSH を使用したリモート開発

0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...

Vue3 での Teleport の使用に関する詳細な説明

目次テレポートの目的テレポートの仕組みこの記事では、以下の内容を取り上げます。テレポートの目的テレポ...

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...

JavaScript Canvas で三目並べゲームを実装

この記事では、JavaScript Canvasで三目並べゲームを実装するための具体的なコードを参考...

CSS3 クリアフロートメソッドの例

1. 目的この記事を通じて、誰もがフロートをクリアする原理と方法を理解し、最終的にこの記事が最良であ...

CSS で中空マスク レイヤーを実装するサンプル コード

この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク通常のマス...

MySQL 論理バックアップとリカバリ テストの概要

目次1. データベース論理バックアップとはどのようなバックアップですか? 2. よく使われる論理バッ...