UX および UI デザイナーは何をしますか?また、フロントエンド開発者は何をしますか?

IT業界にはデザインに関わる分野が非常に多くあります。その中で最も一般的なのはデザイナーであり、UX と UI という頭字語の陰に隠れています。そうですね、フロントエンド開発者をデザイナーとして含めることに成功する人もいます。ITの世界でデザイナーとはどんな人なのか、UIとUXの違いは何なのか、フロントエンドエンジニアはどのような関係でデザインをしなければならないのかを考えてみましょう。

デザイナー

アプリケーション、Web サイト、またはゲームのインターフェイスの開発はかなり複雑なプロセスであり、エンジニアリング、心理学、デザインなど、さまざまな分野の知識を応用する必要があります。ユーザー インターフェイス デザイナー (英語ではユーザー インターフェイスまたは UI) は、サイトの機能 (検索、タブ、メニュー) の表示方法と、クライアントとインターフェイス間の対話の詳細に焦点を当てます。UI デザイナーの目標は、美的に受け入れられる最新の製品デザインです。UXとはUser Experienceの略で「ユーザーエクスペリエンス」を意味します。UX デザイナーは、潜在的なユーザーによるインターフェイスの使いやすさと理解をより重視します。このような専門家は、設計コンセプト作成の基礎となるリサーチや調査を行うことが多く、開発中および開発後にコンセプトをテストすることもあります。通常、構造、コンテンツ、ナビゲーション、およびユーザーがこれらの要素をどのように操作するかに焦点を当てます。 ソフトウェアを作成する際の基本構造となるサイトマップやプロトタイプを作成します。UX デザイナーの仕事の目標は、ユーザーがサイトに来た目的をサイトからすばやく簡単に取得できるようにすることです。ただし、今日では、これら 2 つの専門分野がスラッシュで書かれているのを目にするのが非常に一般的です。つまり、両方向のタスクが 1 人の専門家によって実行されます。UX/UI デザイナーは、インターフェイスとのユーザーの対話を設計し、ユーザーが何をする必要があるかを決定し、その結果としてこのインターフェイスがどのように見えるかについて責任を負います。

UX/UIデザイナーが知っておくべきこと

• グラフィックエディター。市場で最も人気のあるツールは、Adobe Photoshop、Adobe Illustrator、および Sketch、Figma です。自分にとって使いやすいエディターを選択し、まず Web サイトやアプリケーションのスクリーンショットを描いて、少し最新化してみましょう。

  スケッチガイド

• プロトタイピング ツール (Mockplus、Axure)。プロトタイピング ツールは、アイデアとその実装を結び付けるものです。どのようなツールを使用するかは関係ありません。いくつか試してみて、自分のスタイルや好みに合ったものを選ぶことができます。

• ユーザー心理。すでに設計段階で、このインターフェイスを自分または他の人が使用するのが便利かどうかを検討する必要があります。クライアントの立場に立って、クライアントとの強いつながりを築き、クライアントのニーズに配慮してください。結局のところ、製品は需要があれば成功します。

  デザインの心理学: デザインに役立つ8つの心理原則

• 色彩理論の知識も必要になります。私たちは、特に美術学校に通った人は、子供の頃からいくつかのことを知っています。ただし、デザイナーの仕事には特殊な点があります。基本的な知識は本やインターネットの記事から得ることができます。

  デザイナーのための色彩理論パート 1: 色の意味

  UIデザインでの色の使い方

• テキストとビジュアルコンポーネントを組み合わせる手段であるタイポグラフィについて理解しておくことをお勧めします。

  初心者デザイナーのための 25 のタイポグラフィ ルール

  ウェブ上のタイポグラフィー

• サイト構成と使いやすさ。

  Web デザインの構成、または Photoshop チュートリアルで触れられていないこと

• 作業の詳細によっては、HTML と CSS、または (一部の) プログラミング言語の理解が必要になる場合があります (リソースへのリンクは、以下の「フロントエンド開発者が知っておくべきこと」セクションにあります)。

フロントエンドの開発者

フロントエンド開発者の主なタスクは、インターフェイスのクライアント部分を開発することです。つまり、デザイナーがデザインしたものをそのような専門家が「再生」するのです。彼はインターフェイスの操作と運用を担当しており、ビジュアルコンテンツについてはあまり担当していません。フロントエンド開発者は、開発段階でユーザー インターフェイスの適切なソリューションを見つける必要があることが多いため、UX/UI デザイナーと協力することがよくあります。フロントエンド開発者によって書かれたコードは、ユーザーのブラウザーで (「クライアント側」と言うように) 実行されます。また、最も重要なタスクの 1 つは、サイトまたは Web アプリケーションがすべてのプラットフォームおよびブラウザーで同じように見えることを確認することです。

フロントエンド開発者が知っておくべきこと

