ホームページ作成

Jimdo/サイドバーのメリットを活かすなら「Madrid」だ!

Jimdo/サイドバーのメリットを活かすなら「Madrid」だ!

Jimdo(クリエイター)でホームページを作る場合、様々なデザイン・レイアウト別に作成されたテンプレートである「レイアウト」を一つ選びます。

その中でも、サイドバーのあるホームページを作りたい場合は「Madrid」というレイアウトを選ぶのがおすすめです。

Jimdoレイアウトの「Madrid」を使って、サイドバーのメリットを活かしたホームページの作り方をご紹介します。

Madridはサイドバーのある「2カラムのホームページ」を作るのに最適なJimdoレイアウト

ホームページというものが世に出始めてから、ずっと主流だったのが「サイドバーのある2カラムのホームページ」でした。

カラムとは、ホームページのコンテンツを表示する場所のことです。

例えば、このブログをパソコンで見ると、左側に文章や写真などが表示されている「メインのカラム」があり、右側に人気記事などが表示された「サイドバーのカラム」があります。

2カラムとは

この2つに分かれた状態を「2カラム」と言います。

「1カラム」とは、その名の通り「一つしかコンテンツを表示するスペースがない」ホームページのレイアウトです。

スマホの場合は、すべて「1カラム」のレイアウトになります。

最近は、1カラムのデザインを採用するホームページが非常に多くなりました。その理由としては、こんなことが考えられます。

1カラムが増えた理由
  • 写真を大きく使うデザインが好まれるようになった
  • スマホでのアクセスが増えた
  • よりシンプルなレイアウトが流行している
  • 「メインコンテンツの質」が重視されるようになった

しかし、だからといって「1カラムにすれば素晴らしいホームページが必ずできる」という訳ではありません。

2カラムにも特有の魅力や特徴がありますし、サイドバーを活用するメリットも捨てがたいものがあります。

Jimdoで2カラムのホームページを作るとすれば、「Madrid」を選ぶのが間違いなくベストです。

2カラムレイアウトのメリットは、「情報の整理がしやすいこと」。パソコンのアクセスが多い業種にもおすすめ

2カラムと1カラムの大きな違いは、もちろん「サイドバーがあるか、ないか」ということです。

サイドバーのメリットは、「文章や画像、各ページへのリンクなど、メインコンテンツに入れられない情報を常に表示しておくことができる」ということです。

メインコンテンツには、選択されたページの内容が表示されますが、サイドバーは選択されたページには関係なく、様々な情報を表示せおくことが可能です。

特に読んで欲しいページや、移動して欲しいページへのリンクなどをサイドバーに設置しておくことで、常に訪問者の目に止まり、次の行動を促すことにつながります。

ページの多いホームページの場合、たくさんあるページにどうやって訪問者をスムーズに移動させるかがアクセス数を増やし、満足度を高める鍵になります。

そこでサイドバーをうまく使うことで「このホームページには、他にこんなページがあるんですよ」と効果的に、訪問者に知らせることが可能になるのです。

サイドバーは特に「パソコン表示」の時に効果的

Jimdoは、自動でスマホ用に最適なレイアウトにホームページの見た目を変更してくれる「レスポンシブ」機能を持っていますので、Madridレイアウトを使って2カラムのデザインにしても、スマホで見たら1カラムです。

つまり、2カラムというMadridのメリットを活かせるのは、パソコン表示の時ということ。となると、「パソコンからのアクセスが多いホームページ」にとっては、使用するメリットが大きいということなります。

ホームページは、スマホからアクセスされることが多くなったとはいえ、業者やホームページの内容によっては、パソコンからのアクセスがスマホより多いということも珍しくありません。

一般企業やBtoBの事業をしている会社はもちろん、「スマホでさっと見るのではなく、パソコンで腰を据えて、じっくり見たい」という内容の場合は、パソコンからのアクセスが多くなるでしょう。

例えば、仕事のためにホームページを利用する(依頼する会社を選んだり、必要な道具や機材を選んだり)といった場合は、自分のスマホではなく、会社のデスクにあるパソコンを使って調べ物をします。

