ウェブサイト開発におけるフロントエンド開発者とアーティストの知識の違い

概要: 多くの企業、特にインターネット Web サイトを主な事業とする企業のほとんどが、「アーティスト」の概念を混同しています。通常、これらの企業は Web ページを設計および制作する人を「アーティスト」と呼びます。成熟したインターネット企業では、ウェブサイトに対してより詳細な人材計画を立てており、UED チーム (英語では User Experience Design の略) が「インタラクションデザイン」「ビジュアルデザイン」「フロントエンド開発」「ユーザーリサーチ」「コピーライティング」などの職種に分かれています。今日は主にこの話題について、「アーティスト」と「フロントエンド」の機能的な違いについてお話ししたいと思います。
1. 芸術とは何か？
アートエンジニア：アートエンジニアの略で、ほとんどが美術大学のアートデザイン専攻の卒業生です。
アートデザインは、その仕事の性質に応じて、一般的にグラフィックデザイン、立体デザイン、ウェブデザインの3つのカテゴリに分けられます。
グラフィックデザインは、アーティストが Fireworks または Photoshop を使用してグラフィックの外観をデザインすることによって行われます。
3 次元アートデザインは、アーティストが 3DMAX などのツールを使用して、3 次元のキャラクターモデル、小道具モデル、環境シーンモデル、パッケージデザインなどを設計することによって行われます。
Web デザインとは、Dreamwerver などの Web 編集ソフトウェアを使用して、デザインされたグラフィックレンダリングを HTML 静的 Web ページファイルに変換するプロセスです。ここでアーティストは CSS と DIV 技術、いわゆるカッティングピクチャを使用する必要があります。具体的には、Web デザイナーは一般的に、PHOTOSHOP/CSS/HTML/JAVASCRIPT などのインターネット言語や、Web ページのフレームワーク、色、トーン、創造性などを処理するツールに精通している必要があります。
ここで言及したウェブページのデザインは、実は Web 1.0 時代の産物です。当時、ほとんどのウェブサイトは静的な HTML ページであり、ユーザーは主にウェブサイトを閲覧するために使用していました。 2005 年以降、インターネットは Web 2.0 の時代に入り、デスクトップアプリケーションに類似したさまざまな Web アプリが大量に登場しました。 Gmail、Google Readerなど。ウェブサイトのフロントエンドとインタラクションは、大きな変化を遂げました。ウェブページはもはや単一のテキストと画像を表示するだけではありません。さまざまなリッチメディアにより、ウェブページのコンテンツはより鮮明になり、ソフトウェアベースのインタラクティブフォームもユーザーに優れたユーザーエクスペリエンスを提供します。これらはすべて、複数のフロントエンドテクノロジーの緊密な連携によって実現されています。その結果、「フロントエンド開発エンジニア」というポジションが誕生しました！
2. フロントエンド開発エンジニアとは？
フロントエンド開発エンジニアは、Web フロントエンド開発エンジニアの略称です。ここ 5 年ほどでようやく注目を集め始めた新興の職業です。 Web フロントエンド開発技術は、最初は簡単だが次第に難しくなるプロセスです。主に HTML、CSS、JavaScript の 3 つの要素が含まれます。フロントエンド開発エンジニアは、基本的な Web フロントエンド開発技術、Web サイトのパフォーマンス最適化、SEO、サーバー側の基礎知識を習得するだけでなく、補助開発用のさまざまなツールの使用方法や、コードの保守性、コンポーネントの使いやすさ、階層化されたセマンティックテンプレート、ブラウザー階層サポートなどの理論的知識も習得する必要があります。
フロントエンド開発エンジニアは、簡単に言えば、デザイナーのアートワークを HTML ページに変換し、ユーザーがクリックして操作できるようにブラウザーに実際に表示します。この仕事は、Photoshop Fireworks を使用してマウスを数回クリックするだけでページを直接エクスポートするだけの簡単なものから、各タグのセマンティクス、全体的なパフォーマンス、ブラウザーの互換性、ユーザー操作、検索エンジンの最適化などを考慮する複雑なものまであります。基本的なスキル要件は、グラフィック画像処理ツールの使用、HTML/CSS/JavaScript フロントエンド言語の熟練度、そして PHP などのサーバー側言語の知識があることです。フロントエンド開発業界に参入するのはとても簡単です。HTML+CSS の本を買って 1、2 週間独学すれば、「Web ページ制作」の仕事を見つけられるかもしれません。しかし、本当に優秀なフロントエンドエンジニアになるのはもっと難しいです。フロントエンド技術は、始めるのは簡単ですが、習得するのは難しいからです。ほとんどの人にとって、始めるのは簡単ですが、習得するのは難しいのです。さらに、多くの企業が十分な注意を払っていないため、フロントエンドエンジニアのレベルに大きな差が生じ、一般的に給与が低くなっています。その結果、バックエンド言語の学習に費やすエネルギーが少ないため、複数の技術を必要とするフロントエンド開発を学習したがらない人が増えています。
3. 優秀なフロントエンド開発者が習得すべき知識<br />フロントエンド開発を行うには、まずHTML+CSSを習得することが最も基本です。この2つの最も基本的な知識があれば、簡単にページを切り出すことができます。しかし、これだけでは十分ではありません。さまざまなブラウザとの互換性も必要です。一部の企業では IE6/7/8+Firefox との互換性のみを要求していますが、優れたフロントエンド開発者として、より高い要件を自分に設定する必要があります。一般的に使用されているいくつかのブラウザとの互換性に加えて、Chrome、Opera、Safari などの他のブラウザとの互換性も必要です。非常に多くのブラウザと互換性を持たせるためには、CSS HACK の知識を習得し、HACK 技術を使用してさまざまなバージョンのブラウザを区別し、互換性を持たせる必要があります。しかし、Firefox と互換性があるので、これらと互換性を持たせることは難しくないと思います。
エレガントな HTML コードを記述できるようになったら、W3C 標準とセマンティック仕様に可能な限り準拠する必要もあります。この点に関しては厳密な要件はありませんが、これら 2 つのことを適切に実行する必要があります。優れた Web サイトのフロントエンドエンジニアは、すべての HTML タグのセマンティクスを考慮する必要があります。 Hx タグ、ul ol dl タグなどを適切に使用してください。 CSS が無効になっている場合でも、ページを適切に構造化して読みやすくします。
国内のインターネットユーザーの中で、IE ブラウザを使用する人が多いことはわかっています。しかし、国内または世界のインターネットユーザーの観点から見ると、インターネットの閲覧に IE を使用しないお客様もいます。そのようなお客様は、Netscape、Mozilla、FireFox、Opera などの他の閲覧ツールを使用しています。Web サイトが W3C 標準に準拠していない場合、他のブラウザを使用しているユーザーは Web サイトを表示できません。そうすると、一部の顧客はあなたのビジネスや製品を見ることができなくなります。この顧客の割合は比較的小さいですが、結局は顧客の一部です。潜在的な顧客を失うことは、会社にとって損失です。
W3C に準拠すると、ファイルのダウンロードやページの表示が高速化される、より多くのユーザー (視覚障害者、色覚障害者、その他の障害者を含む) がコンテンツにアクセスできる、より幅広いデバイス (スクリーンリーダー、ハンドヘルドデバイス、検索ロボット、プリンター、冷蔵庫など) からコンテンツにアクセスできる、ユーザーがスタイル選択によって独自のプレゼンテーションインターフェイスをカスタマイズできる、すべてのページで印刷に適したバージョンを提供できる、など、多くの利点があります。
HTML + CSS の知識を完全に習得した後、次に最も難しいタスクは JavaScript です。 JS はフロントエンドに必須のスキルの 1 つであり、最も難しい部分でもあります。ここで取り上げるのは、初心者が段階的に学習できるようにするためです。一度にたくさんのことを消化するのは難しいでしょう。段階的に学んでいけば、ストレスも少なくなるでしょう。これらのうち、フロントエンド開発では、基本的な DOM 操作を習得し、AJAX を理解し、メンテナンスコストを削減するために効率的な OOP コードを記述できる必要があります。現在では、Jquery、Prototype、Yui、Dojo など、JS フレームワークがますます増えています。フロントエンド開発はさまざまなニーズに基づいて行われ、さまざまな開発を実行する必要があります。最高のコード効率、最高のユーザーエクスペリエンス、最小のコードダウンロード量、および単一または複数の製品ラインでの最大限のコード再利用を実現するには、適切なフレームワークを選択する必要があります。
以上がフロントエンド開発エンジニアに必要な知識です。次にフロントエンド拡張スキルについてお話します。
1. Photoshop または Fireworks を選択して習得します。
学習レベルはご自身のニーズに合わせて決められます。将来フロントエンド開発で生計を立てたいのであれば、大企業で働いてデザイン案を作るのにフロントエンド開発は必要なく、絵をレイヤーにカットする能力があれば十分です。もちろん、デザインに興味があるなら、PS を使いこなせるようになるのも良いことです。
2. バックエンド言語を理解する<br />PHP+MysqlやJSPなどのバックエンド言語について学ぶことができます。私たちの職業の特殊性により、バックエンドの作業員と頻繁にコミュニケーションを取る必要があります。この分野の知識を習得すると、より効果的なコミュニケーションが可能になります。チーム全体でフロントエンドのイメージを向上させ、それによって自身の待遇も向上させます。また、この部分をしっかり学んでおけば、企業からウェブサイトの構築を依頼されたときにも安心です。 PHP と JSP のどちらを学ぶかは、個人の好みによります。個人的には PHP がとても良いと思います。多くのオープンソースプログラムは PHP で書かれています。PHP を学ぶと、独自の Web サイトを構築するのに役立ちます。また、WordPressは非常に興味深いものです。
3. SEO+UE（ユーザーエクスペリエンス）
ユーザーエクスペリエンスは重要であり、SEO はユーザーを引き付ける上で重要です。 UE は実際にはフロントエンド開発に欠かせない部分です。これをマスターできれば、プロダクトマネージャーや部門マネージャーに昇進できますし、これをうまく実行できれば顧客の満足を獲得できます。さらに、このことを学ぶのは難しくありません。ただ、人生を観察することにもっと注意を払うだけです。なぜだめですか？
4. フロントエンドのパフォーマンス最適化<br />このスキルを習得すると、Web サイトの速度が向上し、会社のコストが節約されます。時間があれば、HTTP リクエストの数を最小限に抑える、CSS スプライト画像統合テクノロジ、CSS と JS をマージする、CDN テクノロジを使用する、DNS ルックアップの数を減らす、リダイレクトを回避するなど、Web サイトページ最適化のルールを調べることができます。
これを読んで、「フロントエンド」という言葉に対する理解が深まりましたか?それは伝統的な「芸術」とは大きく異なるのでしょうか?私はいくつかの調査を行いました。フロントエンド開発者の中には、他人が何と呼ぼうと気にしない人もいますが、この用語に非常に嫌悪感を抱いている人もいます。今日の WEB2.0 時代では、「アーティスト」という肩書きは時代遅れのように思えます。なぜなら、Web サイトのフロントエンドには、より専門的な開発スキルが求められるようになったからです。だから、フロントエンド開発であろうとビジュアルデザインであろうと、私はこのタイトルが好きではありません。
今日ここでお話ししたのは、「フロントエンド開発」についての表面的な理解にすぎません。この理論については、今後さらに詳しくお話しする機会があるでしょう。

<<: Vue 3 での watch と watchEffect の新しい使い方

>>: Google ブラウザのラベルと入力間のスペースに関する小さな問題