WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
今回はWeb制作の学習を進める上で必要となる「ロードマップ」について、ロードマップ自体の説明から作成方法まで徹底的に解説していきます。
Web制作会社が完全監修しているものになりますので、皆さんの今後の学習に役立つ内容になっています。
しっかりと熟読して「副業」「フリーランス」への第一歩を踏み出しましょう!
最後にはロードマップの作成テンプレートもございますので、ぜひご利用ください。
ロードマップとは、現状をスタート地点に設定し、実現したい将来や達成したい目標をゴールに設定した「計画表」を指します。スタートからゴールまでの間に小さな目標を時系列に設定していくことで、達成したいゴールまでに必要な要素を整理・可視化することに役立ちます。プログラミングを本格的に学習していく前に、「ロードマップ」を作成することをおすすめします。今回は、「月10万円稼ぎたい」という方のロードマップの一例を作成します。
※ あくまで一例ですので、目標を絶対に達成するという保証をするものではありません。
ロードマップを作成する際には以下の要素を組み込みます。
「月10万円稼ぎたい」という目標を例に挙げ、どのような計画で達成させていくかについて、ロードマップをご紹介しながら説明していきます。
まずは、IT業界で常識となる知識に関してインプットしていきましょう。
クライアントとの打ち合わせや面接の場面で、一般常識とされている知識を理解していないと「信用」を得ることができません。また、言語の学習を進めていく中でも解説の用語が理解できないと、手戻りが発生します。
実際に言語の学習をスタートする前に必ず学習するようにしましょう。
WithCodeでは、「Webについて」や「SEOについて」など、プログラミング学習を進める上で必須の用語を図解付きで網羅しています。
コーディングするためのエディタの環境を設定していきましょう。
エディタ(editor)とは、「編集者」という意味を持ちます。しかしながら、IT業界においてエディタというのは、人を表すのではなくテキストデータ(文字/ファイル/データなど)の編集を行うためのソフトのことを指します。エディタは主に、ファイルを作成したり、テキストデータの入力や編集、保存するために使用されます。
WithCodeでは、「VS Code」を用いてコーディングしやすい環境を構築していきます。
VS Codeは他エディタに比べて軽量であることやコーディングしやすくする拡張機能が充実しているため、多くのユーザーに愛用されています。
こちらのリンク(https://visualstudio.microsoft.com/ja/)からダウンロードすることができます。
他にも、「サクラエディタ」「WinMerge」「秀丸エディタ」など様々なエディタが存在します。ご自身のPC環境・目的に沿って最適なエディタを選びましょう。
コーディング環境が設定できた後は、HTML/CSSをインプットしていきましょう。
HTML/CSSは「マークアップ言語」と呼ばれ、厳密にはプログラミング言語ではありませんが、プログラミング学習の入り口としてHTML/CSSを学習すること自体は間違っていません。なぜならば、HTML/CSSはWebページなどを作成する際に用いられており、ユーザーが目にする部分をコーディングします。そのため、変化がダイレクトでわかるため、変化が目に見えてわかりやすいという特徴があります。また、HTML/CSSは厳密にはプログラミング言語ではないため、数学的な処理を記載する必要がない点も学習難易度が低い理由です。
言い換えれば、HTML/CSSのマスターなくして多言語を習得していくことはほぼ不可能と言えます。フロントエンドがメインとなるWeb制作において、HTML/CSSの記述が7~8割を占めるため、必ず習得する必要があります。
HTMLとは、「Hyper Text Markup Language」の略称で、Web上の文字を記述するためにマークアップしていく言語です。そして、Webページのコンテンツが含まれている「テキスト形式のファイル」はHTMLで表示されています。一般的な文書ソフトでは、フォントのサイズや配置位置といった表示方法を指定して、どれが見出しでどれが本文かを区別します。しかし、HTMLでは表示方法は一切指定しません。HTMLは「見出し」「段落」などの文書を構成している要素に印を付け、それぞれが何を示しているかを区別するものとなります。
例えば、以下のようなHTMLタグを使って「WithCode」と表示するページを作成することができます。
<!DOCTYPE html>
<html>
<head>
<title>WithCode</title>
</head>
<body>
<h1>WithCode</h1>
</body>
</html>
Webページ上では下記のように表示されます。
実行結果
CSSは、HTMLで表したWebページの各要素に対し、どのように表示するかを指定する言語です。Webページのレイアウトを整えるにはCSSを使用します。HTMLではどこからどこまでが(文書の構成要素として)何であるかを示し、そのHTMLで示された各範囲(要素)の表示指定を行うのがCSSの役割です。この場合のHTMLの言語はマークアップ言語と言い、CSSのような言語はスタイルシート言語と呼ばれています。
以下、HTMLをCSSで装飾したコードの例となります。
<h1>WithCode</h1>
<p>【WithCode(ウィズコード)】Web制作会社が開発した実践的なカリキュラム。卒業後からWeb制作会社の案件を担当しながら稼ぐ環境を提供する唯一のプログラミングスクールです。</p>
h1 {
font-size: 24px;
color: red;
}
p {
font-size: 16px;
color: blue;
}
Webページ上では下記のように表示されます。
実行結果
WithCodeでは、HTML/CSSそれぞれのカリキュラムだけでなく、実際にWebページを作成しながら、現役フリーランスがフィードバックする実践的なカリキュラムとなっております。
HTML/CSSのインプットができた後は、デザインカンプ(モックアップ)を作成するためのツールの使用方法を学習しましょう。
デザインカンプ(モックアップ)とは、制作物においてデザインやレイアウトを含めた仕上がりを具体的に示すために作られる完成見本のことです。デザインカンプはサイトの目的に合わせて作成します。
Web制作において、デザインの比重は非常に高いものになりますので、スムーズに扱えるレベルまでマスターしておきましょう。
デザインカンプを作成する代表的なツールとしては、「Figma(https://www.figma.com/ja/)」が多く使用されています。
その他には、「Adobe XD(https://helpx.adobe.com/jp/support/xd.html)」が挙げられます。
クライアントからの指示や現場で使用されているツールに対応できるようにしておきましょう。
※ Adobe XDは単体でのダウンロードができなくなっているので、現場ではFigmaが使用される場面が多くなっています。
WithCodeでは、「Figma」「AdobeXD」の2つのツールについて、基本的な機能から上記2ツールを使用したデザインカンプの作成までを盛り込んだカリキュラムになります。
HTML/CSSとデザインツールの扱い方をインプットした後は、インプットした知識をアウトプットしていきましょう。このアウトプットの段階では、CSS設計などを意識しながらコーディングしていくことが重要になります。
初期段階では、非常にシンプルなものでも構いません。例として、ご自身のポートフォリオを作成してみても良いかと思います。
ポートフォリオとは、日本語に直訳すると「紙ばさみ」「折りかばん」「書類入れ」という意味です。つまり「書類を運ぶためのケース」のことを表し、個々の書類を別々に扱うのではなく、書類全体をひとつの物として扱うという意味を持っています。現代では、おもに「金融・投資系」「教育系」「クリエイター系」で、それぞれ慣用的に異なる意味を持つ言葉として定着しています。Web制作の分野ではクリエイター系に当てはまり、「作品集」であり、自分の職種(あるいは転職希望職種)における実績や力量を評価してもらうために作成する資料となります。
また、デザインに関しては様々なサイトを見ながらインプットしたデザインツールを使用してデザインカンプを作成してみましょう。
このアウトプットを通じて、HTML/CSSやデザインツールの知識を定着させていきます。
WithCodeでは、ランディングページやホームページを何度も実践形式で作成することにより、デザイン/コーディングスキルを向上させるカリキュラム構成となっています。
HTML/CSSが8~9割定着した後は、Sassに関して学習していきましょう。
Sassとは、CSSの拡張言語でメンテナンス性が向上することに加え、コーディングスピードを上げることができます。一方で、デメリットとしては「環境構築(コンパイル)が必要になる」という点が挙げられます。WithCodeでは、DartJS Sass Compiler and Sass Watcherでの環境構築手順を全て画像付きで解説していますので、ご安心ください。
Sassの環境構築、インプットが終了した後は、実際にSassを記述しながら知識を定着させていきましょう。
Sass特有のネストの書き方や変数/引数などを意識することが重要となります。
徐々に慣れてきたら、「コーディングスピード」が身に付いてくるはずです。
WithCodeでは、実際に自分がCSSで記述したホームページをSassで置き換えるという課題を通じ習熟度を増やすカリキュラムとなっております。
この段階で、お馴染みの「JavaScript」と「jQuery」を学習していきます。
独学で学習を進めている方はJavaScriptとjQueryを比較的早い段階で学習してしまう傾向がありますが、その段階での学習は推奨しません。
プログラミング知識のベースが整った後に学習しないと、JavaScriptとjQueryがどのような言語であるのかを理解できないはずです。
ここでは、JavaScriptとjQueryの違いを確認しながら基礎的な文法からインプットしていきましょう。
JavaScriptとは、Webサイトを表示するためにフロント側で動くプログラミング言語です。動的なページを作成する言語として紹介されることが多いですが、できることの幅が非常に広く、アプリケーションやゲーム開発、サーバーサイドで動作するプログラムも実装が可能となっています。
jQueryとは、JavaScriptで記述されたものをさらに使い易くされているもので、一般的には「ライブラリ」と呼ばれています。そのため、JavaScriptより視覚的にも分かりやすくなっています。
基礎的な文法がインプットできた後は、Web制作で使用されているプログラムを確認しながら、Webページに動きを加えていきましょう。
文法がしっかりと理解できている状態であれば、それぞれのプログラムが「何を実行しているものなのか」を理解できるはずです。
また、jQueryには多くのプラグインが存在しているので、ご自身で調べながら実装してみても良いかと思います。
プラグインとは、「拡張機能」のことで、WebブラウザやCMSなどに機能を追加し、使いやすくするためのプログラムがプラグインです。例えば、「Google Chrom」にも、検索結果の一覧ページに各ページのプレビュー画像を表示したり、全画面のスクリーンショットを撮れるようにしたりなど、様々なプラグインがあります。
jQuery プラグイン一覧:
https://goworkship.com/magazine/jquery-plugin/
Web制作の集大成とも言えるWordPressの学習に入っていきます。
WordPressはPHPで構築されているCMS(Contents Management System)となるためPHPの基礎的な文法を学習する必要があります。
PHPとは、PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。特徴として、HTMLの中に埋め込む形で記述することができます。主に、問い合わせフォームや掲示板などユーザーのアクションにより表示内容が変わるWebサイトで使用されています。
CMSとは、Webサイトを運営するにあたって、HTMLやCSSの書き換えなど面倒で手間のかかる作業をしなくても、管理画面を通して記事や画像を登録・更新できるシステムのことを指します。Webサイトの中のリンクやナビゲーション、新着情報なども簡単に更新できるようになるため、Webサイト運営のコストを下げることができます。
ただ、WordPressで使用するPHPに関しては、主にテンプレートタグというものを使用するため、Laravelなどのフレームワークを使用するWeb開発と比べ、詳細な部分までの理解は必要ありません。テンプレートタグを扱えることを目標に学習していきましょう。
テンプレートタグとは、WordPressで定義されたPHPの関数です。例えば、ブログサイト内にて、新しく投稿された順に記事をリスト形式で自動で表示させるなどの処理を自動化してくれるのがテンプレートタグです。
インプットしたWordPressやPHPに関する知識を活かして、コーディングしたサイトをPHPで書き換える方法を学習していきましょう。
実際に案件となるのは、既存テーマをアレンジするものやコーディングしたファイルをオリジナルテーマとしてWordPressに組み込むものが大半を占めてきます。この部分は、開発に近い学習にはなりますのでレベルは上がりますが、しっかり理解していくようにしましょう。
また、WithCodeでは、上記加えてWordPressでECサイトを構築する方法まで詳細に学んでいきます。
フリーランスで活動する手順としては、以下になります。
クライアントはその方が持つポートフォリオを見た後に「仕事を任せられるかどうか」を判断します。
そのため、より魅力的に映るポートフォリオを作成するようにしましょう。
Web制作の学習の中で、習得したJavaScriptやjQuery、WordPressなどの知識を積極的にポートフォリオに反映させていきましょう。
ポートフォリオの中で主に見られる事項は下記になります。
これらの点を意識しながらポートフォリオをブラッシュアップさせていきましょう。
クライアントワークとは、クライアント(依頼主・顧客・取引先)からの依頼を受け、目的・要望に沿った成果物を決められた期間内に作成し、納品することです。流れとしては、営業活動→ミーティング・ヒアリング→提案→作成→納品といった流れになります。自主制作とは異なり、契約に基づいて行う業務になります。
座学では学ぶことが難しいものになりますが、クライアントワークに関しては下記項目を意識して学習していきましょう。
クライアントワークに関して学習し終えた後は、3~5件ほど公開可能な実績作りを始めていきましょう。
クライアントはポートフォリオ内に掲載している実績を確認して、その方が持つスキルレベルを判断します。
そのため、この段階では自らの人脈や簡単な営業活動を通じて、無料でも良いので実案件に取り組んでみましょう。
※ 練習用のサイトを実績として掲載している方も見受けられますが、練習用のサイトではスキルレベルを判断できないため、基本的には「実案件」を掲載するようにしましょう。
特に学習後からの初案件が獲得できないケースが非常に多いです。WithCodeでは、卒業テストで一定以上の点数を取ると、実案件を提供する案件サポートを行っております。これにより、公開可能な実績を作ることにつながり、「学習」だけでなく「稼ぐ」までを徹底的にサポートいたします。
公開可能な実績をポートフォリオ内に掲載した後は、クラウドソーシングサイトに登録しましょう。
クラウドソーシングとは、企業がインターネット上で不特定多数に業務を発注する業務形態です。
下記に有名なクラウドソーシングのサイトを例として取り上げていますので、公開されている案件概要や倍率、単価感などを比較検証してみてください。
営業活動を始めるにあたり、クラウドソーシングサイトの下記項目に関して記載しましょう。
上記項目を記載する際には、「クライアントの視点に立つ」という意識が重要になります。
ネット上でやり取りを行うクラウドソーシングでは、クライアントは応募者の性格やスキルを詳細に把握することは難しく、応募者の情報はプロフィールや提案文からでしか判断することができません。
クライアントに安心して仕事を任せてもらえる信頼感や安心感、スキルなど様々な観点を考慮する必要があります。
プロフィールは、実績や稼働可能時間を必ず記載しましょう。また、可能な限り端的に論理的に記載しましょう。なぜならば、クラウドソーシングサイトでは、担当者は複数の応募を比べ発注者を選定することが多いです。そのため冗長なプロフィールは読まれない可能性が高いです。また、相手側の視点に立っていないという印象を与えてしまいかねません。
提案文には、「クライアントの要望や状況」「対応業務」を改めて記載しましょう。また、案件に対する自身の強みやその根拠(実績等)を記載し、相手からの信頼を得ることを心掛けましょう。
上記スキルでWeb制作の案件を獲得し、「月10万円を稼ぐ」という目標は達成できるはずです。
営業活動を行いながら更なるスキルの向上を目指して下記スキルを学習することで、より幅の広い案件を請け負うことができます。
今回は、ロードマップの説明から、「10万円」を稼ぐための具体的なロードマップ作成方法について解説しました。
WithCodeでは、ロードマップで紹介した内容を余すことなく高い質で学習できる環境を整えています。
特に案件サポートなどを通じて、最終目標である「稼げる人材」を育成するという点に強みを持っていますので、副業・フリーランスに興味を持っている方は無料カウンセリングで気軽にご相談ください。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!
↓
関連する記事はまだ見つかりませんでした。
公式サイト より
今すぐ
無料カウンセリング
を予約!