デイトラでプログラミング始めました

WEBデザインとWEBエンジニアどっちがいい

こんにちはヒカルです。

最近ブログの方に質問がありました。

「今からプログラミングスクールに通おうと思っているのですが、WEBデザインとWEBエンジニアどちらにしようか迷っています。どちらがおすすですか」

このような質問をたまにいただきます。

私なりにどちらがいいか解説します。

今回はwebページを作ることを例にして解説します。

読んで欲しい読者
  • 今からプログラミングスクールに通おうと思ってる人
  • WEBデザインとWEBエンジニアどちらにしようか迷ってる人
  • WEB制作をしているがWEBデザインにに乗り換えようか迷っている人

こんにちは、プログラミングスクールのカモのヒカルです。

現在デイトラWeb制作コースで月に5万円稼ぐためにプログラミングを勉強中です。

この記事を書いたのはこんな人
  • IT業界未経験でプログラミング初めてみた
  • プログラミングスクールに入って稼げるか試してみた
  • ブラック企業の社畜奴隷

WEB制作の流れ

ウェブサイトを作成するプロセスや活動を指します。一般的には、以下の手順を含みます:

  1. プランニング(計画): 最初に、ウェブサイトやアプリの目的やターゲットオーディエンス、必要な機能やコンテンツなどを決定します。また、デザインの方向性やスケジュールも決めます。
  2. デザイン: プランに基づいて、ウェブサイトやアプリのデザインを作成します。これには、レイアウト、カラースキーム、画像、アイコンなどが含まれます。デザインは、ユーザーエクスペリエンス(UX)とユーザーインターフェース(UI)の観点から考慮されます。
  3. コーディング: デザインが確定したら、ウェブサイトやアプリを実際に構築します。これには、HTML、CSS、JavaScriptなどのフロントエンド技術と、サーバーサイドの言語やフレームワーク(例えば、Node.js、Ruby on Rails、Djangoなど)が使用されます。
  4. テスト: 開発が完了したら、ウェブサイトやアプリの動作をテストして、バグや問題がないか確認します。さまざまなデバイスやブラウザでの互換性もテストされます。
  5. 公開と運用: テストが完了したら、ウェブサイトやアプリを公開します。また、定期的なメンテナンスや更新を行い、サイトやアプリのパフォーマンスやセキュリティを維持します。

この流れの中で

WEBデザインの仕事
  • プランニング(計画)
  • デザイン

WEBエンジニアの仕事
  • コーディング:
  • テスト:
  • 公開と運用:

ざっくり分けるとこんな感じです。

WEBエンジニアとは?

Webエンジニアは、ウェブサイトやウェブアプリケーションの開発に従事する技術者です。彼らの仕事内容は、ウェブサイトやアプリケーションの構築から運用、保守まで多岐にわたります。以下に、一般的なWebエンジニアの仕事内容をいくつか挙げてみます:

  1. フロントエンド開発: ユーザーが直接操作する部分(UI)の開発を担当します。HTML、CSS、JavaScriptなどの技術を使用して、ウェブページやアプリのレイアウトやインタラクションを実装します。さらに、異なるブラウザやデバイスに適したクロスブラウザ対応やレスポンシブデザインの実装も行います。
  2. バックエンド開発: ウェブサイトやアプリケーションの裏側で動作するサーバーサイドのコードを開発します。データベースの設計や操作、APIの作成、ビジネスロジックの実装などが含まれます。言語やフレームワークは、PHP、Python、Ruby、Java、Node.jsなどが一般的です。

WEBデザインとは?

WEBデザインは、ウェブサイトの外観やユーザーエクスペリエンス(UX)を設計する作業です。一部の人々がWEBデザインを絵を描く能力と混同することがありますが、実際にはデザインセンスだけでなく、ユーザーのニーズやビジネスの目標を理解し、それに基づいて機能的で使いやすいデザインを作成する能力も重要です。

WEBデザイナーは、次のようなことを行います:

  1. レイアウト設計: ウェブサイトのページ構造を設計し、コンテンツを配置します。これには、ナビゲーションの配置、コンテンツの階層化、画像やテキストの配置などが含まれます。
  2. カラースキーム: ウェブサイトのビジュアルアイデンティティを確立するために、適切なカラースキームやテーマを選択します。これは、ブランドのイメージや目的に合ったものを選ぶことが重要です。
  3. フォントとテキストスタイル: 適切なフォントとテキストスタイルを選択し、読みやすさや視覚的な興味を引くためにテキストを配置します。

これらのタスクを達成するために、デザイナーはデザインツールやプロトタイピングツールを使用し、デザインの概念を具現化します。そして、デザインが完成したら、それをコーダーに渡して実装されます。

WEBエンジニアととWEBデザインの違い

WEBエンジニア

  1. HTML/CSS: フロントエンドの基本となるHTML(HyperText Markup Language)とCSS(Cascading Style Sheets)の理解が必要です。HTMLはウェブページの構造を定義し、CSSはスタイルやレイアウトを制御します。
  2. JavaScript: ウェブページやアプリケーションの動的な振る舞いやインタラクティブな要素を実装するために、JavaScriptの知識が不可欠です。JavaScriptの基本構文やDOM(Document Object Model)の操作、イベント処理、非同期処理などに精通していることが重要です。
  3. フレームワークとライブラリ: フロントエンド開発を効率化するために、フレームワークやライブラリを使用することが一般的です。代表的なフレームワークとしては、React.js、Angular、Vue.jsなどがあります。これらのフレームワークやライブラリを適切に使用し、開発プロセスをスムーズにする能力が求められます。
  4. レスポンシブデザインとブラウザ互換性: レスポンシブデザインの原則を理解し、異なるデバイスや画面サイズに適応するウェブサイトやアプリを開発する能力が重要です。また、異なるブラウザやバージョンでの互換性を考慮し、クロスブラウザ対応を行う必要があります。

WEBデザイン

WEBデザインには、次のようなスキルが必要です:

  1. デザインツールの使用: デザイナーは、Adobe Photoshop、Adobe Illustrator、Sketch、Figmaなどのデザインツールを使用して、ウェブサイトやアプリのデザインを作成します。これらのツールを使いこなし、デザインの構築や編集ができることが重要です。
  2. デザイン原則の理解: レイアウト、タイポグラフィ、カラーセンス、画像の選択など、基本的なデザイン原則を理解していることが必要です。これにより、視覚的に魅力的で使いやすいデザインを作成することができます。

個人的おすすめ

ここまででWEBエンジニアもwebデザインの説明をしてきましたが、結局は

自分に合った方を選択する

しかないです。

個人的おすすめは、WEBエンジニアもwebデザインもどちらもやったほうがいい

というのがあります

Web制作を行う際、WEB制作におけるデザインと開発の両方を学ぶ必要があると感じています。案件によっては、企画からWEB公開までの全てを一人で行う必要があることもあります。そのため、自分ができない部分を他の専門家に依頼することもありますが、その分報酬からの支払いも発生します。デザインメインで活動する場合でも、開発の観点からデザインを考えることが重要です。しかし、両方を同時に学ぶのは難しいので、どちらを先に学ぶべきかという点ですが、まずはHTML,CSSのコーディングをプロゲートでやってみてください。どうしてもコーディングが合わないなと思ったら、webデザインをやってみるのがいいと思います。