こんにちは！フリーランスでWebサイト制作している、ぴろきんちょす（@pirokinchos）です。
今回は
このような疑問をお持ちのあなたのために、Webコーダーになるための5ステップをご紹介します！
Webコーダーの職種についてわからない方は、こちらの記事を読んでみてください。
目次
目標設定：Webコーダーになる基準は「自走力」
Webコーダーになるために、まずは目標設定をしましょう。
ぼくが過去に設定した目標は、自走できるようにすること。
知識をある程度身につけて、作業する時にわからないところがあれば検索する。
エラーがあればそれを乗り越えるために考えたり、調べたり。
試行錯誤して自分の力で成果物を作っていくことがここでいう「自走」です。
これはどのスキルでも同じ。
まずは、自走できるようになることを目標に、Webコーダーのスキルを身につけていきましょう。
ステップ1：Webサイトの種類を知る
Webサイト制作に関する仕事がしたいのなら、まずは商品を知ることから。
ここでいう「商品」はWebサイトです。
Webサイトをたくさん見て、傾向を知ることが大切。
Webサイトの種類は主にこんな感じ。
- コーポレートサイト
- Webメディア
- ランディングページ
- 個人のポートフォリオサイト
- 企業の採用サイト
- ECサイト
Webサイトの傾向、種類がわかれば、Webサイトには最低限どんなページが必要なのか、どんな企業がどんなWebサイトをもっているのかなどを知ることができます。
そしてそれらの知識を今後の実務やスキルアップに役立てることができます。
Webデザインギャラリーで幅広くWebサイトを観察
そういった質問がよく寄せられるのですが、ぼくがおすすめするのが、「Webデザインギャラリー」です。
「Webデザインギャラリー」とは、様々な企業、職種のWebサイトの一覧サイトです。
業界ごと、デザインごと（色やレイアウト）に検索できたりするので業種ごとのデザインの傾向を見るのにはもってこいのサイトです。
ぼくがよく見るのは以下の三つ。
インスピレーション！
Webサイトにはどんなページ・パーツがあるかを調べる
Webサイトを観察するときに着目して欲しいのが、「ページ」と「パーツ」です。
そのサイトの中にどんなページがあるのか、それらのページにどんなパーツがあるのかを見ていくと理解が深まります。
例えばWebサイトには
- トップページ
- 記事（投稿）一覧ページ
- 記事（投稿）のページ
- プライバシーポリシー
- お問い合わせページ
- 会社概要ページ
などさまざまなページがあります。
そのページのなかで共通したパーツ、異なるパーツがあります。
ここで言う「共通パーツ」とはサイト内のどのページでも同じように表示されるパーツで、「異なるパーツ」はページごとに違った表示がされるパーツです。
例えばこんな感じ。
- 共通パーツ
- ヘッダー
- フッター
- 異なるパーツ
- サイドバーの有無
- ページのコンテンツ部分
さまざまなページをパーツごとに細分化できれば、次のステップのコーディングが捗ります。
ステップ2：静的ページの作成
静的ページとは
静的サイトとは、投稿やお問い合わせなどの機能が一切ないページのことをいいます。
機能がないので、データベースを必要としません。
また、サーバーがなくてもブラウザで表示することができます。
スキルはHTML/CSS、JavaScriptさえできれば作成できます。
Webプログラミング学習の登竜門なので、これらのスキルは必須事項となります。
デザインやサイト構成を決定
Webサイトについてある程度理解したら、どこかのサイトを真似して作ってみましょう。
今の時点では自分ではデザインができないと思うので、既存のサイトを真似する形になります。
どんなデザインなのかはもちろん、どんなページがあるのか、どんなページがあるのかをしっかり観察しましょう。
Webサイトの選定は、先に述べた、Webデザインギャラリーから選択するのがいいでしょう。
素材を用意
デザインやサイト構成が決まったら、サイトに胃使用する素材画像（動画）を用意する必要があります。
これは自分で撮った写真を使うのも一つの手ですが、フォトストックなどを使うのがおすすめ。
ぼくがよく使用するのは無料で画像が使えるUnsplashです。
基本的に無料で使えますが、ライセンスは必ず読み、規約に則った形で使用しましょう。
HTML / CSSで形を作り、JavaScriptで動きをつける
ここまできてやっと「コーディング」作業。
自分が考えたデザインとサイト構成をもとにHTML / CSS、JavaScriptで形作っていきます。
コーディングをしている時は、おそらく十中八九はどこかしらでつまづきます。
そんな時は検索検索。
トライアンドエラーで自分の思い通りのサイトを作っていきましょう。
全て覚えられないので、「ググればなんとかなる精神」でやっていきましょう。
ステップ3：サーバーを構築
「サーバー」とは？
サーバーとは、Webサイトを表示させるために必要な土台となるものです。
世界中で公開されている全てのWebサイトはサーバーの上で動いています。
これがないとWebサイトは公開できません。
自分で作った静的サイトをサーバーに乗せて動かしてみましょう。
ローカルサーバーかレンタルサーバー
Web制作の勉強をする上で考えなければならないのが、どのサーバーにするのかです。
選択肢は主に2つ。
- ローカルサーバー
- レンタルサーバー
とにかく無料で勉強したいならローカルサーバーのみ
勉強のためにとりあえずサーバーが必要であればローカルサーバーで十分です。
ローカルサーバーを立てるなら
- MAMP
- XAMPP
- Docker
- Local by Flywheel
がおすすめです。
一部、自分で設定をいじったりをする必要があるので、そこも検索して自分のやりたい設定にしていきましょう。
実務に近い形を選ぶならレンタルサーバー
実務だとWebサイトを公開するためにサーバーが用意されています。
企業やチームによってさまざまですが、個人での開発ならレンタルサーバー一択になるでしょう。
実際に公開することになるので、FTPクライアントを使用してファイルをアップロード・ダウンロードする作業も伴ってきます。
また、SSLやリダイレクトの設定も実際に手を動かして学ぶことが可能。
さらにドメインを用意する必要があるので、サーバーとドメインの紐付けといったこともまなぶことができます。
月額、年額など、ランニングコストはかかってきますが、実務に近い形で学習できるので学習コストとして考えれば安いものです。
作成したWebサイトを実際に運用していって最終的に副業や学習のアウトプット先としてブログを書いたりもできます。
おすすめのサーバーはXserverです。
踏ん張っていきましょう。
ステップ4：CMSを組み込んで動的サイトにする
動的サイトとは？
「動的サイト」とは静的サイトに反して、投稿機能などがついているサイトです。
動的サイトはPHPやRubyなどの「サーバーサイド言語」という言語で書かれており、データベースの中身を表示させることができます。
サーバーサイド言語やデータベースにはサーバーが必要なので先に述べたローカルサーバーか、レンタルサーバーのどちらかをあらがじめ用意しておきましょう。
まずはCMSの王様、WordPressの理解から
現在、多くのWebサイトに「WordPress」というPHPで作られたCMSが使われています。
このWordPressなどのCMSを使用することで機能を持ったWebサイトを作成することが可能になります。
W3Techs によると、世界中のWebサイトの39%がWordPressを使用しており、CMSの中でのWordPressのシェアが63.7％であるとのこと。
よって、初学者はまず、WordPressを学ぶといいでしょう。
WordPressを実際にサイトに組み込む
実際に投稿したりページを生成するためには、ステップ2で作った静的サイトを動的サイトにしていく作業が必要になります。
俗に言う、「WordPressカスタマイズ」です。
WordPressカスタマイズには独特な作法があるのでブログ記事やドキュメント、本などで学ぶといいでしょう。
個人的にはこのサイトがまとめられていて、大変勉強になりました。
https://bazubu.com/wp-customize-7166.html
エラーは恐れずに前へ進んでいきましょう。
ステップ5：サーバーの設定も触れるようにしよう
サーバーの設定でよく触るのは
- .htaccess
- php.ini
- wp-config.php
でしょう。
これらを触ることによって、
- 常時SSL化
- wwwの有無を設定
- ファイルアップロードの上限設定
- 使用するデータベースの変更
などを行うことができます。
サーバーの知識が少しでもあると、転職活動やフリーランスの活動にきっと役立ちますよ！
ただ、エラーがでたら元に戻せばいいだけなんです。
場数を踏んで慣れていきましょう。
まとめ
今回の話をまとめると、Webコーダーになるための5ステップは以下です。
- Webサイトの種類を知る
- 静的ページの作成
- サーバーを構築
- CMSを組み込んで動的サイトにする
- サーバーの設定も触れるようにする
これらを学ぶためにスクールや経験者に教わるなど、体系的に学べる場を設けると学びが加速していきます。
Webコーダーへの道のりは長いですが、一緒に頑張っていきましょう。
会社員と比べて圧倒的に保障が少ない、個人で働くあなたのために。
リスクを最小化する為に絶対必要なサービスがFREENANCE(フリーナンス)です。
- 事故やウイルスによるトラブルの保障（最高5,000万円）
- 請求書の提示で報酬の即日払い
- ケガや病気の際の収入保障
といった誰にでもあり得る「もしも」のために備えるサービス。
しかも登録は無料。自分の身を守るために、要チェックです👇
