こんにちはー！
今日は、ご質問でいただいた、
Webデザイナーになるためのスキル習得のステップについてお話したいと思います！
具体的に書くとかなーり長くなってしまうので、
まずは大まかなステップを書きたいと思います。
step.0
Webサイト制作の仕事内容を知る
まずはスキル習得の前に、Webサイト制作の仕事内容について把握しておきましょう。
どんな仕事なのか、ざっくりでいいので把握しておくと、イメージがつきやすいと思います。
私も、Webデザインを学ぼうと思って一番最初に買った本が、Webサイト制作の基本がわかる本でした。
しかも、会社のWeb担当者向けに書かれた本だったので、かなりわかりやすく書いてあるものを読みました。
本の名前を忘れちゃったのですが、、
わかったら追記しますね！(ごめんなさい)
でも私が読んだのは少し古い本だったので、
基本のweb制作の流れがわかる本で、
新しく出版されている本を読むのをおすすめします！
step.1
デザインソフトの使い方を学ぶ
Webサイト制作についてなんとなくイメージがついたら、まずはデザインソフトの使い方を学びます。
使うデザインソフトは、
・Photoshop(フォトショップ)
・Illustrator(イラストレーター)
の2つ。
この2つの違いをざっくり説明すると、
Photoshopが画像の合成や加工、描画などに向いていて、
イラストレーターは、ロゴやアイコンを作ったり、レイアウトするのに向いています。
両方学ぶのがおすすめですが、
まずはPhotoshopから覚えましょう！
私も現場の仕事では、
ほぼPhotoshopを使っていて、
Illustratorはたまーに使う程度です。
両方ともAdobeというところから出されているソフトなので、画面とかは似ていますが、
少し操作の仕方が違ったりします。
なので、普段はPhotoshopに慣れていて、
たまーにIllustratorを使うと、
あれ？これってどうやるんだっけ？
となってしまうことも。笑
でも、なんとなく使い方を一通りいじっておけば、
わからないことがあってもググれば解決しますよ！
なのでまずは、
Photoshopの使い方から覚えて、
そのあとにIllustratorを「ささ〜」と覚えてくださいね。
この、「ささ〜」が大事です。
最初からすべてのツールを完璧にマスターしよう！！
と思うと大変なので、
「わからない時はあとでググればいい！」
ということを頭に入れておいて、
まずは「ささ〜」と覚えるのがおすすめです。
私はデザインソフトだけ、スクールで学びましたが、本でもわかりやすく書かれているものがたくさんありますよ！
step.2
デザインを学ぶ
デザインソフトの使い方を学んだら、
次はデザインについて学びます。
色の配色や、サイズ、レイアウト、余白、装飾などなど。
デザインには基本原則があるので、
そのルールをまずは知ること！
なので、デザインセンスがないからデザイナーにはなれないと不安に思う方も大丈夫です◎
どうやったら、見やすく、わかりやすく、美しく見えるのか、
デザインの基本をまずは学びましょう〜！
おすすめの本は、
「ノンデザイナーズ・デザインブック」
です！
step.3
コーディングを学ぶ
次に、コーディングを学びます。
コーディングは初心者には難しそうに感じられると思いますが、
書き方のルールは決まっているので、
覚えてしまえばあとは慣れです！
コーディングとは、web上に反映させるためにコードを書くということですが、
簡単にいうと見えているWebサイトの裏側の部分ですね。
HTMLとCSSというものを学びます。
例えば、
HTMLに
<h1>見出し</h1>
というふうに、見出しに<h1>というタグで囲みます。
そしてCSSに、
h1{ color:red }
と、色は赤色だよ〜というのを書きます。
すると、
見出し
↑こんな感じに赤色になって、
webサイトに表示される
という仕組みになっています。
なんとなくイメージはつきましたか？
HTMLとCSSは、
私はドットインストールというサイトで動画で学べるのでそれでざっと学んで、
そのあとは、
ソシムの「HTML5&CSS3レッスンブック」という本で基礎を学び、
「HTML5&CSS3デザインブック」という本で、レスポンシブデザインを学びました。
※レスポンシブデザインとは、PCやスマホ、タブレットなどいろんなサイズの画面で見れるように、指定することを言います！
今はスマホ対応がほとんどなので、レスポンシブデザインは必須になります。
つぎに、
動きなどのアニメーションをつけるために、
javascriptとjQueryという言語を学びます。
例えば、
画像が横にスライドして切り替わるという動きとか、ふわっと表示されたりとか、
そういったアニメーション(動きのあるもの)です。
この2つの関係は、
javascriptを簡単に短く簡単に書けるのでが、jQueryというイメージです。
これは、本でも学べますが、
ネットにもたくさん載っているので、
例えば「スライド jQuery」とググると、いろんなブログが出てきて、
だいたいコピペでできます。
なので、まずは調べたところからコピペでやってみて、
自分でもちゃんと書けるようになろうと思ったら、
本で具体的な書き方を学ぶといいと思います！
step.4
ワードプレスを学ぶ
そして、コーディングができるようになったら、ワードプレスというのを学びます。
ワードプレスは、ブログとかお知らせとか、
簡単に記事を投稿したら反映されるようにするシステムです。
それ以外にも、更新などの運用がしやすい仕様にできるので、
今はワードプレスを使う企業がかなり多いです。
実際私がいただいている仕事も、
95%はワードプレスを使ってサイトをつくっています。
私がやったワードプレスの勉強は、
「Webデザインレシピ」というサイトで学んで
(このサイト今調べてみたら、閉鎖されたのか、見れなくなっている...)
本では、ソシムの「WordPressデザインブック」で学びました。
あとは、その都度ネットで調べて、学んでいったという感じです。
以上、スキル習得のステップを書いてみました〜！
ちょっと長くなってしまいましたが、
いかがでしたか？
「ココがよくわからなかった！」
「これはどういうこと？」
などなど疑問やご質問がありましたら、
お気軽にコメントやLINE@にメッセージいただければと思いますー！
また、Webデザイナーになって、
フリーランスで活躍したい方や、
おうちで働けるようにしたい！という方は、
「おうちWebデザイナーで理想の働き方を叶えるお茶会」にぜひ来てくださいね＾＾
【お茶会詳細】
◾️開催場所
・お茶会
東京都内 (表参道or恵比寿)
詳細の場所はご参加者様にお知らせいたします。
・オンラインお茶会
オンライン ビデオチャットzoomにて
◾️日時
下記よりお好きな日程をお選びください。
12月20日（木）13:30～15:00 オンライン【満席】
12月22日（土）13:30～15:00 都内
12月26日（水）21:30～23:00 オンライン
12月28日（金）13:30～15:00 都内
1月8日（火）13:30～15:00 都内
◾️募集人数
各回5名
◾️料金
3,000円(税込) 事前銀行振込
※ご飲食代は別途ご負担願います。
※お振込手数料はご負担願います。
■その他
・お子様とのご参加もOKです。
・今回、女性限定になります。
◾️お申込み方法
下記お申し込みフォームにご記入の上、お申込みください。
↓
それではまた！
《 無料音声プレゼント中 》
「全くの未経験からでもWebデザイナーになれるのか？」をテーマに、
"Webデザイナーになって売上をつくるために必要な3つのこと" をお話しています。
下記より登録後、すぐに音声のURLが届きます！
《 7日間無料メールレッスン 》
ゼロからおうち起業で理想の働き方を叶える方法を
７日間でお伝えする無料メールレッスンです。（ワーク付き）
◼︎ プロフィールはこちら
◼︎ Instagram