皆さん、WEBデザイナーになりたいけど、どうやって勉強したらいいんだろうって方いませんか？？？

「スクールに行った方がいいのかな。。。」
「そもそも、デザインってなに。。。」
「HTML、CSS、Javascript？？？なんですか、それっ？？。。。」

デザインとか、ＨＴＭＬとかプログラミングとか、いきなりそんなこと言われてもって感じですよね。。。

大丈夫です！！デザインも、プログラミングも一部の天才（佐藤可士和さんや、水野学さん）を除いて、誰でも習得可能です！！

「普通とは、いいものがわかること。普通とは、悪いものがわかるということ。」　センスは知識から　水野学
センスは知識からはじまる 単行本 – 2014/4/18水野 学 (著)　★★★★☆

センスとは、普通がわかり、モノの良しあしがわかることです。だから、センスは身に着けることができます！
自分も最初は全然できませんでしたし、今もまだまだです！
それでも、コツコツ積み上げてきた知識を共有できればと思っています！！
それでは、4年半の勉強ノウハウを凝縮して、成長できた方法だけをお伝えします。

• step１プロゲイトでHTML・CSS・Javascript・JQueryを学習
• step２photoshop・illustratorでバナーのトレース
• step３サイトの模写5本
• step４架空のサイトを作る
• step５ポートフォリオサイトを作る
• step６ランサーズさんのコンペやプロジェクトに応募する

step１プロゲイトでHTML・CSS・Javascript・JQueryを学習

HTML・CSS→初級編、中級編、上級編、フレックスボックス編を学習

※一周してなんとなくわかればオッケーです。わからなくなったら、グーグル検索してみましょう。
例えば、パディングとマージンの違いがわからない→パディング　マージン　違い　で検索する感じです。

Javascript→JavaScript III まででオッケーです。

※JavaScript III以降はフロントエンジニア（プログラマー）になりたい人向けの講座なので、興味があったらやる感じで
オッケーです。Javascriptは難しいので、後回しでも大丈夫。なんとなく、関数の処理やくり返し処理を理解できたら、
次に進みましょう。

JQuery→上級編まで終わらせましょう。

※webデザイナーはJQueryをメインで使います。なので、ここは理解しておきましょう。特に、クリックイベントや
CSSメソッド、クラス（cssで使用する）を付け替えたりする処理をよく使うので、学習するのがおすすめです。
一周したら、オッケーです。わからないところは、メモっておいてグーグル検索して調べてみましょう。

step２photoshop・illustratorでバナーのトレース

バナーを10本ほどトレースしてみましょう!バナーをトレースることで、作る技術とデザインを
見る技術が身につきます。どこを注意すればいいかはコツがあるので、後ほど伝えます。
まずは、ソフトの使い方になれるのと、デザインに触れましょう！

上の作例は、実際にランサーズのコンペで当選された方のものになります。このレベルが作れるようになれると、お金が稼げます！

step３サイトの模写5本

デザインが作れるようになってきたら、サイトの模写をやってみましょう。
以下のサイトの模写がおすすめです。

・初級編　FLOWER｜かわいいが届く、ずっと無料のお花便　
学べること レスポンシブデザイン 画像素材を用いてのコーディング flexboxの使い方

・初級編　LP型 デイトラの無料練習素材
学べること PC版とスマホ版のコーディング　画像素材を使ってのコーディング　レスポンシブデザイン

・中級編　圧倒的に安い英会話スクール・英会話教室のリンゲージ

・中級編（ちょっと難しいです。。。）　蒼之建設
学べること レスポンシブデザイン 画像素材を用いてのコーディング hoverの使い方

・上級編（これができたら実務レベルです）　【LP型】ISARA
学べること 最近のLPに使用されている技術全般　ボリュームのあるコーディング技術

step４架空のサイトを作る

模写ができるようになったら、架空のサイトを作ってみましょう。
飲食店や料理教室、コーポレートサイトなど好きなジャンルから選んで架空のサイトを作ります。
ここでは、作る技術を使って、実際に収益を上げるにはどうすればいいのかを考えながら作るの
がおすすめです。ウェブサイトを作る目的は、お客さんに来店してもらったり、お問い合わせを
もらうことなので、その目的を達成できるようにデザイン＝設計します。
ちょっと難しいですが、ヒアリングの仕方やターゲットの決め方、コンセプトの決め方を丁寧に
教えるので安心してください。無理せずコツコツ行きましょう！！

step５ポートフォリオサイトを作る

自分の作ったサイトを載せるポートフォリオサイト（自分の作品集）を作ります。
ここまで来たら、案件受注まであと一歩です。作る技術はあるので、あとはクラウドソーシング
で案件をどうやって作るのか、考えるフェーズに入ります。
ポートフォリオサイトはWordpressを使う人もいますが、セキュリティや更新を頻繁におこなう
必要があったり、ＰHPというプログラミング言語を学習する必要があるので、ちょっと難しいです。
そのため、ＪimdoというＣＭＳ(ブログなどをつくれるさーびす）を使って作るのがおすすめです。
HTMLを書く必要がなく、ドメイン（自分のサイトのURL）を簡単で無料に取得できるので
おすすめです。Ｊimdoでのサイトの作り方も教えるので安心してください。
コツコツ行きましょう。

step６ランサーズさんのコンペやプロジェクトに応募する

クラウドソーシングサイトでは、ランサーズさんがおすすめです。サービスが親切で、
クライアントの質がいいので、ここで修業しましょう。いま、自分がここにいる感じです。
自分はここにくるまで、4年かかりました。でも、遠回りをしたり、寄り道をしたりしています。
皆さんなら、もっと早く、ここまで来れるとおもいます。コツコツ積み上げていきましょう！

センスは知識からはじまる 単行本 – 2014/4/18水野 学 (著)　★★★★☆
Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 単行本 – 2017/6/16　★★★★☆
配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集 単行本 – 2019/12/20　たじま ちはる (著)　★★★★☆
けっきょく、よはく。 余白を活かしたデザインレイアウトの本 単行本 – 2018/7/20　ingectar-e (著) ★★★★☆
【Amazon.co.jp 限定】 配色アイデア手帖 めくって見つける新しいデザインの本[完全保存版] (DL特典: 厳選! ポケット配色アイデア手帖) 単行本（ソフトカバー） – 2017/12/16　桜井 輝子 (著)　★★★★☆
いちばんよくわかるWebデザインの基本きちんと入門　レイアウト／配色／写真／タイポグラフィ／最新テクニック Kindle版伊藤 庄平 (著), 益子 貴寛 (著), 久保 知己 (著), 宮田 優希 (著), 伊藤 由暁 (著) 形式: Kindle版　★★★★☆
jQuery標準デザイン講座 大型本 – 2015/12/16　神田 幸恵 (著)　★★★★☆