これからWebデザインを勉強しよう！という初心者の方は、「Webデザインとは？」と調べていくうちに意外といろんなことを勉強しないといけないのだなということがわかると思います。

デザインのスキルやそのデザインをWebサイトとして表示させるためのコーディングのスキルを得ることでWebサイトは完成します。
どちらもポイントを抑えず闇雲に勉強するだけでは、スキルアップは難しいでしょう。

今回は、初心者の方がWebデザインを勉強するためのポイントをお伝えします。

Webデザイナーの仕事ってなにをするの？

Webデザイナーの仕事の流れ

webデザイナーはクライアントからの要望を汲み取りWeb制作を行います。
大きな会社ではクライアントと打ち合わせをし、進行を管理するディレクターがいることもありますが、小さい会社やフリーランスだと、すべて1人でやることもあります。

まずはクライアントにヒアリングを行い情報を整理します。
ヒアリングした情報をもとに、サイト設計に入り、骨組みとなるワイヤーフレームを作成しクライアントに確認をとります。
クライアントから、OKが出たらPhotoshopやXDを使ってデザインカンプを作っていきます。
デザインを作るために必要な原稿や写真素材などは、漏れなくクライアントから支給していただくようにしましょう。

デザインにもOKが出れば次はコーディングです。
デザインに忠実にコーディングをして、クライアントにwebサイトの確認をしてもらえば、いよいよサーバーに移して公開となります。

Webデザイナーに必要なスキルセット

webデザイナーに必要なスキルは、デザインとコーディングのスキルです。
さらにあるといいのはマーケティングに関する知識です。

Webデザインを作るときはPhotoshopやXDを使うことが多いので、操作に慣れるようにしましょう。
最近はXDを使う人も増えてきているので、使えるようになっておくといいですよ。

コーディングはHTMLとCSS、jQueryを理解しておくと表現できるものの幅が広がります。

デザインとコーディングで形にはできたけど、反応がなければクライアントの要望を叶えられたとはいえません。
そのためにマーケティングに関する知識も身に付けておけば、クライアントとの打ち合わせでより良い提案ができたりと、役に立つ場面が出てきます。

Webデザインの効率のいい勉強方法は？

Webデザインの学習方法

①たくさんのデザインを見てインプット

デザインを勉強するときに、一番大事なことは「デザインの引き出しをたくさん作る」こと。
デザインの引き出しがたくさんあると、自分が一から何かをデザインしようとする時に引き出しからアイデアを出すことができます。

「配色がいいな」「ロゴがかわいい」「このフォント、オシャレだな」という、自分が心惹かれる部分をインプットして引き出しを増やしていってください。

今は、Pinterestなどの画像をブックマークして集めるツールがあります。
忙しい時など、とりあえずツールに登録して集めておくと、後からじっくり見ることができて便利です。

②ツールの使い方を覚える

Photoshopなどのツールを使ってデザインしますが、頭でイメージしたものをすぐに形にできるわけではなりません。
デザインツールは高機能な分、なにをどこまで勉強すればいいかが分かりにくいのが難点です。
基本的な使い方を覚えたら、あとは実践で慣れていきましょう。

③実際に真似してデザインしてみる

デザインの引き出しを広げることを習慣化できたら、デザインを形にするアウトプットをしましょう。
「デザインはこんなのがいい。よし、それを形にしよう！」そう思ってPhotoshopやIllustratorなどのデザインツールを使用しても、実際に頭の中のデザインを再現することはなかなか難しいです。

自分のデザインを再現する前に、まずはトレース（模写）をしましょう！

再現したいデザインをお手本に、自分でデザインツールを操作します。
写真素材やロゴなど、全く同じものが用意できるとは限らないので、その時は似たようなフリー素材を探して配置します。

重要なのは写真のトリミングだったり、要素を配置する位置です。
プロのデザイナーがデザインをする際は、1px単位で気にしながらデザインしています。
デザインをきちんと設計する練習をしておけば、デザインだけを自分が担当する案件をする際にも、コーディング担当者へきちんとしたデザインデータを渡すことができます。

④オリジナルのデザインしてみる

トレースで慣れてきたら、自分で考えてデザインを一からしてみましょう。
まずは、バナーなどがいいですね。

テーマが思いつかない人は、バナーギャラリーの別パターンを提案するようなものを作成してもいいです。
バナー⇒Webサイトのファーストビュー⇒WebサイトTOP⇒中ページ
このように難易度をあげていってください。

⑤ブラッシュアップする

過去の自分のデザインを放置していませんか？
デザインはブラッシュアップしなければ成長しません。
好きなものを気持ちよく作れるのは趣味なので、プロとしてクオリティーを高めていきましょう。

第三者に見てもらって意見してもらうのもいいですよ。

コーディングの学習方法

webサイトを模写コーディングしてみましょう。
あまり複雑なサイトを初心者のうちに題材に選ぶと挫折してしまう恐れがあるので、初心者のうちはTOPページがワンカラムのすっきりとしたデザインのWebサイトやLP（ランディングページ）などを選んでみてください。LPのまとめサイトなどもありますので、模写コーディングするLPを選んでみてください。

