WEBデザイン

【オススメ本も紹介】WEBデザイナーのための独学デザイン勉強法

2021/04/20

WEBデザインの勉強法がわからない!

デザインって何から勉強していいのかわからない!

デザインを独学するのにオススメの本は?

そんな疑問をお持ちの方向けに、WEB「デザイン」の勉強法とオススメ本について解説していこうと思います。

独学でWEB「デザイン」を学ぶ!

デザインを学ぶのは難しい?

HTML/CSSを使ってのWEBサイトコーディングであれば、参考書籍やドットインストールなどの無料のオンライン動画学習サイトなど学ぶ手段はたくさんあります。しかし、WEBサイトの「デザイン」となると、あまり参考書籍もありませんし、ネットにもデザインを学べるようなサイトはあまりありません。

独学でデザインは学びにくい」という事がその理由だと思います。

デザイン事務所だと、新人のデザイナーは「デザインを実際に作って、先輩やクライアントから修正指示を受けて、修正対応してまた提出して…」を繰り返すことで「デザイン力」がついていきます。

仕事の現場で「デザイン」と「修正」を繰り返し、第三者にデザインを評価され続けることで「デザイン力」がついていきます。

もちろん、「修正指示」を出す先輩、上司、クライアントは能力がある信頼できる人物であればベストです。

デザインは独学がとても難しい分野なので、デザインを一人でも学べるような書籍や動画学習サイトがあまりないのだと思います。

独学でデザインを学ぶ

「デザインは独学が難しい」とは言えWEBデザイナーになるためには、当たり前ですがある程度はデザインができなければいけません。

私は現在フリーランスとしてWEBサイト制作を請け負っています。以前はWEB制作会社2社でデザイナーとして働いていました。2社目ではコーディング業務は一切やらず、仕事はデザインとディレクションが中心で、立場的にはチーフデザイナー的な感じだったと思います。

なので立場上、入社してきたデザイナー志望の新人の教育係や、他のデザイナーのデザインチェックも業務として行っていました。

その時の経験などをもとに、デザインについてあまり知識や経験がない方やWEBデザイナーを目指している方向けに、WEBサイトの「デザイン」についての「独学での学習法」や「学習の際の注意点」に関して解説していこうと思います。

デザインを学ぶ

デザインの基本の「手法」を学ぶ

「デザイナーはセンスや感覚でデザインをしている」と思われがちです。

実際はそんなことは一切なく、かなり論理的にというか理詰めでデザインを作っています。

「WEBデザイン」はサイト訪問者に対して「商品、サービスなどをわかりやすく説明」したり「購買意欲を高める」などの特定の目的を達成するために制作されます。

なのでデザイナーは「どうすれば分かりやすく商品、サービスが伝わるか?」「どうすれば商品に興味をもってもらえるか?」などを意識しながらデザインを作らなければいけません。

デザインには様々な「手法」があります。

例えば、「情報を分かりやすく見せる方法」や「楽しく感じるようなレイアウト」逆に「真面目に見えるレイアウト」など様々なデザイン手法があります。

デザイナーはこのような「手法」を駆使して意図的に「楽しく感じるデザイン」や「分かりやすいレイアウト」を作っています。

優秀なデザイナーが作るデザインは、「モノとモノとの間隔(スペース)」「文字の大きさ」「モノの位置」など全て意図を持って決められています。

デザイン オススメ本

デザインの基本的な「手法」を学ぶのに最適だと思われる書籍をいくつかご紹介します。

写真や図表が中心なので、どれもサラッと読めてしまうと思います。

様々なタイプのレイアウトが学べます。レイアウトがユーザーにどのような印象を与えるかが理解できると思います。

デザインの様々な手法が分かりやすくまとめられています。「いいデザイン」と「悪いデザイン」が両方提示され、「何が悪い」「どこが悪いか」について解説されており、写真や図表も多くデザイン初心者にもとても読みやすい本です。

デザインは「余白=何もない空間」をどう使うがポイントです。その「余白」に焦点を当てた本です。ちょっとマニアックに感じるかもしれませんが、内容はデザイン全般について書かれていて初心者にもわかりやすい内容となっています。

