このレッスンでは、ウェブカツ!!でエンジニアスキルを身につけていっている人を対象として、WEBデザインを教えていきます。
ここで教えるWEBデザインは、現場でWEBデザイナーとしてバリバリ働くものではなく、受託案件で多い「デザインからWordPressでHPを作って欲しい」といった案件獲得の際や自分でWEBサービスや現場常駐案件獲得時にお客さんへ見せるポートフォリを「見栄え良く魅せる」ためのデザインスキルを教えるものです。
そのため、ゴリゴリWEBデザインが出来る事を目指すのではなく、デザイン素人でも客に見せても恥ずかしくないレベルの見栄えのいいデザインを目指していきます。
（とは言っても、私自身が実際にWEBデザイナーとして現場で働いてもいたので、現場でもある程度通用するスキルを一部入れています）
目次
PhotoShopってなに？
PhotoShop（フォトショップ）はAdobe社という有名な会社が開発したデザインツールで世の中のデザイナーは皆PhotoShopを使ってWEBデザインを行っています。
「フォトショ」と略して呼ばれます。
昔はPhotoShopを買うのには５万、１０万という金額だったので、「業務用」という感じで学生には手の届きにくい存在でしたが、今では月額5000円足らずで使用できるようになりました。
また、PhotoShopというのは元々は「写真を加工するための専用ソフト」のため、WEBデザイン専用のソフトではないんです。
なので、WEBデザインをするには使わない機能がとても多いです。（WEBデザインをする中で画像を加工する際にはちょこっと使用する程度）
実際のWEBデザイナーは画像加工はほとんどしません。
WEBデザイン中に使用するイラストは専門のイラストレーターさんに外注していたり、フリーの素材や有料の素材を組み合わせているだけです。
PhotoShopと並んで有名なのが「Illustrator（イラストレーター）」です。
「イラレ」なんて略して呼びますが、イラレはイラストを作成する専用ソフトになります。
先ほどの話の様にWEBデザイナーは画像加工はほとんどしません。
では、何をするのか？というと
サイトのページ内に表示する情報を「整理」して、「グループ分け」し、「整列」させてレイアウトを組んで「色をつける」
というのが主な役割になります。
どういった情報をどの順序で表示してあげたらユーザーに届くだろうか？を考えることを「IA（情報アーキテクチャ）」なんて言ったりします。
とは言っても、IAまで考えられるWEBデザイナーは実際の現場にはそう多くなく、大抵のデザイナーは「マネージャーなどからほとんど組み上げられたワイヤーフレーム」に沿ってあとは色をつけて形を整えていくだけの人が多いのが現状です。
（僕の中では、そういう人のことを「デザイナー」ではなく「ペインター（色を塗るだけの人）」と呼んでいます）
そこまで考えられるとWEBデザイナーとしても活躍できる存在になれます。
PhotoShopは少しずつユーザーが減っている？
実は、PhotoShopがWEBデザインで使われる機会が少しずつ減ってきています。
それは、PhotoShopが「画像編集専用ソフト」だからです。WEBデザインするのには、いらない機能も多すぎて、機能が多い分動作が重く、WEBデザインとして欲しい機能が逆に少ないわけです。
でも、今まではそのソフトくらいしかなかったので、みんな使っていました。
今でもほとんどの現場で使われてはいますが、一部WEBデザイン専用ソフトの利用が増えてきつつあります。
PhotoShopを作ったAdobe社からWEBデザイン専用ソフトとして「Adobe XD」というものも出ましたし、その前から人気がある「Sketch」というデザイン専用ソフトが出てきているからです。
Adobe XD
Sketch
エンジニアのための「Sketch入門！」 1時間コース – Qiita
どちらも、一つの画面でPCデザイン、SPデザイン（スマホデザイン）、タブレットデザインなど各種画面サイズのデザインを作れたり、デザインでよく使うパーツを保存しておいてパパッとパーツを配置するだけで作れたり、「このリンクを押すとこの画面に遷移できて〜」といった画面フロー図を作れたりといった、今までPhotoShopでやろうとすると苦労していたり手の届かなかった機能が盛り込まれています。
昔はPCしかなく、画面サイズもみなほとんど一緒でWEBサイトの横幅は980px程度がほとんどでしたが、今はスマホ画面用のデザインやスマホも色々なサイズがありますし、タブレットもあります。
それぞれのデバイスサイズで最適なデザインを作る必要が出てきているので、今後どんどんWEBデザイン用のソフトに移行していくでしょう。
僕が色々な現場を見ている中では、
現場での利用はPhotoShopが圧倒的にまだまだ多く、次にナウイ感じのベンチャーなど現場でSketchがちょこちょこ使われていて、AdobeXDを使っている現場はかなり少ない。
という感じです。
まぁ、使い方はどれも違いますが、根本的にやることは同じなので、その根本を抑えることが大事です。
（エンジニアも同じですね。流行のフレームワークといったものに踊らされて上辺だけ学んだ人より、根本を抑えている人の方がどこの現場でもどのフレームワークでも通用します。）
PhotoShopとIllustratorの違いは？
よく対比で出てくるPhotoShopとIllustratorというものがありますが、どちらも「デザイン」出来るソフトなのでWEBデザインとして使おうと思えばIllustratorでも実は出来なくはないんです。
では、その違いは？というと
「ラスタ形式」か「ベクタ形式」かという違いになります。
ラスタとベクタの違いとは【初心者のためのIllustrator使い方講座】
PhotoShopはラスタなので、作ったものを引き伸ばして使おうとすると荒れます。（画像は引き伸ばしたら荒れますね）
反対にIllustratorはベクタなので、作ったものを引き伸ばしても全く荒れることはありません。
WEBデザインはサイト横幅が基本決まっていてその中でデザインしますし、細かなグラデーションや画像も多様するのでPhotoShopを使います。
ロゴやイラストといった単純なデザインで、ページの各所で引き伸ばして使う可能性があったり、DTPといった紙媒体や協賛企業のサイトなどサイズがバラバラな箇所に掲載してもらうなどといったものは、Illustratorを使う。
という感じになっています。
PhotoShopの使い方と初期設定
使い方や初期設定なんですが、ここでわざわざ紹介する必要もなく、もう「公式サイト見ればいい」という感じです。
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能
Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版
初期設定もほとんどないです、使う機能もほとんど限られているので、使い方自体は公式サイト見れば十分です。
高い金払ってスクールなんて行く必要ありません。
大事なのは、これから教えていく細かな「配色」「余白」「配置」という感覚やテクニックを学ぶことです。
WEBデザイナーとしてバリバリやっていくのでない限り、デザインは習う知識なんてものはほとんどなく、
習うより慣れろ
でしかありません。
決して大金払ってまでスクールなんか通っちゃダメですよ？無駄ですからね。
