Webサイトを作りたいと思ったときに参考になる情報5選

まずWebサイトを作るとなったときの基本は、HTML + CSS です。
そこからJavaScriptを書いたり、データベースからとってきた情報を出力するなど、行って行く訳ですが、まずはHTML + CSSで簡単なページを作ってみることが基本になります。
自分でWebサイトを作るにあたって、参考になる情報を紹介したいと思います。ただし最初の注意点として、練習だとしても必ず自分で何を作るのかを決めたうえで、取り組むことをおすすめします。
ゴールがない状態ではじめてしまうと、途中で投げ出しがちになりますし、ゴールが決まっているからゴールまでに必要なところを学習していけばいいということがはじめて可能になります。
詳しくはこちらの記事が参考になるかと思います。
作りたいものが無いという方は、まずはご自身のこれまでの作ったものなどをまとめるサイトを作ってみるだとか、今現在自分が詳しいもの(ラーメンが好きであればラーメンの食べ歩きサイトなど)をベースにサイトを作るだったり、自分の所属しているサークルや団体のホームページを作る役を引き受けてしまうのが一番おすすめです。
作ってみたものはWeb上で公開する、もしくはGitHubで公開するといいと思います。
ではWebサイトを作りたいと思ったときに参考になる情報を紹介していきたいと思いますのでぜひ参考にしてください。

1. まずは実際に簡単な架空のWebサイトを作る体験をしてみる

実践！アプリのランディングページを模写しよう
ドットインストールの動画はおすすめです。まずはここの動画を見ながら、よく見る形のWebサイトがどのようにして作られているのかを理解し、きちんと自分でも手を動かしてみることが大切です。自分でCSSの指定を変更してみながら、どこを書き換えるとどう見た目に反映されるのかを確かめつつ、HTML + CSSを書いてみることをおすすめします。

2. 実際に自分が作りたいサイトをワイヤーフレームにしてみる

Webサイト設計図 – ワイヤーフレームの作り方
ワイヤーフレームの作り方に関しては、ここのページを見るといいと思います。自分の作りたいホームページをより具体的にイメージできるようにします。ワイヤーグフレームとは、Webサイトの設計図になります。Webサイト内において、何を・どこに・どのように表示するのか書き出したものになります。
ワイヤーフレームを作る際には、まず自分の好きなWebサイトなどをみながら紙でA3の用紙に書き起こしてみることをすすめます。まったくゼロからWebサイトのデザインを考えることは、いきなりだと難しいですし、自分がいいなと思ったWebサイトがどうなっているのかを観察しつつ、Webサイト制作を繰り返していくほうが覚えも早いように思います。
紙でワイヤーフレームを書いた後は、それを今度はWeb上で使えるツールを駆使しながら、作業してみましょう。慣れてきたら紙に書き起こさずに、いきなりWeb上でツールを使ってワイヤーフレームを作るのもいいかもしれませんが、私個人は常にまずは紙に書き出すようにしています。

3. 作ったワイヤーフレームをもとにWebサイトを実際に形にしてみる

Bootstrap 5入門
いきなりWebサイト制作をHTML+CSSを自分で全部書いて行うというやり方もいいのですが、それだと途中で挫折してしまいそうになることも多々あります。
ですので、ある程度洗練されたデザインテンプレートとなるようなものをベースに作業をするといいと思います。Bootstrap（旧Twitter Bootstrap）はレスポンシブデザインに対応したCSSフレームワークで、現在もWeb制作の現場で広く使われています。Webサイトを構成するのに必要であろうUIがほぼ揃っていて、簡単に利用することができます。これも一度ドットインストールの動画を見ながら、やってみるといいかと思います。
簡単に説明すると、Bootstrapであらかじめ決められている id名やclass名を指定すると、そこにCSSがあたり見た目が簡単に作れるというものです。

4. HTMLが書けない人がページ更新する作業が発生することを想定して、CMSを使ったWebサイトを制作してみる

WordPress入門

の工程まで作業してみたあなたはふと気づくはずです。

「HTMLやCSSがわからない人だとサイトのページ更新ができないのでは？」
そのとおりです。それはかなり問題ですよね。自分がWebサイトを作ったあとも常に更新し続けなくてはならず、新しいサイトを作るごとにあなたがこなさなければならない作業は増え続けるわけですから。

まで作業して頂いた方は、HTMLやCSSがわからない人でも更新できるようなWebサイトがあったらいいのになと思うはずです。それを専門用語を使っていえば、CMS(Contents Management System)と呼ぶのですが、CMSにはいくつか種類があり、現在はWordPressというCMSが非常に有名で、よく使われています。CMSを使ったサイト作りについても挑戦してみるといいでしょう。WordPress入門の学習動画はドットインストールなどの学習サービスで探してみましょう。

5. 高機能なWebサイト制作にどのような技術的要素が盛り込まれているのかを理解する

MDN Web Docs – Web開発を学ぶ
最後に、より高機能なWebサイト(例えば、ユーザーが投稿した情報を表示させるようなWebサイト)を作る場合にどのような技術が必要になるのか知っておくといいかと思います。より深く学習していくにあたり、航海図にあたるものが必要です。どんな技術を習得すると何ができるのかを理解しておきましょう。
ここまで来たらあなたは簡単なWebサイトは自力で作ることができ、大枠Webサイト制作においてどのような技術が必要になるのか理解できているはずです。また近年は、GitHub CopilotやCursorのような生成AIを活用したコード補助ツールも普及しており、学習と並行して導入することで効率よくスキルアップできます。作ったサイトをもとに、興味のある方はよりスキルアップしてみませんか？

編集後記

Webサイト制作は「作りたいものを決めること」から始まります。HTML・CSSの基礎を身につけながら、ぜひ自分だけのサイトを一つ完成させてみてください。それがエンジニアとしての第一歩になるはずです。

編集者

エンジニア就活

ITエンジニアを目指す就活生に向けて、求人情報・選考ノウハウ・業界研究など実践的なコンテンツを届けています。
就活生の疑問や不安に寄り添いながら、日々コンテンツを更新しています。