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

  1. TOP
  2. ホームページをつくるために必要なことを学ぼう ~はじめてでも大丈夫!きっと作れる!~ : 第9回 ナビゲーションのメニューでサイトを構成しよう

エキスパートコラム

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

第9回:ナビゲーションのメニューでサイトを構成しよう

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

2014年11月10日更新

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

閲覧数6,470views

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

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

第8回では多くのページが「見出し」「文章」「写真」で出来ていることや見出しの使い方、写真を入れる際に気をつけることを学びました。サイトのデザインを変えてページを作れるようになったあっくん。今回はリンクとナビゲーションについて学びます。

あっくん

チッチのおかげでページの編集方法や、Jimdoのどんな機能を使ってページをつくれば良いかわかってきたよ!
ひとつ教えて欲しいんだけど、文章の文字や写真をクリックして別のページに飛ぶようにするにはどうしたらいいの?

チッチ

ああ、リンクの仕方を教えていなかったね。Jimdoで作ったページもそうだけど、ホームページは自分のサイトのページへ移動したり、他のサイトへ移動するときにリンクを使うんだ。

あっくん

そうそうリンク!チッチ、そのリンクも簡単にできるの?

チッチ

そうだね、では文字を押したら別のページに移動できるようにリンクを設定してみよう。まずは押したら飛べるようにしたい文字をマウスで選択して・・

あっくん

選択したよ!

チッチ

その選択の状態のまま、下にあるリンクのボタンを押すとリンクの設定画面がでるよ!自分のサイトのなかでリンクを設定したいときは「内部リンク」もしくは「ブログリンク」を選んで下のリストから移動したいページを選択するんだ。

あっくん

お友達のサイトとか外のサイトに移動するリンクを設定したいときは「外部リンクかメールアドレス」を選んでアドレスを書けばいいんだね。

チッチ

そのとおり。あとはファイルのダウンロードをするリンクもここで設定できるんだ。ダウンロードのリンクを利用するには、あらかじめどこかのページに「コンテンツを追加」から「ファイルダウンロード」の機能を使ってファイルをアップロードしておく必要があるよ。

あっくん

画像も同じ要領だね!これでよしっと!
僕が作っているページからチッチのページへリンクを設定したよ!これでチッチのページにいつでも行けるようになった!

チッチ

ありがとう、あっくん!Webというのはこのリンクで様々なサイトがつながってできているんだ。世界中のサイトがつながっていると思うとおもしろいね。
リンクがわかったところで、そろそろあっくんに必要になる、ナビゲーションについて説明するね。

あっくん

ナビゲーションって何?方向音痴の僕に道案内してくれるやつ?

チッチ

あっくん、それはカーナビゲーションだよ(あっくん方向音痴なんだ)。ホームページでいうナビゲーションは、いろんなページに飛ぶためのメニューボタンのことを言うんだ。

あっくん

あのメニューボタンたちのことをナビゲーションっていうんだね。

チッチ

Jimdoはナビゲーションも自由に編集することができるんだ。あっくん、メニューボタンの近くにマウスカーソルを持っていってごらん?

あっくん

あ!ナビゲーションの編集ってボタンが出てきた!これをクリックすればいいんだね!

チッチ

そのとおり!編集画面が出てきたでしょ?この画面でメニューボタンの文字を変更したり、メニューボタンの順番を変えたりできるよ。あと、何もない新しいページを増やしたりページの削除ができるんだ。

あっくん

ここで編集して保存を押せば編集した内容が実際に反映されるんだね。

チッチ

そうだね、ただし「ページの削除」は保存ボタンを押さなくても削除の操作をした瞬間に消えてしまうので注意してね。

あっくん

わかった、気をつける!
順番を変えるのとページの追加と削除はわかるんだけど、上下じゃなくて左右の矢印はなに?

チッチ

あっくん、それは階層の操作ができるものだよ。

あっくん

あーなるほどね、階層ね。
うんうん、チッチ・・階層ってなに?教えて!

チッチ

あっくん、Jimdoでページを100ページ作ったらナビゲーションのメニューボタンってどうなると思う?

あっくん

100個並ぶ・・・?100ページくらいあるサイトはたくさんあるけど、メニューボタンが100個並んでるサイトは見たことないね。

チッチ

そうだね、ページをうまく整理して、メニューボタンを押したら更にメニューが出てくるような作りになっているよね。それが階層なんだ。パソコンのフォルダを想像してみるとわかりやすいかもね。

あっくん

ああ、なるほど。
ファイルがいっぱいになってきたら、整理しないとわかりにくくなるから同じような種類のファイルはフォルダを作ってまとめたりするね。

チッチ

Jimdoは3階層目まで作ることができるんだ。1階層目は多くても7~8くらいまでに抑えた方がわかりやすくなるよ。
ナビゲーション・・サイトの構成をあらかじめ先に設計してホームページを作るのもいいし、考えながらページを作ってあとで整理してもいいよ。
あとで整理できるところもJimdoのいいところなんだ。

あっくん

僕は設計から入ると考えているうちに途中で挫折しちゃいそうだけど、とりあえず作ってあとで整理してもいいって考えると気が楽だね。

チッチ

どんなサイトの構成にするか、どんなことを書くと良いかは「第2回:どんなホームページを作るかを考えよう」の時のことも思い出してね。

あっくん

あと一番右の目のマークはどんな機能なの?

チッチ

それはね、「ページは存在してるけどメニューボタンに出したくない」ページを作りたい時に使うナビゲーション非表示機能なんだ。
これを有効にすると、そのページはログインしているときしかメニューボタンが出てこなくなるよ。

あっくん

じゃあ作りかけのページとかはこの目のマークで見えないようにしておけばいいのかな?

チッチ

そういう使い方もあるね。
ただしナビゲーションに表示されないだけでページ自体は存在しているので、検索サイトに見つけられたり、アドレスがわかれば見えてしまうから、ひみつの情報なんかは書かないように気をつけてね。

あっくん

(あぶない。もうすこしで僕のひみつのケーキのレシピを書くところだった)

チッチ

あっくん?どうしたの?ケーキのこと考えてたでしょ?

あっくん

そ、そんなことないよ。

チッチ

あとはJimdoProとBusinessの有料版はページをまるまるコピーする機能が利用できるから、商品の説明ページとか同じような構成でページをたくさん作るときは便利だね。

あっくん

よし、これでデザインの変更もわかったし、ページの作り方やナビゲーションの編集もわかったからケーキ屋さんのサイトをバリバリ作っていくね!いろいろ教えてくれてありがとうチッチ。

チッチ

あっくん、ご褒美に僕を散歩につれていって!

あっくん

よーし、大きな公園へいこう!

チッチ

やったー!

まとめ

リンクをつかって自分のサイト内の他のページや、外のページへの移動する方法や、ナビゲーションの編集で新しいページを作ったり、階層で整理することを学びました。ナビゲーションが適切になっていないと、サイトに訪問した方は迷子になってしまいます。さっき見たあのページに行きたいのにどこから飛べば良いのかわからない・・とならないように整理してわかりやすくしましょう。

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

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

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

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

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

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

  • 1年間無料

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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