【webデザイナーを目指す方必見】webデザイナーになるまでに学んだこと【ロードマップ】

こんにちは、むぎです。
先日、暑さに負けて一度だけエアコンをつけました。
早くも秋の到来を願っています。笑

ねこのかぎしっぽでは、連日猫関係のwebサイト制作を行っています。基本的にデザイン担当なのですが、ありがたいことにコーディング・アニメーションなども任せてもらっています。1つのサイトを1から自分で作り上げられるのはとても嬉しいですね。

ページ数が現在の推定で25ページ以上になりそうなため、なかなかの規模ですが主要ページはデザイン・コーディングともに終わりが見えてきました！早く公開できる状態にしたいですね。

さて本今日は私がwebデザイナーになるまでに学んできたことを紹介しようと思います。正直、様々な勉強をしてきたため、デザイン一本に特化した内容ではないかもしれませんが、今webデザイナーになるために勉強している方々の何かしらの参考になればと思います。

1．コーディング

(1)　progete
初めはprogeteに取り組みました。
当初はhtml,cssなんて言葉を聞くのも初めてだったもので…。笑
あたふたしながら無課金でできるところを1週。

(2)　ドットインストール
なんとなく、イメージが付いたところでドットインストールをみて、実際に自分のパソコンに環境を作りながら、コードを書き始めました。こちらも無料部分まで。

(3)　本
progeteとドットインストールである程度の概要が掴めたところで、いくつか書籍を購入しました。

・1冊ですべて身につくHTML & CSSとWebデザイン入門講座
・よくわかるphpの教科書
・本当によくわかるwordpressの教科書

ラインナップをみると方向性が全く定まっていないですね。
ネットで得られた知識だけで購入した…みたいな感じです…。
今思うと、webデザイナーになるなら最初はhtmlとcss、次にjs、そしてwordpress(phpという言語で書かれているため、がっつりできるようになりたいならphpも学ぶべきかも)という流れが理解しやすいと思います。

(4)　模写
書籍をみて、あとはもういろんなサイトを作りまくりました。
いわゆる模写です。
様々なサイトを模倣して全く同じようなサイトを作るという勉強ですね。困ったらデベロッパーツールで確認して…という感じです。

(5)　自分のサイト作成
自分でもwebサイトを作るためのコードが書けるんだなと実感でき始めたところで、いよいよオリジナルのサイト制作に移りました。

が、全く作れない…。何を作っていいかわからない…。
そこでようやくデザインの勉強を始めました。

2．デザイン

(1)　本
以下の本を購入＆読む

・なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
・ノン デザイナーズ デザイン ブック
・デザイン入門教室
・配色アイデア手帖

読んでみても、ルールがあること、作成のイメージはつかめても、実際に作るとなるとわからん！！状態。
デザインって本当に難しくて、言葉で言われても実践できなかったり、どの技を使えばいいのかわからなかったりで本当に困りました。

(2)　デザインのストックをためる
本を読むのと同時に、かなりの数のバナーやwebサイトを見るようになりました。いいデザインを探すようになりましたね。
Pinterestはデザインを探すのにおすすめです。

(3)　自作する
そのデザインがなぜいいのか、いいところを取り入れられないかを考え、自分でもバナーなどのデザインを作るようになりました。
(余談ですが、最近は出かけるたびにいろいろな看板やロゴなどをチェックしてデザインの幅を広げようとしています。)

(4)フィードバックをもらう
そして、作ったものをフィードバックしてもらう！これめちゃくちゃ大事です。SNSやMENTAを使って現役デザイナーの方にフィードバックをお願いしましょう。かなりたくさんのダメ出しが入るとは思いますが、これが一番勉強になりました。
デザインの考え方や作るときに避けないといけないことも、最初は知らなくて当たり前。できる人に聞きながら、少しづつデザインのイメージがわいてくるようになります。(この時期には、1か月前に自分が作った作品はひどすぎて見ていられない！状態になっていると思います。日々成長してるってことですね。)

Photoshop、illustratorを使い始めたのは、かなり後のことでした。最初はfigma、XDでwebサイトのカンプを作っていたのですが、LPを作る際の画像加工などで必要になり、購入を決めました。
こちらはまだ知らない機能がたくさんあるため、もっともっと使いこなしていきたいですね。

さて、今回は私がデザイナーになるために勉強した内容を書かせていただきました。バックエンドにも興味があったり、もっとjsごりごり書けるようになりたいと、アニメーション関係のライブラリを漁ったり…、と様々な方向に手を出しているため、デザイン特化ではないですが、どなたかの参考になればと思います。

デザインについて困っていること、悩んでいることなどがあればコメント等で教えてもらえると嬉しいです。
自分のやりたいことができる力をつけるために、一緒に頑張っていきましょうね！

それではまた来週～～。