UI(ユーザーインターフェース)について詳しく解説されている本です。初心者にはちょっと難しく感じるかもしれませんが、ある程度デザインに慣れてきた後に読んでみることをオススメします。

WEBデザインはユーザーに使ってもらうことが目的なので、サイトの「わかりやすさ」「使いやすさ」はとても重要です。この本では、その「わかりやすさ、使いやすさとは?」について解説されており、UIについて深く考えるきっかけになると思います。

UIについての知識は、初心者には難しいかもしれませんがWEBデザイナーには必要不可欠な知識です。

Photoshopの使い方を学ぶ

デザインは基本的にAdobeのPhotoshopを使って制作します。なのでPhotoshopの操作をマスターすることはデザイナーにとって必須です。

Photoshopの学習に関していうと、初心者向けの書籍やUdemyのような動画学習サイトでも無料の講義などあり、学ぶ手段は多いと思います。

Photoshop初学者の方がやってしまいがちなのですが、「画像の加工合成やレタッチ」の学習は初心者のうちは手を出さないほうが良いでしょう。

例えば、「炎に包まれている文字」とか「写真をイラスト調にする」とか、そういった加工系のテクニックは後回しでいいです。

特に「WEBデザイナー」であれば、そうような画像加工系のテクニックはほぼ仕事で使いません。せいぜい、「写真の色味を調整するとか」、「写真の明暗を補正する」とかの処理がほとんどです。ゴリゴリに画像を加工するという事はほとんどありません。

もちろん、そういった画像加工系のテクニックを身に着けることは有意義ですし、おいおい自分の武器になると思います。ただ、そのあたりの技術の勉強は「Photoshopの基本」が身についた後、ある程度Photoshopでデザインを作る事に慣れた後のほうが良いでしょう。

まずは「自分のイメージするデザインをPhotoshopで作れるようになる事」を目標にすると良いと思います。

【Udemy】初心者向けPhotoshop基礎学【無料版】

Photoshopオススメ本

Photoshopの基本的な使い方が網羅されている入門書です。操作方法や機能の解説がメインとなっているので、Photoshopの説明書代わりに使うと良いでしょう。

学割でお得にAdobeCCを購入したいならデジハリのAdobeマスター講座がオススメです

どうすれば安くAdobe CCを購入できるの?なるべく安く購入したい... そんな悩みを持っている方に向けて記事を書いていきます。 目次AdobeCCをお得に購入するならデジハリの「Adobeマスター ...

続きを見る

WEBサイトのコーディングを学ぶ

いいデザインを作るためには、HTML/CSSの知識、サイトコーディングの知識は不可欠です。

WEBデザイナーは

「ブラウザの横幅を縮めた場合は、どうような見た目になるか?」
「スクロール時にヘッダーはどのように変化するのか?」
「そもそもこのデザインはコーディング可能なのか?」

など様々なことを考えながらデザインを作らなければなりません。

と言うか、コーディング後を意識しないで作られたデザインはコーディング時にだいたい破綻します。

WEBデザインを作るときには、コーディング後をイメージしながら、そもそもコーディング可能なのかを考えながらデザインを進めましょう。

HTML/CSS オススメ本

コーディングの流れが分かりやすく説明されている実践的な書籍だと思います。ただ、まったくのHTML/CSS初心者だとチョット難しいかもしれません。HTML/CSS初心者はドットインストールなどの動画学習サイトから始めてみることをオススメします。
詳しくは別の記事でHTML/CSSの学習の流れについて書いているので、そちらをご覧ください。

【超初心者向け】ゼロからのHTML/CSS勉強法【独学】

・HTML/CSSの勉強をしたいけど何から始めたら良いのかわからない!・どうやってHTML/CSSの勉強を進めたていいのか分からない!・前にもHTML/CSSの勉強したけど挫折した! そんな人向けに記 ...

続きを見る

WEBサイトをデザインする時意識すること

WEBサイトをデザインする時は以下の3つの事を意識しながらデザインすると良いでしょう。

1つ目の『デザインの基本の「手法」』とは、この記事の最初でも書いたような「デザインにおける基本的な技術、知識」のことを指しています。「文字のジャンプ率」や「レイアウトの見せ方」などある程度普遍的なデザイン手法のことです。

