2016年

5月

31日

<旧レイアウトの方必読>レイアウト引越しの方法、完全版!

Jimdoレイアウト変更

先日、新レイアウトの魅力と選び方をご紹介しました。今回は実際に移行の仕方についてのご紹介です。

 

疑問点を解消していただき、スムーズにお引越しが出来るようにする完全マニュアルです。引越ししようかを悩まれている方・引越ししたいけれど方法がわからず放置していた方、ぜひご一読ください。

サイトの引越

INDEX

レイアウトの引越し、気になるQ&Aまとめ

初めての方や、旧レイアウトでサイトを作りこまれている方は特に、お引越しは不安が多いかと思います。新機能が追加されるというメリットもあるけれど、人によってはデメリットを多く感じられる方も多いかもしれません。移行後のことを中心に、質問別に解説していきます。

Q. 変更する前に試したいんだけど…

A. もちろん可能です。右側のメニューより〔レイアウト〕を選択し、ページの上部に表示された一覧から、試したいレイアウトを選んで〔プレビュー〕をクリックしてみましょう。今のホームページの中身はそのまま、レイアウト変更後はどう表示されるかをチェックすることができます。

 

気に入れば〔保存〕、他を試したければ〔やり直す〕を選び何度も試すことが可能です。(保存後も回数制限なく変更することが可能です)

 

Q. 変更後、中身はリセットされてしまいますか?

A. いいえ。そのままご利用いただけます。

 

Q. 中身のコンテンツは全く変わらないのでしょうか?

A. いいえ。レイアウトによってデフォルトのフォントサイズや、画像・ロゴの設定サイズが異なるので、多少のズレが生じるかと思います。

 

レイアウト変更後は、一度全てのページをすぐにチェックし、必要なところは微修正をすることをおすすめします。以下で詳しく説明していきます。

なぜ今引越しをおすすめするのか

先日のお知らせの通り、2016年6月末日をもって、旧レイアウトへの変更ができなくなります。しばらく新レイアウトを使っていたけれど旧レイアウトに戻したい!というような方も、6月末日までに変更をお願いいたします。

 

また「2016年7月以降も今の旧レイアウトで作ったサイトを使い続けたい!」という方は、そのままご利用いただけますのでご安心ください。

 

ただし、今後追加される新たな機能を使うことができません。気になる機能が出てきた際にはぜひ、新レイアウトへの引越しを検討していただければと思います。

 

例:こちらのブログで紹介している定型ページの機能は、独自レイアウトや旧レイアウトでは使うことができません。このような機能追加は、今後新レイアウトのみとなります。

引越し準備から完了までのチェックシート

さて、引越し先(レイアウト)が決まったら、トラブルがなくスムーズに完了するように、前後の動きを確認していきましょう。

□ 1.新居探し

自分にフィットする新居(レイアウト)を探しましょう。デザインフィルターで今のレイアウトと近いデザインを探すのも良いですし、新レイアウトを使って作られたサイトの紹介ページもございます。

 

□ 2.引越しシミュレーションをする

自分のWebサイトに新レイアウトを当ててみて、どんな表示になるかシミュレーションをしてみましょう。右側管理画面の〔レイアウト〕を選択し、上部に表示されたレイアウト一覧から、試したいレイアウトの〔プレビュー〕をクリック。

〔プレビュー〕横の四角が並んだプリセットボタンを押すと、そのレイアウトのちょっと違ったパターンを選ぶこともできます。

 

〔保存〕を押さないかぎりサイトのレイアウトが変わることはありません。ぜひいくつか試してみてください。右上のアイコンから、スマートフォンでの表示を確認することも可能です。

レイアウト変更、プレビュー
プレビューをクリック。四角の羅列アイコン<プリセット>で、レイアウト内のバリエーションを試すことも可能
レイアウト変更、プレビュー レスポンシブをチェック
黄枠:保存を押してしまうと実際にレイアウトが変更されるので注意 赤枠:スマホ画面表示もチェック

□ 3.引越し

実際にレイアウトを変更しましょう。プレビューで選択後〔保存〕を押せば完了です。一番目につく&レイアウト変更の影響を受けやすいトップページから、コンテンツを整えていきましょう。

 

□ 4.片付け

引越し後は、中身のコンテンツのフォント・サイズ・カラーが、レイアウトごとの設定になっていますので、コンテンツの配置に加え、〔スタイル〕でお好みのサイズ・カラーに編集をおこなってください。

 

画像やロゴの位置や大きさも変わるので、こちらのページでサイズを確認しておくと便利です。背景画像のサンプルも用意しているので、使ってみてくださいね。

 

□ 5.ご近所まわり

