1. Adobe Illustrator

まずは、Illustratorの基本操作が出来るようになりましょう。
Illustratorは、Adobe社が提供している、図形作成ソフトで、主に名刺やポスターなどといった印刷物をレイアウトしたりする時に使います。

もちろん、Webでもロゴやアイコンを作ったり、制作会社によっては、Webサイトのデザイン（デザインカンプ）を作ったりする時に使います。

まぁ、主に、印刷物を中心にやってきた制作会社さんは、Illustratorでデザインカンプ作る人が多いですね。

ちなみにIllustratorは、よく、イラレって呼ばれてます。

あと、Adobeは「アドベ」 じゃなくて、「アドビ」ですよw

Illustratorは比較的直感的に使えるソフトなので、最初に勉強するには丁度いいかなぁと思ってます。

ただ、ペンツールというツールがあるのですが、これを使って曲線（「ベジェ曲線」って言うんですが）を上手に書けるようになるには、なかなか練習が必要ですね。

ここだけは抑えておこう

Illustratorには様々な便利な機能があるのですが、主に以下の機能については抑えておきたいですね。

• 図形操作
• 文字の操作
• ペンツール
• パスファインダー
• クリッピングマスク
• 整列
• アセットの書き出し

2. Photoshop

Photoshopは、Adobe社が提供している、写真加工ソフトで、写真の明るさを変えたり、合成写真を作ったりします。

よく、フォトショって呼ばれてます。

写真加工といえば、このソフトですね。

多くのWeb制作会社では、サイトのデザイン（デザインカンプ）やバナーを作ったりする時にも使います。

Webサイトは写真をよく使うので、その写真がよりよく見えるためのテクニックと、デザインカンプを作るための操作方法はしっかりと学習しておきましょう。

で、どうやら僕の「フォトショ」の発音はおかしいらしいw

ここだけは抑えておこう

Photoshopにも様々な便利な機能があるのですが、主に以下の機能については抑えておきたいですね。

• 色調補正
• 選択範囲
• マスク（レイヤーマスク、クリッピングマスクなど）
• 図形操作
• 文字の操作
• 画像アセットの生成

3. Adobe XD

Adobe XDは、Adobe社が提供している、Webサイトのデザインやプロトタイプ作成が出来るソフトです。

最近では、Webサイトのデザイン（デザインカンプ）はこのXDを使って作成する会社も増えてきました。

僕も、とくに問題が無い限り、XDを使ってます。

しかも、XDを使えば、ページ遷移の動きを付けることが出来るので、実際のWebサイトとかなり近い見た目と動きを作ることが出来るのです。

さらに、共有機能も充実しているので、XDをもってないクライアントさんにもURLを共有するだけで、ブラウザで、プロトタイプを確認して頂くこともできます。

ここだけは抑えておこう

XDにも様々な便利な機能があるのですが、主に以下の機能については抑えておきたいですね。

• 図形操作
• 文字の操作
• マスク
• パスファインダー
• リピートグリッド
• プロトタイプ
• 共有機能
• 書き出し

4. HTML

HTMLは、HyperText Markup Languageの略で、Webページの文書に意味や役割を付ける言語です。

というか、HTMLがWebページそのものです。

なので、個人的には全てのWebクリエータに必修の言語だと思っています。

HTMLで大事なのは、目でWebサイトを閲覧している人のことだけを考えて作ってはいけません。

目で見ていないユーザー、つまり、音声ソフトを使ってるユーザーや機械にもちゃんと内容を理解できるようにHTMLを作ることが大事です。

HTMLをちゃんと書けば、優しさ溢るるサイトになります。

ここだけは抑えておこう

HTMLはWebページの見た目を作るための言語ではなく、たとえ機械でもそのWebページの内容が理解できるように文書構造を記す言語という事を理解しましょう。

• HTML全体構造の要素
• テキスト関連の要素
• リスト関連の要素
• 画像の要素
• テーブル関連の要素
• フォーム関連の要素
• 話題の範囲を表す要素
• ページの構造を表す要素

5. CSS

CSSは、Cascading Style Sheetsの略で、Webページのデザインを行う言語です。

HTMLは、文章に意味や役割を付ける言語なので、正直そこに見た目は関係ありません。

つまり、人間で言うと、性格とか骨格とかって感じですかね。

そこで、このCSSという言語を使って、HTMLを配置を変更したり、文字の色を変えたり、大きさを変えたり、背景を付けたりし、HTMLをオシャレにします。

