はじめに
未経験での転職をし、約1年ほどWeb制作に携わる中で、個人的に静的ページを作成する上で気をつけていることや意識していること・これまでやってきたことをまとめました。
この記事は、あくまで個人的な意見です。
1. ページの構造設計を徹底する
設計思想の重要性
以下の理由からページの構成をちゃんと考えられるようにするという練習を最初のうちはしていました。
- 余分なスタイルの排除につながる
- 保守性・拡張性の向上
- コードの可読性向上
- 後からの修正が容易になる
例えば、「この要素は何のためにあるのか」「このグループはどういう関係性を持っているのか」を明確に理解しておくことで、無駄なスタイルを当てることなく効率的なコーディングができると思っています。
図に起こして考える練習
僕が今までやってきたWeb制作案件ではHTML、CSS（SCSS）がメインのものが多かったため、HTML構造についてや、CSS設計について考える練習をすることが多かったです。
Reactのようなコンポーネント化という概念はありませんでしたが、CSS設計さえうまくできていれば同じコードを書かずに済むので、作成するページのどこが共通化できそうか？とか、どこの要素をまとめればなるべく少ないコード量で実現できるかなどを頭で考えられるようになるまでは、図に起こして考える練習をしました。
具体的な図の作成方法としては：
- ページを大きなブロックに分割する（ヘッダー、メイン、サイドバー、フッターなど）
- 各ブロック内の要素を階層構造で整理する
- 共通要素や繰り返し要素を特定する
- 各要素に対して適切なHTMLタグを考える
- 必要なCSSクラスの構造を設計する
↓実際に使用していたものは削除してしまったのでイメージを以下に添付しています。
個人的には最初のうちはコードを書く前に上記のように構造を明確にすることで、実装段階での混乱や手戻りを大幅に減らすことができたと思っています。
2. 公式の情報などを理解し、忠実になる
CSS設計の基本原則
CSS設計にはいくつかの確立された手法があります：
- BEM (Block, Element, Modifier)
- FLOCSS (Foundation, Layout, Object) とか
上記の設計思想のように、すでに手法として確立しているものは、それなりの理由があるし実際やってみて使いやすいという面もあるので、不要な再開発はせず、ちゃんと設計思想を理解してそれを実践することが結局早く・綺麗にコーディングするという面でいいのかなと考えているため、それを意識しています。
3. AIを駆使した効率的な学習
便利なことに今の世の中には、ChatGPTやClaudeなどのいった優秀なAIが存在します。誰もがいうことかもしれませんが、これを活用しない手はないので、僕は実際に使ってコーディングや練習をすることが多いです。
練習をする時に、自分が実際に使っていたやり方は：
-
とりあえず自分でコーディングしてみる
自分の知識でベストと思われる方法でコードを書く -
AIにコードレビューを依頼する
書いたコードをAIに投げて、「セマンティックなコーディングに変換してみて」や「適切なスタイル・無駄のないスタイルに変えてみて」などのプロンプトで改善案をもらう具体的なプロンプト例：
・「このHTMLコードをより適切なセマンティックタグを使用して改善してください。SEOとアクセシビリティの観点からアドバイスもください。」 ・「このCSSコードをBEM設計に沿って最適化してください。無駄なスタイルがあれば指摘してください。」 とか -
改善案を分析する
AIからの提案を見て、なぜこの部分にこのタグを使うのか、このスタイルを当てるのかを公式の情報を見ながら考える＋理解する -
理解して実践に活かす
理解したことを次のコーディングに活かす
このプロセスを繰り返すことで、ただコードの書き方だけでなく、「なぜそのコードが適切なのか」という理解が深まり、より質の高いコーディングができるようになります。
まとめ：静的ページ制作で意識していること
静的ページ制作を正確に早く作るという点において、大事なのは作成するページの構造をちゃんと捉えていい設計をするということだと思ってます。
ページの構造を正確に理解し、設計した上でコーディングをすることで：
- 無駄なスタイルを当てなくて済む
- メンテナンス性が向上する
- コードの可読性が向上する
- 後からの修正や拡張が容易になる
また、セマンティックなHTMLとCSS設計の基本原則を理解し実践することで、より良いWebページを効率的に作成することができると思っています。
僕個人的には、結局『量』をこなすことが一番の上達への方法だと思ってます。
その上で、それぞれに合う方法もあると思うので、どうやったら早くいいコードが書けるのかを考えながらやるのがいいと思ってます。
（この辺りは、良書と呼ばれている本を読んで参考して取り入れるというのもやってます。）
以上、読んでいただきありがとうございました🙌🏼