原則として、フロントエンドは HTML ページ マークアップ言語、CSS スタイル シート、および JavaScript プログラミング言語の 3 つの柱に基づいています。さらに、フロントエンド開発者は、HTTP プロトコル、サーバー、ブラウザの動作原理、および現在市販されているさまざまなデバイス上でインターフェイスを表示する機能を理解する必要があります。Web インターフェイスを作成するためのツールと方法は常に進化し、変化しているため、開発者はこれを常に監視する必要があります。

HTMLとCSS（レイアウト）

これがレイアウトであり、サイトを構築するまさにレンガです。HTML マークアップ言語は、サイトの構成、コンテンツ、およびそれらの間のすべての対話を決定します。ページの上部、下部、コンテンツを含むサイドブロック、見出し、テキストおよびマルチメディア要素の表示を指定できます。CSS スタイル シートは、HTML 要素を装飾するために使用されます。これらは、ページ上にある各グラフィック要素がどのように表示されるかを正確に決定します。最新バージョンの HTML5 と CSS3 を使用すると、ページ上にビデオやオーディオのコンポーネントを配置したり、2D 画像やアニメーションを作成したり、簡単なゲームを作成したりすることもできます。すべてのタグとスタイルを一度に覚えようとする必要はありません。基本を学び、すぐに実践できるようになると役立ちます。HTML と CSS の基礎を学べる非常に優れたサイトは W3School です。ただし、少なくとも基礎的な英語の知識がある場合に限ります。

• W3スクール
• CSS

また、フロントエンド開発者は、クロスブラウザーとクロスプラットフォームの開発、適応性と応答性の高いレイアウトを理解する必要があります。

ブートストラップ

HTML、CSS、JavaScriptのフレームワークです。つまり、コンストラクターなどの特定のテンプレートを使用すると、テンプレートを使用しない場合よりもはるかに速くサイトを組み立てることができます。ただし、もちろん、ニーズに合わせて自分でカスタマイズする必要があります。英語がわかる場合は、getbootstrap Web サイトと同じw3schoolsをお勧めします。

JavaScript

JavaScript はフロントエンド開発の中核です。これは、最初で最も普及しているインターフェイス プログラミング言語です。サイトに多くの機能を追加できます。基本レベルでは、この言語を使用すると、ページにインタラクティブな要素を追加できます。リアルタイムで更新されるマップ、インタラクティブなオンライン ゲームやムービーの作成に使用されます。JavaRush 上級コースでは、JavaScript を少し学びます。同じW3Schoolで学習したり、Web サイトjavascript.ruでロシア語で読んだりすることもできます。

jQuery

jQuery は、開発をさらに簡単かつ迅速にするプラグインと拡張機能を含む Javascript ライブラリです。コードを最初から作成する代わりに、ライブラリを使用すると、既製のコンポーネントを追加して、特定のプロジェクトに合わせてカスタマイズできます。検索フォームの自動入力、グリッドの並べ替えやサイズ変更、カウントダウンタイマーの設定などの機能を使用できます。 w3school の実践的な jQuery コース

JavaScript フレームワーク

フレームワークにはさまざまな種類がありますが、使いやすいものを選択できます。最も有名なのは、Angular、Backbone、Ember、React です。これらはコードの既製の構造を表します。これらは開発のスピードアップに役立ちます。また、ライブラリと組み合わせることで、Web サイトやアプリケーションを最初から開発する作業を最小限に抑えることができます。 2017 年に最も人気のある 5 つの JavaScript フレームワークとライブラリのレビュー

Git バージョン管理システム

バージョン管理システムは、コードに加えられた変更を長期にわたって追跡できます。また、プロジェクトの前のバージョンに戻ることもできます。Git は最も広く使用されているバージョン管理システムです。Git の操作方法を知ることは、すべての開発者にとって重要なスキルです。 ロシア語の Git チュートリアル

簡単な結論

UIとはUser Interfaceの略で「ユーザーインターフェース」という意味です。つまり、UI デザイナーは主に、製品がユーザーにどのように表示されるかについて責任を負います。彼はボタンやアイコンを開発し、フォントを選択し、レイアウトを準備します。UXとはユーザーエクスペリエンスの略です。したがって、UX デザイナーは、ユーザーが快適に何が何であるかを理解し、最小限の労力でサイトから必要なものを取得できるように、Web サイト、アプリケーション、その他あらゆるもののデザインを設計します。非常に多くの場合、どちらのタイプの作業も UI/UX デザイナーという 1 人の人間によって実行されます。フロントエンド開発者は、ボタンが押され始め、画像が変化し始めるなど、ダイナミクスを導入することでデザイナーの作業を活性化します。彼は、フレームワーク、プリプロセッサ、ライブラリで味付けされたプログラミング言語を知っている必要があります。