peeks-blog

ここで教えるWebデザインは、
現場でWebデザイナーとして働く上で必要な知識ではなく、
「デザインからWordPressでHPを作って欲しい」
という受託案件を獲得する際や、
自分でWebサービスを作成したり、
常駐案件獲得時にお客さんへ見せるポートフォリオを
「見栄え良く見せる」ためのデザインスキルを教えるものである。

なので、ゴリゴリWebデザインが出来る事を目指すのではなく、
デザイン素人でも客に見せて恥ずかしくないレベルの
見栄えのいいデザインを目標としている。

※参考：Webデザインの概要や重要性、ユーザービリティ4つのポイントを解説

Photoshopの初期設定と基本の使い方

①Photoshopって何？

Adobeが開発したデザインツール

昔は買うのに５〜１０万したが、
今では月額５０００円で利用できる。

元々は「写真を加工する専用ソフト」であり、
Webデザイン専用のソフトではない。
なので、Webデザインをするには使わない機能がとても多い。
（画像加工の際に少し使う程度）

実際のWebデザイナーは画像加工はほとんどしない。
専門のイラストレーターに外注したり、
フリー素材や有料素材を組み合わせたりしている。
→イラストを作成するソフトが、Illustrator。

Webデザイナーの業務は、
サイトのページ内に表示する情報を整理して、グループ分けを行い、
整列させてレイアウトを組んで色を付けること。

「どういった情報をどの順序で表示したらユーザーに届くか」
を考えることを「IA（情報アーキテクチャ）」という。

実際は、IAまで考えられるWebデザイナーはそう多くない。
大抵のデザイナーは、「マネージャー等から
ほとんど組み上げられたワイヤーフレーム」に沿って
あとは色をつけて形を整えていくだけの業務を行なっている。
（いわゆる「ペインター」と言った方がいいかも）

※参考：Adobe Creative Cloudの収録ソフトや出来ること

②Photoshopはユーザーが減ってる？

PhotoshopがWebデザインで使われる機械は減っている。
なぜならPhotoshopは「画像編集専用ソフト」だから。
Webデザインするには不要な機能が多く、動作も重く、
Webデザインとして欲しい機能が逆に少ない。

なので一部の現場では、Webデザイン専用ソフトの利用が増えている。
以下２つが代表例。

・Adobe XD
・Sketch

ともに１つの画面でPCデザイン、SP（スマホ）デザイン、タブレットデザインなど
各種画面サイズのデザインを作れたり、
デザインでよく使うパーツを保存しておいて配置するだけで作れたり
「このリンクを押すとこの画面に遷移できる」といったフロー図を作れたりといった
今までPhotoshopでやろうとすると
苦労してたり手の届かなかった機能が盛り込まれている。

今後は、PC、スマホ、タブレットといった
それぞれのデバイスサイズで最適なデザインを作る必要が出てきているので、
今後どんどんWebデザイン用のソフトに移行すると思われる。

ナウい感じのベンチャーではSketchが使われており、
AdobeXDを使ってる所はかなり少ない。

使い方はどれも違うが、根本的にやる事は同じなので、その根本を抑えるのが大事。
エンジニアについても、流行りのフレームワークに踊らされて上辺を学んだ人より
根本を抑えている人の方がどの現場でもどのフレームワークでも通用する。

③PhotoshopとIllustratorの違いは？

※参考：PhotoshopとIllustratorの違い出来ること、購入方法など

④Photoshopの使い方と初期設定

公式サイトを見ればいい

初期設定もほとんどない

使う機能もほぼ限られてる

「配色」「余白」「配置」のテクニックや感覚を覚えるのが大事

大金払ってスクールに通う必要はない

レイアウト

①Webデザインで大切な４つのこと

・レイアウト（配置）
・配色
・余白
・フォント

②レイアウトって何？

レイアウトとは「コンテンツを配置する」ことを言う。

ヘッダーやフッター、
メインナビゲーションやメインコンテンツ、
サイドコンテンツ（サイドバー）、
さらにはもっと細かなコンテンツをどう配置するか、ということ。

③色々なレイアウト

「稼ぐ」という面では、
シンプルなものでOK。

配色

②配色って何？

配色によって、人に「イメージ」を与える事ができる。

デザインを鍛えるには、バナーデザインをするのが良い。
ただし、バナーデザインをするにも
最初はコンテンツの「配置」から入る。

モノトーンでまずはコンテンツを配置し、
そこから色をつけていくという作業をすることで、
配色とレイアウト（配置）との板挟みに悩む事は少なくなる。

慣れるまでは必ず、まずは「コンテンツのレイアウト」から。

③配色の知識をつけるには

・色相、明度、彩度
・トーン
・色の与えるイメージ（寒色、暖色、男性的、女性的など）
・補色、類似色
・配色比率（ベースカラー、メインカラー、アクセントカラー等）

④配色とテイスト

実際のお客さんは「こんなデザインで」と言ってくるが、それが
「レイアウト（３カラムがいいとかのコンテンツの配置）」のことなのか、
「テイスト」のことなのか等を、
きちんとヒアリングしておく必要がある。

余白

②余白とは？

「何もない空間」のこと。以下が該当。

・隣り合うコンテンツ同士の間
・コンテンツの中のコンテンツとの間
・文字と文字の間
・行間

余白を持たせることで、脳を休めることが出来るので
「読みやすさ」が向上する。

CVのポイントでも、あえて余白を持たせて
余計な情報を与えないことで前に進ませる（CVさせる）ことは
日常的に使われている。

③余計な情報を与えない

④余白の知識

⑤デザインは引き算

「何を削るか」を常に考え、出来るだけ
「最小限」で相手に情報を伝える必要がある。

フォント

②フォントとは

文字（fonts）のこと
ブラウザ上では色々な種類のフォントを表示させる事ができる。

フォントはどのようなものでも表示できる訳ではなく、
そのブラウザを開いているユーザーのPCにインストールされている
フォントの中の種類のものでしか表示する事はできない。

③WEBフォントとは

Google Fontsが有名

「日本語」に対応したWebフォントが少ないので、
英字の部分に使われる場合がほとんど。

④フォントとイメージ

⑤フォントと余白の関係

⑥フォントとフォントサイズ