記事作成日: 

記事更新日: 

Webサイトのトップページに最低限必要と考えられるページを作成した【個人サイト制作】

個人サイトにとってWebページに記載する必要最低限の要素は何か?と筆者は考えた。Head部に最低限記載しておくと良い要素、Body部をどのように分割するのか?等だ。簡単ではあるが筆者がHead部とBody部に施した要素を書き残しておく。

筆者が考え導き出した個人サイトのWebページにおけるHead部に記載しておいた方が良い必要最低限の要素は以下の通りだ。

個人サイト初心者にとってウェブサイトのHead部に記載する項目が多岐に渡るように感じるかもしれないが上記が必要最低限記載すべき項目と筆者は考えるに至った。

ウェブサイトのBody部はトップページに掲載するレイアウトをどのようにするか?と考えて決めた。筆者はシンプルに3部構成にした。

2カラム構成のウェブデザインを採用した場合はmain部を分割するようにしたら良い。3カラム構成のウェブデザインを採用した場合も同様にmain部を分割するようにしたら良い。問題はスマホ表示の際にレスポンシブデザインを意識することを念頭においておく必要があるということだ。

シンプルなウェブデザインの個人サイトという目的の為、筆者はトップページに以下の項目編成を行った。header部には、ウェブサイトタイトル、ホームボタン、Cookieポリシー、プライバシーポリシーへのリンクを掲載した。footer部には、このウェブサイトについて、著者の他サイトへのリンク集、著者プロフィールへのリンク、コピーライトの明示を行った。

軽量CSSフレームワークを採用した理由が如実に影響する部分は、Body部にあたる。イチからHTMLやCSSを記述していく手間をグリッドレイアウトを採用することで簡単に分割レイアウトが使用することができるからだ。筆者の個人ページもグリッドレイアウトの恩恵を受けている。グリッドレイアウトのもう一つの利点はレスポンシブデザインだ。スマホ表示の際に順序よくコンテンツの記述どおりに表示してくれるからだ。

静的サイトジェネレーターJekyllで作成した筆者の個人サイトにパソコン、スマホの両方からアクセスしてもらうと一目瞭然だ。一般的なブログで採用されている2カラム構成の場合、各記事タイトルと記事の概要または冒頭部分の文章が掲載され、続きを読む等のリンクボタンがウェブデザインとして採用されている。筆者の個人的な意見としてだが記事タイトルだけの方がページの表示速度は速くなるだろうと考えた結果、筆者の個人サイトのトップページのスクリーンショットにあるように各記事へのリンクだけを掲載することにした。

最後に筆者がトップページに作成したページを例として書き残しておく。

  • index.md(トップページ)
  • cookiepolicy.md(Cookieポリシー)
  • privacypolicy.md(プライバシーポリシー)
  • about.md(このウェブサイトについて)
  • link.md(リンク)
  • profile.md(プロフィール)
  • 401.md(401ページ)
  • 403.md(403ページ)
  • 404.md(404ページ)
  • 500.md(500ページ)

著者:

【広告】

独自ドメインを取得するならオススメは

【広告】

レンタルサーバーを契約するならオススメは

Webサイト運営の向上を目的にcookieを使用しております。このバナーを閉じるか、当Webサイトの閲覧を継続することでCookieの使用を承認していただいたものとさせていただきます。

このWebサイトのCookieの詳細を確認する