ホームページ構造の簡易思考論 #1 基本構造編

ホームページ制作は、ノーコードなどを使ったり、Wordpressを使ってテンプレートで内容をデザインするだけであれば、簡単に作れてしまいますが、 HTMLのDOM構造を自分でゼロベースから考えて作る人は、どんなホームページでも作ってしまうことができるので、LPなどの斬新なデザインが求められるページ制作においては必要不可欠と言えるでしょう。 HTMlを軽視してしまうプログラマーや、ホームページ制作初心者にとっては、DOM構築のセオリーってどうすればいいか全くわからないというお悩みを聞いて何回かに分けてブログを書くことにしました。 ホームページのHTML構造について、どのように構築すればいいかを個人的な視点ではありますが、書き残しておきたいと思います。

どんなトリッキーなページでもHTMLはブロックパズル構造

最もシンプルな構成

一般的なホームページは、おおよそ次のような構造になっています。 LPなどは、マーケティング的に、この形式で縦長のページにするのが効果的と言われています。

サイドメニュー構成

そして、システムなどで使うようなメニュー数が多いページであれば、サイドメニューがついて次のようになります。

３カラム構成

最近ではあまり見かけませんが、両サイドメニュー（３カラム）パターンもあります。 デザイン系のアプリケーションなどで、サイドメニューをアイコンだけにしたりする形で使われるケースもありますね。 基本的に上記の構造がほとんどで、多少の構造の違いはあっても、この形状で作る事を考えればホームページはそれなりの形になります。 見て分かる通り、積み木を重ねただけのような形状がりかいできると、大枠の構造はこうやって簡易に作っておく事が、その後複雑な仕組みを導入する場合でも対応がやりやすくなるという事です。 それぞれの構造のDOM構造をデバッグコンソールなどで見てもらうと、HTMLの構造の簡易さがわかると思います。

少し作り込んだ構成

上記の構造の中に、色々な素材を組み込んでいくと次のような構造になっていきます。

まとめ

ホームページのコーディングは積み木を組み立てる作業のイメージのようなものだと理解できたと思います。 でも、ヘッダの中にトリッキーな構造を入れたり、レスポンシブデザインでスマホの時にどうやって変換すればいいのかわかりにくいかもしれませんが、 上記の構造にしておくことで、シンプルに対応することはできるようになります。 ようするに、この時点で複雑な仕組みにすると、その中のコンテンツにおいても困惑してしまうという結果になり、ページ内のコンテンツの変更をするために、とても苦労をしてしまうでしょう。 シンプルに構築をする基本としての大枠構成は、積み木構造で考えようという事を理解しましょう。