3/19(Tue)

今日の生放送

未経験 Webデザイナー

みなさんこんにちは!schoo WEB-campus教務課です。

「Webデザインを勉強するとどうなるの?」「Webデザイナーになるためにはどうすればいいの?」というよくあるご質問にお答えすべく、「未経験からWebデザイナーになるために学習すべきこと」についてまとめてみました。

schoo WEB-campus(以下スクー)のWEBデザイナー学部で先生がご紹介している資料や授業の様子を交えながら、「とりあえずこれさえ読んでおけばWebデザイナーになるために何を学習すればいいのか」を理解できることを目指しています!

 

目次

1. Webデザインをする「Webデザイナー」とは?

2. Webデザインを制作する際の流れとは?

3. Webデザイナーの3つの仕事について


 
 

1. Webデザインをする「Webデザイナー」とは?


 

Webデザイナーとは、その名の通り、Webサイトをデザインする人のことを指します。

また、WebデザインやWebクリエイターのお仕事も、サイトの見た目について考える「デザイナー」(ビジュアルデザイナーと呼ばれることもあります)と、そのデザインをHTMLやCSSなどを使ってコーディング作業をする「コーダー」という役割に分かれていることが一般的です。
 
フリーランスなどでWebデザインのお仕事をしていこうとすると、「デザイナー」と「コーダー」の役割をどちらも担当することになることが多いのではないでしょうか。加えて、最近では、「どのようにサイト・サービスを使ってもらうのか」ということを考えてデザインに落としこむ「UIデザイン」(UI=ユーザー・インターフェイス)や、「サイト・サービスを使った人にどのような体験を提供するのか」という「UXデザイン」(UX=ユーザー・エクスペリエンス)という仕事もWebデザイナーが担うケースが出てくるなど、Webデザインのお仕事は多様化してきています。
 
 

2. Webデザインを制作する際の流れとは?


Webサイトは通常、以下の手順で制作されます。

 
1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
『Webデザインの骨組み「ワイヤーフレーム」を学ぼう』田中晶子先生より)
 
この中で一般的に「Webデザイナー」が担当するのは、(3)〜(5)です。
 
もっと簡単に捉えると、「フレームワーク」→「デザイン」→「コーディング」という3つの要素になります。
どんな要素なのかをみていきましょう。
 
 

3. Webデザイナーの3つの仕事について


「フレームワーク」→「デザイン」→「コーディング」についてもう少し詳細にみていきましょう。

 
■ ワイヤーフレーム

ワイヤーフレームとは、Webサイトを制作する際の設計図のようなものです。どのような目的でWebサイトを作るのか?という構想を、実際にデザインをする前に、レイアウトに落としこんでいきます。
 

『Webデザインの骨組み「ワイヤーフレーム」を学ぼう』田中晶子先生授業資料より)

 
 

『Webデザインの骨組み「ワイヤーフレーム」を学ぼう』田中晶子先生授業資料より)

 

スクーの授業ではワイヤーフレームを制作する際に以下のツールを使っています。

1. 960 Grid System http://960.gs/

2. Adobe Illustrator http://creative.adobe.com/ja/products/illustrator

 
■ デザイン
 

設計図であるワイヤーフレームを作ったら、そのワイヤーフレームを元に、「どんな人が使うのか?」「どのようなアクションをしてもらいたいのか?」というようなターゲットや目的をデザインに落としこんでいきます。このあとコーディングをしていくのですが、コーディングする前に「カンプ」と呼ばれるものを制作します。カンプはワイヤーフレームから起こしたデザインと、依頼者のイメージや目的と齟齬がないかをすりあわせるために制作します。

ボタンの色を決めたり、画像を加工してイメージにピッタリのデザインに仕上げていくという、クリエイティブで楽しい作業です。

 

サイトの設計図はこんな感じで、この中の画像や素材をデザインしていきます

『Webデザインの骨組み「ワイヤーフレーム」を学ぼう』田中晶子先生授業資料より)

 

スクーのWEBデザイナー学部の授業では、以下のツールを主に使用しています。

Adobe Photoshop http://creative.adobe.com/ja/products/photoshop
 
Photoshopを使った設計図はこんな感じ
 
 
■ コーディング
 

Webデザインにおけるコーディングとは、デザインされたものをブラウザ(Internet ExplorerやGoogle chrome)で表示するためにHTMLやCSSというプログラミング言語を使ってデザインを記述していく作業になります。

Webデザインを勉強しようと思ったときにHTMLやCSSというようなコーディングはつまづくポイントであることが多いです。

その理由としては、デザイン作業と比較して、コーディングはパソコンに命令を出すという過程で数学的な頭の使い方をするため、特に文系の方々が苦手意識を持ちやすいことが原因ではないかと考えています。

 

HTMLとCSSについて

HTML:エイチ・ティー・エム・エル、HyperText Markup Languageの頭文字を取ってHTMLと呼びます。Webページを作成するために必要となる言語です。世の中のほとんどのWebページはHTMLで作られていると言っても過言ではありません。HTMLはコンピューターに、文書の構造を指示したり、検索エンジンやインターネットブラウザからきちんと表示をしてもらったりするために必要な言語です。

簡単に言うと→「Webページを構成する最低限の言語」

CSS:カスケーディング・スタイル・シート、Cascading Style Sheetsと呼ばれます。その名の通り、Webページのスタイルを指示するための言語です。先ほどのHTMLと組み合わせることによって、Webページを装飾して、見栄えを良くしたりするといった、デザインをするときに必要になります。

簡単に言うと→ 「Webページのスタイルを指示してサイトをデザインするための言語」
 

コーディングの風景はこんな感じ

レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】より)

 

スクーのWEBデザイナー学部の授業では、以下のツールをコーディングに主に使用しています。

1. Adobe Dreamweaver http://www.adobe.com/jp/products/dreamweaver.html

2. SublimeText http://www.sublimetext.com/

 
 

おわりに


「Webデザインの仕事」と漠然と捉えるのではなく、Webサイトが出来るまでの制作手順を元に、Webデザイナーの仕事についてまとめてみました。今自分が何から勉強し始めればよいか明確になってきたでしょうか?

いきなり全部をやろうとせずに、ひとつずつ学習していきましょう!
 


WEBデザイナー学部では200本近くの「未経験からWebデザイナーになるための授業」を生放送と録画で開講しています。

生放送では、第一線で活躍するプロでもある先生へ直接質問しながら、録画は復習や苦手な分野のトレーニングに役立ててみてください!



スクー教務課:中西

今日の生放送

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