第2回：イタリアンレストラン編 飲食店のホームページに求められる情報

業種別ホームページ作成講座（全6回）
第2回：イタリアンレストラン編
執筆：志鎌 真奈美（Shikama.net代表）
ひとくちに「ホームページを作る」と言っても、提供しているサービスや想定している読者層によって、設計の仕方や作成
方法が異なってきます。ここでは、「目次の作り方」「業種に合ったレイアウトの選び方」「背景色やナビゲーションのカス
タマイズ」を軸とした「伝わりやすいホームページ作成のコツ」を業種別に解説します。
第2回目は、イタリアンレストランのホームページの作成です。
飲食店のホームページに求められる情報
たとえば「今いる駅の近くのイタリアン料理店でランチを食べたい」と考えてネットで探している人が、ホームページを見
たときにどんな情報を必要とするでしょうか？
●
●
●
●
●
●
●
場所(地図)
お店の雰囲気
ランチはあるか？
電話番号
ドリンクメニュー
予約方法
料金
などが予想されます。これらの項目から、まずはホームページの目次を組み立てていきましょう。
ホームページの目次を作ろう
(1) ホームページの目次（「サイトマップ」とも言います）を作ってみましょう
まずは、思いつく順に書き出してみます。付箋などを使うとよいでしょう。
(2) 必要最低限の情報をピックアップし、目次（サイトマップ）を作ってみましょう
最初は、必要最低限のページで目次(サイトマップ)を組み立てます。運営していく中で必要なページを足していきましょう。
スタート時点で必要のないものは削ります。
ホームページを作っていくうちに、ゴチャゴチャしてわかりにくくなることがありますが、原因として「目次」が整理されて
いないというケースが多く見られます。特に「第1階層」は、7つ以内にまとめると、スッキリと見やすくなります。
(3)「ナビゲーション機能」を使って、(2)で作成した目次を設定していきます
1. ログイン後、「ナビゲーションの編集」をクリックします。
2. 文字の入れ替えなどを行います。
ナビゲーションの文字を入れ替えます。
順序を入れ替えることができます。
階層を変更することができます。（第1階層から第3階層まで設定可能）
新規のページを追加します。
不要なページを削除します。
ページを非表示にすることができます。
3. ナビゲーションの編集が終わったら「保存」ボタンをクリックします。
ナビゲーションの設定が完了しました。
業種に合ったレイアウトの選択とカスタマイズ
次に、業種に合ったレイアウトを選び、全体のカラーを変えてみましょう。
2014年8月13日以降、新しいレイアウトが使えるようになりました。「レイアウト」のボタンをクリックすると、下記のような
画面が表示されます。
表示されない場合は、新機能へ切り替わっていない可能性があります。右側に表示されるツールバーの「設定」をクリッ
クし、「The New Jimdo」を選択してください。
それでは、新しいレイアウトを使って次のステップへ進めましょう。
(1) 業種に合ったレイアウトへ変更しましょう
1. 「レイアウト」画面から「Miami」を選択し、「プレビュー」の右隣にある「プリセット」ボタンをクリックします。
「プリセット」はあらかじめ用意されているレイアウトのバリエーションです。
2.
プリセット画面が表示されますので、この中でオレンジ色の文字が表示されているものを選択します。「プレビュー」をク
リックして表示を確認しましょう。
3. 「レイアウトプレビュー」が表示されたら「保存」をクリックします。
4. レイアウトが変更されました。
(2) 背景画像（ヘッダーイメージ）を変更します
今回選んだレイアウトは、「背景画像」を「ヘッダーイメージ」として扱う仕組みになっていますので、背景画像を変更する
ことによって、ヘッダー部分に表示されるイメージが自動的に変わることになります。
ここでは、複数の写真をアップロードして、スライドショーのように表示させる方法を解説していきます。
1. 右のツールバーから「スタイル」をクリックします。
2. 画面上部にバーが表示されますので「背景」をクリックします。
3. 背景画像を変更する画面が表示されます。最初から設定されている画像を削除します。
表示されている背景画像の右下に「ゴミ箱」アイコンがありますので、クリックしましょう。
4. 「この画像を削除しますか？」と表示されますので「はい」をクリックしてください。
5. 次に、「画像を追加」ボタンをクリックします。
6.
ボタンの少し下に「ファイルを選択」というボタンが表示されますので、ここをクリックして、画像をアップロードしていきま
しょう。
7. 複数の写真をアップロードしました。
※ここでは必ず2枚以上の写真をアップロードしてください。
8.
背景設定画面を少し上の方へスクロールすると、「単一表示」「ランダム表示」・・・と書かれたエリアが表示されますの
で、「スライド表示」をクリックします。
9. 設定が終わったら、今度は画面を下の方へスクロールします。
画像を切り替える際の「エフェクト(効果)」や「速度」を変更できる画面が表示されますので、「エフェクト」を「フェード」に、
「画像が切り替わる速度」を「早い」に設定しました。
これで背景画像の設定は完了です。
飲食店のホームページは写真が命です。閲覧者に「おいしそう」と思ってもらえる写真でなければ意味がありませ
ん。
もし自分で撮影するのであれば、「写真撮影入門」を参考にして練習してみてください。予算がある場合は、プロに
依頼することをおすすめします。
(3) ナビゲーションやボタン、見出しの色などを変更しましょう
次に、ナビゲーションやボタンの色などを変更し、イタリアンレストランらしいカラーにしましょう。以下の配色イメージのよ
うに茶とベージュを使って、ナチュラルで温かみのある印象にします。
配色のイメージ
1. 右側のツールバーから「スタイル」をクリックします。
2.
そのままナビゲーションバーの近くへカーソルを動かすと、カーソルの形がペンキマークになります。「ホーム」の左側で
クリックしてみましょう。
3. 「背景色」をクリックすると、カラーパレットが表示されます。
色を変更するためのパレットが表示されます。ここでは、数字を入力して色を変更しました。(rgb(255, 251, 246))
選び終わったら「選択」をクリックします。
4.
ナビゲーションの背景色が変更されましたので、同じ要領で、ナビゲーションボタンも変更します。ペンキ型のカーソルを
「ホーム」の上に合わせてクリックしましょう。
以下のツールが画面の上部に表示されます。カーソルが乗ったときと乗っていないとき（通常時）の文字色や背景色を、
分けて設定することができます。
フォントの種類 フォントサイズ 太字、斜体 通常時のボタンの文字色
カーソルが上に乗った時のボタンの文字色 通常時のボタンの背景色
カーソルが乗った時のボタンの背景色
(4) 見出しの色や文字の大きさを変更しましょう
見出しの色や文字の大きさも「スタイル」を使って、同様に変更することができます。右側のツールバーから「スタイル」を
クリックし、カーソルがペンキの形になるところが変更可能な箇所です。
ナビゲーションの文字設定を変更するツール
フォントの種類
フォントサイズ
文字の色
背景色
見出し・文章・リンクなどの設定を変更するツール
フォントの種類 フォントサイズ 太字、斜体 文字の色
大文字、小文字の組み合わせ方法（英文表記のときに有効）
行間
左寄せ、中央寄せ、右寄せ
水平線の設定を変更するツール
水平線の太さ
水平線の色
実線、点線などを選択
ナチュラルで温かみのあるカラーに変更しました。
各背景やフォントカラーの設定情報は以下の通りです。
【背景カラーの設定】
ナビゲーションの背景カラー：rgb(255, 251, 246)
コンテンツ部分の背景カラー：rgb(255, 251, 246)
フッター部分1 の背景カラー：rgb(121, 63, 0)
フッター部分2 の背景カラー：rgb(46, 27, 6)
【フォントカラーの設定】
ナビゲーション部分のフォントカラー：rgb(15, 2, 2) Active 時：rgb(255, 153, 0)
コンテンツ部分のフォントカラー：rgb(68, 68, 68)
フッター部分1 のフォントカラー：rgb(255, 255, 255)
フッター部分2 のフォントカラー：rgb(151, 152, 155)
※特に
のコンテンツ部分は、もともと設定されているフォントの色がかなり薄いため、読みやすい色に変更することをおすすめし
ます。
メインイメージの上にタイトル（店名）を入れる
レイアウトや色の変更などが完了したら、メインのイメージの上にお店の名前を入力しましょう。
1. 「ホームページタイトル」と書かれた箇所をクリックします。
2. 店名を入力します。
3. 再度、スタイルの機能を使って大きさを変更します。右サイドバーの「スタイル」ボタンをクリックしましょう。
4. ペンキ型のカーソルを店名のエリアに合わせてクリックします。
5. 文字の大きさ、フォントの種類、色などを変更します。
フォントの種類：Bad Script
フォントサイズ：85px
装飾：太字
フォントのカラー：rgb(255, 255, 255)
英字の綴り設定：通常（Abc）
6. 設定し終わったら、画面の右上に表示される×印をクリックします。
7. ロゴのエリアを削除します。
店名を入力したエリアのすぐ下がロゴデータを設定する箇所になります。今回は使いませんので、「ゴミ箱」アイコンをク
リックして削除します。
タイトル部分の変更が完了しました。
今回のサンプルサイトでは、ロゴを使わず店名を入力する方法を採用しましたが、正式なロゴデータがある場合に
は、アップロードして設定することもできます。
アップロードできる画像データは、「jpeg」「png」「gif」「bmp」です。
トップページに必要情報を入れる
ヘッダーのタイトル入力が完了したら、トップページに情報を入れていきます。最低限入れておきたいコンテンツや項目
は、下記の通りです。
Bizyou Restrant（イタリアンレストラン）：http://bizyou-italian.jimdo.com/
【コンテンツエリア】
お店の種類や立地（駅から近いのか）などを簡潔に記載します。本文よりも文字を大きくして目立つように配置しました。
（32px)
カラム機能を使って、3種類のコンテンツへ誘導するエリアを設置しました。それぞれ写真を入れて、わかりやすくしてい
ます。各画像にもリンクを貼っておきましょう。
このエリアは、全頁に共通で表示される部分になります。お店の名前や住所、電話番号などを記載しておきましょう。
コンテンツページを作るコツ
トップページに情報を入れ終わったら、コンテンツページ（トップページ以外のページ）を作成しましょう。各内容ごとに作
り方のコツがありますので解説していきます。
【コンセプト】
http://bizyou-italian.jimdo.com/コンセプト/
お店のコンセプトやこだわりを伝えるページです。
「見出し(大)」と「水平線」機能を使っています。
「写真付き文章」で、お店のこだわり3つをピックアップして掲載しました。
「シェフについて」は「見出し(中)」を使っています。
シェフのプロフィールを、「写真付き文章」を使って掲載しています。シェフ本人の写真を入れることで、人柄が伝わり、閲
覧者により親しみや安心感を持ってもらうことができるでしょう。
【メニュー】
http://bizyou-italian.jimdo.com/メニュー/
メニューのページは「フード」と「ドリンク」一覧の入り口になるページです。
「見出し(大)」と「水平線」機能を使っています。
カラム機能を使って、フードとドリンクページへの入り口を作っています。文字だけでなく、画像にもリンクを設定しておく
と、クリックされやすくなります。
【フード】
http://bizyou-italian.jimdo.com/フード/
フードメニューを紹介するページです。
「見出し(大)」と「水平線」機能を使っています。
ランチメニューを紹介するエリアは「写真付き文章」で制作しています。料金は文字を大きくして、目立つようにしました。
カラム機能を使って、ランチ以外のメニューを表示しています。料金表の部分は「表」の機能を使っています。
※ドリンクメニューも同様の形式で作成します。
【パーティー】
http://bizyou-italian.jimdo.com/パーティー/
パーティープランを紹介するページです。団体利用などに対応している場合には、1ページ独立したページを作っておく
とよいでしょう。
「見出し(大)」と「水平線」機能を使っています。
カラム機能を使って代表的な2プランを表示ささせています。
【アクセス】
http://bizyou-italian.jimdo.com/アクセス/
地図、住所、電話番号などを掲載するページです。
「見出し(大)」と「水平線」機能を使っています。
カラム機能を使って、左側のエリアには住所・電話番号・営業時間などを、右側のエリアには地図（Google
マップ）を掲載しています。電話番号を大きく記載しておくと良いでしょう。
【お問い合わせ】
http://bizyou-italian.jimdo.com/お問い合わせ/
お問い合わせを受け付けるページです。
「見出し(大)」と「水平線」機能を使っています。
「アクセス」のページにも掲載していますが、再度電話番号を載せています。どちらのページからでも電話番号がわかる
ため、閲覧者の利便性が向上します。
「フォーム」機能を使ってメールでの受付フォームを設定しました。
まとめ：見やすく作る3つのコツ
(1) 飲食店は画像が命！
飲食店のサイトは、写真の力が集客を左右すると言っても過言ではありません。「おいしそう」な写真を掲載するようにし
てください。
(2) 下層ページへの導線作りを忘れずに
第2階層、第3階層があるページは、写真にリンクを貼る、バナーを設置して続きがあることを示すなど、導線の設定をお
こなってください。
(3) 大切な情報は強調して
電話番号やランチメニューの料金のように、大切な情報は大きな字で強調して表示しましょう。
イタリアンレストランのホームページ作成、いかがでしたか？ツボを抑えて「わかりやすい」「見やすい」ページを作ってみ
てくださいね。次回は「美容室」のホームページ作成のコツをお届けいたします。
志鎌 真奈美（しかま・まなみ）
Shikama.net 代表／JimdoExpert
http://www.shikama.net/
http://www.web-supporter.jp/
北海道函館市生まれ。北海道教育大学函館校卒業。千葉県市川市在住。
1997年よりWeb制作を始める。ソフトウェア会社のWeb制作部門に5年間勤めた後、2002年4月に独立。We
b制作・企画・制作、システム構築などに従事。
講師として、Webマーケティングやデザインのセミナー活動も行っている。
著書にWebデザイナーのためのJimdoスタイルブック』（共著、マイナビ）、『Web文章の「書き方」入門教室～5
つのステップで「読まれる→伝わる」文章が書ける！』（技術評論社）。
Copyright 2017 はじめてＷＥＢ All Rights Reserved.
http://hajimeteweb.jp/