Webサイト作成に無限の可能性!待望のTokyoレイアウト追加

Jimdoレイアウト追加

Jimdoのレイアウトには、世界各国の都市名が付けられているのをご存知かと思います。その中で、日本のユーザーさんは疑問に思ったことはありませんか?そう、東京がないじゃないかと!

 

日本の首都がこれまでなかったのに大阪のレイアウトがあったのは、Jimdoの本国、ドイツのスタッフの中に大阪へ留学していたメンバーがいたからだそうです。今回、満を持して新しいレイアウト「Tokyo」が追加になりました!

日本人がデザインした日本人向けのレイアウト

Jimdoレイアウトデザイナー Jill Heyer

"TOKYOレイアウトは日本のJimdoExpert として活躍する服部制作室の服部 雄樹さんと、JimdoJapanチームと一緒に作成をしました。全体的にシンプルにまとめたデザインと日本らしい文体を意識したので、今までのレイアウトとは違った雰囲気を出せるものに仕上がったと思います。

Jimdoレイアウトデザイナー — Jill Heyer

JimdoExpert 服部 雄樹さんとJimdoJapanチーム
JimdoExpert 服部 雄樹さんとJimdoJapanチーム

トップページにのみ表示される背景画像

今までJimdoで提供していたレイアウトでは、タイトルの位置も背景画像も全ページ統一のデザインでした。先日の機能変更で各ページに個別の画像を設定できるようになり、利用方法の幅も広がりましたが、Tokyoレイアウトはまた一味違ったデザインになっています。

 

Tokyoレイアウトの最大の特徴のひとつは「背景画像がトップページのみ」(ページ上部)に表示されることです。サブページ(お問い合わせなど)には背景画像が表示されず、ページの上部からすぐにコンテンツを追加できるデザインです。

 

新しく画像を追加してメインの画像として利用したり、画像を追加しないでシンプルな構造でページの中身を見せたり、今まで以上に各ページを自由に編集できます。

ートップページ、他ページ

シンプルなブログ表示

Jimdoでブログを使っている方々の傾向を調べたところ、なるべくシンプルな仕上がりにしたいと思い、ブログの表示ページを他のレイアウトとは違ったデザインにしました。

Tokyoレイアウト ブログ一覧表示
レイアウト:Tokyo
Pragueレイアウト ブログ一覧表示
レイアウト:Prague

一覧で見たとき、タイトルをすっきり表示させることが可能です。ブログ表示で、〔概要の表示数〕を「0」に設定すると、各タイトルが1行で収まるようになっています。

サイトの新着情報一覧などに使いやすい仕様になっていますので、トップページに表示させたい場合も便利です。

ブログ一覧表示 概要の表示数について

シンプルなデザインをぐっと引き締めるサブナビゲーション

TOKYOレイアウトはロゴエリアをページの左上に設置し、その右にナビゲーションを用意しています。とてもシンプルなレイアウトですが、そのシンプルさをぐっと引き立てるのが「サブナビゲーション」。

 

メインナビゲーションエリアの下に引いた帯の上にサブナビゲーションのページが表示されます。ドロップダウンメニューのようにメインナビにマウスを移動しなくても、サブページが常に表示されているのでサイト内にどのようなページがあるかわかりやすく表示されます。

Tokyoレイアウト サブナビゲーション

TOKYOレイアウトを活用するちょっとしたコツ

1. サブナビゲーションの配置変更

TOKYOのサブナビゲーション(2、3階層)のデフォルト設定は右寄りになっていますが、こちらはスタイルから左寄りにも中央にも設定できます。

2. プリセットからお好みのデザインを選択

Tokyoレイアウトは3種類のプリセットがあり、蒼・紅・青緑のカラーを選べます。もちろん、〔スタイル〕からお好きな色を設定することもできます。

3. サイトにさりげなくオリジナリティを加えるロゴ

Tokyoレイアウトはコンテンツエリアが目立つように比較的ロゴエリアを狭くしています。ロゴを設定する時は縦長のものより横長や正方形のロゴをおすすめします。

4. 一行で収まるシンプルなナビゲーション

サイト内にどんなページがあるかわかりやすくするために、ナビゲーションは一行で収まる長さをおすすめします。特にTokyoレイアウトはサブナビゲーションが2行目に表示されるのでトータルでバランスが取れるように意識してください。

Tokyoレイアウトの編集事例

シンプルなだけに、デザインの自由度・可能性は無限です。レイアウト変更後は、「少し寂しいかも…?」と思われるかもしれないですが、そこからのプラスアルファが、Tokyoレイアウトに深みを出していく面白さです。以下に、いくつかの編集事例とサンプルをまとめました。

  • ナビゲーション下のカラーバーを常に表示させたい!
    Tokyoレイアウトでは、上部のカラーバーはサブナビゲーション項目(2.3下層)を設定した際に表示されます。ですが、サブナビゲーションを作らない方もいるはず。そんな方でもカラーバーを表示させられる方法を、弊社神森が紹介しています。詳しくはこちら。
  • 他の方が作ったサイトを見てみたい!
    Benefit  Travel:(提供:JimdoExpert 赤間 公太郎さま)※サンプルサイト
    IT Dr.APOZIRA:(提供:JimdoCafe 武蔵)
    ※他にも、Tokyoレイアウトでホームページを作成された方などいらっしゃいましたら、JimdoJapanでぜひご紹介させてください!

TOKYOレイアウトはシンプルを追求して作られたレイアウトなので使い勝手は抜群です。

 

法律事務所などの士業からサブページが多くなるアパレル、画像を多く見せるポートフォリオでも活用できると思います。「デザインを新しくしたいな〜」と思ってる方は、ぜひこの新しいTokyoレイアウトをお試しください。これからも新しいレイアウトを追加していく予定なのでご期待くださいね!