サルでき流 WordPressではじめる企業サイトの作り方

第13回 まずはこの4つを覚えよう!Webサイトの構成チェック

この記事を読むのに必要な時間:およそ 3 分

覚えよう!Webサイトの4つのパーツ(部品)

ではでは,行きましょうか。

一般的にWebサイトというものは,一枚モノに見えていても,よ~く見ると役割によっていくつかのパーツ(部品)に分かれています。

ほらほら,よ~く見てみてください

ほらほら,よ~く見てみてください

ページをポチポチとめくっていったときに,その都度内容が変化する部分と,まったく変わらない部分がありますよね。各部分は,それぞれ何らかの役割が与えられて,ページに存在しています。

もちろん,すべてのページをただ適当に,思いつきでバラバラに作って行っても,本来問題は無いものなのですが,長い歴史……いや,長くもないですね,ここ十数年のWebサイトの歴史の中で,段々と「こういう感じにしておいたほうが便利じゃね?」という経験が積もっていって,いつしかWebサイトの構成についてのお作法になりました。

これから皆さまがWebサイトを作っていくにあたって,そういう作法を知っておくことは非常に良いことだと思います。先人の知恵,いわゆるベストプラクティスからサクサク学べることは,後発チームの特権みたいなものですしね。

この連載の中で何度もお話に出ていますが,WordPressは「Webサイトのひな形」として作られていますので,当然そういうお作法についてはキッチリと踏まえられています。

WordPressの作りを見ていけば,自然とWebサイトのお作法が学べるというわけです。ほっほっほ。楽ちん楽ちん。

ではあらためて,行きましょう。

WoredPressでは,Webサイトを4つのパーツで構成しています。4つです。よほど奇を衒ったような,トリッキーなサイトでない限り,WordPressで作られたWebサイトは,必ず4つに分解できます。

気になるその4つのパーツは,こちら。

  • ヘッダー
  • コンテンツ
  • サイドバー
  • フッター

どこかで聞いたことがあるような言葉が並んでいますね。コンテンツは第2回で出てきましたから,皆さまはもうバッチリですね。ねっ!

言葉的には専門用語というより一般用語の雰囲気でもあるのですが,Webサイトの中ではそれぞれしっかりと専用の意味があります。Webサイトお作法,ひとつひとつ見て行きましょう。

魅力的な写真とメニューを入れる,ヘッダー

まず最初がヘッダーです。ヘッダーとはコンピューター用語で,⁠見出し」とか「上部に付ける情報」とか,そういう意味の言葉です。Webサイトでもヘッダーと言うと,言葉の通り「上のほうにある場所(領域⁠⁠」を指します。

「ヘッダー」⁠フッター」なんて言葉は,ワードでもよく聞きますよね

「ヘッダー」「フッター」なんて言葉は,ワードでもよく聞きますよね

このヘッダー。つまり,Webサイトの上のほうにある場所には,大きく分けて2つの機能が入っています。

ひとつは写真スペースです。よく見かけますね。Webサイトに訪れたときに,真っ先に目に飛び込んでくる写真。あの画像は,⁠アイキャッチ」と言いまして,Webサイトの顔になる大事な画像です。

もうひとつは各コンテンツにスムーズに行くためのメニューです。こちらもよく見かけますね。アイキャッチの下あたりに,各コンテンツのタイトルが書いてあるメニュー。あれはWebサイト用語で「グローバルナビゲーション(メニュー⁠⁠」と言います。

この2つがヘッダーには入っています。どちらも見るからに重要な要素ですよね。ヘッダーは画面の上部という「一番見やすい場所」「常に表示されている」ものですので,サイト内で最も重要なものがまとめられています。

ですので,ヘッダーをちゃんと設定するだけでも,Webサイトの見た目と使い勝手の両方がグーッと良くなります。

「Webサイト,格安で作ります!」なんていう制作会社さんのサービスの中には,⁠見た目についてはヘッダーの設定(と,あとちょっと)やって終わり」なんてケースがよくあります。そのくらいインパクトが大きいのが,ヘッダーです。

中身を書く場所,コンテンツ

ヘッダーの次が,Webサイトの中身にあたる,コンテンツです。コンテンツって言うと,<その昔>お話したように,⁠文章」「写真」とか,ネタのことを指すような気がするのですが,場所自体のこともコンテンツと言います。まあそういうもんだと。ええ。そう思ってください。

コンテンツはヘッダーの下にあります

コンテンツはヘッダーの下にあります

ヘッダーの場合は,基本的に「すべてのページに同じもの」を表示しますよね。全ページそれぞれにアイキャッチ画像を用意したり,全ページそれぞれに異なるグローバルナビゲーションを設定するのは,正直シンドそうですし,ユーザーから見ても落ち着きません。

ですが,コンテンツは各ページでバラバラです。

それはそうですね。⁠商品A」「商品B」はまったくの別物ですので,当然別のコンテンツになります。必要なネタの数だけ,コンテンツは個別に作らなければならない,ということです。

WordPressの場合,ヘッダーは「ヘッダー画像管理機能」「メニュー管理機能」を使って,全体で1回設定しますが,コンテンツは「記事投稿機能」を使って,1コンテンツごとに追加していきます。

なんだかムズカシそうな書き方になってしまいました。いけませんいけません。

ここでは,「コンテンツ=記事」とだけ覚えておきましょう。

ではでは,次に行きますよ。

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。