2016年

5月

27日

サイト作りが圧倒的に楽しくなる。自分らしい新レイアウトの選び方!

サイト作りが圧倒的に楽しくなる!自分らしい新レイアウトの選び方。

先日、待望のTokyoレイアウト追加についてと、旧レイアウトの今後の提供についてのお知らせを更新しました。

 

  • ついに!最新のTokyoをさっそく使ってみよう!
  • いや、もっと自分に合うレイアウトないかな…
  • 今使っている旧レイアウトと似ている新レイアウトを探したい

と、これを機にレイアウトのお引越しを検討される方もいるのではないでしょうか?

 

この記事では、レイアウトの選び方や魅力についてお伝えします。「どうやって選ぼう…目移りしちゃう!」なんて方は、ぜひ参考にされてみてください。

 

また、たくさんあるレイアウトの中から自分の希望に近いものを一発で絞れる便利ツール、デザインフィルターもご紹介しています。こちらもぜひ、チェックしてください!

INDEX

<機能で選ぶ>画像、カラム構成、あなたのこだわりは?

すでに自分のサイトをお持ちの方は、何かテーマを持ってホームページを運営されていると思います。

  • 自分の作品を誰かに見て欲しい
  • アパレルブランドのイメージに合わせたお洒落なページを作りたい
  • 料理のレシピをたくさん載せたい

そういった伝えたい(見せたい)ことがより伝わるようなレイアウトを選ぶために、今回は「画像」と「カラム構成」に焦点を当て、Jimdoスタッフのおすすめレイアウトを紹介していきます。

1. 画像にこだわる

作品を綺麗に見せたい、全体のビジュアルを大事にしたい、そんな方は画像が際立つデザインを選んでみましょう。

インパクト重視:Rome

レイアウト Rome

背景画像の上部が見えるようなデザインです。横幅いっぱいに画像が入るので、目に入りやすくインパクトも大きいです。

 

画像の表示が大きすぎる、なんて方はプリセットで表示の狭いものを選ぶこともできますよ。

レイアウト Rome プリセット

背景画像を魅せる:Paris

レイアウト Paris

実は左側にサイドバーが付いている2カラムの構成なのですが、サイドバーもシンプルなフォント設置なので、背景画像を大きく見せることができます。


メインビジュアルが広い:Cape Town

レイアウト Cape Town

PCの大きな画面でもサイドバーがスライド式のため、メインビジュアルをより広く見せることができます。

 

背景は基本半透明ですが、プリセットの一つに背景画像をクリアに見せられるものもあります。

レイアウト Cape Town プリセット

2. 2カラム構成が好き

ナビゲーションやサイドバーがホームページの左右どちらかにあるような、2カラムの構成がお好きな方も多いはず。ナビゲーションメニューの表示のされ方や、フッターとの関連性もレイアウトによって違うので、ぜひじっくり選んでください。

上部とサイドを合わせたナビゲーション :Bordeaux

レイアウト Bordeaux

上部にはメインメニュー、サイドにはサブメニューと、フッターの内容が記載されます。

 

例:上部メニューの「ABOUT」を選択、サイドにはABOUTに紐づくサブメニューの「SHOP」「OWNER」などが表示される

レイアウト Bordeaux プリセット

空間を生かす:Reykjavik

レイアウト Reykjavik

コンテンツが左寄せのデザインなので、ページの右側のスペースを生かすことができます。(プリセットで中央寄せも有り)

 

メインコンテンツの背景を透明にして、画像や動画を背景に設定してみると、とても雰囲気のあるお洒落なサイトができます。

レイアウト Reykjavik プリセット

折りたたみ風キュートなデザイン:Havana

レイアウト Havana

ナビゲーションもフッターも折りたたんだようなデザイン。ポップでとても可愛いです。

レイアウト Havana プリセット

3. 素材の準備も最小限、シンプルイズベスト

「映える背景画像が見つからなくてページ作成が進まない!」そんな方はシンプルで、素材の用意が最小限で済むレイアウトにしてみませんか?メインコンテンツが広くとれるデザインは使いやすく人気です。

シンプル+ワンポイント:Cairo

レイアウト Cairo

