• TITLE 未経験から独学で勉強してWebデザイナーになるためにやるべき8つのこと
  • YEAR2018.05.19
  • TAG
未経験から独学で勉強してWebデザイナーになるためにやるべき8つのこと

未経験から独学で勉強してWebデザイナーになるためにやるべき8つのこと

どうも、僕です。

今日は僕が未経験からwebデザイナーになるにあたってやってきたこと、やるべきことを話したいと思います。

なぜWebデザイナーだったのか?

そもそもなぜwebデザイナーを志したかというと、僕は結構な歳までバンドやらなんやら好きなことをやっていたのですが、周りが社会人になっていく中である時ふと気付いたんですね。

「あれ?もしかしてヤバくない?何もできないおっさんじゃね?しかもバイト・・・!」

絶望していた僕はそこからすぐ勉強するためにバイトを辞めたんです。で、ダーマ神殿へ行って遊び人に転職しました。ええ、ニートです。勉強するためにニートになりました。

そして何かスキルをつけれたらな〜と思っていた僕はネットを彷徨っていたのですが当時webサービスなるものが流行っていまして、PCひとつでこんなことできるんだ!!と知った僕はプログラミングの勉強をはじめて即座に挫折します(1回目の挫折)

基本的なタグも書けなかった僕は、とにかく基本的なページを作ることを目指してwebデザインの世界に足を踏み入れました。

Adobe製品と出会う

とにかくデザインをするにはAdobeだ!!と何かで見た僕ですが貯金も少なく、まとまったお金も無かったので、Adobe CSシリーズを買うお金も当然無く、月々¥5,000で使用できる当時サービスをローンチしたてのAdobe Creative Cloudに契約してphotoshopを手にしました・・!というか全Adobeソフトゲットだぜ!そう、コンプリートプランだからね!

何をどう勉強したか?【デザイン編】

ここから僕がどのように勉強したかという話をザックリしたいと思います。

この頃の僕は本を買うお金も惜しんでいたため全てをググって勉強していました。

正直非効率だったと思います。

ネットの散らばった情報をかき集めて勉強するより、初心者の間は書籍を一冊買って体系的に理解をしたほうが全体像が見えて何を勉強していけばいいのかわかるので今なら書籍を買うと思います。

ソフトの触り方や写真の加工の仕方、ショートカットやシェイプの使い方、ありとあらゆる操作を繰り返し実践、検索しては実践の繰り返しでした。

  • まずはソフトで何ができるかを知る。
  • 作りたいものを作る。
  • 制作過程でわからない事があればググる。
  • 作る。
  • わからない事があればググる。
  • 作る。

これを繰り返しやっていました。

こうしてphotoshop使いLv.01くらいになった僕は次のステップへ移ります。

最近はillustratorなるものでwebデザインをしているらしいとネットで見た僕はillustratorも触り始めたのですが、微妙な操作性の違いと「べジェ曲線」に苦しめられます。苦しめられて一旦諦めたのでした(早い)

何をどう勉強したか?【コード編】

webデザインといえばHTMLCSSを書かないと!と知っていた僕は、学生のころ情報の授業で使用したことがあったAdobeのDream WeaverをDLして使っていたんですけど、なんとも使いづらかったです。

インターフェースが見にくくソフトも重い・・・・Adobeさんアンインストールしてすいません。

当然、他にエディタがあったのですがそんな事知る由もなく、「メモ帳」でもコードが書けると知った僕は「メモ帳」使いに転職します。

当然ですが、メモ帳にはコードの補完機能などはなく、全て手打ちだったので大変でした。ですがここでコードを覚える、コードに馴れる、タイプミスしまくりのエラーをたくさん経験する、など多くの経験を積み、今ではメモ帳でよかったと思っています。

  • まずはHTMLとCSSで何ができるかを知る。
  • 作りたいものを作る。
  • 制作過程でわからない事があればググる。
  • 作る。
  • わからない事があればググる。
  • 作る。

と、さっきのデザイン編と同じ流れですね。

こうして基本的なコードのタグを覚えた僕はコードでwebサイトを作れるようになっていました。

で?結局どう勉強したらいいの?という話しなんですけど、今だから言える非効率な勉強をしてきた僕がオススメする勉強方を具体的に紹介したいと思います。

Web制作の流れを理解する。

1.web制作の全体像を知ろう。

web制作はとにかくやることが多いです。

全体像がわからないと、どこから手をつけていいのかわからなくなりやすいのでまずは制作の流れを理解するのをオススメします。

Googleで「web制作 流れ」などのワードで検索してweb制作は何から始まり、どんな技術が必要でどのように進めていくのかがわかるようになると思います。

流れを理解できるようになると必要なスキルやソフトなどがわかってくると思うので次のステップにいってみましょう。

デザインのスキルを身につけよう

