はじめに

この記事はQiita全国学生対抗戦 - Qiita Advent Calendar 2024 - Qiitaへの参加記事です。

こんにちは、@timdaikです。

今回はタイトルの通り、Webサイトを作るにあたって、目指すレベル別に知っておくと良いことを私の経験から書かせていただきます。

私のWebプログラミング略歴

この記事を書くための背景や根拠として私の略歴をサクッとまとめました。

さほど興味が無ければここは飛ばして、レベル別、勉強すると良いことから読んでください。

Lv.0: プログラミング未経験で高専（5年間ある高校＋α大学みたいな学校）に入学
Lv.1: 入学して3か月でHTMLを初体験。ブログを書いたりウェブサイトを作るのにハマりはじめる
Lv.2: 2年生になるちょっと前くらいに、Web製作研究部（略してWeb研）に加入。jQueryを駆使してウェブサイト制作に励む
Lv.3: 2年生の夏からDjangoを経てフレームワークの存在を知り、続けてReactに入門する
- 2年生の3月くらいまで、とあるReactのホームページを作り続けた。ここまでに12月にある学校のスポーツ大会のHPをWeb研が担当することになり、これの制作も行った
Lv.4: 3年生になってからはアプリを作りたくなって、きちんとReactを勉強し始めた。夏ごろにはNext.jsにも入門して、誘った友達と本格的なアプリ開発を初めてやった
- 3年生の間は初めてハッカソンに参加して周りのレベルに驚いたり、技術のキャッチアップを意識し始めたり、開発経験を積んだ。そのためフロントエンドの基盤はこの時期に築けたと思う
- この学期からはWeb研で学校の3大行事のHPすべてを担当するまでに成長した。この時は積極的に指揮をとったり、コーディングをしたりと精力的に部活動を行った
Lv.X~: 4年生になってからはNext.jsを主に使用してアプリ開発を続けている。Webサイト制作も行うが、主にアプリ開発にシフトしている
- Web研内で1つアプリ開発のプロジェクトが立ち上がり、これに参画している。また初めてインターンにも参加させていただいた

レベル別、勉強すると良いこと

まず前提として目指すWebサイトのレベルによって、必要な技術・知識と範囲は変わってきます。
そのため、ここでこれらをハッキリさせたうえで説明を進めていきます。

レベル	内容	新たに勉強すると良いこと
Lv.1	Webサイトをとりあえず作りたい	`HTML`, `CSS`, `他のWebサイトのデザイン`
Lv.2	Webサイトに動きを付けたい。ユーザーの操作によってWebサイトを動かしたい	`レスポンシブデザイン`, `CSSアニメーション`, `JavaScript`, `jQuery`
Lv.3	さらに表現豊かなWebサイトを作りたい	`HTML/CSSへのさらなる理解`, `JSライブラリ`, `Figma`, `クオリティを上げるのに必要な知識群`
Lv.4	効率よく、堅牢なウェブサイトを作りたい	`JSフレームワーク(React, Vue, Astroなどなど)`, `Git`, `チーム開発の知識`
Lv.X	その先	（勉強に限界はない。アプリ開発みたいにフロントエンドに突き進んでも良いし、Webサイトの完成度をさらに高めるためにデザインなどを学んでも良い）

ざっくりですが、Webサイト制作のレベルを分類してみました。

まず、初心者は自分がどこまでを目指したいかを考えてみて下さい。
趣味としてやってみたいならこんなこと意識せず、とりあえず飛び込んでみてください！ストレスがより少なく、楽しみながら勉強できると思います。

計画性を大事にしていて、趣味というより勉強したい！という方は、まずこれを目安にWebサイト制作のステップをイメージして頂くといいでしょう。

次からは各レベルの詳細を説明していきます。

Lv.1 Webサイトをとりあえず作りたい

私がやっていたこと

入学して3か月でHTMLを初体験。ブログを書いたりウェブサイトを作るのにハマりはじめる

私は授業で触ったHTMLがきっかけでWebサイト制作にのめり込むこととなりました。

