どうも、WEBサイト制作やプログラミングを独学しているシェフです。
妻がランサーズでお金を稼いだことをきっかけに、僕もランサーズやクラウドワークスでWeb系の仕事をしようと思ったんですが、実はある衝撃な事実が発覚しました。
Webデザインの案件はどれもPSD形式での納品だなー。Photoshop使ったことないし、どうしよう…っていうか、そもそもWebデザインって何だ？
…自分でもびっくりしたんですが、Web系の勉強をし始めてから3年ほど経つのにWebデザインが具体的に何をやることなのかわかってなかったんです（笑）
いやー、無知って怖い！！！
ということで今回は「完全初心者向け」にWebデザインってどんなことやるの？どんなツールやソフトが必要なの？といったことを解説してみます！
Webデザインとは？
これまで、Webページ（Webサイト）を作ることをWebデザインだと漠然と理解していたんですが、正確には文字通り「デザイン」することがWebデザインの領域です。
- レイアウト
- 配色
- テキストや画像の配置
など、Webページの見本となるものを作るわけですね。
そして、その見本を参考にHTMLやCSSといった言語でWebページが作られる…と。
例えるなら、Webデザインは真っ白なキャンパスに絵を描く作業です。
（その後、その絵を正確にWebページにするのはHTMLやCSSを使ったコーディングと呼ばれる作業ですが、コーディングも含めてWebデザインとするケースも多いです）
つまり、僕は今まで感覚的に（頭の中で）Webデザインをして、コーディングしていたわけですが、これは自分のサイトや自分が作っているWordPressテーマだから成り立っていたわけであり、クラウドソーシングのWebデザイン案件ではこうはいかないのでご注意を。
ワイヤーフレームとの違い
ちなみに、以前ご紹介したワイヤーフレームもこのWebデザインの領域になりますが、配色や正確なレイアウトは行わず、ページの構成を共有する目的として使われます。
- Webページ制作の見本になるもの→デザインカンプ
- ナビゲーションをどこに置くか、テキストや画像をどこに配置するかなど、情報共有のツールとして使われるもの→ワイヤーフレーム
必要なソフトやツール
Webデザインの役割や性質を考えると、どんなソフトを使っても大丈夫ですし、便利なツールやソフトは数多くありますが、Adobe製品のPhotoshop（フォトショップ）を使うのがWeb業界の基本になっています。
実際、クラウドソーシングのWebデザイン案件の多くがPSD形式（Photoshopで扱うファイル形式）での納品になっています。
その他の有名どころで言うと…
- Illustrator（イラストレーター）※同じAdobe製品
- Sketch（スケッチ）
などがありますが、フリーランスとしてはもちろんのこと、就職や転職を視野に入れてWebデザインを学ぶなら基本であるPhotoshopは外せません。
Webデザインの簡単な流れ（作成手順）
これまでちゃんとWebデザインをしたことがなかったので、この機会にPhotoshopの勉強も兼ねてWebデザインに挑戦してみました。
Photoshopに初めて触りましたが、基本操作の学習、トップページのデザインカンプ（見本）作成に要した日数は2日ほど。
Web系にまったく関わりや関心がない場合はさらに時間はかかるはずですが、プログラミングとは別のスキルになるので習得のハードルは低いです。
大まかなWebデザインの流れは以下の通り。
- ページの構成を決める（紙と鉛筆でも良いし、ツールを使っても良い）
- Photoshopの初期設定をする（単位をPixelに変換するなど）
- 上から20pxの位置に、左から10pxの位置に…と、手順1で考えた構成通りに指定した位置にガイドを引く
- ガイドに合わせて画像やテキストを配置したり、配色をする
※その他、マウスを乗せた時の動き、ページをスクロールした時の動きなどもWebデザインの領域になります。
サンプル
カフェ（パン屋）のWebサイトを作るなら…と、Webデザインしてみたのがこちらです。
- 下書きの時点で配色なども書き込む
- 要素の位置（Pixel単位）も指定する
など、ここら辺は人それぞれやり方があると思いますが、下地（画像左）→Photoshopでデザインカンプ（画像右）作成ができれば良いかなと思います。
実際には、この前段階で「どんなWebページ（サイト）を作りたいのか」といったヒヤリングがあり、クライアント（お客さん）の要望にどうやって応えるのかを考えるのがファーストステップになります。
Webデザインの学習方法
PhotoshopやIllustratorを使ったWebデザインは、HTMLやCSSといった言語を使わないので独学できます。
時間と余裕がある方であれば、以下のようにググりながら進めればOKです。
- 「Photoshop ガイドの引き方」
- 「Photoshop 画像のサイズを変える」
参考【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能
また、先に完成形を見て仕組みを把握するのもおすすめです。
LIGさんのサイトでPSDのサンプルデータを配布しているので、参考までに。
もちろん、どうしてもすぐに習得したい、独学に挑戦したけど挫折した…などの場合は迷わずスクールに通いましょうね。そのためのスクールですので。
ちなみに、関連書籍もたくさん出ていますが、デザインセンスを磨く目的ならまだしも、基本操作の習得に関しては正直本を買う必要はありません。
なぜPhotoshopでWebデザインをするの？
冒頭でお話ししたように、僕は教科書通りに学習してきたわけではないので、Webデザインについて調べた時、そもそもなぜPhotoshopでWebデザインをするのか疑問に思いました。
なぜなら、Webページのイメージを共有するため、コーディングの参考にするため、というのがWebデザインの主な目的であれば、もっと便利なツールがありますし、そもそも実際のサイトを見た方がわかりやすいと思うんですよね。
変な話、ある程度サイトの構成が決まったらいきなりコーディングして、それをテストサーバーにアップして暗号化、URLをパスと一緒に送って、「これデザイン案です。どうですか？」『ちょっとヘッダーの色暗くしてみて』「こんな感じでいいですか？」みたいにやりとりできると思うんですよね。
Photoshopでガイド引いたり要素を作るのも、コードを書くのとそんなに手間は変わらないし、むしろ僕なんかはコードを書いた方が楽だったりします。
まあ、Web系の会社で働いたことがないので、ここら辺の事情や歴史はよくわかりませんが、
- PhotoshopがないWeb系の会社がなく、情報を共有しやすい
- ファイルの管理が楽
- データが半永久的に残る
- サービス提供が終了するリスクがほぼない
といったのがPhotoshopが愛される理由でしょうか。
トンチンカンなことを言ってたらごめんなさい（笑）
まとめ
Webデザインについてあれこれお話ししましたが、いかがでしたか？
感覚的にサイトを作ることも可能ですが、業務となるとPhotoshopでのWebデザインは必須スキルになるので、ぜひ習得しておきたいところです。