また、住宅関連など、大きい画面で写真や図面をみたり、ブラウザをたくさん立ち上げて比較をしたいといった場合も、パソコンからのアクセスが多くなる傾向にあります。

Madridレイアウトを使って実際に制作されたJimdoホームページを紹介

JimdoCafe太田がプロデュースをして、Madridレイアウトを使って制作されたJimdoホームページの事例をご紹介します。

①桐生市東保育園のJimdoホームページ

群馬県桐生市にある東保育園さんのJimdoホームページです。

桐生市東保育園のJimdoホームページ

トップページのみサイドバーを外してワンカラムにしてあります。サイドバーは、右側に来るようカスタマイズしました。

トップページに「背景」機能を使った大きい画面のスライドショーを設置し、園児たちの写真を見せることで「ファーストビュー」(ホームページを最初に開いた時に見える部分)のインパクトと「保育園のホームページですよ」というわかり易さを両立させています。

②足利市 おかむら小児歯科クリニック様のJimdoホームページ

栃木県足利市のおかむら小児歯科クリニックさんのJimdoホームページです。

足利市 おかむら小児歯科クリニック様のJimdoホームページ

こちらはトップページからサイドバーを表示し、診療時間や読んで欲しいページ、サテライトホームページ、予約やお問い合わせフォームへのリンクなどをわかりやすく設置しています。

③足利市 株式会社スポーツギアさんのJimdoホームページ

栃木県足利市のスポーツ機器メーカー・スポーツギアさんのJimdoホームページです。

③足利市 株式会社スポーツギア様のJimdoホームページ

東保育園さんのホームページと異なり、あえてページの一番上にある「背景」部分は削除し、会社のロゴマークや電話、問い合わせへのリンクボタンを設置して「企業ホームページ」としてデザインを仕上げています。

こちらもトップページはワンカラム、サイドバーは右側にあるというレイアウトです。

Madridのサイドバーを右側に移動する方法とトップページだけワンカラムにする方法【CSSカスタマイズ】

Madridレイアウトはなぜか、サイドバーが左にあるデザインしかありません。

しかし、人間の目線が左上から「Z」の文字を描くように進んでいくことを考えると、一番読んで欲しいメインのコンテンツを左、サイドバーを右に置いた方が見やすくなることは間違いありません。

そこで、ホームページの見た目を変えるために使うCSSというプログラミング言語を使って、簡単に「Madridレイアウトのサイドバーを右にする方法」と「Madridレイアウトでトップページのサイドバーをなくしてワンカラムにする方法」を紹介いたします。

①Madridレイアウトのサイドバーを右にするCSS

②Madridレイアウトでトップページだけサイドバーを消すCSS

どちらも、パソコン表示の時だけ、それぞれの命令が実行されるCSSになっています。

JimdoホームページにCSSを追加する方法

すでに他のCSSソースコードなどをJimdoホームページに設定している場合は、その内容を変更してしまわないよう、注意して設置してください。場合によっては、そのままコピー・ペーストするだけですと、不具合が生じる場合があります。ヘッダー編集の中に何も入れていないという方は、そのままコピーペーストして大丈夫です。

Jimdoにログインしたら、「管理メニュー」へ移動
基本設定を選んで
ヘッダー編集を選択。
ヘッダー編集のページ内になる枠の中に、コピーしたテキストをペーストして、保存を押してください。

JimdoホームページにCSSを追加する方法

【結論】サイドバー有りのJimdoホームページならMadridを必ず使おう!

まとめ

このようにMadridは、サイドバー有りのJimdoホームページであれば必須のレイアウトになります。

サイドバーがあることで、情報をすっきりまとめることができますし、メインのコンテンツの横幅も短くなるので、パソコンで見た時にとても見やすく、ホームページを作る時にもやりやすくなります。

特にスマホよりパソコン経由でのアクセスが多い業種やホームページの場合は、激しくおすすめできるJimdoレイアウトであると言えるでしょう。