余裕があれば集客も兼ねて、クライアント・知人にサイトリニューアルのお知らせをするといいでしょう。引越し前にアナウンスしておくのも良いかもしれません。

移行後の画面を綺麗にみせる4つのポイント

1. ヘッダー画像ではなく、背景画像に

旧レイアウトと新レイアウトの大きな違いは、ヘッダー画像が無くなる点です。Webサイトを開いたときにまず上部に表示されるメイン画像の部分ですが、以前はヘッダー画像が表示されていましたが、今は設定した背景画像がトップに表示されます。

 

なので、これまでヘッダー画像で使っていたような横長の画像をそのまま利用すると、伸びてしまったり縦横比率がおかしく見えてしまいます。こちらのページを参考に、大きめの画像を用意してください。

 

以下はレイアウトを変更しただけで、背景画像の設定は同じです。トップ部分に背景画像表示がないものもありますので、いろんなレイアウトをプレビューで試してみてください。

背景画像見本:レイアウト Rome
レイアウト:Rome
背景画像見本:レイアウト Cairo
レイアウト Cairo
背景画像見本:レイアウト Barcelona
レイアウト Barcelona

2. モバイル表示の違い

旧レイアウトではモバイル表示のパターンが何種類かありましたが、新レイアウトにはありません。モバイル表示のパターンを選ぶのではなく、パソコンで見えている画面とほぼ同じデザインがスマホで見れるようになりました。

 

旧レイアウトのモバイル表示画面は定型のテンプレートだったので、フォントの色や背景などパソコンのページとはほぼ同じようには表示されませんでした。新レイアウトではレスポンシブ表示となっているため、パソコンで表示していた画像・背景・フォントの設定が、スマートフォンやタブレットで見たときにも反映されます。パソコンでもスマホでも、同じようなデザインでサイトを見ることができる、ということです。

 

以下のように、レイアウト選択時に、パソコン表示・スマホ表示(縦・横)を確認することができます。

モバイル表示の違い:パソコン
パソコンでの表示確認画面
モバイル表示の違い:モバイル
モバイルでの表示確認画面(縦)

3. ナビゲーションの表示方法

旧レイアウトではナビゲーションでサブページに指定したページが、サイドバーや、ナビゲーションのメインメニューの下に表示されるケースが多かったです。

 

新レイアウトではサイドバーにメニューが表示されるものの他に、メインメニューにカーソルを当てると下にサブページが現れるものや、画面には表示されておらず三本線のアイコン(通称:ハンバーガーアイコン)をクリックするとナビゲーションメニューがスライドして表れるものもあります。

 

それぞれの特性を生かして、今サイト内にあるページをどうまとめると見やすくなるか、あらかじめ設計しておくのがオススメです。

ナビゲーションの表示例:Prague
例:Prague カーソルを当てるとサブメニューが表示されます
ナビゲーションの表示:Cape Town
例:Cape Town 左上のハンバーガーアイコンを押すとメニューが開きます

4. カラムを使って空間を埋める

旧レイアウトから新レイアウトに変更すると「あれ?なんか空間が寂しい」「サイトバーの項目が下に縦長で表示される!」と思われるケースがあるかもしれません。

 

パソコンでの表示画面が4:3の比率から大きめのワイドにシフトしたことで、複数行に渡っていた文章が短い行になって、画像と文章のバランスが悪くなり、変な空間ができたように感じます。

 

また、従来のサイドバーがページ下部のフッターエリアに追加されている、ワンカラム構成のデザインも多いです。その場合、旧レイアウトでサイドバーに設定していたコンテンツがフッター部分に移動され、縦長なページになってしまいます。

 

これらの問題を解決してくれるのが「カラム」です。カラムはコンテンツエリアに横型のボックスを作り、最大6つまで横幅を分解できます。縦に並んでいたコンテンツを横に並べることで、ページをすっきりまとめることができます。

空間の使い方:カラムの数
カラムの中にコンテンツを追加していくことが可能です
カラムの使い方例:before
例:このような長いページ。画像の右側の空白も少し気になります
カラムの使い方例:after
カラムで3列にしたらスッキリします

さて、レイアウトのお引越し方法ついてお話をさせていただきましたが、疑問点や不安は解消できましたでしょうか。

 

移行後は新しいレイアウトのテンプレートに合わせた設定になるので、お好みのフォント・カラー・サイズなどに変更していく必要があります。これらの編集は管理画面の〔スタイル〕から簡単にできますし、コンテンツの編集に関しては方法は変わらないので、大きな作り直しは必要ありません。

 

