Webサイト制作

【初心者向け】WebエンジニアとWebデザイナの違いってなに?

こんな方におすすめ

  • Webに関して勉強をしたいけど、何から手を付ければいいかわからない。
  • Webプログラマの学校に行っているが、自分のやりたいことと合っているか不安。

 

 

 

セカンドキャリアとしてWebの世界へ挑戦するかたが増えています。私の周りでもたて続けに3人ほど全く別のキャリアからプログラマを目指し始めました。それぞれネイリスト、ERPコンサルタント、コックさんです。

 

Why japanee people!!
え?まったくプログラマー関係なくない?

 

はい、そのとおりです。かろうじてERPコンサルタントはでプログラマと仕事をすることはあるでしょうが、自身がプログラミングをするわけでもなく、かつERPという特化した領域なのでWebの世界という意味では他の3名とスタートラインはほぼ変わらないと思います。

 

注意ポイント

Webと一言でいうご誤解を招きそうなので、言語の定義をしておくと、この記事でいうWebは一般の人がインターネット経由で閲覧するホームページとご認識ください。

 

3名とも自分でプログラミングの学校を探して、オンライン授業をうけています。

そして、授業でやっている内容がわからない、もしくは提出課題の作り方がわからないという理由で私に連絡がきました。2か月以内に3人から同じ内容で相談がきたのでびっくりしました。コロナの影響で自身の今後のキャリアを見直す必要がでてきたのかもしれません。

 

そんな相談を受けている中で一つ、共通して大きく勘違いしているところがありました。

それはWebプログラマとWebデザイナの違いに関してです。

具体的に言うと、WebプログラマとWebデザイナを同じ職業であると勘違いしているということです。

 

確かに現実にはWebプログラマがWebデザイナ的な仕事をしたり、逆のケースもあります。しかしそれはそれは必要に迫られて(お金だったり、スケジュールだったり)そうしているだけで、本来的には別々であるべきだと思います。なぜなら要求されるスキルが全く違うからです。

 

それではWEBサイト構築というプロジェクトでの二つの職業の違いを解説していきます。

 

Webデザイナーの仕事とは

WebデザイナーとはWebサイトのデザインを担当する人です。基本的にプログラムコードは書きません。フォトショップやイラストレータを使ってWebサイトの見た目を作っていきます。

 

Webサイト構築プロジェクトの始まりはサイトマップ構築です。

サイトマップとはサイト内の階層のことで下記のように表されます。企業のコーポレートサイトの例です。

 

デザイナーはクライアントの好みをヒアリングしたのち、このサイトマップに従ってページをデザインしていきます。上の例だと四角い箱が1ページを表します。

表示されるボタンや画像の大きさ、色、位置関係などをピクセル単位で考えていきます。

 

悩んでいる人
プログラムしないのだったら、Webデザイナーは何を成果物としてだすの?

 

多くの場合、それはデザインモックアップと言われる形で納品することとなります。多くの場合、フォトショップのPSD形式で納品され、必要に応じて部品を切り取ってウェブサイトに使用していくことになります。

 

このデザインモックアップの段階でクライアントと打ち合わせを行い、認識の祖語がないかを確認します。必要があればここでデザインの調整をかけていきます。

基本的にWEBデザイナーの仕事はここまでで、承認されたモックアップはWebエンジニアに渡されます

 

悩んでいる人
じゃあ基本、デザインをするだけってこと?

 

デザインをするだけっていう言葉は大いに誤解を招きそうですが、(デザインてめちゃくちゃ大変です という意味です)

いまのご時世、一枚ぺらのウェブページを作るだけでWebデザイナーを名乗れるほど簡単ではありません。

もう一歩上級のWebデザイナーになるとUX(ユーザーエクスペリエンス)領域も含まれてきます。広告チラシや一枚ぺらのパンフレットと違い、Webサイトは複数のページの組み合わせで一つの作品です。どのようなデザインなら訪問者がストレスなく記事を読んでくれるか、サービスを理解してくれるかを考える必要があります。

