広告

BLOGサイトのデザインを考えよう【ホームページとサイトの仕組】

0098_start-blog-003-1

サイトの中みはどうなってる...

ホームページとトップページは、ちがうの…

こんにちは "osaboo"です。"@osaboo_Bot"

Question

そもそも「サイト」ってなに? 「ホームページ」? 「トップページ」?
「投稿ページ」? 「カテゴリー」? 「タグ」?
よく考えると…分かってる様で分かってないぞ…
言葉は、知ってるつもりだけど…サイトのなかでどうなってる?

\ こんな疑問を1つ1つ解決して行きます。/

サイトの構造を知る必要があるな!
各ページについても知ってないと全体的に見えてこないぞ!

osaboo

(初心者の当サイト管理人がぶち当たった壁を解りやすく噛み砕いて説明していきます。)

<ブログを始めるなら 『WordPress』▶︎ https://ja.wordpress.org/ をご覧ください>

こんな方におすすめ!

  • ブログを始めようとしている。
  • サイトの基本的なことが知りたい。
  • ブログを始めるのに必要なことを知りたい。

という事で、今回の記事では…

サイトのデザインについて整理してみました。サイトの構造をわかりやすく解説します。構造が理解できれば、各ページ”の作り方のイメージが膨らむと思うので是非参考にしてください。

\当サイトで愛用しているおすすめWordPressテーマ  ACTION / AFFINGER6 です!/
『 すごいもくじ LITE 』無料キャンペーン実施中!!

AFFINGER6


ページの配置名称と役割を覚えよう。(初歩編)

social-1024x796

各テーマによって細部の名称は多少異なりますが基本的な配置名称と役割を覚えておくことで、カスタマイズする時や、テーマのメニューを見たときの理解が深まります。色々始める前にあらかた覚えておきましょう。

基本的な領域は大きく4個!

  1. ヘッダー領域
  2. サイドバー領域
  3. コンテンツ領域
  4. フッター領域
osaboo

上記4箇所に設置される主な表示項目を説明していくよ。まずは、全体の配置はこんな感じ!

基礎的なページ画面の全体は下図の様になります。

0098-1

ポイント!

いつも見ている「webサイト」の画面は、基本的に上図のように配置されています。
上の画像を意識して、どこでもいいので普段よく見るサイトを見比べると…なんとなく配置されてるイメージが掴めるでしょ!^^ 
イメージが何となく掴めたら各領域の表示されている項目と役割を説明していきます。
「簡単なんで、ピッチあげていきましょう!!」

補足

  • 「ウィジェット」とは、アプリケーションを開く事なく画面上に表示しておけるショートカット機能のことです。
  • 「アドセンス」とは、自動広告表示のこと。(詳しくは省きます。)

WordPressブログサイトの設計にお役に立つ記事2つ!

0092_start-brog-001-1a
ブログサイトを作ろう!初心者がやってみた【コンセプトは5個!】

超初心者(当サイトの管理人)が、「何故サイトを立ち上げるのか」サイトを立ち上げブログを始める為に何からやったのかを「コンセプトを5個」をあげてご紹介します。四苦八苦しながら、何度も失敗して見えてきた初心者だから見える解らないことをご紹介します。

記事詳細はこちら

0095_start-blog-002-1
BLOGサイトを始める前に覚えておきたい!【用語と意味10個!】

ブログ・サイトを始めようとして、色々調べ始めると最初にぶち当たる壁は!専門用語です。サイト作りに限ったことではありませんが、この専門用語をある程度理解しておかないと知りたいことが調べられないなんて事になります。そうならないための予防策をご紹介します。

記事詳細はこちら

ヘッダー領域 (画面上全体位置)

以下の画像イメージを参照ください。

0098-2

ヘッダー領域(赤枠)

主な表示項目と役割

▶︎ サイトのロゴ

▶︎ キャッチフレーズ

▶︎ サイトのイメージ画像

▶︎ ガイドメニュー

▶︎ 検索

▶︎ 広告

ヘッダー領域のポイント

サイトの顔となる領域です。サイト特徴や個性を出せる場所なのでちょっと頑張ってカッコよくしたいところですね。^^

サイドバー領域(画面中央横位置・左右選択可能)

以下の画像イメージを参照ください。

0098-3

サイドバー領域(赤枠)

主な表示項目と役割

▶︎  検索

▶︎ プロフィール

▶︎ ガイドメニュー

