TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

WEB DESIGN

WEBデザインの独学勉強法と独学のメリットデメリットについて考えてみる




こんにちはトミー( @TOMCREATIVE106 )です!

Twitterを本格的に初めてから、
「WEBデザイン」「独学」というキーワードを見る機会が多くなったので、
今回はそのことについて書いていきたいと思います。

独学のメリットデメリットを考えてみる

まず何故独学のみで勉強しようとするのかを例にあげていくと、
下記理由があがるのかなと思います。

  • 育児があるから。
  • 自分の時間を有効活用したいから
  • 流行っているから

「独学」自体はとてもすばらしいことであり、中々できないことだと思います。

自分の時間を有効活用し、勉強に時間を使うってとても良いことです。

でも、間違った勉強法をしてしまっていたらと思うと、そんな無駄なことはないですよね。

そこでまず「独学」の「メリット」「デメリット」から考えてみましょう。

メリット

最初はわからないことだらけだと思うので、とにかく自分で調べますよね。

今は調べれば簡単に情報が手に入る時代なので、大抵のことは自分で解決できます。

「解決するまで調べる」ことによって、
自分の引き出しにもなるし、頭や体にしみ込みやすくなります。

さらにSNSなどで簡単に情報提供もできるし、
それをシェアして、みんなで勉強していく。

こういうネットワークってとても良いなーと思います。

おそらく一人で勉強しているっていう感覚がなくなるのでしょう。

デメリット

会社員と比較して考えますが、
わからないことを、すぐ人に聞ける環境にないということです。

逆に会社員だと、すぐ人に聞ける環境にあるので、自分で調べない人が多くいますが。。。
それはそれで問題なんですけどね。

個人的な意見ですが、
ハウツー記事はすべての情報が完璧にあるわけではありません。

ハウツー記事って、誰が見てもわかりやすく書いてありますが、
本質のところが書かれていない印象です。

個人的に思うのは、文字のみだと中々伝えきれない部分が多くあって、
実践で役に立たない記事も数多く存在します。

特にデザインに関しては文字で説明するのが中々難しく、
直で話したほうが早い印象です。



「独学だけで」ではなく「独学でできること」を考えてみる

仮に、独学だけで仕事をもらえるようになったとします。

それが各々のゴールであれば良いのですが、
「クオリティ」の部分で言うと、現場で場数をこなしてきた人には到底叶いません。

少し言い方が悪いですが、
プロから見ると、独学のみでデザイナーになった方の制作物は一発でわかります。

お金をいただく以上、少しでもクオリティが高いものを提案したいですよね。

それではどうすればいいか。

まず一回でも良いから「プロの現場」で経験することをオススメします。

育児などでそのような環境を作るのが難しい場合は、
プロの現場での経験、実績があるなど、信頼できる講師を見つけることです。

現場で働いてみるとわかるのですが、
WEBディレクターやコーダーとの密なやり取りも発生します。

そういう集団行動を経験することもとても必要です。

自分一人ですべてを勉強して、すべてで一流になることは本当に無理ゲーです。

いろんなWEBの職種の方と触れ合い、
いろんな視点で意見をもらうことも大切です。

一番早く成長できるのが実践です。

実践で恥をかくことだって大切だし、失敗することも必要です。

そうなったときに「独学だけでプロを目指す」というより「独学でできることを考える」
という思考にシフトできると思います。

会社員でも空き時間に独学で勉強している人が多くいます。

周りに人がいると、競争意識も生まれるんですよね。

例えば、上司が今外出してて作業も終わってしまった。
その空いた時間を自分の勉強にあてることが大切です。

そしてわからないことがあった時、上司や先輩にすぐに聞けば良いのです。

どんなことでも聞くことは恥ずかしいことではないし、
そこで学べることは多くあります。

独学のみで学ぶより、実績ある人の下でたくさん「失敗」をすることが、
成長できる一番の近道だと思います。

独学勉強法:ギャラリーサイトをとことん見る

デザインできるようになるには、とにかく自分の引き出しを増やすことが大切です。

てっとり早いのが、WEBのギャラリーサイトでとにかくいろんなものを見ることです。

それぞれ記事にまとめているので是非ご覧ください。

 

独学勉強法:本

僕自身デザインの勉強で広告集やデザイン集以外の本は読んだことないのですが、
それを含めてご紹介したいと思います。

実践で使えないものも多いし、横文字なんかを完璧に覚える必要はないです。

WEBの時代情勢や、デザインする上での常識だけ覚えておくのも必要だと思います。