つまり、お洒落な服を着たり、お化粧をしたりするための言語です。

僕は、ホームページってドラック&ドロップで全て作れると思ってたので、CSSに出会った頃は、Web業界諦めようかと思った記憶があります。

ここだけは抑えておこう

CSSはWebページの見た目を作る言語です。ひとつずつ、きっちりとプロパティを理解しましょう。

• CSSの記述場所と記述方法
• フォント関連のプロパティ
• テキスト関連のプロパティ
• 背景関連のプロパティ
• セレクタの種類
• ボックス関連のプロパティ
• 表示関連のプロパティ
• 配置関連のプロパティ

6. Webデザインの基礎知識

よくスクールでも、

"Illustratorや、Photoshopを勉強すれば、デザインが出来るようになる。"

と思ってる方がいらっしゃるのですが、どれだけ、Illustratorや、Photoshopを覚えても、デザインが出来るようになるわけではありません。

デザインは紙とペンがあれば出来ます。

Illustratorや、Photoshopはデザインをデータ化する際に使うツールなので、これらのソフトとは別途デザインの勉強が必要となるのですよ。

Webデザインは、Webサイトの目的を達成するためにアイデアを出し形することです。

なので、Webサイトにはどんな目的があるのかを知り、それを達成するための引き出しを勉強する必要があります。

ここだけは抑えておこう

ユーザーの行動パターンを予想し、適切な情報をすぐに伝達できるようになりましょう。

• Webデザインとは
• 作る人と使う人の関係
• 情報の整理と分類
• ユーザー動線
• Webレイアウトの使い分け
• デザインの基礎テクニック
• 色・配色

7. アクセシビリティ/ユーザビリティ

アクセシビリティは、「近づきやすさ」、「利用しやすさ」などと言われています。

で、Webアクセシビリティといえば、年齢や身体障害の有無に関係なく、誰もが必要な情報に簡単にたどり着けて、利用できるようにするための配慮や工夫の事です。

簡単にいうと「そもそも使えなかったら意味ないよね」ってやつです。

なので、Webの根幹になります。

そして、ユーザビリティは、「使いやすさ」、「使い勝手」などと言われています。

で、Webユーザビリティといえば、Webサイトの使いやすさの事です。

情報の正確さや、操作性、ページ間移動の効率など様々な観点から評価されます。

で、このユーザビリティが向上すると、Webサイトのコンバージョン率（アクセス数に対して、目標を達成した割合）の向上にも繋がります。

ここだけは抑えておこう

アクセシビリティとユーザビリティは、Webサイト制作の中でも最も根幹となる考え方です。

• アクセシビリティの概要
• WCAGとJIS X 8341-3:2010
• ユーザビリティの概要
• ISO 9241-11とJIS Z 8521
• アクセシビリティとユーザビリティの関係性

8. デザインカンプ制作

Illustratorや、Photoshopの基本操作が出来るようになり、デザインやユーザビリティの勉強をしたら、いよいよそれらを活かして、0からデザインカンプを作る勉強をしましょう。

デザインカンプとは、Design Comprehensive Layoutの略で、PhotoshopやXDなどを使って、Webサイトのデザインを実際のサイズで作ったデザインの完成イメージの事です。

あ、「モックアップ」って言うときもあります。

で、これをクライアントさんに見せて、デザインのすり合わせを行います。

ここだけは抑えておこう

PhotoshopやXDなどを使って、デザインカンプを作成方法を身に付けましょう。

• デザインカンプの制作手順
• カンバス（アートボード）サイズの考え方
• ガイド
• レイヤーの整理
• デザインカンプから画像の書き出し

9. PCサイトコーディング

デザインカンプが完成したら、HTML、CSSを使って、デザインカンプ通りにコーディング出来るようになりましょう。

もちろんアクセシビリティを意識してコーディングしましょう。

見た目がデザインカンプ通りでも、アクセシビリティが伴っていないサイトだと、利用できないユーザーがいるかもしれませんからね。

個人的には、Webのプロとして、アクセシビリティを意識することは非常に大切だと思ってます。

できればコードは誰かにチェックしてもらう事をおすすめします。

ここだけは抑えておこう

HTMLからCSSのコーディング手順を身についけて、どんなデザインカンプでもコーディング出来るようになりましょう。

• HTMLのコーディング手順
• CSSのコーディング手順

10. 架空サイト制作

デザインカンプから、コーディングまでの流れが出来るようになったら、すこし実践形式の勉強をしましょう。

