体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

Webデザイナーとは!必要なスキルや学習方法を細かく解説

この記事では、Webデザイナーとはどんな仕事をする人なのか、どんなスキルが必要なのか詳しく紹介しています。

これから在宅での仕事を考えている人や転職したいと思っている人は、一つ選択肢として持っておくと良いでしょう。これからWebデザイナーを目指そうと思っている人は必見の内容です。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

Webデザイナーとは

 

Webサイトの作成をする人を、広い意味でWebデザイナーと呼ぶことがありWebコーダーと混同しがちですが、Webコーダーがコードを書く専門的な人であるのに対して、Webデザイナーはレイアウトを考える人のことを指します。

実際の働き方としてはWebデザイナーがコーディングを行ったりすることも多いですが本来の意味としてはデザイン、つまり見た目をどのようなものにするのか考えるのがWebデザイナーの本質なのです。

 

Webデザイナーの担当する仕事

ではWebデザイナーが具体的にどのような仕事を行っているのでしょうか。Webサイトを作成していくために、まずどんなものを完成させたいのかイメージを持っておくことが大切です。

そしてそのイメージを実現するための手順としてまず、ワイヤーフレームの構想をします。

ワイヤーフレームとはWebサイトのデザインにおける骨組みのようなもので、「何」を「どこ」に配置するのか考えます。

次の段階としてあるのがモックアップです。これはワイヤーフレームによってできた枠に実際の要素を当てはめることで、ビジュアル的にはほぼ完成品として可視化された状態になります。

 

そして、さらにモックアップに機能性を持たせることでプロトタイプの完成となります。この機能性とは、ある要素をクリックした際のWebサイト上でのアクションや動きを意味しており、プロトタイプが出来上がると実際に正しく出来ているのか確かめることもできます。

こうしてWebサイトは作成されていくのですが、それぞれコードを書くことで枠組みや各要素が作られており、このことをコーディングと呼びます。

また、Webデザイナーはこれらの工程を分けて担当することでもあります。会社のホームページのような大きなページをデザインすること以外にも、バナーと呼ばれる広告の垂れ幕をデザインするような小さなものまで様々なパターンがあります。

Webデザイナーの仕事内容についても別の記事で詳しくまとめています。合わせてご覧ください。

 

Webデザイナーに必要なスキル

 

Webをデザインするために必要なスキルとして、サイトを作成するための言語を知っておく必要があり、基本的なものを紹介します。

また、Webデザイナーは言語を駆使してコーディングするだけではなくグラフィックに関しても考慮しなくてはならないため、デザインツールについても簡単に説明します。

 

HTML/CSS

簡単に説明すると、HTMLでは枠を作ったり文字を書くのに必要な言語で、Webサイトの土台となります。デザインにせよシステムを作るにせよ共通の知識として必要なので、学習もまずはHTMLから始める人がほとんどです。

一方CSSでは、作った枠や文字に色を付けたりといった見た目のアレンジができて、こちらはWebサイトの外観を飾ります。

 

JavaScript

JavaScriptではHTMLで作った要素に対して動きを付け加えることができ、設定をしたある要素に対して、クリックすると表示を変化させるといったことが可能になります。

また、Javaは別の言語なので混乱しないようにしましょう。

 

Photoshop/Illustrator

1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

山寺宏一&高木渉で『ポプテピピック』

GetNews girl / GetNews boy