Progateから実務までにやるべきこと【Web制作案件までの具体的なロードマップ 】

ポイント①網羅的に学べる

まず出版年度が2019年で内容的にも新しいです。flex-boxからCSS Gridにも対応し、内容にも過不足がありません。

ポイント②内容が優しく挫折しない

個人的に一番いいと思ったポイントで、おすすめできる所以です。

著者のManaさんはWebクリエイターボックスで情報発信されているのですが、とにかく初心者向けに優しい解説をされており、一冊ですべて身につくHTML&CSSとwebデザイン入門講座に置いても文体や表現が機械的でなくあったかみがあるのがよきだなと。

ポイント③作っていても楽しい

従来のHTML本だと、作る完成物のデザインが微妙でモチベーションが上がりづらいという問題があったのですが、

一冊ですべて身につくHTML&CSSとwebデザイン入門講座では作るサイトもデザインが今時なのと、ゆるふわな感じなので、作っていてモチベーションが上がります。

目安期間；一週間〜二週間

ようこちゃん

終わりました！

しょーご

よーしいいぞー！次行こうか！

模写コーディング初級編3つ

ここから「デザインカンプからのコーディング」に挑戦していきます。

模写コーディングは１つ目が肝心！

しょーご

一番最初から難易度が合わないものを模写するとモチベーションが下がりやすいからね、最初に取り組むもののレベル感が大切だよ！

https://note.com/chizumi_/n/nf0ff69e550c0
ちづみさんコーディングの練習をしよう！〜その１〜

https://note.com/samuraibrass/n/n2108f5f03dd8
しょーご（投稿者）模写コーディング練習でHTML,CSSを定着させよう！【初級編】

模写コーディング2つ目以降は少し難しいものを

最初に行ったものより少し難易度の高いものをやるといいです。

https://crestadesign.org/cording-first/
クリ★スタ【コーディング課題】XDからコーディングをしよう【初級編】

https://note.com/chizumi_/n/n43e918e99656
コーディングの練習をしよう〜その２〜

ピクセルパーフェクトを前提にする！

教えてくれたりコードレビューが存在しない独学の場合、デザインデータを忠実に再現するのが代々大前提になります。

実務でデザインデータ通りにコーディングを行えないと、普通に差し戻しを受けます。

模写コーディングを３つ行ったころに慣れてくる

HTML,CSSはとにかく書きまくって試行錯誤することが一番成長の近道です。

3つほどこなすことで、だいぶ定着してくると思います。このあとのSassやjQueryをスムーズに身に付けるために、ここでHTML,CSSを固めておくことが重要です。

目安期間；1ヶ月以内

ゆうすけくん

できましたー

しょーご

よし！ここまででHTML,CSSの基礎は身についたね！次に行こうか

jQueryの学習方法

ここでサイトに動くをつけていくためのjQueryの学習を進めていきます。jQueryを使わずにこなせる案件は非常に限られてくるため、

案件をとるために必須になります。

まずはProgateで学習する

上級編までさらっとやることで大まかに理解をすることができます。

jQuery標準デザイン講座

jQueryで何ができるのかというのと、書き方に慣れることを目指します。

書き方を暗記するというより、思考の流れに慣れるという感じです。

jQuery標準デザイン講座はwebサイトでよく使われるコンポーネントを中心に学習することができるので、モチベ高く続けられて一押しの本です。

完璧を目指さない

すべてを完璧に理解することは不可能なので、全体的に眺めて書いてみたら次に進んでOK。

ただ見るだけではなくて、書くことが大事です。

jQuery標準デザイン講座

posted with ヨメレバ

神田幸恵翔泳社 2015年12月15日

ポイント

jQueryをどこまで理解すればいいかは、ゴールがありません。目安としては教本に書いてある流れが自分で一からかけなくとも、「見て全て理解できる」なら先に進んでいいかと思います。
書く練習はこのあとします。

目安期間；二週間程度