2つ目の『デザインの流行り』とは、そのままデザインの流行りのことです。

WEBデザインの世界でも「流行りすたり」があります。ちょっと前であればgoogleが提唱した「マテリアルデザイン」や「フラットデザイン」、最近であれば「ニューモーフィズム」などがデザインの流行りと言えるでしょう。

「フラットデザイン」のようなデザインの大枠の「流行り」もありますが、「写真の加工の仕方」や「文字の見せ方」、「デザインのあしらい」などの細かい部分にも「流行り」はあります。

多少なりとも「流行り」を意識してデザインしないと、場合によってはちょっと「古臭い」印象のサイトになってしまいます。

デザインリンク集などを活用して日々様々なサイトをチェックしておくと良いでしょう。

3つ目に意識すべき事柄として『取り扱う商品やサービス、クライアント』があります。

WEBデザインは当然扱う商品、サービス、クライアントごとのオーダーメイドになります。つまり取り扱う商品、サービス、クライアントに合わせて、デザインを作らなければなりません。

例えば、扱う商品が「家庭用洗剤」だった場合、使う色は「黒」や「茶色」などのダーク系の色はNGで、「白」などの明るめの色が良いでしょう。

使用するフォントも、商品の「柔らかさ」「家庭的」な空気感を表現するのであれば「細めで、すこし丸みがあるフォント」が良いかもしれません。また、洗剤の洗浄力をアピールしたいのであれば、「太めのゴシック系」のフォントもアリかもしれません。

クライアントのコーポレートカラーが「青」なら、その「青」色をベースカラーとしてデザインを作らなければならいかもしれません。逆に競合会社のコーポレートカラーが「緑」なら、「緑」は避けるべきでしょう。

こうのように商品、クライアントにあわせてデザインは調整していかなければなりません。「その商品、クライアントにとってベストなデザインは何か?」を意識しながらデザインを作るべきでしょう。

デザインを作る際には、上記の3つの事柄のバランスを考えながらデザインを作ると良いでしょう。

例えば、若い人向けのファッションブランドで「尖った」デザインが求められているのであれば、『デザインの基本の「手法」』からはみ出しつつ、『デザインの流行り』を強めに意識してもいいかもしれません。『デザインの基本の「手法」』から意図的に外れることで、目新しいデザインを目指してみるのもアリです。(とはいえ「こうすれば尖ったデザインに見える」的な手法もあるので、何をもって「尖った」デザインなのかという気もします…)

決して「自分の好み」や「やりたい事」を最優先してデザインを作ってはダメです。

あくまでもクライアントの目的の達成のため、例えば「商品の良さを伝える」とか「企業のブランドイメージを上げる」などの目的を達成するために最適なデザインを選択・制作する、という事を意識してデザインを作るべきでしょう。

デザインの自習・練習方法

いいデザインを見る→考える

様々なデザインを見るようにしましょう。

国内外問わず様々なデザインリンクがあるので、それらを利用して様々なデザインに触れてみましょう。

一点注意ですが、海外のサイトはあくまでも参考程度で見て、現実的にデザインの参考にするのは国内のサイトからにした方が良いでしょう。

どうしても海外サイトは英語で作成されているので、それだけで「カッコよく」見えてしまいます。それと、海外のサイトはユーザーインターフェイス(UI)をシンプルにする傾向があり、そのせいか日本のWEBサイトと比べると「ちょっと説明不足」に感じるところもあります。これは逆に言えば日本のWEBサイトが説明過多なのかもしれません。

海外サイトのデザインを、そのまま日本向けのサイトに移植するとイマイチな感じになりがちです。

サイトを見る時も、前に書いた『デザインの基本の「手法」』『デザインの流行り』『取り扱う商品やサービス/クライアント』を意識してみると、かなり勉強になると思います。そのデザインを作ったデザイナーが「何を考えながらデザインを作ったか」を意識しながらデザインを見てみましょう。

また、ヘッダー、フッター、見出し、ボタンなどのサイト内での共通パーツについてもよく見ておくと、自分のデザインの引き出しを増やすのに役立つでしょう。