具体的には架空サイトを作る練習をすると良いと思います。

ただ、なんでもかんでも好き勝手にデザインしても意味がありません。

なので、まず「イケてないサイト」を探してみて下さい。

イケてない定義は、ビジュアル的に「汚い」とか「ダサい」とかでより、「見にくい」とか「読みにくい」、「使いにくい」、「満足するコンテンツがない」、「目的のページにたどり着けない」など機能的な面で探すと良いと思います。

で、そのイケてないポイントを抽出し、コンセプトを決めて改善案を考えてみて下さい。

あとはそれを反映するデザインを作って、コーディングします。

そう、つまり勝手にリニューアルするのです。

もちろん公開しないでくださいねw

あと、架空サイトを作るのに掛かった時間は図っておくようにしましょう。

自分の作業にどれくらいの時間が掛かってるかを把握しておくことはとても重要です。

ここだけは抑えておこう

サイトのゴール、ターゲットユーザー、伝えたいことを想定して、それらを反映するデザインを行えるようになりましょう。

• デザインコンセプトの考察
• コンセプトを反映したデザイン
• 時間を意識した制作

11. JavaScript

JavaScriptはブラウザが処理を実行するプログラミング言語です。

HTMLやCSSと違いプログラミング言語なので、習得の難易度はググーーーンと上がりますw

でも、JavaScriptを習得すると、スライドショーとか、計算機、タイピングソフトなど、ユーザーの操作に対して、HTMLに動きを付けることが出来ます。

ユーザーに見えてる画面をデザインするのがWebデザイナーの仕事なので、このJavaScriptでどんなことが出来るのかを知っておかないとデザイン出来なかったりします。

JavaScriptで出来ることがわかるようになれば、よりユーザビリティの高いWebデザインを作れるようになりますよ。

ここだけは抑えておこう

JavaScriptでプログラミングの基本と、どんなことができるのかを理解しましょう。

• JavaScriptの記述場所や記述方法
• プログラミングの基礎
• 画面出力
• 条件や反復などの制御構文
• 配列やオブジェクト
• DOMの操作
• イベント

12. jQuery

JavaScriptはWebデザイナーにとっては、とっても難しい言語です。

僕はバッキバキに心折れました。

でも2006年にJavaScriptを、CSSのように記述できる「jQuery」というものが登場しました。

jQueryは、CSSのように書いた動き付ける命令を、JavaScriptに変換してくれる翻訳機のようなものです。

コレを使えば、比較的学習コストを掛けずに、スライドショーや、モーダルウィンドウを作ったり出来るので、基本的なjQueryの記述方法や、簡単な動きを付けれるようになりましょう。

ここだけは抑えておこう

jQueryの基本的な記述方法や命令を覚えましょう。

• jQueryの読み込み方法
• 様々なセレクタ
• 要素を操作するメソッド
• 属性を操作するメソッド
• エフェクトやアニメーション
• イベント処理
• スクロール関連のメソッド

13. モバイルデザインの考え方

ここまでずっとPCサイトを中心に勉強方法を紹介してきましたが、スマートフォンが普及してる現在において、スマートフォンに対応したWebサイト制作は求められます。

だって、スマホでWebを見る人の方が多いですからね。

そこで、まずはスマホサイトを作る時気をつけるポイントを勉強しましょう。

PCサイトとは画面の大きさや、操作性、利用状況、回線速度などの違いがあります。

こうした違いに対して、意識しなければいけないポイントを勉強するといいと思います。

ここだけは抑えておこう

PCサイトとの違いを理解しましょう。

• スマホサイトの必要性
• 画面サイズの違い
• 操作性の違い
• 利用状況の違い
• 回線速度の違い
• UIの基礎知識
• ナビゲーションパターン

14. レスポンシブWebデザイン

レスポンシブWebデザインは、現在主流のマルチデバイスに対応したWebサイトを構築するWebデザイン手法です。

モバイルサイトを構築する手法は様々な方法がありますが、レスポンシブWebデザインは、HTMLファイルは1枚で、CSSによって各デバイスのスタイルを切り替える手法です。

レスポンシブWebデザインの構築手法を身につけることで、マルチデバイスに最適なデザインを提供できるので、是非習得しましょう。

ここだけは抑えておこう

現在主流のマルチデバイスに対応するWebデザイン手法である、レスポンシブWebデザインを身に付けましょう。

• レスポンシブWebデザインの概要
• ビューポートの設定
• リキッドレイアウト
• フルードイメージ
• メディアクエリ
• 高解像度ディスプレイ用の画像対応

