見出し画像

Webページ制作は全体を俯瞰して見る力が問われる

年末が近づき今日もnoteを書く日々。noteもそうですが、普段何気なく利用しているWebページ。僕は今ITエンジニアの勉強で、Webページの制作を0から学んでいます。
勉強していて感じるのは、複雑に見えるページも、分解するとブロックに分けられ、さらにブロックに分解されるマトリョーシカ式なことです。
知識0から学んでいるからこそ、僕は2つの発見をしました!
1,全体を俯瞰して見ること
大枠を理解したうえで、ひとつひとつのブロックを仕上げていくとうまくいく
2,実はブログ執筆などほかの仕事でも同じこと
Webページ制作するエンジニアだけでなく、ブログに置き換えても同じ手順を踏んでいる
今日は、この2点についてお伝えしていきます。


1.Webページ全体を見て構成を把握する

Webページ全体の大枠を知ることから始めると作業が進めやすいことがわかりました。理由は、書きやすいところから仕上げていくと、後で修正が難しくなるからです。具体的には自分でペンとノートを使って大枠から、小さな要素に分解していき、構造を図示化します。
noteの記事上部であれば
・画像
・タイトル
・スキ表示
  └ハート
  └数字アイコン
・プロフィールと投稿時間
  └アイコン
  └情報部分
   └アカウント名
   └投稿時間
このような階層構造を書き、ブロックごとの間隔や位置関係を把握します。

ノートペンで図示化すると理解しやすい

2.ブログのライティングで構成から始めるのも同じ

Webページの全体像を把握するのは、ブログのライティングで構成から考えるのと同じです。理由は、いきなり文章を書き始めると、最終目的を忘れたり、章ごとの論理が破綻したりするからです。なので、ブログを書こうと思えば、事前準備→構成→ライティング→修正の流れになると思います。Webページ制作でいう、構造の図示→プログラムを書く→ブロックごとの位置関係の調整と同じ流れです。
これまで普通にやってきた他の仕事でも、作業を進めるには、同じことを意識していることに気づけました。

3.さいごに

Webページ制作は、全体の大枠を把握することからはじめる。さらに、この手順はブログ執筆ともよく似ていることがわかりました。
初めて学ぶWebページ制作だからこそ、自分の過去の経験に置き換えたり、照らし合わせたりすると、理解しやすいと感じました。
年内に何とかページを完成させようと、今日もPC画面と向き合って、課題に挑戦します!

今日はこの辺で。ありがとうございます。
僕がエンジニアの勉強をしていてきづいたことはこちらにも書いていますので、ご覧ください。

この記事が気に入ったらサポートをしてみませんか?