▶︎ 記事関連

▶︎ 広告

サイドバー領域のポイント

サイト管理人のプロフィールで個性を出せるのでちょっと頑張りましょう。^^
また、「メニュー」や「記事」を表示する事で観覧しやすくするなどいろいろ工夫しがいのある領域です。

コンテンツ領域(画面中央位置)

以下の画像イメージを参照ください。

0098-4

コンテンツ領域(赤枠)

主な表示項目と役割

▶︎  記事

▶︎ 記事関連

▶︎ 広告

コンテンツ領域のポイント

ここがメインの場所です。伝えたい内容をしっかりと画像や文章で作り込んでいきましょう。
「記事の内容が最も大切だと思います。」「ゴリゴリの記事を書きましょう。^^」

フッター領域(画面下全体位置)

以下の画像イメージを参照ください。

0098-5

フッター領域

主な表示項目と役割

▶︎ サイトのロゴ

▶︎ キャッチフレーズ

▶︎ ガイドメニュー

▶︎ 検索

▶︎ SNS

フッター領域のポイント

ここもサイトの顔となる領域です。
領域全体の配置を考慮してカッコよくしたいところですね。^^

ページの配置名称と役割を理解したら、次は、一画面では解らないサイト全体の構造を理解していきましょう。

\ 初心者でも安心」!コスパ最強の洗練されたWordPressテーマ /

AFFINGER6 購入 ▶︎ 詳しくはこちら

サイト全体の構造を理解しよう。(初歩編)

social-1024x638

サイト全体の構造を理解することで、各々のページの作り方(サイトの作り方)が見えて来ます。
最初は大雑把で良いと思うので本記事のタイトルでもある様に「デザインを考える」為に必要な簡略した説明をしていきます。「とりあえずこれだけ知ってればなんとか先に進める!」レベルの説明解説になります。

「とりあえずこれだけ知ってればなんとか先に進める!」

  1. トップページ
  2. 投稿ページ
  3. カテゴリーページ
  4. 固定ページ
  5. ランディングページ
osaboo

上記5種類のページに就いて説明していくよ!

サイトの構造イメージは下図の様になります。

0098-6

サイト(website)とは、トップページ・投稿ページ・ランディングページ等(webページ)を一つにまとめた場所の事です。

左図の様なイメージで、カテゴリーやタグ等の
全てのものが含まれる場所の事です。

それぞれのページに役割を持たせて、サイトが出来上がっています。

ページが束になってノートor本!

色々なページが詰まっている「ノートor本」みたいなイメージでいいと思います。

上図の様なイメージはできましたか?!
それでは、各々のページの意味と役割を説明していきます。

トップページ≒ホームページ

0098-7

サイトの入り口に当たるページのこと。各Webページへのリンクなどを含み、サイト全体の顔としての役割を果たすトップページとホームページの違いはあるが、ほぼ同じと考えておいて良いと思います。厳密には違うけど、ほぼ同じと言う認識で色々知識が増えたところで再認識しても問題ないでしょう。

投稿ページ

0098-8

投稿で作った記事は、カテゴリーページと結びついて、投稿ページに自動的に載せられます。
カテゴリーごとのページを作ることで、投稿記事を分類・非表示等が自動で行えます。

カテゴリーページ

0098-9

投稿を分類したカテゴリーの項目毎に表示できるぺージです。投稿ページはスペての記事が自動的に表示されるのに対して、このページにはカテゴリーで割り振られた記事のみが表示されます。

固定ページ

0098-10

主に「会社・個人情報」「お問い合わせ」「サイトマップ」等、投稿とは別の単体ページの事です。

ランディングページ(LP)

0098-11

広告用のページの事です。(狭義のランディングページ)ページ内で商品やサービスの概要をまとめ、そのページ内で問い合わせや資料請求、購入などができるようなページのことです。ページ内で完結するため、サイトとは切り離されたページとなります。

ランディングページ(LP)に就いては、別途詳細を記事にしてお伝えします。

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 購入 ▶︎ 詳しくはこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!BLOGサイトのデザインを考えよう【ホームページとサイトの仕組】

ブログサイト全体のイメージを膨らませるために 基本的なページの配置名称と役割を知ること。また、サイトの中には、トップページ・投稿ページ・固定ページ等が含まれており、各々の役割があること。
この2つを踏まえて、サイトのイメージを作っていきましょう。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう \^^/