2015年のJimdoBestPages受賞ホームページもCairoを使っていました。

 

メインコンテンツを広く使いながらも、固定の背景画像の斜めのラインがワンポイントになっています!

レイアウト Cairo プリセット

編集しやすく各国でも人気:Miami

レイアウト Miami

Jimdoのレイアウトの中でも人気上位なMiami。デフォルトの色味も爽やかで、女性にも人気です。

レイアウト Miami プリセット

日本人のためのデザイン:Tokyo

レイアウト Tokyo

追加されたばかりのTokyoレイアウトは、日本人のためのシンプルデザイン。

 

サブページは、背景画像表示もないまっさらな状態から編集できます。

レイアウト Tokyo プリセット

お好みのデザインは見つかりましたか?画像やカラム数はホームページの印象を決める大きな要素です。

 

選んだレイアウトによって、画像やロゴなど、必要な素材は変わってきますが、いずれにせよサイズの合ったものや綺麗な画像を選びたいですよね。いますぐ使える背景画像や、画像サイズの詳細はこちらをご覧ください。

<直感で選ぶ!>好きな国や地域で選んでみる

旧レイアウトは「F4245」のように番号で識別されていましたが、2014年の8月以降に追加された新レイアウトには、世界中の都市の名前が付けられているんです。

 

どれも素敵なレイアウトで決められない!なんて方は、行ったことがある・住んだことがある・憧れの都市、そんな直感やルーツに基づいた選び方をしてみるのはいかがでしょうか。

jimdo レイアウトマップ

以下の画像をクリックすると、そのレイアウトのサンプルページを見ることができます。

Cairo

レイアウト cairo

-エジプトの首都、カイロ。

Barcelona

レイアウト Barcelona

-スペインの首都、バルセロナ。

Malaga

レイアウト Malaga

-スペイン・アンダルシア州、マラガ。


Miami

レイアウト Miami

-アメリカ合衆国、フロリダ州の主要都市。

St. Petersburg

レイアウト St.Petersburg

-ロシア西部、サンクトペテルブルク。

Dublin

レイアウト Dublin

-アイルランドの首都、ダブリン。


Tokyo

レイアウト tokyo

お待ちかね、日本の首都:東京。

Osaka

レイアウト osaka

-活気のある街、大阪。


日本の都市では、最近追加された待望の「Tokyo」や、プリセットの種類が豊富で人気な「Osaka」があります。今後も日本のレイアウトが増えると嬉しいですね。

他の都市(レイアウト)のサンプルページも見たい場合は、デザインフィルターで絞った画像をクリックし、中のURLよりご覧ください。

各レイアウトのサンプルページの見方

デザインフィルターで、あなたのお好みレイアウトを一発検索!

デザインフィルターとは、自分のホームページに欲しい要素や見せ方をえらんで、該当するレイアウトを一発で検索できるツールです。

 

今回旧レイアウトから新レイアウトへ変更される方は、以前使っていたものと近い要素(2カラム構成だった、メインコンテンツが広かった等)にチェックをつけて検索するのが便利です。

デザインフィルター

以下のとおり、5つの項目を選択することができます。

  • ヘッダー(ロゴかテキスト)
  • ナビゲーションのタイプ
  • コンテンツエリアの広さ
  • サイドバーの位置
  • レスポンシブ対応

 

実際のデザインフィルターはこちら

英語対応なので、使い方の解説ページもご用意しています。ご覧ください。

さあ、あなたのお気に入りの新レイアウトは見つかりましたか?

 

テンプレート名が都市になっていたり、サンプルの画像もおしゃれで、サイトの出来上がりがイメージがしやすくなっています。Jimdoのこだわりと遊び心がいっぱいです。

 

あなたのお気に入りのレイアウトや、おすすめポイントがあれば、ぜひ教えてください!


コメントをお書きください

