Gimama カップウォーマー 【コンパクトでも、大小カップに自在対応】 コーヒーウォーマー 4段階温度(45℃-75℃) 保温コースター 2-12Hタイマー 静音 ドリンクウォーマー 急速加熱 コーヒー/お茶/水/牛乳など飲み物 マグカップ ウォーマー 4時間自動電源オフ オフィス/家庭用 誕生日/クリスマス プレゼント PSE安全認証済み AC100V,50/60Hz全国対応（木目）
￥2,999 (2025年4月29日 13:11 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
【2025革新型・高速USB3.0対応】 CD DVDドライブ 外付け 静音 DVDプレーヤー 外付けDVDドライブ USB3.0＆Type-C両接続 読取/書込可 CDプレーヤー バスパワー駆動 外付けCDドライブ 軽量 薄型 光学ドライブ 外付け CDドライブ Mac PC パソコン Windows11対応 Windows10/8/7XP 外付け CD DVD ドライブ (ホワイト)
￥1,999 (2025年4月29日 13:06 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
SteelSeries ワイヤレス ゲーミングヘッドセット ヘッドホン 軽量 ボイスチャット可能 ゲームとスマホを同時接続 Arctis Nova 7P 無線 密閉型 Switch PC PS5 PS4 対応 AIノイズキャンセリング 空間オーディオ Hi-Fiサウンド 調整可能 61561 ホワイト×ブルー
￥26,345 (2025年4月29日 13:12 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
はじめに
未経験での転職をし、約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ページを効率的に作成することができると思っています。
僕個人的には、結局『量』をこなすことが一番の上達への方法だと思ってます。
その上で、それぞれに合う方法もあると思うので、どうやったら早くいいコードが書けるのかを考えながらやるのがいいと思ってます。
（この辺りは、良書と呼ばれている本を読んで参考して取り入れるというのもやってます。）
以上、読んでいただきありがとうございました🙌🏼
参考にしていた書籍
Views: 0
【2025年新登場 iPad専用ペン】 タッチペン iPad ペン タブレット USB-C充電式 急速充電 スタイラスペン 超高感度 極細 傾き感知/誤作動防止/磁気吸着機能対応 15分間充電 8時間使用可能 2018年以降iPad/iPad Pro/iPad air/iPad mini対応 三つ交換用ペン先
￥1,990 (2025年4月29日 13:12 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)
