WEBサイト制作の効率的な勉強方法【初心者向け】

WEB制作の勉強方法は様々にあります。本やブログを読んだり、WEBサービスを利用したり、会社の先輩に教わるなど、人や環境によっていろいろです。初心者にとっては、「なにで勉強したらいいのかわからない」ことが多いと思います。それは、これだけやってれば全部身につく、なんて方法は無いからです。

実際に私も、グラフィックをメインとしたデザイナーから、WEB制作に関する勉強をし、WEBデザイナーとして仕事をしています。今思うと効率の悪い勉強方法だったと思うこともあります。自分の経験を振り返りながら、効率の良い勉強方法をお伝えしたいと思います。

結論的には、どれが1つをやればいい、ということはなく、複合的な勉強(実践)方法になります。

WEB制作の勉強のためにやるべきこと

  • 最低でも1冊はHTMLとCSSの教本を買う
  • 実験環境を作る
  • WEBサービスを利用する
  • 人が書いたソースを見る
  • 自分でレンタルサーバーを契約する
  • 実際にサイトを制作してみる

最低でも1冊はHTMLとCSSの教本を買う

WEBのことだからWEBで勉強するのが良いんじゃないかと思う人もいらっしゃるかもしれませんが、WEB上の知識はどうしても断片的なものが多いです。そのため、最低でも1冊は、まとまった知識となる書籍を買った方が良いです。

どんな本がいいかと言うと、「HTMLとCSS」とはっきりと書いてあるものが良いです。「WEBデザイン」というような言葉がメインとなっている本は、デザインや考え方、概念的な話が多く、どちらかというと、HTMLとCSSを理解している人か、見た目の設計だけする人が、いかに良いデザインをつくるか、という内容です。

このような本には、HTMLやCSSの基本だけでなく、WEBサーバやドメインなど、実際にWEBサイトを制作して公開するまでの基本的かつ重要な知識が書かれているはずです(だいたい序盤に書いてあるので書店で確認してください)。
ここの部分が非常に重要で、小手先の技術だけを習得しても、WEB全体の知識などが抜けていると、色々な話が理解できなくなってしまいます。

また、HTMLやCSSの内容に関しても、実際に仕事をする上で、あまり使わないけど重要で基本的な知識があります。そういったことも、書籍であればきれいにまとまっているので、やはり本は必要です。そして、書き込みや付箋を貼ったりもするので、人から借りるのではなく、自分で買うことをお勧めします。

実験環境を作る

学校の授業風に言うと、本を読むことは座学、手を動かすことは実習、だと思います。双方があって、はじめて”理解”に繋がります。
しかし、いきなりサイト制作をするのは難しいので、練習用の白紙のhtmlファイルを用意し、タグを書いたりスタイルをかけたりして実験する環境を作ることをお勧めします。

実験環境を作ることは、初心者でなくても、中級者・上級者でもやっています。とにかく自分で操作して、自分の目で動きや表示を確認しなければ身に付きません。
慣れてくると、自分のパソコンの中にapache(アパッチ)あるいはXAMMP(ザンプ)といったソフトを入れて、仮想サーバを作ります。

そのような仮想環境は、最初は無くても大丈夫です。htmlファイルをブラウザに読み込ませて表示を確認する方法で十分だと思います。

WEBサービスを利用する

WEBサービスを利用し始めるのは、1冊は本を読む、htmlデータを作ってブラウザに読み込ませてみる。ぐらいはやってからの方がいいです。WEBサービスだけだと、断片的になりがちなのと、リアリティに欠けてしまう部分があるためです。
とはいえ、WEBサービスの良いところは、実際に手を動かしながら学べるところです。先ほどの、座学と実習が同時にブラウザ上で行われるので、理解は早いと思います。
もう1つ、ネットとブラウザさえあれば、どこでも勉強できることです。ちょっとした空き時間などでも勉強できるので、ハンドブック的な要素もあると思います。
WEBサービスは以下のようなものがあります。

すべてブラウザ上で完結するのも良いですが、やはり実際にデータを作ってブラウザで表示、という工程を踏むことも必要です。WEBサービスだけですべての勉強が完結するわけでもないですし、実践経験が身につくわけでもないです。しかし、効率的な勉強はできます。そのようなツールだと私は思います。

人が書いたソースを見る

ある程度ソースコードの読み書きができるようになったら、他の人が書いたソースを見ることをお勧めします。ほかの人のサイトに行き、クロームの「検証機能」か「ページのソースを表示」で見ます

色々なサイトのソースを見ていくと、このように気が付くと思います。

  • 全体が読み解ける場合
  • 解る部分と解らない部分がある場合
  • まったく何が書いてあるか解らない場合
  • 人間が書いたとは思えない場合

ソースを読める場合には、実際の表示と比較したりして、参考にすることができます。まったく何が書いてあるか解らない場合でも、実際にそういうサイトが存在してることを早い段階で知った方が良いです。
人間が書いたとは思えないような、敷き詰まったコードの場合、何かツールで生成されているか、書いた後に圧縮されている場合があります。
とにかく、実際に世に出ているサイトのソースを見ることで、最終的にどんなものを書くのかイメージをすることが大切です。

自分でレンタルサーバーを契約する

さらに実践的なことをしていくために、自分でサーバをレンタルします。この意味が解らない人はなおさらやった方がいいです。
すべからく全てのWEBサイトは、サーバがあって初めて公開することができますし、見ることができます。サーバとの関係は切っても切り離せないため、自分のサーバスペースを持ち、使い慣れる必要があります。

レンタルサーバはいろいろなサービスがありますが、下記のものがお勧めです。

お勧めの理由は、設定の自由度が高く、使っている人が多いため情報も多いからです。サーバは設定が色々とできます。こうしたことも解らないですよね。だから実際に自分でレンタルして触ってみる必要があるのです。

実際にサイトを制作してみる

これができれば苦労しないと言われそうですが、これをやるのが一番早いです。
WEBサイトを制作するには、小手先の技術や色々な知識が必要になりますが、まず作ってみることで、「何が解らないか、何が必要か」が見えてきます。先にそれを体験することで、自分の中に自然と勉強する道筋が見えてくるはずです。
何が見えてくるかを簡単に書き出してみると下記のようなことです。

  • サーバのこと
  • ドメインのこと
  • HTMLの全体の構成
  • CSSの全体の設計
  • classやidの命名規則
  • サイトに動きやエフェクトを付けたい
  • コンテンツ内容の重要性
  • デザインの重要性

HTMLやCSSの、1つひとつのタグやプロパティよりも、全体の設計、そもそものコンテンツ内容、これらの重要性に気が付きます。
逆に言うと、小手先の技術は後から付いてくるし、全部記憶するのは難しいので、結局調べながら作ったりします。だから、何でもいいので1サイト作って公開する、ということができれば、それ以上の勉強方法は無いと思います。

まとめ

冒頭にも申し上げましたが、WEB制作の技術や知識は複合的なので、勉強方法も複合的な方が適していると思います。どれが1つの方法だけで全てを賄うのは難しく、逆に、今回挙げた方法をどれもやるのが結局効率的だと思います。

この記事をシェアする

  • Twitterにシェア
  • facebookにシェア
  • LINEにシェア
  • POCKETにシェア