graphic.jpg

1.グラフィックデザイン用ソフトをゲットする。

webデザインなので当然デザインの知識が必要になります。

グラフィックであれウェブであれ、デザインの基本的なルールを知っておくことや、デザインの引き出しを持っておくことはとても役に立つと思います。

コードから学んでいくのが悪いとは思いませんが、デザインの知識なしでは必ず壁にぶつかる時がくるので、良いものをたくさん見て、手を動かしてセンスを磨きましょう。

となればまずAdobeのIllustratorPhotoshopの2つをゲットしよう。

いきなり「Adobe Creative Cloud」にお金を払うのは敷居が高いので、体験版をダウンロードして触ってみましょう。

2.デザインのルールを覚える。

僕が勉強し始めたころに欲しかった1冊を紹介しようと思います。

王道ですが今でも人気の高い1冊「ノンデザイナーズ・デザインブック」です。

この本はボリュームも多くなく読みやすい1冊となっているので是非読んでほしいです。この1冊に書かれていることを実践するだけで資料やチラシ、雑誌やポスターなど全てに共通するルールを知る事ができます。デザインにはルールがあり、そのルールを守る事でデザインは大幅によくなります。

3.自分の作りたいものを作る。

雑誌でもいい、チラシでもいい、ポスターでもいい。名刺でもいい。フライヤーでもいい。

自分が作りたいものを作れば、モチベーションは上がるし、作りたいものを作っている間に自分の腕が上がっていくのがとても楽しく感じることができると思います。楽しいと感じる心が何よりも大事ではないかなと思っています。

ちなみに僕はバナーやアプリアイコンなどを作りまくっていました。

そうしているうちに、ソフトの使い方をある程度覚えれるようになっていたと思います。

4.良いデザインを模写する。

作りたいものを作っていてもなんだかイケてないと感じることがあると思います。

引き出しが少ないうちはイケてないものを量産してしまいやすいので、良いと思うデザインを真似することをオススメします。

はじめは完全コピーでもいいので、とにかくそのデザインの「なに」が良いのかを見つけましょう。

フォントなのか?レイアウトなのか?写真の使い方なのか?

「良い」と思うところを真似しましょう。

そうして「良い」デザインの引き出しが増えてきます。

実際にデザインブックを買うのもアリだし、今だと「Pinterest」「Instagram」などに登録して色々と検索してみよう。オシャレで洗練されたデザインをよく見てみましょう。

プログラミングのスキルを身につけよう

programming.jpg

1.コードの勉強をする。

まずはHTMLとCSSを勉強しましょう。

少し前に比べて動画で学べるサービスが増え、例えばドットインストールや、Schooなどの素晴らしいサービスがあり、無料で勉強できるので是非活用しましょう。

また、最近ではProgateなどのサービスで充分な勉強ができる環境が揃っています。

ドットインストールやSchooでは動画がある程度の長さに抑えられているため、急ぎ足な部分もありますが、逐一止めながら自分のペースで勉強しましょう。

2.webサイトを最初から最後までつくってみよう。

最初は、時間がかかるかもしれませんがひとつのサイトを完成させてみましょう。

ここでは、最初から最後まで1サイトを完成させる流れになっているものであれば書籍はなんでもいいので、買って同じようにやってみましょう。

実際にコードを書きながら、どこからはじまりどこで終わるのかがわかるためwebデザインへの理解はかなり深まると思います。

この段階をクリアできればweb制作というものについて、よく理解できるようになっていると思います。

3.自分でイチからつくってみよう。

これまでのことをしっかりとできていれば凝った動きはなくても、綺麗なレイアウトで組めたり、おしゃれでカッコいいサイトが作れるようになっているはずです。

ここからもっとリッチなサイトを作りたければjavascriptなどのプログラミングの勉強をするのもいいと思います。

また、自分でブログを書きたいと思ったらWordPress(PHP)を勉強をするのもいいと思います。

勿論、HTMLCSSの勉強も続けてください。

今ではCSSと同じようにCSSプリプロセッサと呼ばれる「Sass」を勉強した方がいいと思います。

最後のまとめ

挫けそうになっても諦めるな。

webサイトを作れるようになるには色々なことを学ぶ必要があり、心が折れそうな事も多いと思います。

ですが、書籍やネットには数多くの参考書があります。先人たちの知識があります。

PinterestやInstagramには素晴らしいデザインが数多くあります。

「理解すること」「実践すること」を繰り返すことで僕たちはウェブデザイナーという仕事に就いています。

はじめは僕も簡単なタグを覚えるのでやっとでした。

頑張れば必ず報われるとはかぎりませんが、スキルが上がっていく感覚はなにものにも変えがたい喜びがあります。楽しさがあります。

この記事がウェブデザイナーを目指す人の参考になれば幸いです。それではまた。