簡単なようで非常に難しいです。

 

Webプログラマの仕事とは

WebプログラマはWebエンジニアともいわれます。Webデザイナーが作成したデザインモックアップをもとにブラウザで表示されるようにコードを書いていきます

HTMLとかCSSとかJavascriptという言葉を聞いたことがあると思います。それらを用いてサイトを作成していきます。

 

悩んでいる人
Webプログラマの学校でよく勉強するやつですね。

 

作成したプログラムはみんなのPCやスマートフォンから見えるようにしてあげる必要があります。

そのためにホスティングサーバーというところにプログラムを置いてあげる必要があります。

AWS(Amazon)、Xserver、さくらインターネットなどそれにあたります。

その後、ドメイン(このサイトだとenjoy-webbing.comのこと)を取得し、ホスティングサーバに紐づけて上げるとめでたく世の中に公開ということになります。

 

悩んでいる人
それってプログラミングじゃなくない?

 

厳密にはホスティングサーバに載せたり、ドメインをくっつけたりするのはWebプログラマというより、インフラエンジニアの仕事かと思いますが、仮にWebデザイナーとWebエンジニアしかいなかったら という観点でお聞きいただければと思います。

 

インフラエンジニアとは?

サーバ自体やネットワークに関する仕事を受け持つエンジニアのことです。アプリケーション用のプログラムを書くわけではないのでプログラマとは区別されます。

 

 

 

よくある勘違い

悩んでいる人
自分のサイトを作るのにWebプログラマとWebデザイナのスキルがいるよね?

10%イエスで、90%ノーです。個人で自分のサイトを作りたいならWordPressを使うか、Wixを使うかの2択くらいに考えていいと思います。

そしてこの両者ともプログラミングは必要ありません。つまりWebプログラマである必要はありません。

10%イエスと言ったのは、本当に込み入ったページを作りたければプログラムでカスタマイズする必要があるためです。(多くの場合は全く必要ありません)

 

Wordpressとは? Wixとは?

WordPressとはホームページを作成するためのテンプレートプログラムです。プログラム不要でノートを書くような感覚できれいなWebサイトが作成可能です。WordPress自体は完全無料で、作成したWebサイトはどこかのホスティングサーバに載せる必要があります。現在はWordPress専用のホスティングサービスもあり、プログラムが生成・配置されていることを意識せずにWebサイトを運営することが可能です。

Wixとはブラウザ上でホームページを作成できてしまうサービスです。利用料金を払ってサービスを利用します。基本ドラッグドロップとテキスト入力のみでサイト構築が可能で、プログラミングの要素はありません。

 

悩んでいる人
自分のサイトにオリジナルの画像やイラスト載せたいからWebプログラマの学校行かなきゃいけないよね?

ノーです。行くのであればデザインの学校ですが、個人サイトや小規模のサイトならフリーランスのデザイナーを使うのが最も効率的です。

もっと効率的にやるのであれば写真やイラストを提供するサービスに登録するのが一番です。

イラストACフォトACなどがそれにあたります。

 

悩んでいる人
じゃあどんな場合Webプログラマが必要なの?

WordPressやWixで対応できないような大規模Webシステムや特殊要件があるサイトを作る仕事をする場合です。

例えばFacebookと同等のサイトを作るのにWordPressやWixを選択する人はいません。Twitterは本当にシンプルなWebサービスですが、WordPressやWixではまず作りません。

こいうときはWebプログラマの出番です。

 

まとめ

スキルアップのために未知の世界に飛び込むのはとても素晴らしいことだと思います。そのためにすでに学校まで行っているなんて、かなり行動力があると思います。お金を使って勉強するって簡単なようで結構ハードルが高いですからね。

でも目的とかけ離れた努力は、体力も時間もお金も削るくせに実入りが少ないものになってしまいます。もったいないです。

なりたい自分がWebプログラマなのか、Webデザイナなのか、そのどちらでもないのか、この記事が少しでも誰かの役に立てたらうれしいです。

 

 

 

-Webサイト制作
-,