このとき、私がのめり込んでいたのは架空のカフェのWebサイト制作でした。
やっぱり最初はどんなWebサイトを作ろうか悩んだのですが、自己紹介サイトは授業の課題でやっていたので、おしゃれな感じに出来そうっていう理由と、紅茶やコーヒーが好きだったので選びました。

完全に独学＆個人でやっていたので、ネットで情報を調べつつ放課後や休日にコーディングをしていました。

この段階で言えることは1つ、「とりあえずProgateやりましょう！」です。

ProgateっていうのはWeb上でWebサイト＆プログラミングが学べるサービスで、

ブラウザ上ですぐにコードをかける
- 環境構築（プログラミングを始めるための準備）が要らない！
スライドの説明がホンマに飲み込みやすい
- 僕らが後輩に説明するときにそのまんま引用したいくらい
Webサイト制作の基本講座は無料で出来る

っていうことなので初心者に超オススメです！！

何といってもパソコンさえあればすぐに始められます。最初はとりあえず世界観を味わうのが何より重要です。
試してみて適正を測ってみて下さい。
ここで楽しかったら、あなたはどんどんのめり込めると思います。

初心者の方は記事を読んでいる途中でもいいので、とりあえずProgateをやってWebの世界に飛び込んでください！
いってらっしゃい👋
（ちなみに言っておくけどアフィリエイトとかちゃうで。ホンマ。）

調べると良いこと

Progateやってきた人、おかえりなさい。

ぶっちゃけこの段階では座学で知識を詰め込むよりも、制作体験を大事にして欲しいです。
だって楽しいんだもん。

しかしProgateの無料版をやっただけでWebサイトを作るのは難しいので、多少知っておくと良いことや知識の調べ方をメモっておきます。

とりあえず必要な技術要素は以下の3つです。

HTML
CSS
他のWebサイトのデザイン

HTML / CSS

ほんとに最初期なのであまり意識することは無いです。
が、ちょっと知っておくと良いことをメモっておきます。

width: 100%;で画面幅いっぱいに要素を広げられる
- 正しくは親要素の幅いっぱいに広げる、なので、bodyなんかにも指定しておきましょう
- （ややこしいので詳細は伏せます）
padding, marginの違い
- 他にも枠線のborderなど、要素の構造を知っておくといい
flexboxの存在
- これを使うと要素を並べることが圧倒的にやりやすくなります
- 40pxなど具体的な数値を指定して並べずに、自動で要素を均等に配置してくれるものもあります
- おそらく、Webサイト制作ではこれからずっと付き合っていくことになります

パーツをパクろう

これらの基礎をProgateで習得していると思うのですが、やっぱり知識がうろ覚えでしょう。
また、最初の頃はWebサイトを作る手順や表現のノウハウが足りなくて、ここも詰まってしまうポイントだと思います。

そこで一番手っ取り早くサイトを作るには「他のWebサイトのパーツをパクる」ことです。
自分で気になったサイトのパーツを参考にするのも良いですが、パーツをまとめてくれている以下のサイトなんかがオススメです。

最初のWebサイトを作るときは、このサイトを見て「こんなパーツを組み合わせて作られているんだ」だとか、「1つのパーツにも何パターン化のバリデーションがあるんだな」なんてことを感じてもらうと作りやすくなるかもしれません。

また、様々なWebサイトのパーツを参照するのではなく、デザインが統一された1つのWebサイトを参考にするのもいいでしょう。

いろいろな表現を取り込んで自分好みにアレンジしたい人は各パーツ参考、まずはきちんと1つのWebサイトを完成させたい人は1つのWebサイトを参考にすると良いでしょう。

まあ、様々なWebサイトを見てみるだけでいろいろ触発されるものも多いかと思いますので一旦見てみて下さい。

🚧 以下、工事中です。 🚧
大変ご迷惑をお掛けしますが、もうしばらくお待ちください🙇🙇🙇

Lv.2 Webサイトに動きを付けたい

Lv.3 さらに表現豊かなWebサイトを作りたい

Lv.4 効率よく、堅牢なウェブサイトを作りたい

Lv.X その先

最後に

ここまで読んでいただきありがとうございました！

ご意見がある方はお気軽にコメントして頂けると幸いです。