【2020年最新】web制作のjQuery,JavaScriptの勉強方法まとめ【一年半思考錯誤した】

Sassの学習方法

次にSassの学習を行っていきます。ほとんどのコーディング案件でSassが活用されているため、2020年現在学習はほぼ必須となっています。

まずはProgate

Sassコースで結構基礎的なことが網羅できるため、Progateで学習をしてください。

Sassの環境構築を行う

VSCodeにEasy Sassを導入し、コンパイルできるようにしてください。

Sassはそのままだとブラウザが読み込めないため、CSSにコンパイルしたものを読み込む必要があるのです。

cssをSassに置き換えてみる

最初に模写コーディングしたもののcssをSassに置き換えてみてください。

その際に絶対に利用して欲しいSassの機能があるので紹介します。

詳しくはSassの教科書かネットで調べてみてください。私自身もお世話になった本です。

Web制作者のためのSassの教科書改訂2版

posted with ヨメレバ

平澤隆/森田壮インプレス 2017年09月

CSS設計完全ガイド　〜詳細解説＋実践的モジュール集

模写コーディング中級編2つ

ではここまでで学んだSassとjQueryを活用して模写してみましょう！

以下の紹介のもの以外をされる場合は、jQueryを活用する教材を選んでください。

https://note.com/samuraibrass/n/nd1748e42934e
しょーご（わい）コーディング練習用のXDデザインカンプ配布します

https://crestadesign.org/cording-third/
クリ★スタ【コーディング課題】XDからコーディングをしよう【上級編】

css命名規則BEMを取り入れる

css命名規則は保守性の面から大事です。

css命名規則はBEMがわかりやすい＆一番使われているということから、BEMがわかりやすいかと思います。

このあたりはcss設計完全ガイドが参考になります。全コーダーがいますぐ買うべき神本なので、ぜひ購入してみてみてください。

cssの本で最高峰の本で、初心者からベテランまで有用の本です。本当に神本です。

posted with ヨメレバ

半田惇志技術評論社 2020年02月27日

月額880円からの高性能クラウド型レンタルサーバー

jQuery,JSのライブラリ（プラグイン）を使ってみる

実務ではプラグインを利用して機能実装することが非常に多いです。ほぼ毎回です。

それを模写コーディングの段階から取り入れてみましょう。

例えば先ほど紹介させていただいた私のコーディング教材では「swiper」というプラグインを利用前提にしています。

swiperは実務でスライダーを実装する際にはほぼ毎回使用することになります。制作会社の友人もこれしか使っていないと言っているほどですw

ここで作ったものは実績公開する前提なので、公開許可が出ているものを選定してください。

目安期間：三週間程度

ポートフォリオとして公開する

ポートフォリオとして機能させるにはネットで動く状態で見せる必要があります。

ここまで作成した静的サイト2つをNetlifyやGithub Pagesで無料公開できますので、公開しちゃいましょう。

公開方法については動画で述べています。

目安期間；一日

閑話休題：ブログをアップしよう

ブログを実験場練習場として活用する

ようこちゃん

ここでブログですか？

しょーご

web制作者を目指すなら、自分のブログを運営しておくことは結構プラスになるんだよ！

webサイトを世界に公開する手順を皆さんはご存知でしょうか？

独自ドメインを取得し
サーバーを契約して取得したドメインと紐付け
全世界にwebサイトを公開して
できればブロックエディタで記事を書いてみる

ブログをアップする狙い

実務では公開までを代行することがあるため

例えば美容室のサイトを作ることになったとして、オーナーさんにコーディングしたデータを渡して「あとよろしく！！」なんてことにはならないわけです。

当然こちら側でアップロードまでしなければなりません。その場合に自分でサイトを公開した経験がないと苦戦することになります。

不審がられるかも知れません。

そのため自分でブログをアップロードすることでその練習をします。ブログは実験場です。

ブロックエディタなどWordPressのシステムに早めに慣れておく

