スマートフォンサイトを表示する

  1. TOP
  2. ホームページをつくるために必要なことを学ぼう ~はじめてでも大丈夫!きっと作れる!~ : 第8回 ページの構成を知ろう

エキスパートコラム

ホームページをつくるために必要なことを学ぼう
~はじめてでも大丈夫!きっと作れる!~(全12回)

第8回:ページの構成を知ろう

執筆:野崎 晃(株式会社デック)

2014年10月6日更新

  • このエントリーをはてなブックマークに追加

閲覧数4,663views

このコラムをPDF形式でダウンロードする

何か作ろうとしたとき「いざ作ろう!」と思ったものの漠然としてしまって途中で諦めた。なんて経験ありませんか?ホームページも作ろう!と意気込んだものの何から手を付けていいのかわからずに諦めてしまわないために、本コラムで必要な知識やヒントをお伝えします。

第7回ではさまざまなコンテンツをブロックを積んでいくようにページをつくるJimdoの編集方法について学びました。今回は実際にページを作るには、どんなことに気をつけてどの機能を使って作れば良いのかを学びます。

あっくん

チッチ、Jimdoでページを作るための機能や操作はわかったよ!
でもね、ページを作っていくときにどのコンテンツの機能を使ってページを作ったらいいかわからないんだ。

チッチ

あっくんはWebサイトを見るの大好きだから毎日いろんなページを見ているよね、そこにヒントがあると思うよ。

あっくん

確かに毎日いろんなページを見てるけど、どうページを作ればいいかって考えると難しいなぁ。見るのと作るのって全然違うんだね。

チッチ

そうだね。あっくん、このページを見てごらん。とってもシンプルだけど綺麗で見やすいページだよね。

あっくん

うん、スッキリして読みやすくてステキだね!

チッチ

ちなみにこのページは「見出し」「文章」「写真」「余白」「カラム」で構成されているんだよ。

あっくん

そっかぁ、思ってたより少ないコンテンツで構成されてるんだね。

チッチ

そう、ホームページは基本、「見出し」「文章」「写真」の3つを利用すれば作ることができるよ。「余白」や「カラム」は読みやすくするための機能だね。他には地図いれたりお問合せのフォーム入れたりとかあるけど、そんなにたくさんは使わないよね。

あっくん

たしかにそうだね。ねぇチッチ「文章」と「見出し」ってどう違うの?
どっちも文字が表示されるんだよね?

チッチ

そうだねあっくん、「文章」も「見出し」も文字が表示されるという点では一緒だけど、Webサイトにおいて見出しってとても大切で、見出しの大と中と小の使い分けもしっかりしないといけないんだ。

あっくん

とっても大切?見た目が違うだけじゃなくて?

チッチ

そう、見出しによって見た目も変わるけど、それだけじゃなくて見出しには役割があるんだよ。本や小説など文章では章立てのところや節(セクション)のあたまに見出しって使われているよね、それと同じだと考えるとわかりやすいかもね。

あっくん

なるほど、例えば飲食店のメニューページであれば、「メニュー」が”見出し大”で「フード」や「ドリンク」が”見出し中”で、フードの中の「肉料理」「魚料理」が”見出し小”になるような感じでいいのかな?

チッチ

あっくん、その通りだよ!
あと見出しは"小"まで無理に使わなくても大丈夫だよ。なんとなく機能としてあるとみんな使わないといけない気がしちゃうけどそんなことないから安心してね。

あっくん

でもチッチ「文章」だと、文字の大きさ変えられるし、色も付けられるから見出しっぽく見せることができるし、自由にできるからいいなーって思うけどダメなの?

チッチ

うん、見出しのように見えるようにしても文章は文章のままなので検索エンジンや音声で利用するブラウザなどからは見出しとして認識されないんだ。あと見出しがページによってバラバラだとサイトを見るひとにもわかりにくいしね。

あっくん

