今回は本サイト（Local Port）を作成するにあたり必要なスキルをお伝えします。というのもWEB制作を学ぶ上で最初に目標にするのが自分のホームページを作成することだと思います。

私自身はWEB制作スキルを学び始める際、何のスキルをどのレベルまで学べば良いのか分からず、非常に悩んだ経験があり、、そこで、皆さんが同じ轍を踏まないように、必要なスキルをまとめたいと思います。

ちなみに、私が作ったサイトは今見ているこちらのページになります。
PC・スマホ・タブレット対応しておりまして、それぞれこんなデザインになります。

作成物：PC版サイト

作成にあたり、まずはPCサイトをベースに構成を考えてみました。スマホ全盛の時代ではありますが、PC版をベースにした理由は画面が大きい（＝1画面に表現できる情報量が一番多い）からです。情報量が多い分、網羅的に構成を考えることができます。

まずは全体としてどのように見せるかの構成を考えた上で、それよりも画面の小さいタブレット・スマホ版の構成にチューニングする方が個人的にやりやすいと思っております。

本サイトは「情報発信」を目的としておりますので、ブログ形式のコンテンツをわかりやすく一覧表示することを意識しました。具体的には、記事毎にイメージを掴んでもらえるよう、タイトル文を長めに設定した上で、画像を大きく表示する構成としております。

作成物：スマホ版サイト

PC版を作ったあとはスマホ版に移ります。しっかりとPC版を作成できていれば、この工程はだいぶ”ラク”だと思います。スマホ版作成の基本的な考え方は「引き算」です。網羅的に作成したPC版のコンテンツをスマホ画面に収まるように重要な要素以外はゴッソリと削ぎ落としていくイメージ。

個人的にはこの工程が一番好きです。そうして作ったのが以下のページです。メニューは一個一個表示せずにハンバーガーメニューとする。そしてブログ記事を前面に押し出しスライド表示するような形式としております。

作成物：タブレット版サイト

タブレット版は当初作成するつもりはありませんでした。そもそもタブレットを持っておらず、気にして無かったと言うのが正直なところになります。ただ、本サイトを作成した一週間後にiPadを購入したのですが、それで見てみるととPC版で表示されているのですが、タイトル文字が2行になってしまったり、カード画面の幅に妙な隙間が発生したりで、なんとなく気持ち悪い感じになってたので、すぐにタブレット対応の構成を検討しました。

本サイト（Local Port）作成に必要なスキル・レベル

ざっと必要なスキルとそれぞれのレベル感を以下に記載しております。
イメージ伝わりますでしょうか？

スキル	レベル感
HTML	自由に記載・修正を行うことができる
CSS	自由に記載・修正を行うことができる
j query	基本構造は理解しつつ、ググってコードを引用することができる
PHP	基本構造は理解しつつ、ググってコードを引用することができる
WordPress	上記スキルを総動員し、カスタムテーマを一から生成できる

　
基本的にはHTML・CSSを駆使してワードプレスの独自テーマを作成して、その中で要所要所でPHPを利用するイメージです。ただ、その際利用するPHPはググりながらコピペして利用するようなイメージですので、そこまで本格的な知識は必要ないです。以下にはそれぞれのレベルに到達するための勉強法についてザックリと記載できればと思います。

それぞれの勉強方法（概要）

細かく書いていくと長くなってしまいますので、ここではザックリとした勉強方法を記載しようと思います。詳しい学習方法やtipsについては、今後記事にしようと考えておりますので、お待ちください。

HTML・CSS：自由に記載・修正を行うことができる

上述の通り、本サイトはPC・スマホ・タブレットのそれぞれに対応させておりますので、画面表現を司るHTML・CSSは使いこなせる必要があります。そのための勉強法ですが、まず基礎を学ぶためにオンライン学習ツールのProgateを使いました。他にもドットインストールとか色々オンライン学習ツールはあるのですが、個人的にはProgateがわかりやすかったなと思ってます。（キャラクターとかが解説に出てきるのですが、それもポップな感じでわかりやすさを助長させている気がします）

Progateで基礎を習得したあとはひたすらページ模写です。コープレートサイトやSHOP系サイトなど、幾つかピックアップしひたすら模写します。これを5〜6サイトくらい続けるとグーンと力がつくのがわかると思います。模写を続けてPC・スマホ版もそれぞれ作成できるようになるとある程度スキルは高まっていると思います。

j query：自由に記載・修正を行うことができる

j queryはHTML/CSSほどガッチリとは学ばなくても、本サイトは作成できます。というのも、本サイトではスマホ版のハンバーガーメニューしかj queryは使っていないですからね。学習方法としてはHTML/CSSで作成した模写ページに対しj queryで動きを付けてみます。

WEBページ作成ではハンバーガーメニュー・画像スライド程度でしか使わないので、概ね使い方がわかったら次の勉強に移ってしまって問題ないと思います。

PHP：基本構造は理解しつつ、ググってコードを引用することができる

PHPはWordPressをカスタマイズする際には絶対に使いますので、HTML/CSS/j queryの学習が終わった後で、WordPressと同時に学ぶと良いと思います。

WordPress：基本構造は理解しつつ、ググってコードを引用することができる

WordPressをカスタマイズするためには、ベースとしてHTML/CSSの知識が必要となります。その上でPHPファイル形式でページを作成するため、全体像が掴みにくいと思います。私の場合は本を参考にしつつ、ローカル環境でWordPressサイト作成してみました。実際に1つ作ってみると全体像が掴めてくると思います。以下に私が使用した本を記載しときますので、参考にしてもらえると幸いです。

上記の勉強を全て終えたら最後の仕上げとして自分のサイトを作ってみましょう！！
ザックリですが必要なスキルと勉強方法は以上になります。