WordPressのブロックエディタは仕様に慣れが必要です。

当然非ITのお客様にお渡しする場合、説明書を添付したり説明する必要があるわけです。

また昨今はブロックエディタを活用した開発が盛んで、ブロックでページを組み上げていく流れができています。

web制作者としてもブロックエディタを自分で活用しておくことはとても重要です。

このブログも最近クラシックエディタではなくブロックエディタで書いていますが、執筆が非常に早くなりました。

Google Analyticsやサーチコンソール導入までできると良い

お客さんのサイトを納品する場合、大抵の場合はGoogle Analyticsやサーチコンソールを利用したサイトマップの送信までやることが多いです。

自分のブログで練習できますし、どうせ導入するなら分析しがいのある自分のブログに入れてPDCA回せば、マーケティングも学べて一石二鳥です。

ちなみに私はmixhost というレンタルサーバーのスタンダードプランを契約しています。

web制作をする上で、自分のサーバー上でテスト環境を用意することがままあるため、１つレンタルサーバーを契約しておくことが重要です。

このブログもmixhost で稼働していますが、HTTP/3という最先端の通信方式を2020/06現在国内で唯一用いているため、非常に高速でありがたい限りです。

以下のMixhostなどでサーバーを借りてみて、ブログを開設してみましょう！（スタンダードで全然大丈夫です）

仮に他のサーバーを検討する場合も、低価格だと「WordPressが動かないサーバー」も存在するため、お気をつけください。

ProgateでPHP1~4まで

PHPはWordPressの基礎部分

WordPressはPHPの基礎を知らないと完全に呪文と化してしまうため、Progateをまず軽く回しておくといいです。

オブジェクト指向は雰囲気だけでいい

クラスやコンストラクタ、インスタンスなど出てきますが、雰囲気だけでいいです。

完全に理解は無理なので、つまずいたら先に進んだ方がいいです。

また、道場コースも行う必要はありません。

私もProgateのPHPコースで結構時間を使ってしまいました。確実に抑えて欲しいのは「PHPコースの１」だけですので、その後は流してください。ただWordPressはPHPのクラスの概念がわかると理解が容易になるため行って欲しいのです。

目安期間：一週間

WordPressレッスンブック5.X対応版

WordPressの基礎を一番優しく

WordPressの書籍を10冊以上みてきましたが、WordPressレッスンブックを導入にするとわかりやすくていいです。

周りのフリーランスに聞いても、評判がいいですし、5.X版になってから内容もブラッシュアップされ、カバー範囲が広くなりました。

グーテンベルク対応教材

WordPress本は2019年より前の出版のものはブロックエディタに未対応なのですが、この本は2019年11月に出ているので、

内容も新しいです。

WordPressレッスンブック 5.x対応版

posted with ヨメレバ

エビスコムソシム 2019年11月14日

ビジネスサイトを作って学ぶWordPressの教科書

WordPress本購入時はグーテンベルク対応か要確認

目安期間：一週間〜二週間

ビジネスサイトを作って学ぶ WordPressの教科書Ver5.x対応版

しょーご

この本なんですが、、WordPress開発国内リーディングカンパニーのプライムストラテジーが監修しています！

WordPressの応用まで

WordPressの教科書では、基本的なテンプレートタグの使い方だけではなく、PHPの知識も結構使うので、なかなか鍛えられます。

どうしてもPHPの知識がないとコピペ＆応用が聞かない人材になってしまうので、プログラミングチックではありますが、ここで慣れておきましょう。

ビジネスサイトという題材のよさ

ビジネスサイト（コーポレートサイト）が案件としては一番多いのと、プライムストラテジーが実勢に仕事で制作しているレベル感のものができると公言されているので、

非常に実用的と言えます。

かなり難しいので、少しずつ進めていきましょー。ここは時間をかけて大丈夫です。

posted with ヨメレバ

プライム・ストラテジー/カイエンソシム 2019年11月