近日、実際に旧レイアウトで運営をしていたWebサイトを、新レイアウトにお引越しさせた事例をご紹介します。数々のサイトを手がけてきたJimdoJapanのカントリーマネージャー駒井が直々に、上記で紹介したポイントも含め、お引越し時に気をつけるポイントを解説していきます。お楽しみに!

 

以上の内容以外に不明な点があれば、Jimdoサポートセンターへいつでもお問い合わせくださいね。


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

コメント: 21
  • #1

    村井芳裕 (火曜日, 31 5月 2016 17:01)

    このところ、移行が心配ということでよくご相談をいただきます。

    TOKYOレイアウトが出てきたし、すべてのレイアウトがレスポンシブ対応になったこともあり、今では新レイアウトへの移行をオススメしています。

    このようなページが出来てよかったです。
    これからはコチラを見ていただけるようご案内させていただきます!

    ありがとうございました。

  • #2

    鎌野 (水曜日, 01 6月 2016 04:14)

    旧レイアウトを2014年8月13日以前から使っていた方は6月30日までレイアウトを戻せるとの事ですが、私はそれ以降、新レイアウトで使っていた者です。
    今回のレイアウトのレスポンシブを試したところ、設定の項目からスマートフォン表示を無効にする項目が消えてしまいました。
    元に戻せず大変困っております。どの様にすれば良いでしょうか?

  • #3

    JimdoJapan (水曜日, 01 6月 2016 12:12)

    >> 村井芳裕 さま

    いつもお世話になっております。
    移行、大きなことですもんね。ご不安な方も多いかと存じます。

    はい、ぜひご案内していただければと思います。
    またユーザーさまからのお声で気になるものがございましたら
    ぜひお教えくださいませ。

    引き続きよろしくお願いいたします。

  • #4

    JimdoJapan (水曜日, 01 6月 2016 17:46)

    >> 鎌野 さま

    いつもJimdoをご利用いただきありがとうございます。

    一度レスポンシブ対応のレイアウトを設定されたり、お使いのレイアウトがレスポンシブ対応になった際にアップデートをされますと、元に戻すことができません。

    ※レスポンシブ対応=閲覧者の使用機器(スマホ・パソコンなど)に合わせてページの表示を自動で変換する(合わせる)機能。よって、スマホの表示の仕方を指定することができません。

    申し訳ありません。大変恐れ入りますが、ご了承いただければ幸いです。

    また、どういったご理由でスマートフォン表示を有効にしたいとお考えなのでしょうか。お困りごとを解決できるかもしれませんので、よろしければ下記よりお問い合わせいただけますでしょうか。

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

    引き続き、よろしくお願いいたします。

  • #5

    鎌野 (木曜日, 02 6月 2016 12:58)

    そうでしたか・・・
    レスポンシブは仰る通りスマホ表示に関わる事なので私としては、まず設定の項目にスマホ表示が無効に出来る項目が残っている事を確認した上でレスポンシブを試してみました。
    まさか、その後スマホ表示の設定が消えてしまうとは思ってもいませんでした。

    旧レイアウトの方が6月30日までレイアウトを戻せる様に、レスポンシブ非対応の新レイアウトにも戻せるようレイアウトの選択項目に追加して頂く事を強く希望します。
    (もちろん期間限定で構いませんので・・・。あと私はスマートフォン表示を無効に戻したいのです。)

    ご回答下さりありがとうございました。サポートセンターの方にもお願いしてみます。

  • #6

    JimdoJapan (木曜日, 02 6月 2016 15:03)

    >> 鎌野 さま

    一度確認して試していただいていたのですね。
    ご迷惑をおかけします。

    大変恐れ入りますが、開発元の意向もあり一時復旧の予定はございません。ご了承いただければ幸いです。

    ご意見として社内で共有させていただき、今後のサポート体制や機能追加にお役立てさせていただきますので、また何かありましたら是非お問い合わせまでお声をお聞かせくださいませ。

    ありがとうございます。

  • #7

    岩崎 (木曜日, 02 6月 2016 17:06)

    今のレイアウトが新か旧かはどうやって見分けるのでしょうか?

  • #8

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

    >> 岩崎 さま

    コメントいただきありがとうございます。
    現在のレイアウトの確認方法ですが、
    右側の管理画面を表示させ〔レイアウト〕を押してください。

    上部に表示されたレイアウトの一覧の、一番左の
    〔現在のレイアウト〕が今岩崎さまの設定されているレイアウトです。

    新レイアウト:ParisやMiamiのように世界の都市名の表記
    旧レイアウト:F4240のように数字表記

    レイアウトの名前で、旧か新かを見分けていただけます。

    またご不明な点などありましたら、お気軽にサポートセンターへお問い合わせくださいませ。

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

  • #9

    Kawai (金曜日, 03 6月 2016 14:30)

    新レイアウトへの引越しを検討している者です。
    JimdoPro版で利用できるモリサワフォントの数をもう少し増やしてほしいです。
    具体的には「会社のロゴタイプ(ページタイトル)」などでも使えそうな太文字・装飾フォントを数種類でいいので追加して下さい。
    よろしくお願いします。

  • #10

    とある管理人 (日曜日, 05 6月 2016 09:28)

    レスポンシブ対応の新レイアウトに変更したところ、スマホのブラウザからの編集が出来なくなりました。アプリを入れる余裕がないためブラウザから編集したいのですが…

  • #11

    JimdoJapan (水曜日, 08 6月 2016 19:59)

    >> Kawai さま

    新レイアウトへの移行を検討中とのことで、いつもご利用いただきましてありがとうございます。

    モリサワフォントに関するご要望、今後の改善やサービス向上にお役立てさせていただきますね!ありがとうございます。

    引き続き、Jimdoをよろしくお願い申し上げます^^

  • #12

    JimdoJapan (水曜日, 08 6月 2016 20:04)

    >> とある管理人 さま

    いつもご利用いただきありがとうございます。
    よくお声をいただくのですが、スマホ・タブレットでは編集ができなくなってしまいましたので、アプリでご対応いただくのみとなってしまいます。

    大変ご不便をおかけし申し訳ありませんが、ご了承いただければ幸いでございます。

    引き続きよろしくお願い申し上げます。

  • #13

    ひげ (金曜日, 10 6月 2016 00:22)

    新レイアウトは強制レスポンシブ表示のくせに、スマホ表示時のハンバーガーメニューが小さいし見づらいし、現状のターゲット層にはメニューということが分かりづらい。
    新レイアウトへ移行のためにスマホ表示時のメニューの改善をお願いしたい。

  • #14

    傳田文夫 (木曜日, 16 6月 2016 13:27)

    移行をしたいのですが、下記のレイアウトという表示がありません。
    右側上部には「登録する」、と「ログイン」しか表示されていませんが。
    -------------------------------------------

    Q. 変更する前に試したいんだけど…
    A. もちろん可能です。右側のメニューより〔レイアウト〕を選択し、ページの上部に表示された一覧から、試したいレイアウトを選んで〔プレビュー〕をクリックしてみましょう。今のホームページの中身はそのまま、レイアウト変更後はどう表示されるかをチェックすることができます。

    気に入れば〔保存〕、他を試したければ〔やり直す〕を選び何度も試すことが可能です。(保存後も回数制限なく変更することが可能です)

  • #15

    田中丸 (金曜日, 17 6月 2016 19:00)

    いつもJimdoを使っている者です。

    ちょっと希望がありますが、今までのJimdoはスマホアプリまたはIEじゃないとWebを編集できませんです。iOSのSafariにも編集可能にしてください。

    追記
    しないといけないではありません。出来たらしてください。できないならこのままでOKです。

  • #16

    岩本吉史 (火曜日, 21 6月 2016 15:01)

    旧レイアウトを使用しているものですが編集しようとするとタブが下りてきて保存ボタンが押せないため、編集できません。

  • #17

    福島武司 (木曜日, 23 6月 2016 15:05)

    旧レイアウトでお世話になっています
    このたび、新レイアウトへ引越の知らせをいただきましたが、今一つ具体的な処理が出来ずに悩んでいます
    是非にご教示ください

  • #18

    菊池武正(時代屋 武ちゃん) (金曜日, 24 6月 2016 12:17)

    質問例と重複ですが、
    旧レイアウトでお世話になっています
    このたび、新レイアウトへ引越の知らせをいただきましたが、今一つ具体的な処理が出来ずに悩んでいます
    是非にご教示ください 。
    また、従来のページも操作方法が難解で、長いこと放置していましたが、なんとか活用させていただきたいと思います。年齢的(高齢)に無理かな?とも思っています。

  • #19

    福岡義夫 (金曜日, 01 7月 2016 17:22)

    旧スタイルでも今後も安心して使い続ける事が可能との事を信用してそのままにしていましたが、本日呼び出してみると右側のナビゲーション部分が削除されておりホーム(index)のPageしか観る事が出来ない。リンク部分が全て削除されている。これは一体どういうことか説明下さい。そして元に戻すにはどうする!至急連絡を!

  • #20

    渡邊 哲夫 (月曜日, 04 7月 2016 11:29)

    新レイアウトに引っ越しを完了しました。つきましてはyouTubeの画像等を利用したいのですがgooglにアカウントすればOKなのですか。

  • #21

    森本 和仁 (水曜日, 27 7月 2016 11:08)

    テンプレートのショップからビジネスに変更したい。