【超初心者向け】Webサイト制作に必要な5つのスキル

Web

こんにちは。けんです。

僕は2年前にWebの業界に入ってから、ほぼ独学でWebサイト制作のスキルを学びました。

まだまだ学びが足りないところがありますし、ごっそり抜けている部分があるので頑張って埋めている真っ最中です。
それでも現在はまあそれなりにWebサイト制作ができるようになりました。

これからWebサイト制作について学びたい人のために、僕がWebサイト制作ができるまでに学んだスキルをまとめます。

HTML

Webに興味がある人なら一度くらいは名前を聞いたことがあるでしょう。

HTMLはWebページを作成するための言語です。
ページには、見出しや段落、画像などのさまざまな要素がありますね。

HTMLはそれらをWeb上で正しく表示するために意味づけ(マークアップ)します。
顔でたとえると、目、鼻、口などのパーツそのものを形成します。

Web上にある全てのサイトはこのHTMLによって表示されています。

プログラミング言語と思われがちですが、厳密には「マークアップ言語」という位置づけになります。

でも、初学者からすると混乱しちゃうので、とりあえずそこはどうでもいいことです。

音楽の話をしていて、「グリーン・デイはパンクじゃなくてポップ・パンクだから」とか口を挟むようなもんです。
ごめんなさい、ちょっとわかりにくかったです。

Webの勉強をするなら、一番最初に学ぶべき言語です。
全然触れたことない人からみたら難しそうに見えますが、けっこう簡単です。

CSS

CSS(カスケーディング・スタイルシート)はWebサイトの見た目をきれいに整えたり、色をつけたり、デザインするための言語です。

CSSを使用せずに作成されたサイトは、あまりに質素で利用しづらいです。
なのでCSSによって色をつけたり、画像の配置や文字の大きさを変えたりして、サイトのデザインを整えます。

先程のHTMLが顔のパーツなら、CSSはお化粧です。
HTMLと同様、Webサイトを制作するなら一番最初に学ぶべきスキルです。

Javascript

Javascriptはプログラミング言語です。

HTML=顔のパーツ
CSS=化粧

ときたら、Javascriptは表情といったところでしょうか。
べっぴんさんがさらに表情豊かならもっと魅力的ですね。

Webサイトを見ていて以下のような動きはJavascriptによって動かしていることがほとんどです。

  • 入力フォームに不適切な入力がされていたらエラーを出す
  • 画像のスライドショーを作成する
  • スクロールに合わせてサイドバーを追従させる

HTMLとCSSだけでは表現できないユーザーの動きに応じたサイトを作成することができます。

PHP

PHPは動的なサイトを作成するためのプログラミング言語です。
動的なサイトとはアクセスした状況や人、時間によって表示が変わるサイトのことです。

具体例を上げると以下のようなことです。

  • 新着記事をアップロードしたら記事一覧ページの一番上に自動的に表示させる
  • ショッピングカートに入っている商品や数によって金額や商品数の表示が変わる
  • グルメサイトでエリアやカテゴリーで検索したら検索結果が表示される
  • お問い合わせフォームを入力して送信したら確認メールが届く

HTMLとCSSだけでは誰がいつ見ても同じ静的なページしか作成することしかできませんが、PHPを利用すれば、動きのあるWebサイトやWebアプリケーションを作成することができます。

有名なブログ作成ソフトウェア「Wordpress」もPHPで動いています。
WordpressをさわりながらPHPを少しづつ覚えていくといいでしょう。

WordPress

WordPressはブログなどのサイトを簡単に作成するためのシステムです。
上述の通り、PHPから構築されています。

CMS(コンテンツマネジメントシステム)と呼ばれるものです。
他にも、EC CUBEやDrupalなど、世界にはたくさんのCMSが開発されていますが、Wordpressは世界で最も利用されているCMSです。

CMSがなければ、サイト制作するにはゼロからHTMLやCSSを書かなければなりません。
でも、Wordpressを導入して好みのテーマを選べば、もう立派なサイトが1時間あれば手に入ります。

まずは自分のブログを立ち上げるなどして、簡単な操作方法に慣れるところから始めましょう。

まとめ

この記事を見て、
「意外に学ぶこと少ないじゃん、いけそう」と思ったでしょうか。
それとも「学ぶことたくさんある、きつそう」と思ったでしょうか。

これらをそれなりにマスターすれば、Web業界で仕事をもらえるくらいになります。

まずは、Wordpressで自分のサイトやブログを持ってみて、そこでHTMLやCSSをさわりながら学んでみてください。

ぼくもキーボードを人差し指だけで叩いていたところからWebを勉強し始めました。
Webはこれから先、絶対に無駄にならない知識だと思います。

一緒にがんばりましょう。