Web制作会社年鑑2019 (Web Designing Books)

2019年に話題になったWEBサイト、マーケティング施策を制作会社ごとにアーカイブ化したデザイン集です。

デジタル施策の最先端を紹介しているので、
有名企業がどのような施策でそのようなデザインをしているのか参考になると思います。

 

配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集

デザインする上で色の配色ってとても大切です。

またWEBデザインにおいて使用するRGBというカラーモードも、
最初は扱うのがかなり難しいと思います。

配色は人にどんな影響を与えるのか、実例から詳しく紹介しているのでオススメです。

 

Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで

大手デジタルマーケでUXデザインを実践してきた方々が執筆した本です。

「ユーザビリティ評価」「プロトタイピング」「構造化シナリオ」「ユーザー調査」
「カスタマージャーニーマップ」「ユーザーモデリング」「組織導入」までを8つの章に分けて解説していきます。

 

Webデザイン必携。プロにまなぶ現場の制作ルール84

こちらは前職の制作プロダクションで参考書として配布されたものなんですが、
WEB制作において「当たり前に覚えておかないといけないこと」が書いてあった印象です。

この点をあまり知らない方が多いと思うので、紹介させてもらいます。



独学勉強法:本サイトを1からコーディングしてみる

WEBデザインする上で必須なのが、HTMLとCSSの理解です。

サイトを丸ごとコーディングできることがWEBデザイナーの必須スキルです。

WEBサイトはどうやって構築されているのか、
それをまず理解しないと、WEBデザインはできません。

独学勉強法:模写

バナートレースをやっている方を多く見ますが、
何も考えず模写すること程無駄なことはありません。

バナーだけに限らず、WEBサイトを模写するときのポイントをまとめました。

色はスポイトツールで吸い取らず、自分でRGBを調整して作る

初心者の方はRGBの扱いがとても難しいと思います。

僕も最初の頃は、「色が楠んでいる」「蛍光色が強すぎる」などよく言われましたw

そのためRGBに慣れる訓練をしましょう。

バナーやWEBサイトで何を訴えているのか考える

どのようなプライオリティー(優先順位)になっているか考えましょう。

ようはバナーやWEBサイトのゴールを考えるということです。

使用している写真に似ているものを探すのではなく、
なぜこの写真を選んでいるのか考え、自分で1から探してみる

デザイナーは写真選びも必須スキルです。

なんとなくで探しても意味ないので、
なぜこの写真なのかを考え、似ていなくてもいいからコンセプトがある写真を選ぶことも大切です。

自分でリニューアルしてみる

ここがとても大切です。

バナーやWEBサイトで訴えていることが理解できたら、
もっと良くするために自分なりにデザインをリニューアルしてみましょう。

コンセプトをしっかりと決め、
自分がクライアントに説明できるような状態まで詰めましょう。

そこまでできて、模写は初めて意味をもちます。

少し実践に近い勉強法になります。


おまけ(WEBデザインで使用するツール)

みなさんWEBデザインをする際どんなツールを使用していますか?

多くの方はPhotoshopかなと思います。もしくはXD。

僕は断然Illustratorをおすすめします。

基本的な部分を守っていれば簡単にWEBデザインが可能です。

Illustratorは元々、グラフィックデザイン用に開発されたデザインツールです。

そのためレイアウトやデザインにも優れ、簡単にPhotoshopとの連携も可能です。

スライスも簡単にでき、今やエンジニアも当たり前にイラレでスライスができます。

細かいマージンやデザインの調整もできて、スピード感も大きく変わってくるかと思います。

こちらもオススメ!↓

Illustratorで制作する際に気ををつけるポイント

  • 単位をピクセルに設定する
  • オプジェクトの最小単位を1ピクセルにする
  • カラーモードをRGBに設定する

こちらを守るだけでイラレでWEBサイトやバナーを作ることが可能です。

こちらもオススメ!↓

Photoshopは画像合成に特化したツールなので
デザインするときにはあまりおすすめできません。

そしてXDはモックを作るときや遷移イメージとしてクライアントに見せる時は便利ですが、
デザインの段階でここは必要ありません。

原寸確認用に簡易版html、cssでモックなんか作れるし、
遷移やアニメーションなどの表現イメージはコーディングの際に詰めれば良いのです。

おわりに

いかがだったでしょうか。

これが会社員としてやっていきた正直な僕の意見です。

その中でたくさん経験をさせてもらい、
今回このような記事を書かせていただきました。

少しでも参考になれば幸いです。