コメント: 14
  • #1

    初心者 (土曜日, 28 5月 2016 19:34)

    このページにも出てますが、?-3のような記号は何でしょう?。
    今日レイアウトを変更しましたが、プレビューの状態で出る時がありますけど…。

  • #2

    初心者2 (土曜日, 28 5月 2016 19:37)

    私も、ログインした時に、「?-3」がいくつか表示されて、?!と思いました。

  • #3

    初心者 (土曜日, 28 5月 2016 19:39)

    う〜ん

  • #4

    初心者 (土曜日, 28 5月 2016 19:47)

    、ページを移動して戻ると、消えますね〜。
    出たり出なかったりしますね〜。

  • #5

    初心者2 (土曜日, 28 5月 2016 20:25)

    Google Chrome バージョン 50.0.2661.102 m
    Internet Exolorer バージョン 11.0.31

    どちらのブラウザでも、プレビュー画面にすると、
    「`?-?m」の文字が、メニュー部分などに表示されました。
    何度か、再表示しているうちに、出なくなりました。
    レイアウトは「Tokyo」でした。

    「Tokyo」レイアウトについて、もう一つ。
    Internet Exolorer バージョン 11.0.31で表示すると、
    メニューの右端が見切れてしまいます。
    同じウィンドウサイズでも、Google Chromeだと見切れないんですがなぜでしょう。

  • #6

    超初心者 (土曜日, 28 5月 2016 20:35)

    私も独自レイアウトのスマホCSSの編集中に同じような記号が出てきてドキっとしました。Jimdoがシステムに何かを仕込んでいる最中なのかもしれませんね。

  • #7

    初心者 (日曜日, 29 5月 2016 10:24)

    旧スタイルではみうけられませんでした。
    Jimdoからの、回答が欲しいです。
    宜しくお願いします。

  • #8

    要望太郎 (日曜日, 29 5月 2016 21:12)

    無料版でもっとフォントを使えるようにしてください。

  • #9

    Jimdoサポート (月曜日, 30 5月 2016 11:40)

    「?-3」のような表示が発生する事象につきまして、ご迷惑をおかけし申し訳ございません。

    本現象につきましては、開発元にてJimdoシステム内の事象により発生していたことを確認し修正を行わせていただきました。

    この度は本現象によりご迷惑をおかけし申し訳ございませんでした。
    重ねてお詫び申し上げます。

    何かご不明な点などございましたら、Jimdoサポートまでご連絡をいただけますと幸いです。

    今後ともJimdoを何卒よろしくお願い申し上げます。

  • #10

    JimdoJapan (月曜日, 30 5月 2016 16:38)

    >>要望太郎 さま

    いつもJimdoをご利用いただきありがとうございます。
    フォントに関して、貴重なご意見をいただきありがとうございます。
    今後のサービスの向上に役立て、より良いものを提供できるよう務めてまいります。

    今後とも、よろしくお願い申し上げます。

  • #11

    未引っ越し (木曜日, 02 6月 2016 17:53)

    保存したら終わりな感じが怖いです。
    変えたら最終形まで整えるのに一日では終わらない気がします
    仮り保存みたいな機能が欲しいです。

  • #12

    未引っ越し (木曜日, 02 6月 2016 18:13)

    レイアウトを探す templates 試しました。見つけやすくてとても良かったです。そしてわかりました。
    ワイドでサイドバーが左のものが無かったんですね。どうりでいくらプレビューで雰囲気を見ていても見つからないはずですね。
    どうしてないのですか?
    需要がないからでしょうか?

  • #13

    JimdoJapan (金曜日, 03 6月 2016 12:43)

    >> 未引越し さま

    貴重なご意見ありがとうございます。
    ページごとに「パスワード保護領域」でパスをつけて一時的に編集の間だけ見れないようにすることは可能です。
    一時保存機能についても、社内にも意見を上げさせていただきますね。

    また、tempates=デザインフィルターのことですよね。
    ワイド×サイドバーがレフトのものは現在ないのですが、ワイドかつナビゲーションメニューがレフトにあるものにParisがございます。

    一度ご覧になってみてください。

    また何かございましたら、お気軽にお問い合わせくださいませ。

    ▼お問い合わせ先
    http://jp-help.jimdo.com/contact

  • #14

    飯島健一 (金曜日, 10 6月 2016 13:13)

    もっともっとシンプルなレイアウトを希望致します。
    ベースは出来るだけ何もないものがいいです。そう言った方・・ぜったい多いと思います。何卒宜しくお願い致します。