WEBデザイン ギャラリーサイト18選【リンク集】

海外と日本国内のギャラリーサイトと、特定のデザインに特化したちょっと変わったギャラリーサイトをまとめてみました。 目次海外ギャラリーサイト国内ギャラリーサイトその他のギャラリーサイト 海外ギャラリーサ ...

続きを見る

おすすめデザイン・クリエイティブ系の雑誌8誌

デザイン系、クリエイティブ系、広告系の雑誌をまとめてみました。 目次Web Designingアイデア+81AXIS美術手帖ブレーン宣伝会議販促会議 Web Designing リンク 隔月発行。電子 ...

続きを見る

デザインをトレースしてみる

「いいな」と思ったデザインがあれば、スクリーンショットを撮って、それを下地にしてPhotoshopを使ってデザインをトレースしてみると良いでしょう。

デザイントレースをする際はなるべく正確にトレースしましょう。フォントなど同じものがない場合でもなるべく近いものを探して使ったほうがいいでしょう。

「モノとモノの距離は何ピクセル開けているか?」、「フォントサイズはどれくらいか?」「見出しはどうやって使い分けているか」など細かく研究しましょう。そして、そのデザインを作ったデザイナーの意図を考え、なぜ自分がそのデザインを「いい」と思ったのかを考えながらトレースしていくと、デザイン力がついていくと思います。

まとめ

デザインはセンスや感覚でやっていると思われがちです。決してそのようなことはなく、理詰めでデザインを作っています。

デザインは他者に何かを伝えるための手段です。それは「難しい事を、簡単に伝える」ことだったり、言葉では伝えずらい楽しいとか、オシャレ、高級感などの「感覚的なモノ」を伝えたりイメージさせたりするための手段です。

あくまでもサイトを訪れてくれたユーザーのためにデザインは作られなければなりません。

デザイナーがデザインを作る際には、「サイト訪問者にはこのサイトがどう見えるのか?」を常に意識しながらデザインを作成するべきでしょう。

自分のデザインを客観的に見る癖を付けると良いでしょう。

とは言え初心者のうちは特にですが、なかなか自分のデザインを客観的に見ることは難しいと思います。

なので、なるべく作ったデザインは誰でもいいので他人に見てもらって感想を聞いてみる事もイイ勉強になると思います。

Web制作会社LIGが運営する「デジタルハリウッド STUDIO by LIG」のようなWEBデザインスクールなどを利用して、講師などに見てもらう方法もあります。

デジタルハリウッド STUDIO by LIG

「デザイン力」をつけるために、何よりもたくさんデザインを作ってください。デザインを上手くなるためにはやはり「デザインした数」が大切です。別の言い方をすれば、様々なパターンのデザインを作る事で、「デザイン力」はついていきます。

この記事が読んでいただいた方にとって少しでも参考になれば幸いです。

WEBデザイン・フロントエンドが学べるプログミングスクール8校比較

WEBデザイン・フロントエンドについて学べるスクールを比較してみます。また、選び方のポイント、スクールの活用方法についても解説します。 目次TechAcademyCodeCampテックキャンプデザイナ ...

続きを見る

未経験からWEB制作会社への転職ロードマップ

・未経験からWEB制作会社に転職するにはどうしたらいいの?・WEB制作会社に転職するために必要な勉強は? そんな疑問にお答えします。 未経験からWEB制作会社へ転職する方法について解説します。 私の簡 ...

続きを見る

WEBデザイナーとグラフィックデザイナーの違いは?仕事内容、給与、将来性は?

WEBデザイナーとグラフィックデザイナーの違いは?仕事内容は?給料は?将来性は? そんな疑問にお答えします。 目次WEBデザイナーとグラフィックデザイナーの仕事内容と必要なスキルWEBデザイナーの仕事 ...

続きを見る

未経験からいきなりフリーランスでWEBデザイナーは厳しい!それでもフリーになりたいなら…

未経験からフリーランスのWEBデザイナーになるのはオススメしません! その理由について解説します。 また、どうしてもフリーランスになりたいなら注意すべき点など説明します。 目次未経験からフリーランスに ...

続きを見る


-WEBデザイン

© 2021 MUKOLOG