15. Webの特性

Webデザイナーを名乗るならやっぱ、Webの特性を知っておきたいですよね？

他のメディアと比べて、Webの方が優れている点や、劣ってる点を知っておかないと、
なんでもかんでもWebで解決しようとしちゃいますからね。

場合によっては印刷物の方が良い時だってあるわけですし。

ここだけは抑えておこう

Webと他のメディアとの違いを理解しておきましょう。

• 一覧性や可視領域の違い
• 見やすさ、読みやすさの違い
• 再現性の違い
• 対話性の違い
• 信憑性の違い
• Push型メディアとPull型メディア

16. ECの知識

ECとは、Electronic Commerce の略で 電子商取引の事です。

狭義の意味では、ネットショップの事を指します。

Web屋をやってれば、時にはネットショップを作ることもあると思います。

その時に、ネットショップの種類や、それぞれメリット、デメリット、ネットショップに向いている商品を知っておけば、クライアントさんにとって最適なネットショップを提案できるようになります。

ここだけは抑えておこう

ECの基礎知識を理解しておきましょう。

• 広義のECと狭義のEC
• Eビジネスの歴史
• ネットショップの種類
• ショッピングモール型の仕組みとメリット・デメリット
• 独自ドメイン型の仕組みとメリット・デメリット
• ロングテール

17. Webプロモーション

Webサイトって、TV、ポスターなどと違って、ユーザーにアクセスしてもらってからしか情報を伝達できないんです。

どんなにいい内容のWebサイトを作っても、見てもらえなきゃ意味ないですよね？

だからこそWebプロモーションの知識を勉強し、効果的にWebサイトを宣伝できるようになりましょう。

ここだけは抑えておこう

Webサイトを効率よく宣伝して、アクセスしてもらうための知識を身に付けましょう。

• Webプロモーションの必要性
• オフラインメディアの広告
• インターネット広告の区分と種類
• SEMとSEO
• キーワードの使い分け

18. コンセプトワーク

コンセプトワークはクライアントさんの要望を達成するための企画を考えるフェーズです。

Webのワークフローの中でもとても重要な部分です。

まぁ、ここでコケたら、最後までコケますからね。

誰に、何を、どのように伝えるのかを明確にして、Webサイトのコンセプト（方向性）を固めれるようになりましょう。

コンセプトからちゃんと考えられるWebデザイナーは、重宝されると思いますよ！

また、今後、UXデザイナーや、アートディレクターなどに幅を広げる場合は、コンセプトワークの知識がかなり役立ちます。

ここだけは抑えておこう

クライアントさんの要望を達成するための企画く宣伝して、アクセスしてもらうための知識を身に付けましょう。

• ヒヤリング
• ターゲットの選定
• リサーチ
• ペルソナシナリオ
• コンセプトシートの作成

19. Webライティング

僕は、Webデザインの本質はライティングだと思ってます。

なぜなら、Webページって大半は文書ですし、その文書を使ってユーザーに情報を伝達する必要があるからです。

たとえばプレゼンをする時って、スピーチが中心でそのスピーチで情報を伝えます。

で、その喋ってる内容をより伝達しやすくするために、画像やグラフをスライドに入れるじゃないですか？

文書はスピーチと役割が一緒です。

つまり、ユーザーの心を動かすのはビジュアルではなく文書なんです。

だからこそ、Webライティングのスキルは重要だと思ってます。

ここだけは抑えておこう

Webと他のメディアとの違いを理解しておきましょう。

• Webの特性を生かしたライティング
• ライティング手順
• 効果的な見出しの付け方
• 見出しの使い分け
• 伝わりやすい文章の書き方
• SEOライティング

21. アクセス解析

Webサイトってアクセス解析を導入すれば、「どのページにどれだけアクセス数があるか」など、様々なデータを数値化することが出来ます。

つまりWebサイトを客観的に判断することが出来ます。

それらのデータを蓄積し、ちゃんと分析する力があれば、サイトの問題点や課題点が見えてくるんです。

そしたらそれを改善することで、またWebサイトが良くなるんです。

アクセス解析のデータを分析する力と、仮説を立てる力を勉強すれば、Webサイトをより良くすることが出来るようになりますよ。

ここだけは抑えておこう

アクセス解析で出来ることをしり、分析力と仮説力を鍛えよう。

• アクセス解析の種類
• アクセス解析の用語
• アクセス解析で取得できる項目
• データ分析・仮説