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