そうかぁ、検索エンジンの評価にも影響でちゃうといやだね。

チッチ

そうだね、だからページを作るときには節(セクション)のあたまに見出しを利用してページを作ることを意識してね。

あっくん

はーい!
あ、ねぇ、チッチ見出しってどういうこと書いたらいいの?

チッチ

いろんな書き方があるけど、その節(セクション)に書いてあることを要約して書くことをオススメするよ。そうするとページを見るときに見出しだけざっと読むとページに書いてある内容がだいたい把握できるようになるよ。

あっくん

わかった!要約ね。なんとなく見出しと仲良くなった気がするよ。
チッチ、次に写真のこと聞きたいんだけど・・

チッチ

うん。写真も大切な要素だね!
「目は口ほどに物を言う」なんてことわざもあるくらいだし。

あっくん

チッチ、それは僕もわかるよ!美味しいケーキは見た目から既に美味しそうだもん。目でも楽しむものだよねケーキは。

チッチ

・・・。写真はページで伝えたいことを補助する役割でいれると効果的だよ、ケーキ屋さんの商品紹介ページだったらケーキの写真が大切だね。ステキな写真は見てるだけで幸せだね。

あっくん

チッチ、写真を載せるときに気をつけることある?

チッチ

そうだね。写真って文章と比べてパッと理解できて印象に残りやすいから、ケーキ屋さんであれば、暗い写真や、色が変な写真を使うと美味しくなさそうに見えちゃうよね。

あっくん

ケーキ屋さんでケーキがまずそうだと最悪だね・・

チッチ

そうだね、プラスのイメージをもってもらえる写真を入れることが大切だよ。あと、ページや内容にまったく関連していない写真を入れないようにしようね。

あっくん

ぼくチッチ好きだからケーキ屋さんのサイトにチッチの写真いれようと思ってたんだけど、ケーキとチッチは関係ないからサイトを見に来たお客さんびっくりしちゃうね。

チッチ

写真は自分で撮影をしたり、プロに撮影してもらったり、素材集や素材サイトを利用する方法もあるね。

あっくん

自分で撮れるなら撮りたいけど、ケーキの写真はなかなか美味しそうに撮るのが難しいなぁ。

写真撮影については、鍋坂さんのコラムも是非お読みください。

チッチ

写真は本当に大切で、1枚変な写真があるだけで全体の印象を左右することもあるから、自分で撮影してもいいし、場合によってはプロに頼むのもいいとおもうよ。

あっくん

そうだね、わかった!まず自分で撮ってみたいから写真を撮る練習をしてみる!だからチッチ、写真撮るためのケーキを用意して!

チッチ

いいけど、あっくん撮影したケーキは食べられないよ?

あっくん

え!なんで!?それじゃ写真撮影する意味無いよ!!

チッチ

あっくん、やっぱりそういう魂胆だったんだね、僕はわかってたよ。

あっくん

じゃあ僕に食べさせて!

チッチ

ちゃんと綺麗な写真撮れたらね!

まとめ

Jimdoではページを作成するために、様々なコンテンツの機能が用意されています。一見たくさんありすぎて何を使ってページを作っていったらよいか迷ってしまうこともあると思いますが、今回学んだように「見出し」「文章」「写真」の3つを適切に使うことができればWebサイトを作ることが出来ます。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

野崎 晃(のざき・あきら)

野崎 晃(のざき・あきら)

株式会社デック 代表取締役/JimdoExpert
http://s-deck.jp/
http://jp-m.jimdo.com/

愛知県名古屋市を拠点に活動するWeb制作の会社の代表。
2009年Jimdoに出会い、より多くの人にJimdoの便利さ/楽しさを伝えるべく解説ページ「Jimdoでつくる簡単ホームページ!」を開設。JimdoJapan公式のJimdoCafeを運営するなど、Webサイトを多くの人にもっと身近に感じてもらうべく活動中。

著書に『WebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)。

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/7/30~2017/8/5]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!