模写コーディングをする時はChromeの検証ツールを使いながらコーディングの確認をしていくとやりやすいです。
見本と同じにならないことや、表示されないことなどはよくあることです。その際、Chrome検証ツールでどう調べるかは実務でもよく使いますので、今のうちに練習して慣れておきましょう。

コーディングの際、１から１０までコードを暗記して記述している人はいません。
よく使うコードは書いていくと自然と覚えますが、滅多に使わないコードはみんな検索しながら記述しています。

どんなキーワードで検索すれば自分の求めている答えにたどり着くのか？コードを暗記するより、検索力を鍛える方が重要です。
そのためには、自分が何が分かっていて何が分かっていないかを整理することが大事です。「何が分からないか分からない」状態の人はキーワードになりそうなものやその類似キーワードを検索していくと自分の求めている答えに引っかかる記事が出てくるはずです。

無料で学習できるサービス紹介

現在無料の学習サービスは多岐に渡ります。その中でもおすすめなのが以下のサービスです。

オススメの学習本

・ノンデザイナーズ・デザインブック
デザインの原則を学ぶための教科書的存在の書籍です。
デザインの４原則からフォントの選び方・大きさ、カラーやコンテンツの配置の仕方など解説がされています。

・webデザイン良質見本帳
実際のwebデザインが実例として掲載されています。このデザインのどこがどう良いのか？丁寧に解説されており、自身のデザインを考える上でも参考になる良書です。

・いちばんよくわかるWebデザインの基本きちんと入門
デザインからレスポンシブ のコーディング、さらにマーケティングまで網羅しているこちらの書籍は一冊あると重宝します。
基本から解説されている入門書なので、初心者にオススメです。

Webデザイナーとして転職するにはどうすればいいの？

転職の方法は？

転職するためには

などの方法があります。

それぞれメリット・デメリットがあります。メリットデメリットを自身の立場に当てはめて検討してみてください。

具体的な手段は？

上記のどの方法で応募したとしても、webデザイナーとして転職を希望するならばポートフォリオが必須になります。自分が今どのくらいのスキルがあるのか？どんな学習をしてきたのかがわかるようポートフォリオをまとめましょう。

webデザイナーとしてなので、紙ベースではなくポートフォリオサイトとしてwebにアップする形で作成するといいですね。

内定までは他の業界と同じように書類・ポートフォリオなどを送付して応募→複数回の面接→採用という流れが一般的です。
面接ではクライアントや同僚ときちんとコミュニケーションが取れるか？も見られていますので、緊張しないで普段の自分が出せるようにしましょう。

転職までの流れは？

まずは学習を進めないことには書類を出しても見てもらうためのポートフォリオがないので書類で落ちることが多くなってしまいます。スクールで学習を効率的に進めるのか？独学で自分のペースで進めていくのか？どちらか選択してまずはスキルを身に付けてください。

その後、自分が進みたい方向性を確認し、ポートフォリオを作り込んだ上で転職活動に挑みましょう！

結局、独学とスクールはどちらを選択すればいいの？

両方のメリット・デメリット（こんな人はスクールがオススメ）

独学のメリットはなんと言ってもお金がかからないところ。無料で学習できるサービスや書籍を使って勉強すれば、費用は安く抑えられます。ただ、どの順序でどう学習していくかが分からなかったり、分からない箇所が出てきた時どう解決するのかで学習が止まってしまうことも。

スクールは費用が高いということと決まった日時に通わなければならないというデメリットがあります。ですがスクールはその都度講師やメンターに相談できるので、上記のようなことで学習が止まってしまうことはありません。さらに一緒に学習している仲間がいるので、切磋琢磨できる環境に身を置くことができます。講師やメンターに業界の動向を聞けるのもメリットですね。

一人で学習することでモチベーションが下がりやすかったり分からないところはすぐに解決したい人はスクールに通う学習方法が向いています。

Webデザイナー初心者が注意する点

学習を継続すること

せっかく学習をしていても、学習しない期間ができることで内容を忘れてしまい、また一から学習をしなくては…となってしまうのはあまりにもったいなさすぎます。

ただ、仕事などで忙しい毎日を送る人が毎日模写コーディングをしたり、デザインのトレースをするのは大変です。通勤の電車内やお昼休み、寝る前のちょっとした時間に画像ブックマークツールを使ってデザインを集める。コーディングの学習ができるスマホアプリなどをスキマ時間にやってみる。

そんな風に日常のちょっとした時間にできることをやってみてください。
まとまった時間が取れるときにはぜひアウトプットに時間を割いてくださいね。

目的を決めて自分だけのキャリアを作ること

学習を進める前に、まずはwebデザインを学習してどうなりたいか？という自分の目的を決めてみてください。
ただ闇雲に学習していても、目的がない学習はすぐに学習意欲がなくなってしまいます。
学習を進めていくうちに目指すべき方向を変えていくことは当然あることです。まずは現時点での目的を定めてみてくださいね。

自分だけのキャリアを作ることはそのまま自己ブランディングに繋がります。これからは個の時代ですので、自身のブランディングについてもよく考えてください。

まとめ

初心者の方がWebデザインを勉強するためのポイントをお伝えしました。初心者の方は今の勉強法でスキルアップが図れるのか不安なこともあると思います。

ポイントを押さえながら勉強することで、初心者を脱しましょう！