Schooをご利用になるには、JavaScriptの設定を有効にしてください。 →JavaScriptの設定方法（参考）

10/11(Fri)

今日の生放送

20:00 - 21:00

ダンドリは準備とコミュニケーションで決まる第1回

21:00 - 22:00

【見逃し配信】ムダな仕事を見つけて、やめる第1回

Webデザインを始めようと思ったら学習すべきこと

2014年11月18日 19:02 更新

未経験　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サイトは通常、以下の手順で制作されます。

１）クライアント（お客様）へのヒヤリング

２）ターゲット設定

３）サイト設計（ワイヤーフレーム）

４）制作仕様書策定（デザインルール、コーディングルール策定）

５）開発（デザイン＆コーディング）

６）ローカルテスト

７）テストサーバーレビュー（クライアントチェック）

８）リリース（本サーバーアップ）

９）ランニング（SEO解析）

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

この中で一般的に「Webデザイナー」が担当するのは、（３）〜（５）です。

もっと簡単に捉えると、「フレームワーク」→「デザイン」→「コーディング」という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デザインの骨組み「ワイヤーフレーム」を学ぼう』田中晶子先生より）

■ コーディング

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ページのスタイルを指示してサイトをデザインするための言語」

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