8月に新しくなったJimdo。新しいユーザーインターフェースに加えて、これまでのテンプレートが刷新され、Newレイアウトとして利用できるようになりました。
このNewレイアウトの特徴は主に次の通り。
- レイアウトの名称がこれまでのナンバー表記から、世界の都市の名前になった
- レイアウトパターンは大きく分けてシングルカラムと2段カラムの2種類になった
- 背景画像を活かすデザインレイアウトになった
- 従来のテンプレートにあったヘッダーが無くなった（代わりに背景画像で活用）
細かいところを挙げるとキリがないのですが、わかりやすいところではこのあたりかなと思います。
さて、そんなNewレイアウトなのですが、2番のレイアウトパターンについて今日は注目してみたいと思います。
JimdoのNewレイアウトでは、ページレイアウトの基本としてシングルカラムのものとメインコンテンツエリア+サイドバー（サブメニュー含む）の2段カラムのものと大きく二つのレイアウトに分かれます。
シングルカラムは、横幅いっぱいに広がったコンテンツエリアでサイドバー的なものが無いレイアウトです。わかりやすい例が、Appleのサイト。横幅いっぱいにコンテンツがあり、昔ながらのサイドバー的な部分がありません。コンテンツエリア内に幾つか等間隔に分かれたコンテンツがあるものの、サイドバーでは無くあくまでもコンテンツとして扱われています。
かたや2段カラムのレイアウト。左ないし右に狭小のエリアがあり、並ぶようにメインコンテンツがあるレイアウト。いわゆる昔ながらのレイアウトパターンですね。今でも多くのサイトにはサイドバーと呼ばれている狭小エリアがあります。この狭小のエリア（以下サイドバー）には、下の階層のメニューがあったり、バナーがあったり、メニューでは無いけれど特筆した情報を載せたりといった、限られた画面の中で多くの情報を載せるために考えられたレイアウト。
どちらのレイアウトが良いのか悪いのかというのはここではさておき、先日こちらの本の監修をさせていただいた際に、打ち合わせの席で3段カラムって無いの？という問いをいただきました。3段カラムといえば、ポータルサイトによくある真ん中にメインコンテンツのエリアが有り、左右に狭小のサイドバーがあるレイアウトパターン。JimdoのNewレイアウトでは、この3段カラムのレイアウトパターンは用意されていないので、レイアウト選択で選べるものはありません。ただ、実際には3段カラムへの要望はあるようで、実際にそういう問い合わせもきています。
そんなNewレイアウトで3段カラムがどうしても使いたい！という方向けのちょっとしたTipsをここでご紹介しようと思います。前置きが大変長くなりました。
ページ自体は、書籍用に作ったダミーのサイトなので実際にこのようなポータルサイトは無いのですが、メインメニュー、メインビジュアル、ページタイトルとあって、その下が左右に狭小のサイドバーがあり真ん中にメインコンテンツといういわゆる3段カラムになっているレイアウトです。Newレイアウトで遂に3段カラムが！と思ったかたは、残念、違います。
実際にどんなレイアウトになっているのか、編集モードに切り替えてご紹介します。
まずはこのレイアウト、何を使っているのか？と聞かれれば、
Shanghaiを使っています。
え？Shanghaiってシングルカラムだよね？と速攻で答えられるかたは、すばらしい！Jimdoファンの鏡です！
お！これは！？と思ったかたは鋭いっ！（謎）。これ、既存のシングルレイアウトであるShanghaiをベースにして、擬似的に3段カラムしたサンプルサイトです。
Shanghaiのレイアウトはとてもシンプルで、ページ最上部にメインメニューがあり、その下にメインビジュアルのエリア、ページタイトルのエリアと続きます。ここまでレイアウトの基本構造でプリセットされています。ポイントはその下からです。ここは基本的に自由にコンテンツを入れていくことが出来るのですが、そこに次の図の様にカラムを入れていて、3段にしているというたったこれだけのことです。
カラムをコンテンツの追加で挿入したら、標準では2段のカラムが挿入されます。
カラムをクリックします。
カラムが挿入されます。初期は2つのカラムです。
マウスを動かすとカラムを編集という画面に変わるので、クリックしてみましょう。
カラムの編集が出来るようになります。カラムの左右真ん中に「+」アイコンがあります。これをクリックするとカラムを追加することが出来ます。もしカラムを削除したい場合は、それぞれのカラムの下にあるゴミ箱アイコンをクリックします。
「+」アイコンをクリックしたので3カラムになりました。このままでは、3つのカラムが等間隔のサイズなので、真ん中のカラムを少し大きくします。各カラムの間にあるバー、画面では真ん中のカラムの左右に出ている薄いグレーのバーにマウスを載せて左右にドラッグすることでカラムの大きさを変更することが出来ます。
左右のバーをドラッグして調整したのがこの図。だいたい左右どちらのサイズも約20%にしました。
あとは、このカラムに必要なコンテンツを入れていくだけ。
ヤフーやその他ポータルサイトなどにあるような3段カラムのレイアウトをカラム機能を使って作れるようになりました。
JimdoのNewレイアウトは、そのまま使っていただいても素敵なサイトをすぐ作ることが出来ますが、こうしたちょっとした工夫をうすることで、さらに自分好みのサイトに仕上げていくことが出来ます。
さて、次回ですが（勝手に続き物にしてるw）、レイアウト内に配置するメインビジュアルについて、幾つかのレイアウトパターンに沿って画像のサイズや設定方法について紹介したいと思います。
いつになるかはわかりませんので気長にお待ちくださいね<(_ _)>
最後に
記事で少しご紹介した本ですが、小学館から出ているムック本です。完全New UI、New レイアウト対応で、この本ではNew レイアウトの「St.Petersburg」をベースに解説しています。お知り合いなどではじめてJimdoを使ってサイトを作りたいというかたがいらっしゃいましたら、是非ご紹介ください。
１５分×７日間 無料でできる はじめてのホームページらくらく作成ガイド
Amazonではこちらから買えます
また、同じ時期にJimdo Expertの赤間さんが書籍を出版されましたので、ご紹介。
10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック
Amazonではこちらから買えます
10月25日に開催されたJimdo 5周年記念イベントでも販売したのですが、大人気で即完売してしまった人気書籍です。Jimdoを使い始めてもっとこうしたい、カッコイイページをつくりたい、そんなかたがいらっしゃいましたら、コチラを超・超オススメします。
ということで、突然始まったJimdoカスタマイズコーナーの第一回目はこれで終了です。
それでは！