まずWebサイトを作るとなったときの基本は、HTML + CSS です。
そこからJavaScriptを書いたり、データベースからとってきた情報を出力するなど、行って行く訳ですが、まずはHTML + CSSで簡単なページを作ってみることが基本になります。
自分でWebサイトを作るにあたって、参考になる情報を紹介したいと思います。ただし最初の注意点として、練習だとしても必ず自分で何を作るのかを決めたうえで、取り組むことをおすすめします。
ゴールがない状態ではじめてしまうと、途中で投げ出しがちになりますし、ゴールが決まっているからゴールまでに必要なところを学習していけばいいということがはじめて可能になります。
詳しくはこちらの記事が参考になるかと思います。
作りたいものが無いという方は、まずはご自身のこれまでの作ったものなどをまとめるサイトを作ってみるだとか、今現在自分が詳しいもの(ラーメンが好きであればラーメンの食べ歩きサイトなど)をベースにサイトを作るだったり、自分の所属しているサークルや団体のホームページを作る役を引き受けてしまうのが一番おすすめです。
作ってみたものはWeb上で公開する、もしくはGitHubで公開するといいと思います。
ではWebサイトを作りたいと思ったときに参考になる情報を紹介していきたいと思いますのでぜひ参考にしてください。
1. まずは実際に簡単な架空のWebサイトを作る体験をしてみる
ドットインストールの動画はおすすめです。まずはここの動画を見ながら、よく見る形のWebサイトがどのようにして作られているのかを理解し、きちんと自分でも手を動かしてみることが大切です。自分でCSSの指定を変更してみながら、どこを書き換えるとどう見た目に反映されるのかを確かめつつ、HTML + CSSを書いてみることをおすすめします。
2. 実際に自分が作りたいサイトをワイヤーフレームにしてみる
ワイヤーフレームの作り方に関しては、ここのページを見るといいと思います。自分の作りたいホームページをより具体的にイメージできるようにします。ワイヤーグフレームとは、Webサイトの設計図になります。Webサイト内において、何を・どこに・どのように表示するのか書き出したものになります。
ワイヤーフレームを作る際には、まず自分の好きなWebサイトなどをみながら紙でA3の用紙に書き起こしてみることをすすめます。まったくゼロからWebサイトのデザインを考えることは、いきなりだと難しいですし、自分がいいなと思ったWebサイトがどうなっているのかを観察しつつ、Webサイト制作を繰り返していくほうが覚えも早いように思います。
紙でワイヤーフレームを書いた後は、それを今度はWeb上で使えるツールを駆使しながら、作業してみましょう。慣れてきたら紙に書き起こさずに、いきなりWeb上でツールを使ってワイヤーフレームを作るのもいいかもしれませんが、私個人は常にまずは紙に書き出すようにしています。
3. 作ったワイヤーフレームをもとにWebサイトを実際に形にしてみる
いきなりWebサイト制作をHTML+CSSを自分で全部書いて行うというやり方もいいのですが、それだと途中で挫折してしまいそうになることも多々あります。
ですので、ある程度洗練されたデザインテンプレートとなるようなものをベースに作業をするといいと思います。Twitter BootStrap はTwitterライクなデザインを簡単に作れるものです。Webサイトを構成するのに必要であろうUIがほぼ揃っていて、簡単に利用することができます。これも一度ドットインストールの動画を見ながら、やってみるといいかと思います。
簡単に説明すると、Twitter BootStrapであらかじめ決められている id名やclass名を指定すると、そこにCSSがあたり見た目が簡単に作れるというものです。
4. HTMLが書けない人がページ更新する作業が発生することを想定して、CMSを使ったWebサイトを制作してみる
3. の工程まで作業してみたあなたはふと気づくはずです。
「HTMLやCSSがわからない人だとサイトのページ更新ができないのでは？」
そのとおりです。それはかなり問題ですよね。自分がWebサイトを作ったあとも常に更新し続けなくてはならず、新しいサイトを作るごとにあなたがこなさなければならない作業は増え続けるわけですから。
3. まで作業して頂いた方は、HTMLやCSSがわからない人でも更新できるようなWebサイトがあったらいいのになと思うはずです。それを専門用語を使っていえば、CMS(Contents Management System)と呼ぶのですが、CMSにはいくつか種類があり、現在はWordPressというCMSが非常に有名で、よく使われています。CMSを使ったサイト作りについても挑戦してみるといいでしょう。
5. 高機能なWebサイト制作にどのような技術的要素が盛り込まれているのかを理解する
これからWebサイトを制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
最後に、より高機能なWebサイト(例えば、ユーザーが投稿した情報を表示させるようなWebサイト)を作る場合にどのような技術が必要になるのか知っておくといいかと思います。より深く学習していくにあたり、航海図にあたるものが必要です。どんな技術を習得すると何ができるのかを理解しておきましょう。
ここまで来たらあなたは簡単なWebサイトは自力で作ることができ、大枠Webサイト制作においてどのような技術が必要になるのか理解できているはずです。作ったサイトをもとに、興味のある方はよりスキルアップしてみませんか？
