Quantcast
Channel: jp.jimdo.com Blog Feed
Viewing all 1159 articles
Browse latest View live

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

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

先日、待望の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のこだわりと遊び心がいっぱいです。

 

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



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

$
0
0

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

 

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

INDEX

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

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

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

 

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

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

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

□ 1.新居探し

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

 

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

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

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

 

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

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

□ 3.引越し

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

 

□ 4.片付け

引越し後は、中身のコンテンツがデフォルトのフォント・サイズ・カラーに変更されていますので、コンテンツの配置に加え、〔スタイル〕での編集もおこなってください。

 

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

 

□ 5.ご近所まわり

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

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

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

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

 

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

 

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

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

2. モバイル表示の違い

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

 

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

 

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

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

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

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

 

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

 

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

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

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

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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


スマホでも美しく使いやすい!Jimdoがレスポンシブを選んだ理由

$
0
0

Jimdoの39種類のレイアウトがすべてレスポンシブ対応になったのをご存知でしょうか?そのことで、喜んだ方も慣れないと不便に感じている方も両方いらっしゃるかと思います。

 

  • 何がどう変わったの?そもそもレスポンシブってなに?
  • パソコン表示が気に入ってたのにな〜
  • モバイルでメニューが見つけにくいとユーザーから言われる

 

そんな方へ、これまでのモバイル表示との違いや、閲覧者にもやさしい、スマホでの上手な見せ方などをご紹介します。今のご自身のサイトがレスポンシブ対応かどうかをチェックする方法も載せています、ぜひご一読ください

INDEX

レスポンシブってどういう意味?

さて、まずレスポンシブ対応とはどういうことなのでしょうか。

 

「閲覧者の表示環境(パソコン・タブレット・モバイル)に合わせて、デザインが自動調整される」状態のことを言います。

 

これまでのモバイル表示はあくまで、パソコンで作ったWebサイトをモバイルで少しでも見やすくするための、仮のデザインに近いものでした。 そのため、作ったWebサイトをありのまま見せるというよりは、モバイル用はモバイル用で近いデザインを表示させる、という感覚が近かったでしょう。

 

今回レスポンシブ対応になったことによって、作成したサイトをほぼそのまま、モバイルユーザーにも見てもらうことができます。パソコンと変わらず、フォント・サイズ・カラー・背景画像(一部)が反映されるので、こだわって作ったデザインを大きく崩さずに見てもらうことが可能です。

レスポンシブ:イメージ画像
イメージ画:Jimdoのサイトトップにも載っている、フラワーデザイン助六さまのサイト

今は誰もがスマートフォン・携帯電話を持つ時代。朝の通勤電車・移動途中・寝る前のベッドの中など、SNSをチェックしたり、なにか記事を読むのはモバイル端末の方が多いかもしれませんね。

 

そんな時代背景もあり、JimdoのWebサイトもこの度レスポンシブ対応になりました。

旧レイアウト・前のバージョン から何が変わったの?

1. モバイル表示がなくなった

 昔の旧レイアウトの時代からJimdoを使っている方や、2014年8月にJimdoの新しいレイアウトが追加され、長く同じレイアウト使っている方はご存知かと思いますが、パソコンでの表示とは別にモバイルではどんなデザインに見せるかを決められる、〔スマートフォン表示〕を選ぶことができました。

管理画面:スマートフォン表示
右側の管理画面「スマートフォン表示」
スマートフォン表示のテンプレート
スマホ画面のテンプレートを選べる

今現在、以上のように管理画面上に〔モバイル〕の項目が表示されるのは、旧レイアウトを使用中または新レイアウトのバージョンを最新版(レスポンシブ対応後)に更新していない方です。

 

現在、39種類すべてのレイアウトがレスポンシブ対応になっているので、以下でご自身のサイトをチェックし、まだの方はバージョンアップを検討して見てください。

▼自分のサイトがレスポンシブ対応か確認!

1. 旧レイアウトを使っている ※レイアウト名が数字(例:F4202 )
2. 管理画面の設定の中に〔モバイル〕の項目が表示されている
3. レイアウト選択画面にアップデートのお知らせが出ている

→ひとつでも当てはまった方はレスポンシブ非対応です。
管理画面の〔レイアウト〕の選択画面で、使用中のレイアウト(もしくは新しいレイアウト)を選択しなおし、更新をお願いいたします。

※選択画面で〔保存〕を押すと非レスポンシブ対応の状態に戻せません

2. パソコン版の表示がなくなった

モバイルで見た際、ページ下部にあった「パソコン版で表示」というボタンがなくなりました。

スマホ画面見本:パソコン版で表示

レスポンシブデザインは、表示環境によって自動で最適に調整されるため、パソコン・モバイル・タブレット問わず、作った元のサイトに近い綺麗な状態で見てもらうことができます。

3. サイドバーのコンテンツが表示されるように

旧レイアウトでは、モバイルでサイドバーのコンテンツを見ることができませんでした。

 

2カラムと3カラムのデザインが多い旧レイアウトでは、縦割りのデザインを生かして、サイドバーにバナーや情報を多く載せるサイトが多かったです。

 

そうやって作られたサイトを、いざモバイルで見ようとすると、メインコンテンツの下にサイドバーのコンテンツが来るため、とてつもなく長いページになってしまいます。(パソコン版ではなく通常のモバイル表示で見た場合)しかも、サイドバーはすべてのページに表示されるのですべてのページが長くなるということです。

 

そんな見辛さを防ぐべく、モバイル版ではサイドバーは非表示、という仕様になっていました。

 

以下は3カラムの旧レイアウトを使ったWebサイトの表示例です。

黄:ナビゲーションメニュー 中央:メインコンテンツ 赤:サイドバー
黄:ナビゲーションメニュー 中央:メインコンテンツ 赤:サイドバー

このサイトをモバイルで見ると…

モバイル表示:ナビゲーションは表示される
黄:ナビゲーションメニューはページ上部に表示されます(クリックすると全表示)
モバイル表示:サイドバーがない
赤:サイドバーはページ下部にも見当たりません

ご覧のとおり、どこにもサイドバーが表示されていません。

 

新レイアウトでは以下のようにサイドバーのコンテンツもすべて表示されるので、レイアウトを移行する際はページを整えた方が良いでしょう。

旧レイアウト:サイドバーの見え方
旧レイアウト:パソコンで見たとき
新レイアウト移行後:サイドバーの場所
新レイアウト移行後:パソコンで見たとき
新レイアウト移行後(モバイル):サイドバーの場所
新レイアウト移行後:モバイルで見たとき

例としてJimdoのロゴを使用していますが、このようにたくさんバナーを並べていたりメニューのリンクを付けていたりすると、モバイルで見たときはすべてメインコンテンツの下に表示されます。

 

特にこの例で使用した新レイアウト「Prague」はサイドバーが下部にあるデザインですので、情報がメインコンテンツの外(下)に入っています。

 

モバイルで見たときにページが長くなりすぎないように、サイドバー内のコンテンツの整理をおすすめします。縦並びだったコンテンツを短くするためには、カラムの活用が便利です。以下でもご紹介をしています。

4. ナビゲーションメニューがアイコン表示に

Webサイトの上部やサイドに表示されるナビゲーションメニュー。レスポンシブ対応では、モバイルは全て「≡」このような三本線で画面上部に表示されており、タッチすることによってメニューが出現します。

パソコン:ナビゲーションメニュー
パソコンで見るとここにあるナビゲーションメニュー
モバイル:ハンバーガーメニュー
モバイルでみると「≡」アイコンに
スマホ:ハンバーガーメニュー開
タッチすると開きます

このアイコンは「ハンバーガーメニュー」と呼ばれています。

ーまるでハンバーガーみたいだからとアメリカで名付けられたそう。

 

「目立たないから、メニューがどこにあるかわかりづらい!」そんな方へ、この記事の最後の見出しで、メニューの表示場所を補足する方法を提案しています。参考にしてみてください。

▼ちょこっと便利ワザ!

サイトを作成している途中で、モバイルではどう見えるかチェックしたい!という時。「わざわざスマホをひらいて確認するのが面倒だな」と思いませんか?そんな時はパソコン上で、ブラウザをモバイルサイズまで細長くしてみてください。レスポンシブ対応のサイトはブラウザの大きさに合わせて見え方を変えてくれるので、パソコン上でモバイルも見え方をチェックすることが可能です。

レスポンシブ:ブラウザでの見方
ブラウザをスマホ・タブレットの幅にすることで、どのように表示するか見ることができます

3つのポイントを押さえて、モバイルでも使いやすいページを作ろう

冒頭でも少し触れましたが、レスポンシブ対応になり、モバイル専用の表示やパソコン版表示ができなくなったことを、不便に思われる方もいるかもしれません。

 

ハンバーガーメニューのメリットは、メインのコンテンツを広く使う(見せる)ことができるということ。

 

Jimdoは、誰でも簡単にデザイン性の高いWebサイトが作れます。カラムや余白を使ったり、フォントやフォントサイズ・カラーも見たまま編集することができるので、こだわって作ったWebサイトをモバイルの閲覧者にも綺麗に見てもらえるというのが、レスポンシブのメリットです。

 

せっかくのサイトをモバイルでも綺麗に見てもらうために、押さえるべきポイントを紹介します。

1. 文章の改行に気をつける

見やすい文章にしようと句読点「。」ごとに改行をしがちですが、モバイルで見てみるとどうでしょうか。

例:改行多め パソコン画面
例:改行多め パソコンで見たとき
例:改行少なめ パソコンで見たとき
例:改行少なめ パソコンで見たとき

例:改行多め モバイル画面
例:改行多め モバイルで見たとき
例:改行少なめ モバイル画面
例:改行少なめ モバイルで見たとき

赤線が入った図が、こまめに改行をした文章です。文字が詰まっていないので読みやすそうに感じますが、途中で何度も文が切れているので集中して読むことができません。

 

一方、ある程度の段落にまとめた方は、改行が少ない分ページも短く、全体的にすっきりしています。文章を詰めて長くなりすぎても読みづらいですが、話の切り替えの部分で改行があることにより、読みやすいリズムになります。

2. カラムの見え方を理解する

パソコン表示で、コンテンツを横並びにすることができるカラム。モバイルではカラムが左から1列ずつ、縦並びで表示されます。そんなとき、列と列の間に、少し空間が欲しいなと思ったことはありませんか?

パソコン画面:カラム
パソコンで見たとき:カラムに入れて3つ横に並ぶように
スマホ画面:カラム
スマホで見たとき:左の列から順に縦に並びます。赤線のところに空間がほしい…

どこに余白を入れたらちょうど間の位置に反映されるんだろう、と思った方もいるかもしれません。カラム内のそれぞれの列の最後に余白を入れると、列が変わるごとに余白ができ、モバイルでの縦並びの空間を綺麗に見せることができます。

カラム:列間の余白の入れる場所
カラム内の、列の最後に余白を入れる
カラム:列間の余白の入れ方
ここに余白が入りました!

3. メニューの表示場所を増やしてみる

上記で紹介したハンバーガーメニュー、近頃は一般的になってきたナビゲーションメニューの表示方法です。メニューを使うときだけ表示させることによって、狭いモバイル画面の中でもコンテンツを大きく見せてくれる効果があります。

 

一方「≡」が何を表しているのかわからず、メニューがどこにあるかわからない、といった声はよく上がります。

 

サイトのターゲットを考え、メニューのわかりやすさ(場所)を優先したい場合、トップページもしくはフッターにメニューを補足するのはいかがでしょうか。

 

高齢者を対象としたWebサイトや、普段インターネットをあまり使わない業界の方へ向けたサイトを運営されている方は、参考にしてみてください。

・トップページ

パソコン表示:サポートセンターTOP
パソコンで見たとき:サポートセンターTOP
モバイル表示:サポートセンターTOP
モバイルで見たとき:サポートセンターTOP

たとえばこのJimdoのサポートセンターのトップページは、「はじめに」「ブログ」「SEO」など、アイコン+説明文とともにリンクを貼っています。

 

Jimdoのサポートセンターの場合はナビゲーションメニューではなく、よく検索される項目をトップページに載せているのですが、スマホで見ても縦並びで表示されるので目につかないことはありません。

 

ただし、モバイルユーザーには親切ですが、パソコンで見ると同じページに重複した内容を載せることになりページの情報量が増えてしまうので、検討が必要です。

・フッター

フッター内の最下部にメニューを小さく載せることによって、メインコンテンツを邪魔することなく、ハンバーガーメニューを探す手助けができます。

パソコン表示:フッターの最下部にメニューを追加
パソコンで見たとき:フッターの最下部にメニューを追加
モバイル表示:フッターの最下部のメニュー
モバイルで見たとき:フッターの最下部のメニュー

パソコンでせっかく綺麗に整えたページ、モバイルでもデザインにこだわっていきたいですね。また、綺麗なだけでなく使いやすいサイトを作るために、自分のWebサイトを使ってほしい人・使ってくれる人が求めていること、を考えながらデザインしていくと良いでしょう。

 

基本はレスポンシブ対応のおかげで表示領域によって最適に調整されるので、サイトを作る際にモバイルでの見え方を少し意識するだけで、ぐっとかっこいいWebサイトになります!

レスポンシブ対応についてご紹介しましたが、いかがでしたでしょうか?以前のモバイル仕様に慣れていらっしゃるユーザーは特に、はじめは馴れないかもしれません。

 

このレスポンシブ対応の良い面を引き出し、ターゲットが見やすく使いやすいWebサイトを目指してみてください。

 

※ご利用の環境によって、以上の内容と異なることがございます。

機能や仕様に関するお問い合わせは、Jimdoサポートセンターへお気軽にどうぞ。

関連リンクまとめ

レイアウトの移行:「レイアウト引越しの方法、完全版!」

スマートフォン表示:サポートページ

カラム:サポートぺージ


サイドバーの位置は適切ですか?目的からレイアウトを選ぼう

$
0
0

皆さん、サイドバーはお好きですか?

 

Jimdoの新しいレイアウトでは、メインコンテンツを広く見せることができるシンプルなワンカラムのデザインも多いのですが、「やっぱり私、サイドバーだけは譲れない!」という方も多いのではないでしょうか。

 

この記事ではサイドバーの効果や、サイトの目的によってどの位置のサイドバー(レイアウト)を選べば良いか、などをご紹介します。

 

先日もレイアウトの選び方に関する記事をアップしましたが、サイドバーがお好きな方は特に、今後のレイアウト選びや、今のご自身のサイトの見直しのヒントにお役立てください。

INDEX

サイドバーの基本知識とメリットを知ろう

左右に設定すると特にぐんと存在感の出るサイドバー。サイト内のどのページにも同じ場所に表示させられるという点がなによりの魅力です。

 

たとえば、店舗の連絡先やアクセス情報・SNSリンクだったり、資料請求やお問い合わせへの窓口だったり、サイトを見にくる閲覧者にとって重要かつ必要な情報を表示する場所として持ってこいです。

1. 表示場所のパターン

ページの左右もしくは下部についています。黄色はナビゲーションメニュー、赤色がサイドバーです。※サイドバーとナビゲーションメニューは異なります。

サイドバーの位置 Madrid
テンプレート「Madrid」一般的な左右のサイドバー
サイドバーの位置 Berlin
テンプレート「Berlin」下部のサイドバー

サイドバーの位置  Dublin
テンプレート「Dublin」ナビゲーションの下にサイドバー
サイドバーの位置 Milano
テンプレート「Milano」ナビゲーションは左右に、サイドバーのみ下部の設定

2. メリット

  • 目立つ
    お店用のウェブサイトを作る場合、お店の営業時間や住所などの基本情報を記載するのがおすすめです。自然にサイドバーにある情報に目がつきます。

    ユーザーが知りたい情報を正しい場所に掲載することで親切な印象をあたえますし、余計な問い合わせやクレームを減らしたり、運営する側にとってもメリットが大きいでしょう。

  • 作成時間の短縮
    すべてのページに載せたいような重要な情報は、サイドバーに載せることで全ページに反映されるので、1ページ毎に作成する手間がいりません。

  • ビジュアルの向上
    1からページ毎にコンテンツを作っていくと、位置やフォントを揃えるのにそれなりの時間がかかります。サイドバーがあると綺麗にまとまって見えます。また、すべてのページのデザインがある程度揃うので、Webサイト全体の統一感を出すことができます。

  • ブログを使う方へ
    Jimdoをブログメインで活用されている方にもおすすめです。自身のプロフィール・直近の投稿リンク・検索バー・SNSボタン・アフィリエイトのリンク等、情報を固定しておくのに便利ですね。

3. モバイルで見たとき

モバイルで表示したとき、サイドバーはページの下部に表示されます。

パソコンから見るサイドバー:ヘルシンキ
パソコンから見た、右側のサイドバー(レイアウト:Helsinki)
モバイルから見たサイドバー:ヘルシンキ
モバイルから見ると、ページの下部に表示されます

旧レイアウトで、かつサイドバーを設定できるデザインをご利用中の方は、モバイルで見たとき、サイドバーがモバイル上では表示されません。(モバイルでパソコン版表示にすると表示されます)

 

該当する旧レイアウト:F4243,4248,4251,4058 など他

 

旧レイアウトでのサイドバーの表示についての詳細は、レスポンシブデザインについての記事の中で解説しています。ご参照ください。

サイドバーは、視覚的にスタイリッシュに見せるのはもちろん、メインコンテンツに詰め込むとごちゃごちゃしてしまう情報だったり、大事なので全部のページに載せたい情報をまとめる場所として活用できます。

 

サイドバーにも、文章・画像・地図・ボタンなど、通常のメインページと同じようにコンテンツを追加していくことが可能なので、第2のコンテンツとして有効に活用してみてください。

本当にその位置で大丈夫ですか?

サイドバーのパターンとメリットを確認したところで、自分が作りたいWebサイトにはどの位置のサイドバーが良いか、検討してみましょう。サイドバーは、大事な情報を目立たせる効果はありますが、その分メインコンテンツの場所が狭くなりますし、目のやり場が分散されてサイトの中身が伝わりにくい可能性も。場所を考えることが重要です。

 

レイアウトを選ぶときは、まずどんなサイトを作りたいか、何を伝えたくて何のために存在させるサイトなのか整理することをおすすめしています。ビジネス・ポートフォリオ・情報共有・問い合わせ窓口など、用途によって見てほしい相手が違えば、求められる情報も変わってきます。

 

そこで、サイトを作る上での絶対条件をリスト化しておくと便利です。自分の理想とするサイトが作りやすいレイアウトを見つけられるでしょう。一つの例として、写真を販売するオンラインショップを作るとします。以下がそのリストです。

サイトを作る際の絶対条件リスト

  • 白と黒を基調にし、モノクロな写真に合うようにしたい
  • ページ上に大きく写真を貼り、売り上げ上位の物が入れ替わる仕組みにしたい
  • 販売する全ての写真を載せたい
  • コンタクトのページにSNSアカウントへのリンクボタンをつけたい
  • コンタクトページのメールは、クライアントからそうでない人まで、誰でも送信できるようにしたい
  • 自分の仕事歴と、写真の解説を載せたい

上記のように、ポートフォリオや写真を多く掲載するような場合はサイドバーが下部にあるテンプレートの方が適しています。サイドバーが左右にない分、広いメインコンテンツ部分に載せてある写真に集中して目を向けてもらうことができます。

 

余計な文字やロゴが同ページ内に映ってしまうより、一番に見てほしい写真を目立たせることをおすすめします。

成し得たい目的が明確

例:資料請求、集客、ビジネスなど

<重要なこと>

・内容を正しく理解してもらうこと

・情報探しが苦でない、見やすいサイト作り

・その後アクション(問い合わせ・注文など)をすぐに起こせるようなコンテンツ配置

→左右のサイドバー向き

モノを魅せることを優先

例:イラスト、写真、作品など

<重要なこと>

・見せたいモノが一番際立つ(輝く)ように

・どんな人が作っているのかを見えるように

・仕事を頼みたい、イベントに行きたいなど、行動に繋げさせるコンテンツと継続更新

→下部のサイドバー向き


このように、何を目的とするサイトかを考えることが、見せ方(=レイアウト)を決めるヒントになると思います。ご自身のWebサイトに載せること・商材・見せたいものによって選んでみてください。

 

ただしこれはあくまで一つの考え方の例ですので、「なんとなくサイドバーが好き!」「使いやすい!」「かっこいい!」そんなシンプルな理由も大賛成です。好きなレイアウトを使ったり、好きなコンテンツを追加していくことで、愛着をもってサイトの更新を続けていくことができますよね。

プリセットで配置場所が選べる、自由度の高いレイアウト

「この右側についているサイドバー、位置を変えられたらいいのに」そう思ったことはありませんか?サイドバーを持つレイアウトの中には、プリセットでサイドバーの位置を選べるものがあります。

左右両方から選べる

デザインフィルター 左右選べるサイドバー
  • Bordeaux ボルドー
  • Dublin ダブリン
  • Florence フィレンツェ
  • Lima リマ
  • St.Petersburg サンクトペテルブルク

この5つのレイアウトは、サイドバーの位置を左右どちらでも選ぶことができます。(2016年6月23日現在)

右側と下部が選べる

デザインフィルター 下部に移せるサイドバー
  • Helsinki ヘルシンキ

現在ヘルシンキは、サイドバーの位置を右側もしくは下部から選ぶことができます。(2016年6月23日現在)

いずれも、レイアウト選択画面のプリセットから選んでいただくことが可能です。プリセットの選び方についてはこちらのページをご参照ください。

 「このレイアウトのデザインは好きだけど、サイドバーは嫌だ」というレイアウトがあった場合、サイドバー部分のみ削除することも可能です。ただし、削除したからといってメインコンテンツ部分が広くなるわけではありませんのでご注意ください。

人気レイアウト4選と、おすすめの理由

実際にサイドバーを使ったWebサイトは、どんなデザインのものがあるのでしょうか。以下はサイドバーを持つレイアウトの中でも人気の4つ、Dublin・Helsinki・San Francisco・Amsterdamのおすすめポイントをまとめたものです。

 

海外ユーザーのサイトも例として掲載しています、ぜひ参考にしてみてください。

レイアウト:Dublin

レイアウト ダブリン

Dublinをおすすめする理由

  • ナビゲーションとサイドバーがひとつに
    ナビゲーションと重要な情報を一つにまとめられます。
  • 土台作りが簡単
    コンパクトな作りなので、少しの文章と画像でWebサイトを完成させることができます。
  • 小さめのロゴに最適
    ページの右側にロゴが表示されます。ロゴを目立たせたくない、設定しない、という方に最適です。(ロゴが欲しい場合は、99designsのロゴデザインのページから購入可能です)

DublinのレイアウトをつかったWebサイトの例

レイアウト ダブリン サンプル3
レイアウト ダブリン サンプル2

レイアウト:Helsinki

レイアウト ヘルシンキ

Helsinkiをおすすめする理由

  • ビジネス向け
    シンプルな作りなので情報を整理しやすいです。
  • ナビゲーション、ロゴ、ヘッダー
    すべて上部に固定で設定されているため情報が分散しにくいです。
  • レイアウト
    大きなサイズの写真がなくてもキレイに魅せることができます。
  • 自由度が高い
    サイドバーの場所を下部に移動させることが可能です。

HelsinkiのレイアウトをつかったWebサイトの例

レイアウト ヘルシンキ サンプル2
レイアウト ヘルシンキ サンプル

レイアウト:San Francisco

レイアウト サンフランシスコ

San Franciscoをおすすめする理由

  • 背景画像
    大きく目立つように設定できます。
  • カラーバリエーション
    4つの色から好きな色を選ぶことができます。
  • ブログ
    構造がしっかりしており、見やすいです。
  • コンパクト
    文章が少なくても空きがあるように見えません。自分でコンテンツを追加したい場合も簡単にできます。

San FranciscoのレイアウトをつかったWebサイトの例

レイアウト サンフランシスコ サンプル2
レイアウト サンフランシスコ サンプル1

レイアウト:Amsterdam

レイアウト アムステルダム

Amsterdamをおすすめする理由

  • サイドバーが目立つ
    メインコンテンツの影の効果もあり、サイドバーが目立ちます。
  • ヘッダー
    ロゴとタイトルの見栄えが良いです。
  • ビジネス向け
    シンプルで控えめなデザインにすれば、メインコンテンツを邪魔することなくサイドバーを使うことが可能です。

AmsterdamのレイアウトをつかったWebサイトの例

レイアウト アムステルダム サンプル2
レイアウト アムステルダム サンプル1

サイドバーのあるサイトに限らず、ユーザーの事例を見てみたい方はこちら。実際に運営しているページに飛べるので、サイトを触ってみることができます。

サイドバーの利点や活用について、いかがでしたか?ご自身のサイトの在り方やターゲットを見直し、必要に応じて使ってみてください。この記事を読んでレイアウトを移行させよう!と思った方、レイアウトの引越し方法についてはレイアウト引越しマニュアルを読んでみてください。


また、サイドバーやフッターに何を書いたらいいかわからない、という方もいらっしゃると思います。また改めてご紹介をさせていただきます。

関連リンクまとめ

デザインフィルター:サポートページ

海外ユーザー:サイトまとめ

サイドバーのモバイル表示について:記事「レスポンシブデザイン」内

レイアウトの選び方:記事

レイアウト引越しマニュアル:記事


<新機能>フォトエディターでもっと美しいサイト作り

$
0
0

待ちに待った画像編集の機能「フォトエディター」が追加されました!

 

これまではお持ちの画像をアップロードすることが出来ても、フィルター(色味)の変更、テキストの追加、トリミングなど、Jimdoの画面上で画像を編集することはできませんでした。

 

今回Adobeより提供されたこのフォトエディター「Adobe Creative-SDK」を使えば、皆さんのWebサイト上の画像・全体のビジュアルがぐっと良くなること間違いなしです。ユーザーさまの間でも要望が多かったこの機能、ぜひ楽しんでご活用ください!

画面の見方について

いつものように写真をアップロードした後、このようなアイコンが表示されているかと思います。このアイコンから画像編集を行うことができます。

アイコンを押すと、11項目の編集機能が表示され、見たまま画像を編集していくことができます。それぞれの項目の解説については、サポートセンターのページをご覧ください。

インスタグラムのように、色味を設定できるフィルター機能も搭載しています。機能追加の段階で、24種類から選ぶことが可能です。お持ちの写真の雰囲気をガラッと変えることができます、ぜひWebサイトのイメージに合うフィルターを探してみてください。

これまで、別画面や他の画像編集アプリで加工をしてからJimdoへ画像をアップロードしていた方も、Jimdo一つで完結できるようになりました。まずは実際に、ご自身のサイトで試してみてください!

Androidのアプリでも、フォトエディターの機能を既にご利用いただけます。スマートフォンで写真を撮って、アプリですぐに綺麗な写真を載せることができるので、モバイルからの更新がますます手軽になりました。

 

 iOSアプリだけ現在準備中ですが、近々リリース予定です。iOSユーザーさまは少しお待たせしてしまいますが、お楽しみに!

 

フォトエディターで、更にWebサイト作りを楽しんでくださいね!


<実例>レイアウト移行のついでにサイトを強化してみました

$
0
0

 6月30日をもって、旧レイアウトの提供が終了しました。今後も皆さまにWebサイト作成を更に楽しんでいただくため、ドイツの開発メンバーは新たな機能・レイアウトの追加とパフォーマンスの向上に力を注いでいます。

 

先日更新しましたレイアウト引越しの方法に続き、実在するWebサイトのレイアウト引越しを行った事例を紹介します。引越しだけでなくサイトを見直し強化できるような内容です。ぜひ参考にしてみてください。

INDEX

ビフォーアフターと、引越しの詳細について

旧レイアウトから新レイアウトの引越しは、多少の時間を要するものの難しいものではありません。いつもWebサイトを更新するように、また初めてサイトを作ったときのように、管理画面から簡単に行っていただくことができます。

 

今回事例として上げるのはロックバンド「ザ・クレーター」さんのサイトを旧レイアウトから新レイアウトに変更した事例です。移行したのはJimdoJapanのカントリーマネージャー駒井。Jimdoを一番理解しているであろう彼が、Webサイトの構成を見直しながらレイアウト引越しを行った事例をご紹介します。

まずはビフォーアフターをチェック!

引越し前:旧レイアウトのサイト
Before(旧レイアウト)
引越し後:新レイアウトのサイト
After(新レイアウト)

画像をクリックで拡大し、ご覧ください。

 

トップページをご覧になっていかがでしょうか?人によって好みはあると思いますが、情報が整理されコンパクトになった印象です。レイアウトの詳細や、移行にかかった時間については以下です。

作業内容一覧

旧レイアウト

F4043

新レイアウト Miami
構成を考えた時間

30分

素材作成時間 1時間
(トップページの画像6枚をPixlrにて作成)
実際の編集時間

30分

トータル所用時間

2時間

※あくまで一例です。レイアウトの変更作業に関しては数分で完了します。

1. 目的を見直し、修正点と構成を決める

引越しを機にレイアウトを変更すると同時に、中身をブラッシュアップするため、根本であるサイトの目的を見直しましょう。

  • 何を目的としたサイトなのか
  • どんな情報を誰に見てもらいたいのか
  • サイトを見て、どうなってもらいたいのか

 

サイトの目的が明確であればあるほど、ページの作成はスラスラ進みますし、作り上がったサイトも完成度の高いものになるでしょう。旧レイアウトの段階でWebサイトを作り込んでいる方ほど、引越し・リニューアルは大変な作業になるでしょう。余裕があればこのように一緒に行うことがおすすめです。

「ザ・クレーター」サイトの目的

役割

 ザ・クレーターの情報が一目でわかるサイト
ターゲット 初めてザ・クレーターを知ってきた方、すでにファンの方
目的

サイトを見てライブに来る人を増やす

入れたい内容

新しいライブ情報や新曲情報を手にいれられるページ

視聴と購入ができるページ

このサイトの最終的な目的は、ライブに来る人を増やすこと。そのために既存のファンへ最新の情報を伝えることはもちろん、新しく興味をもって訪れた方をどれだけ引き付けて、見てほしい情報まで導いていくかがポイントです。

 

そのため「コンテンツの配置場所を整理し、トップページは視覚的に惹きつけられるような見やすいもの」という方向性でブラッシュアップすることにしました。

 

目的が固まると、見せるべきポイントや整理することが見えてきます。今回、上記のように固めた目的を元に、以下の点を大きく変更することにしました。

 

  • 2カラムだったデザインを1カラムに変更
  • ナビゲーションメニューの階層を変更
  • トップページの情報を画像で配置
  • サイドバー(フッターエリア)の情報を整理

 

なぜこの点を変更することにしたかの解説は下記で紹介します。

2. プレビューでチェックし必要素材を揃える

目的を見直し構成が固まったら、いよいよ新レイアウトに合わせて素材の準備に取り掛かります。引越し先の新レイアウトは決まっていますか?

 

実際にレイアウト選択画面からレイアウトを選択し、まずはプレビュー画面でどのように反映されるかを確認してみましょう。〔保存〕を押してしまうとレイアウトが変わってしまうのでご注意ください。

 

すでにロゴ・ヘッダー画像を設定されている方も、引越し先の新レイアウトではロゴエリアが異なることがあります。また、旧レイアウトでいうヘッダー画像は、新レイアウトでは背景画像として表示されます。新レイアウトによって背景画像の表示は違いますので、プレビューで必ず確認してください。

 

実際の自分のサイトに当てはめて確認することができるので、必要があれば新たに素材を用意することをおすすめします。今回はトップページの情報を画像で配置するということで、Pixlrで画像を加工しています。


Pixlrは、EDITOR(テキスト入力やトリミング)とEXPRESS(エフェクターやコラージュ)を使い分けています。

ご覧の通り、元のアーティストの素材(プロフィール画像や、CDジャケット)に少し加工を加えただけです。先日機能追加されたフォトエディターを使えば、新たなアプリやツールを使わず、Jimdoの編集画面上で画像を加工できます。

 

オフィシャルサイトやビジネスに使う場合は特に、ファビコンの準備もあるとより良いです。

3. 構成を元に、引越し後に修正をおこなう

素材を準備すれば、レイアウトを実際に移し、中身を整えるだけです。レイアウトを変更し、先ほど考えた構成を元に編集していきます。

 

  • 2カラムだったデザインを1カラムに変更
  • ナビゲーションメニューの階層を変更
  • トップ画像の情報を画像で配置
  • サイドバー(フッターエリア)の情報を整理

 

1カラムに変更し、トップの画像の情報を画像で配置した理由

初めてザ・クレーターを知りサイトを訪れた方が、トップページだけ見て離脱しないよう、視覚的に引き付けるように画像をならべ、かつコンパクトな情報量で見たいページを選択しやすいようにしました。

 

画像だけだとわかりづらいため、説明文とボタンを載せ、リンクが付いていてその先には何があるのかを一目でわかるようにしています。

ナビゲーションメニューの階層を変更した理由

ナビゲーションメニューの第一階層に情報が多すぎると、ユーザーはどのページを見たらいいか迷ってしまいます。特に初めてサイトに訪れた方の離脱要因となりやすいでしょう。今回は最終的に目指す「ライブに来る人を増やす」ということにつながるような内容を第一階層に入れています。関連した内容は第二階層に入れることによって、興味を持った人はさらに情報を選択できるようにしています。

 

例:SHOP(CDやグッズ購入など)にLISTEN(視聴)をつけることにより、中身を知ってもらう・購買意欲を煽る。=曲を聴いたりCDを買ってもらうことでファンになってもらい、ライブへ足を運んでほしい。

サイドバー(フッターエリア)の情報を整理した理由:

使用した旧レイアウト「F4043」は2カラムのデザインで、サイドバーが右側についているものでした。サイドバーには、ミュージックビデオやCDの購入ページ・Twitter情報が載せてありましたが、メインコンテンツ部分にも重複した情報が載っていたので、混ざりがちな情報をだったものを無くしました。

一番見てほしい情報 = トップページ・ナビゲーションの第一階層

詳細や+α情報 = サブナビゲーション

常に表示させたい情報 = サイドバー(フッター)

というように整理してみるとわかりやすいでしょう。

・ちょっとしたコツ
サイトの目的を見直す、ページの構成を考える時は手書きがおすすめ!
見出し/文章/画像/ロゴの配置など、書くと整理しやすいです。

移行手順やWebサイト作成のコツ、良記事まとめ

レイアウト変更と聞くと、「お金がかかるの?」「申し込みが必要なの?」「大幅にページが変わってしまうんじゃないか」など、不安なこともたくさんあるかと思います。

 

Jimdoでは皆さまのWebサイト作成をお手伝いするべく、機能の使い方やリリース情報をいち早く更新しているお知らせや、お問い合わせの前に検索で調べることができるサポートセンター、各機能にフォーカスしてわかりやすく解説したワンポイント講座のようなコンテンツがあります。

 

レイアウトの引越しに関する情報もございますので、段階別で記事をピックアップしました。参考にしてみてください。

<レイアウトを選ぶ>

レイアウト

レイアウトやプリセットなど、概要について

デザインフィルター

あなた好みのレイアウトを選べる機能

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

機能で選ぶか直感で選ぶか、選び方の紹介

<画像や素材を準備する>

ロゴ画像とページタイトル設定のコツ

ロゴ画像周りの白い余白を無くすには?などの疑問を解決

画像・背景素材

Jimdoで用意している素材や、フリー素材のサイトまとめたページ

<レイアウトを変更する>

レイアウト変更手順

管理画面のキャプチャ画像を使って詳しく手順を解説

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

レイアウト移行に関するQ&Aや、編集のポイントまとめ

<ページの中身を整える>

コンテンツ

コンテンツの追加・編集方法は変わりません

スタイル機能を活用しよう

新レイアウトのスタイル編集について詳しく解説!

背景画像を活用する

動画を背景に使う方法もご紹介しています

<新機能>フォトエディターでもっと美しいサイト作り

新レイアウトでしか使えない新機能を使って画像を編集しよう

ページの構成は「定型ページ」にワンクリックでおまかせ!

ページ内のテンプレートも豊富に用意しています

<スマホでの見え方を確認する>

スマホでも美しく使いやすい!Jimdoがレスポンシブを選んだ理由

新レイアウトはすべてレスポンシブデザイン。まずはこれを読もう!

<もっと知識を深めたい!>

漫画コンテンツ:晴れ晴れホームページ

Webサイト作りを漫画で楽しく勉強!ネットですぐ読めます

ホームページ運用に役立つ動画:文章・コピーについて

全5編、表現や言い回しのコツを動画で詳しく解説

自分のホームページに合う色の選び方

色による見え方や効果の違いを勉強

こちらの3本ははじめてWeb(旧みんなのビジネスオンライン)のコンテンツです。Web制作者によるJimdoのコツ・Webサイト作成のコツがたくさん掲載されています。ぜひご覧ください。

実際の引越し例や、JimdoJapanやJimdoのプロが手がけるコンテンツは参考になりましたでしょうか?

 

「それでもやっぱりわからない」「移行が不安だ」そんな方はお近くのJimdoCafeやセミナーに足を運んでみるのも良いかもしれません。お一人で来られる方も多数おります、ぜひお気軽にいらしてくださいね。

イベント情報はこちら。

 

今回ご紹介したWebサイトはこちら

東京を中心に、全国で活躍するロックバンド、ザ・クレーターさんです。

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

 

※契約情報に関するお問い合わせは個人情報となりますため、コメントではお答えできかねます。ご質問・ご要望はお問い合わせ窓口よりご連絡ください。


[障害及び復旧報告]Jimdoサイト表示遅延について

$
0
0

2016年7月13日15時30分頃から16時15分頃まで、Jimdoサイトの表示が遅延する現象が発生しておりました。

 

現在は通常通りのご利用が可能となっております。

 

お客様には多大なご迷惑をおかけいたしましたことを深くお詫び申し上げます。

障害内容
発生時刻 2016年7月13日 15時30分頃から16時15分頃
原因

システムの不具合

対象範囲 JimdoFree、JimdoPro、JimdoBusiness
影響範囲

下記のサービスに遅延が発生しておりました。現在は復旧しております。

  • 既存Jimdoページの閲覧

※Jimdoのメールはご利用いただけておりました。

Jimdoメールシステムメンテナンス完了のお知らせ

$
0
0

7月15日(金)6時より、一部のJimdoメールアカウントで利用しているメールシステムのメンテナンスを実施いたします。

このメンテナンスの影響により、一部のJimdoメールアカウントにて、最大約2時間、Jimdoメール(Web)へのログイン、および、メールアカウントの作成ができなくなることが予想されます。

 現在は、メンテナンス作業が終了し、Jimdoメールへのログインとメールアカウント作成を行えます。

 ご利用のお客様には、メンテナンスによりご迷惑をおかけしました事お詫び申し上げます。またご協力いただき誠にありがとうございます。

メンテナンス詳細
開始時刻 2016年7月15日 午前 6時00分
終了時刻 2016年7月15日 午前 8時00分
メンテナンス内容

メールシステムのメンテナンス作業

対象範囲 一部のJimdoメールアカウント
影響範囲

上記時間帯において、下記のサービスをご利用いただくことができません。

  • Jimdoメール(Web)へのログイン
  • メールアカウントの作成

※メンテナンス期間中に送信されたメールは受信されます

※現在、メンテナンスは終了し無事に稼働を確認しています。


【重要】Flashコンテンツ提供終了のお知らせ

$
0
0

平素よりJimdoをご利用いただき誠にありがとうございます。

 

この度、2016年8月4日をもちましてFlashコンテンツの提供を終了いたします。特にFlashコンテンツを現在ご利用中のお客様は、以下の内容をご確認ください。

Flashコンテンツ提供終了について
提供終了予定日 2016年8月4日(木)
対象プラン すべてのプラン(JimdoFree/JimdoPro/JimdoBusiness)
内容

Flashコンテンツが廃止され、提供終了日以降、新たにFlashコンテンツを追加できなくなります。

またそれに併せ、Flashに関するサポートも終了させていただきます。

過去にアップロードしたFlashファイルについて

現在ご利用中のFlashコンテンツは自動でHTMLコンテンツに置き換えられますので、これまで通りWebサイトに表示されます。

 

しかしながら、近年あらゆるブラウザでFlash表示を終了する動きがあります。このためJimdoでは、今あるFlashファイルの差し替えを強くおすすめしています。

たとえば動画を表示したい場合は、Youtubeなどへ動画をアップロードし、動画用コンテンツでWebサイトに動画を追加できます。またスライドショーを表示したい場合はフォトギャラリーのスライダーが利用できます。

JimdoがFlashを廃止する5つの理由

  • Flashはスマートフォンで見ることができません。スマートフォンでWebサイトを見る人がますます増えるこの世の中、離脱や閲覧者離れの要因となるかもしれません。

  •  あらゆる主要なブラウザでFlashが表示されなくなる傾向にあります。中でもGoogleChromeでは2016年12月末をもって、Flashの表示が終了します。

  •  Flashに代わるHTML5は、すべてのブラウザ、スマートフォンで表示可能な上、検索エンジンとも相性が良くSEOにも有効です。

  • Googleの検索エンジンと相性がよくありません。Flashがサイトに存在することにより、Googleがあなたのサイトをクロールしにくくなります。(参照:Google と相性の良いサイトを作成する方法

  •  Flashはブラウザを問わず、パフォーマンスを落とします。サイト全体が重くなり、ページの表示に時間がかかります。

ぜひこの機会にFlashファイルの差し替えをご検討ください。

何卒よろしくお願いいたします。

<新機能>選べる背景設定でもっとデザインにこだわろう

$
0
0

皆さんはどんな背景を使っていますか? Jimdoでは背景の追加パターンは4つです。画像がなくても、カラー設定で綺麗なサイトを作ることもできますし、動画やスライド設定でサイトに動きを出すこともできます。

 

この記事では、新たに追加された背景機能についてご紹介します。背景はWebサイトのビジュアルに大きく影響するので、少し工夫を加えるだけで印象がずいぶんと変わります。ぜひご一読ください。

INDEX

背景の基本:4パターンの見せ方

背景は、大きく分けて4つの種類から選んで追加できます。Romeのレイアウトで作ったサイトを例に、見比べてみましょう。

背景の追加方法 4パターン

画像

背景:画像の追加

スライド表示

動画

カラー

背景:カラーの設定

Romeのように背景画像がヘッダー部分に大きく出るレイアウトは、サイトをひらいた瞬間に画像が目に飛び込んできます。メインコンテンツの邪魔にならないように気をつけましょう。

 

カラーを設定する場合は、ヘッダー部分にロゴを設定できるようなレイアウト(MiamiやAmsterdam)がおすすめです。カラーの背景でも、シンプルなロゴやアイコンを使ってサイトを作成すると綺麗に見えます。

 

それぞれの詳しい追加方法については、サポートセンターの背景ページをご覧ください。

新機能:背景固定はどんな効果があるの?

背景に関する新しい機能が追加されました。設定した背景をサイトに全体(後面)に固定できる機能です。

[管理メニュー]>[スタイル]>[背景] から、設定画面をご確認ください。

背景固定のスイッチの場所

上の例であげたRomeのように、背景がヘッダー部分にのみ表示されるレイアウトは、これまでページをスクロールするとメインコンテンツと一緒に背景も上に流れていきました。

 

この背景固定のスイッチをオンにすると、背景がサイトの後面に固定されて動かなくなるので、ページをスクロールしても背景画像は流れず、コンテンツだけが上に流れていきます。

背景固定:オフ

背景固定スイッチ:オフの状態

オフの状態はこれまでと同じ見え方です。背景画像もスクロールと一緒に動きます。


背景固定スイッチ:オフ(スクロール前)
スクロール前
背景固定スイッチ:オフ(スクロール後)
スクロール後

背景固定:オン(新機能)

背景固定スイッチ:オンの状態

背景固定をオンにすると、スクロールしても背景は動きません。前面のコンテンツだけがスクロールされていきます。


背景固定スイッチ:オン(スクロール前)
スクロール前
背景固定スイッチ:オン(スクロール後)
スクロール後

背景固定ができるレイアウト

Amsterdam, Bordeaux, Cairo, Chicago, Florence, Madrid, Miami, Rome, Stockholm, Vienna, Zurich

以上のレイアウトはスイッチを操作することができます。(2016年7月29日現在)

 

それ以外のレイアウトに関しては、すでに背景が全面に固定されているので、スイッチを操作できず、次のような表示が出ます。

背景固定スイッチ:使えないレイアウトでの表示

Tokyoレイアウトに関して

Tokyoはヘッダー部分に背景画像が表示されますが、背景固定のスイッチを入れることができません。背景はトップページだけにしか表示されず、シンプルで自由度が高いレイアウトですので、そのままのデザインでお楽しみください。

また、長くJimdoをご利用いただいているお客様のなかで、レスポンシブデザインに変更したときに背景が固定されなくなりスクロールのされ方が変わってしまった、というお客様もいらっしゃるのではないかと思います。この新機能をオンにすることで、以前の見え方に戻すことが可能です、ぜひご活用ください。

新機能+スタイル編集で、ガラッと印象チェンジ

上記にあげた背景固定ができるレイアウトはこれまで、メインコンテンツ部分を透過して背景画像をサイト全体に表示させることができませんでした。

 

この背景固定の機能でスイッチをオンにしたあと、スタイルの編集でメインコンテンツやフッターを透明に設定すると、透過され背景が全面に表示されるようになります。

設定:オフ

背景固定オフ:メインコンテンツの様子
通常のRomeレイアウトはメインコンテンツの背景が白です

設定:オン(※)

背景固定オン+スタイル編集時:メインコンテンツの様子
メインコンテンツを透過させた様子

メインコンテンツ部分に背景画像を表示させたい場合:

(※)設定をオンにするだけでなく、〔スタイル〕設定から背景画像を表示させたい場所(メインコンテンツやフッター)のカラーを透明に設定してください。

 

※背景画像を透過させることは、Webサイトの全ページに反映されます。ページごとに透過を設定することはできません。

スクロールの仕方や、透過して背景画像を全面に見せたビジュアルは、レスポンシブデザインのおかげでスマホでも同じように見ることができます。

 

※PCとスマホではナビゲーションメニューとハンバーガーアイコンの違いがあるように、閲覧環境・レイアウトによって異なる見え方もございます。

 

スマホでの見え方も意識し、編集してみてください。

背景画像を透過したサイト:スマホで見ると
メインコンテンツを透過したサイトをスマホで見たとき

レイアウト別:背景+デザインの参考サイト

日本・海外のJimdoサイトをご紹介します。綺麗なデザインのサイトの、背景に注目してみました。画像をクリックすると実際のサイトに飛ぶことができますので、ぜひ参考にしてください。

Berlin

Berlinサイト事例:札幌往診動物病院

札幌往診動物病院

背景はカラーで白に設定されシンプルです。ロゴとナビゲーションメニューの色合いも良いですし、スライドショーで追加しているトップの写真のおかげで、動物病院のやさしい印象が伝わりますね。

Cape Town

CapeTownサイト事例:ANOTHER BEATLESS

ANOTHER BEATLESS
Cape Townはパソコンでもナビゲーションメニューがハンバーガーアイコンで、トップページが全面に出る1カラムのレイアウト。背景画像の選び方と、トップページ上部にバナーを使ってメニューをつけているのが良いですね。


Zurich

Zurichサイト事例:Bed and Beans

Bed and Beans

ナビゲーションメニューやフッターに使っている青色と、文字のカラーを合わせています。ナビゲーションメニュー以外は透けさせて、綺麗な背景を見せることによって奥行きのあるサイトになっていますね。

Barcelona

Barcelonaサイト事例:boooo

boooo 

ドイツのWebサイトです。シンプルですがカラーとロゴの使い方が良く、寂しく見えないですね。日本語でも美しく見えそうです。ショップ機能も、商品の魅せ方がお洒落です。


Jimdoユーザーポータルサイトには、日本のユーザーのJimdoサイトを掲載しています。海外ユーザーのJimdoサイトもご覧いただけますので、海外ユーザーのセンスも参考にしてみてくださいね!

新しい背景固定の機能で、スクロールの見え方とスタイル編集の幅が広がりました。レイアウトやご自身のサイトのイメージに合わせて、お好みで設定してみてください。

 

冒頭でも触れたように、背景はサイトのビジュアルに大きく影響するのでこだわりたいですよね。「綺麗な画像がない!」という方は、Jimdoでもすぐに使える背景素材を用意しているので、ぜひご活用ください。新しい機能やスタイルを使いこなし、より綺麗で使い易いサイトを目指していきましょう。

関連記事まとめ

サポートページ:Webサイトに背景を設定する

サポートページ:画像・背景素材

ワンポイント講座:カラーパレットを使いこなそう

ワンポイント講座:スタイル機能を活用しよう

ワンポイント講座:背景画像を活用しよう

ユーザー事例:日本のサイト / 海外のサイト


欲張りがちなナビゲーション、ユーザーの目線に立てていますか?

$
0
0

ナビゲーションはWebサイトの目次のような役割をしています。見出しにはたくさん情報が載っている方が、ユーザーにとって便利にちがいない! そうお考えの方も多いのでは?

 

ところが、ナビゲーションメニューの数が多すぎて、知りたい情報の在り処がわからない! ということが実はよくあります。

 

この記事では、ナビゲーションを整理しユーザーが使いやすいサイトにするためのポイントを紹介していきます。

INDEX

ナビゲーションの基本について

基本的にはすべてのWebサイトに存在するナビゲーション、主にWebサイトのヘッダー部分かサイド部分にあります。

 

ナビゲーションは目次の役割をしており、見出しの大きさを階層で分けて表示させることができます。以下はナビゲーションと階層を説明した図です。

ナビゲーションの位置 説明図 Florence
レイアウト:Florence

(1)第一階層 ナビゲーションのトップメニュー
(2)第二階層 サブメニュー
(3)第三階層 第二階層から派生する小ページ

 

(4)パンくずリスト 今自分がどのページを見ているかを表すナビ

 

レイアウトによってナビゲーションの位置や、第二階層以降が表示される場所はさまざま。またこのようなパンくずリストが付いているものもあります。

ナビゲーション 編集バー
ナビゲーション 編集画面

サイトの編集画面では、このようにナビゲーションの近くに編集バーが表示されます。クリックするとWebサイトのページ一覧が確認でき、ここで階層を変えたりページを非表示にしたりできます。

 

詳しいナビゲーションの編集方法はサポートセンターか、コンテンツについて詳しく学べるワンポイント講座をご覧ください。

最適なメニューの数は? 整理整頓のビフォーアフター

基本をおさらい出来たら、ナビゲーションの適切な数についてよくわかる、ビフォーアフターを見てみましょう。以下はとあるWebサイトのトップページです。

ナビゲーションメニュー 改善前の様子

このWebサイトでは、第一階層にメニューが13個載っています。パッと見たときにどこに何の情報があるかがわかりにくいと感じませんか?Jimdoでは、見やすさと使いやすさの観点から、トップメニューの数は7個以下にすることをおすすめしています。

 

メニュー数を少なくし、簡潔なナビゲーションに改善したものが以下です。

ナビゲーションメニュー 改善後の様子

ユーザーが自分にとって必要な情報を探しやすいように、サイト内のページの大分類を第一階層にまとめています。見栄えもスッキリし、一目でどこに何があるか分かるようになりました。

 

一方、確かにトップページはスッキリしたけれど、これだとユーザーが求めている情報にたどり着くまでに何回もページを移動しないといけないのでは? と思う方もいるかもしれません。

 

ナビゲーションが少ない方が良い理由を、掘り下げてみましょう。

なぜ、トップメニューは少ない方が良いのか

例えば、Webサイトに100通りの料理のレシピを載せるとします。

 

全てのレシピをナビゲーションのトップメニュー(第一階層)に載せると、それだけでトップメニューが100個できますよね。サイトを開くといきなり100個のメニューが並んでいたら、探す気もなくなってしまいませんか?

 

まずは「揚げ物」「メイン」「前菜」のように、大分類のジャンルを第一階層に載せることによって、第一階層のメニュー数が少なくなります。このほうが、第二階層にある「エビフライ」のレシピまで早くたどり着きそうです。

 

大量の情報から一つを探さなくてはいけないよりは、見やすいサイトの中で自然に次のクリックを誘導される方が、ストレスなくサイトを使うことができます。

トップメニューは少なく簡潔な方が良い理由まとめ

 1. どのユーザーも使いやすいサイトにするため

初めてサイトを訪問したユーザーは特に、見にくさや使いにくさを感じるとすぐに閲覧をやめてしまうことも多いです。特定の情報を探して辿りついた人にとっても、シンプルなメニューは情報が探しやすく便利です。

 

2. SEOで優位に、検索エンジンに引っかかりやすくなるため

簡単で分かりやすいメニュー名にすることで、検索エンジンもサイトの内容を読み取りやすくなります。

3. スタイリッシュなサイトに、元のデザインを生かすため

多くのレイアウトでは、ナビゲーションを一行と仮定して作られています。ナビゲーションが何行にも渡っていると本来のデザインが損なわれたり、ホームページ全体が雑多な印象になります。

 

作りたいサイトの目的に合わせて整理することが一番ですし、選ぶレイアウトによっては第一階層が多くてもキレイにまとまるものもあります。ひとつの見方として参考にしてみてください。

いざ編集! 整理整頓をする4つのコツ

では、自分のサイトのナビゲーションもスッキリさせたい! と思ったらまず何をすればいいのでしょうか。

1. 1行に納まるように、メニュー名を短くする

メニュー名はWebサイトの内容に関連していて、かつ短ければ短いほど、ユーザーにとっても検索エンジンにとっても親切です。

 

例)「うちのお店で働きませんか?」→「求人」「求人情報」

例)「メールはこちらから」→「お問い合わせ」

 2. メニューのトップからサブへ、階層を移す

すべてをトップ(第一階層)に入れておく必要はありません。関連するページが多い場合や踏み込んだ内容のページは、第二階層以降に移しましょう。

ナビゲーションメニューの編集 階層の下げ方
ナビゲーションの編集から、階層を下げることができます
階層を下げたときの見え方 ドロップダウン
お店についてをトップメニューに残し、関連するページは階層を下げました

3. 不要な情報は削除する

たとえば「開店時間と閉店時間」と「お店の場所」はページ内の情報量が少ないので、1ページにまとめましょう。

 

必要だと思っていたページも、第一階層には必要ないかもしれません。ナビゲーションの編集エリアにある丸い目のアイコンをクリックし、ページを非表示にすることもできます。

 

非表示にしてサイト上では見えなくしても、リンクを貼ればユーザーはそのページ見ることができるので、リンクの飛ばし先として使用したり、過去使っていたページとして残しておくことができます。

ナビゲーションメニューの編集 非表示の仕方
ナビゲーションメニュー 非表示にしたときの編集画面
プレビューで実際の画面をみると、非表示になっています

他のレイアウトやプリセットを試してみよう

メニューの数を減らしたり階層の整理をしてみても見た目が気に入らないと感じたら、レイアウトを変更してみると良いかもしれません。

 

以下はナビゲーションの特徴別で、レイアウトをまとめたものです。

メインコンテンツを邪魔しないシンプルなナビゲーション

Cape Town サンプル画像
Cape Town : PCでもハンバーガーアイコン
Paris サンプル画像
Paris : 2カラムでもシンプルなメニュー

Rio de Janeiro サンプル画像
Rio de Janeiro : 階層ごとの表示がシンプルで見やすい
Zurich サンプル画像
Zurich : 階層ごとの表示がシンプルで見やすい

第二階層が目立つレイアウト

Hamburg サンプル画像
Hamburg : サイドに第二階層のメニューのみが表示される
Chicago サンプル画像
Chicago : サイドに第二階層のメニューのみが表示される

Florence サンプル画像
Florence : サイドバーの上部に第二階層が表示される
Bordeaux サンプル画像
Bordeaux : サイドバーの上部に第二階層が表示される

以上の一覧やデザインフィルターを使って、自分にあったレイアウトを検索してみてください。

ユーザーが求めている情報が探しやすいようなWebサイトを作ることが大切です。ナビゲーションを整理するだけで第一印象がガラッと変化し、驚くほど機能的なサイトになります。

 

まずはナビゲーションを整理し、見やすいサイトに少しずつ近づけていきましょう!

関連サイトまとめ

サポートセンター:デザインフィルター

サポートセンター:ページ非表示

サポートセンター:ナビゲーション

ワンポイント講座:ナビゲーション、うまく使っていますか?


[障害及び復旧報告]Jimdoサイト表示不具合について

$
0
0

2016年8月20日15時00分頃から16時20分頃まで、Jimdoサイトの表示、Jimdoへのログインおよび管理メニューのご利用ができない現象が発生しておりました。

 

現在は通常通りのご利用が可能となっております。

 

お客様には多大なご迷惑をおかけいたしましたことを深くお詫び申し上げます。

障害内容
発生時刻 2016年8月20日 15時00分頃から16時20分頃
原因

システムの不具合

対象範囲 JimdoFree、JimdoPro、JimdoBusiness
影響範囲

下記のサービスがご利用いただくことができませんでした。現在は復旧しております。

  • 既存Jimdoページの閲覧
  • Jimdoへのログイン、管理メニューのご利用

※Jimdoのメールには影響はございませんでした。

5分でわかるSEO!あなたのJimdoサイトも検索上位に

$
0
0

キレイなWebサイトを作ったのになぜか検索結果に表示されない。そんなとき、Googleのような大きな検索エンジンにサイトを見つけてもらうにはどうしたらいいのか……と考えたことはありませんか?

 

Googleは毎日何十億というWebサイトの分析・ランク付けをしています。さて、何を基準にそれらを行っているのか、またどうしたらあなたのWebサイトをGoogleに知らせることができるのでしょうか。

インデックス>分析>ランク付け>更新

Googleがどうやって数あるサイトをインデックスし、分析し、ランク付けをしているのか、またそれに対してあなたはどう働きかけることができるのかを学んでいきましょう。

インデックス
インデックス

検索エンジンはかつての電話帳のように、見つけたすべてのWebサイトを記録した「インデックス(索引)」を持っています。あなたのサイトを検索結果に表示させるためには、まずこのインデックスに追加されることが必須条件です。

・Webサイトをインデックスに追加する

上述したように、サイトが検索結果に表示されるためには、検索エンジンにあなたのサイトの存在を知ってもらい、そのデータベースに記録される必要があります。これを専門用語で「インデックスされる」といいますが、SEO(検索エンジン最適化)において、これが取り組むべき最初の事柄です。

・検索エンジンにWebサイトの存在を知らせる

検索エンジンは 新しいサイトを探す際に「クローラー」という、Webサイトを訪問する自動検索ロボットを使っています。このクローラーは、一日中サイトのコンテンツ(テキスト・画像・リンクなど)を見て回りますが、この時点ではそこにどんなコンテンツがあるかを確認しているだけで、集めた情報はあとで分析しています。

検索エンジンのクローラーは、いずれあなたのサイトを見つけてくれますが、新しくサイトを作ったら、はやく検索結果に表示されたいですよね。そんなときは、あなたのWebサイトの存在を「Google Search Console(グーグルサーチコンソール)」を使って、検索エンジンに手動で知らせることができます。


簡単な作業なので、ただクローラーがやって来るのを待つよりも遥かに良いですよね。

・インデックスされているかの確認方法

Googleにインデックスされているかどうかを確かめるのは簡単です。Jimdoにログインし、右側の管理メニューから[基本設定]>[SEO]>[Googleインデックス]をクリックします。

基本設定:Googleインデックスの場所

「確認する」のボタンをクリックすれば、Googleにインデックスされているページがすべて表示されます。一つでも表示されていればインデックスされているということです。

分析
分析

クローラーがあなたのサイトの存在を知り、そこにあるコンテンツの情報を集めたら、ここでようやく分析が始まります。この分析結果でそのサイトはランク付けされ、より検索キーワードにマッチする内容のWebサイトから、検索結果の上位に表示されていきます。

・あなたのサイトをどんな検索キーワードでヒットさせるか?

検索キーワード:google検索画面

GoogleがWebサイトの分析をする際に見ている項目はたくさんあります。当然、あなたのサイトに何が書かれているかもチェックしますが、もっと重要なことは「どんな検索キーワードであなたのサイトをヒットさせるか」ということです。つまり、検索エンジンはあなたのサイトに合った検索キーワードを探しているのです。

Googleのアルゴリズム(サイトの検索順位を決めるための計算方法)は、ここ数年でどんどん改良されています。

 

たとえばコーヒーについてのサイトでも「街一番のコーヒーショップ」「コーヒーショップ経営者のための仕入先」「海外のコーヒー豆が購入できるオンラインショップ」というように内容はさまざまで、ターゲットも違えば検索するキーワードも違いますよね。

ランク付け
ランク付け

検索エンジンは分析を終えると、その検索キーワードとあなたのWebサイトの関連性がどのくらい強いかを、他の類似サイトと比較しながら算出していきます。検索結果の順位を決めるには異なる150以上の分析項目があると言われており、特に重要視されている項目もあります。

ただ残念なことに、それらの項目をチェックできるリストなどはありません。Googleや他の検索エンジンは検索結果を故意に操作されることを嫌いますので、クロールする際にサイトのどこを見ているのかを教えてくれません。(クロール=クローラが情報を収集すること)

その代わりに、一般的なガイドラインを提供しています。SEO従事者はこれをもとに、検索エンジンがどうやってサイト上のコンテンツを分析しているのか、テストを繰り返しているのです。ガイドラインをわかりやすく記載した、検索エンジン最適化スターターガイド(PDF)をご覧ください。

 

この情報をもとに、SEOや、特定の検索キーワードで上位表示をさせるための施策を打つことができます。SEOに特化した専門家はいますが、あなたも以下のステップで簡単に始めることができます。

・どんなキーワードで検索されたいかを考える

どんな人に見てもらいたいWebサイトなのか、というところから考えてみましょう。

・Jimdoの管理画面で設定をする

ログインし、右側の管理メニューから「SEO」をクリックすると、「ページタイトル」と「ページ概要」(ディスクリプションメタタグ)を設定できます。ここにそのページが何について書かれているのかを、上記で決めた検索キーワードを使って入力していきます。

 

ページタイトルは、Googleやサイト訪問者にそのページがどんなページなのかということを簡潔に伝えます。ページ概要は、検索結果でページタイトルのすぐ下に表示される部分です。類似のサイトがあった際はここで差別化できるので、そのページにどんな情報があるのか、どんなサービス・商品を扱っているのかを分かりやすくまとめましょう。

ページタイトルとページ概要の表示場所

※JimdoFree のプランは、TOPページのみにしか設定ができません。Pro/Buisiness プランをお使いの方は、各ページに設定が可能です。

・ページの中身、編集のポイント

  • ページには「見出し」をつけよう
    見出しの大きさは、大(h1)、中(h2)、小(h3)と3種類あります。ページの中身を読みやすくするためにも、クローラーがページの内容を読み取りやすくするためにも、「文章」だけでなく「見出し」を使いましょう。

    また、見出し大はページに1つだけ設定するようにしましょう。重要な見出し大がいくつも存在すると、クローラーがページの内容を読み取るのに苦労します。

  • 画像には「代替テキスト」を追加しよう
    音声ブラウザ利用者への配慮や、なんらかの理由で画像が表示されない時にどんな画像かを文字で表示させる、という効果があります。クローラーは画像を識別して内容を判断することはできないので、代替テキストを使ってクローラーにどんな画像でどうサイトに関連するのかを知らせましょう。

  • Webサイトのコンテンツを見直そう
    SEOにも限界があります。検索結果で上位にランク付けされるためにもっとも重要なことは、Webサイトの中身=コンテンツ(テキスト・画像・リンクなど)がいかに統制されているか(関連性があるか)です。
更新
更新

Webサイトがインデックスされ、検索キーワードを最適化するための設定や変更もしました。さて、このあとは……?

・Webサイトの更新がGoogleに反映されるまで待つ

検索結果に変更が反映されるには、クローラーがまずそれに気づかなければなりません。クローラーは次にあなたのサイトにやって来た際に、前回となにか変わった点はないか、どこか更新されていないかを確認します。再びやって来たクローラーが知りたいことは、検索結果に反映させるための更新情報がそこにあるかどうかです。

 

クロールされる頻度はサイトによって異なります。Googleのロジックは、検索キーワードと検索結果の関連性を保つこと、また常に最新情報であるという点に基づいています。

 

もしあなたが人気のニュースサイトを運営していて、そのコンテンツを一時間ごとに更新していたら、クロールされる回数も多くなります。逆にあなたが年に一度しか更新しないWebサイトを運営していたら、クロールされる回数は少なくなり、次にクロールされるまでの時間も掛かります。Webサイトがクロールされ再びコンテンツの情報が分析されれば、特定の検索キーワードにおいて検索結果が変わったり、他の検索キーワードは検索結果が下がったりと、変動することもあります。

 

ランク付け(検索順位)をチェックするSEOツールはたくさんありますが、Webサイト作成に費やせる予算が限られているのであれば、無料でつかえるGoogle Search Console(旧ウェブマスターツール)がお勧めです。登録方法や分析方法については下記をご参照ください。

 

Google Search Console


これを使えば、検索順位や表示回数、そのサイトに多く存在する言葉(つまりクローラがサイトを分析する材料)が分かります。特定の検索キーワードでの順位を知るには、フィルターを使ってデータを絞り込んでみましょう。Webサイト
の運営期間が長ければ、その分データも豊富な可能性があります。

ほとんどの場合、検索順位が一気に上がることは期待できません。でも落胆せずにコツコツと時間をかけてステップを踏んでいきましょう。サイトのコンテンツや訪問者を増やすことで、検索順位も徐々に上がっていくはずです。

Jimdoのサポートセンターやワンポイント講座には、他にもSEOに関する情報があります。以下の関連記事まとめから、ぜひチェックしてみてくださいね。

関連記事まとめ:

サポートセンター:SEO 検索エンジン最適化

サポートセンター:検索エンジンに反映させたい

サポートセンター:リダイレクトURL

サポートセンター:カスタムURL

サポートセンター:Google search console

ワンポイント講座:画像機能を使いこなそう!代替テキストについて

Google:検索エンジン最適化スターターガイド

初公開:世界で最も使われているJimdoレイアウトTOP3

$
0
0

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

 

皆さん、夏休みはたのしく過ごせましたか?

過ごしやすい秋、Jimdoでのサイト作成が捗りますように、と思いを込めて、今回はJimdoのレイアウトに関するデータを初公開しちゃいます!

 

世界各国で使われているJimdoの40種類のレイアウトのなかで、今最も使われているレイアウトのTOP3を解説します。プリセットのパターンやレイアウトの特徴を生かした活用法も必見です。レイアウト選びの参考にしてみてください! 

第3位:Zurich

クリックでサンプルサイトへ
クリックでサンプルサイトへ

 

ナビゲーションも全て横一列、シンプルで綺麗な1カラムデザインのZurich。

 

あえて遊び心をいれず、使いやすさを重視して作られたレイアウトだそうで、Jimdoスタッフも納得の使いやすさです。


【プリセットの特長】かゆいところに手が届くこだわり

Zurichのスタンダード
Zurich:スタンダード
Zurichのプリセット「Wiedikon」
Wiedikon:ナビゲーションとタイトルの間が狭い
Zurichのプリセット「Fluntern」
Fluntern:背景画像の表示される幅が狭い

上の画像はZurichのプリセットの一部です。

画像の表示サイズや、コンテンツ間の広さがちがいます。シンプルなレイアウトこそ細部が気になりやすいので、この細やかな違いはうれしい方も多いのでは? 他も試しながら、理想に近いものを選んでみてくださいね。

【こんな活用法も!】簡単に見やすい多言語サイトが作れます

Zurichはもともとナビゲーションがシンプルなので、余計な手を加えなくても、綺麗なサイトに見えるのが便利です。ナビゲーションの第一階層から第三階層まで、ヘッダーの背景画像のすぐ下につづけて表示されます。

 

この特性を生かして、複数の言語をもつサイトを作ることができます。

Zurich見本:多言語サイト(日本語)
日本語ページ
Zurich見本:多言語サイト(英語)
ENGLISHページ

それぞれの階層が一列で綺麗に表示されるので、複数言語があっても、雑多な印象になりません。

多言語サイトの編集画面
多言語サイトの編集画面

 このように、第一階層にはことばの種類だけを入れ、それぞれに紐づく第二階層以降にサイトのメニューを作っています。

 

まずは日本語で全てのページを作っておき、あとからコピーをすると便利です。すべての言語でおなじページ構成にできますし、上書きで翻訳をしていくとだけで完成できます。

 

観光地にあるお店などで使えそうな多言語サイト、ぜひこのZurichでチャレンジをしてみてください!

第2位:Chicago

クリックでサンプルサイトへ
クリックでサンプルサイトへ

Chicagoもヘッダーに背景画像が表示されるタイプのレイアウトです。ナビゲーションの第二階層がサイドに表示され目立ちます。

 

サイドバーはフッターエリア(下部)に付いているため、2カラムながらもメインコンテンツを閲覧しやすいレイアウトです。


【プリセットの特長】透過パターンが豊富でイメージしやすい

Chicagoのプリセット「Little Italy」
Little Italy:ナビゲーションが完全に透過されています
Chicagoのプリセット「South Shore」
South Shore:カラー白を半分透過されています
Chicagoのプリセット「Loop」
Loop:ダークカラーで、ナビゲーションの形を丸くしています

Chicagoのプリセットは全4種類。ナビゲーションエリアの透過具合がそれぞれ異なり、カラーバリエーションも豊富。好きなイメージを直感的に選びやすくなっています。

 

直感的に選んだあとは、スタイルの編集でカラーを変えたり、好きな場所を透過したり。プリセットで選んだ後の編集もしやすいのではないでしょうか。初心者の方にもおすすめなレイアウトです!

【こんな活用法も!】カテゴリ表示でブログが見やすいサイトに

Chicagoのように第二階層がサイドについているレイアウトは、ブログをよく使うサイトにおすすめできます。第二階層にブログのカテゴリを設定すれば、ユーザーはジャンル別で記事を探しやすくなりますよ。

Chicago:ブログの読みやすいサイトの作り方
ブログのトップページ。すべての記事を表示させています

このブログのカテゴリはぜんぶで3つ。「今週のランチ」「スタッフの休日」「イベント情報」です。それぞれの記事を書く際に、必ずそれぞれに決めたタグを付けるようにします。


第一階層のブログの下に、第二階層で3つのカテゴリを作っておき、それぞれのページの中にブログ表示のコンテンツを入れます。

Chicago:第二階層でカテゴリ分けする
今週のランチのページ
Chicago:ページにカテゴリ分けして表示させる
カテゴリに設定したタグ「weeklunch」を設定

今週のランチの記事に毎回つけている「weeklunch」というタグを、ページのブログ表示のカテゴリに入れてください。そうすることで、ページごとに記事を表示させることができます。

 

2カラムのレイアウトはすべてブログを見やすく作りやすいのですが、特にこのChicago・Bordeaux・Hamburg などは、サイドに第二階層だけが表示されるので、ブログを見たいユーザーにとっては使い勝手が良いです。

 

ブログについて詳しく知りたい方はサポートセンターをご覧ください。

第1位:Dubai

クリックでサンプルサイトへ
クリックでサンプルサイトへ

ナビゲーション・メイン・フッターのエリア分けがハッキリとした印象のDubaiが、一番多く使われているサイトです。

 

2カラムで、サイドバーにたくさん情報をのせることができるので、企業やビジネスでの利用に向いています。


【プリセットの特長】題材を選ばないシックなカラーパターン


モノクロやダークトーンのカラーバリエーションが多く、いろんな用途に使えます。シンプルでロゴも映えるので、オリジナルのロゴやアイコンを使ったサイト作りがおすすめです。

【こんな活用法も!】サイドバーを有効に使ってビジネス促進

Dubaiはとにかく、ユーザーがわかりやすいように情報を見せることができます。

 

2カラムで、ナビゲーションがページの上部と下部の両方に配置されているので、情報量が多くたくさんスクロールしないといけないようなサイトも、次のページへ誘導しやすいです。

 

また、サイドバーが広いので、重要な情報はサイドバーを使って常にユーザーに見せておくことができます。サイドバーにカラムを入れたり、バナーを入れて使っても、ごちゃごちゃ見えにくいでしょう。

 

このように、上部と下部に設置されたナビゲーションメニューと、広いサイドバーをうまく利用すれば、訪問してくれたユーザーを逃さない、ビジネス向けのサイトを作ることができます。

Dubaiのナビゲーションとサイドバーの拡大図

飲食店であれば場所や連絡先を、ビジネスであればお問い合わせや資料請求先を載せておくと良いですね。各ページで商品やサービスの情報収集をし、問い合わせをしたい! と思ったときにすぐにユーザーが行動に移せます。

【ここもポイント!】スマホユーザーにとことん優しい

レスポンシブデザインになったことで、スマホでJimdoのサイトを閲覧するとき、ナビゲーションはすべて「≡」このような、ハンバーガーアイコンとよばれるもので表示されています。

 

昨今よく使われるスタイリッシュなデザインですが、ナビゲーションがどこにあるかわからない、というユーザーさんもいらっしゃいますよね。

 

Dubaiのレイアウトは、ナビゲーションが下部にも設定されているので、スマホで見てもメニューの一覧がよく目に付きます。

スマホで見たナビゲーション(上部)
ページ上部のナビゲーション(ハンバーガーアイコンをクリック)
スマホで見たナビゲーション(下部)
ページの下部にもナビゲーションが表示されています

ヘッダーのハンバーガーアイコンに加え、スクロールしていくと、ナビゲーションメニューが下部に表示されています。

 

ページを読んだ後〔トップに戻ってアイコンをタップしてメニューを開き、見たいページを選ぶ〕という動作が必要ないので、スマホのユーザーも使いやすいですね。

番外編:Jimdoのプロが好きなレイアウトは?

世界のJimdoレイアウトランキング、いかがでしたでしょうか? 国別だと人気のレイアウトは違うかもしれませんが、今日本では画面いっぱいに画像が表示されているものや、1カラムのデザインが人気と言われています。

 

今年リリースしたTokyoレイアウトは1カラムでシンプルなもの。その次にリリースしたStockholmはフルスクリーンで、インパクトのあるレイアウトですよね。

 

特にTokyoレイアウトは、社内でも使いやすいと人気の高いレイアウトでもあります。そこで、Jimdoを長年愛用しているお2人にどのレイアウトが好きかを聞いてみました。

Helsinki が好き!

Helsinkiのサンプルサイト
クリックでサンプルサイトへ

古くからJimdoを使って下さっており、書籍も執筆されたWeb制作者さんに聞いてみました。

 

ロゴが目立ち、ナビゲーションがドロップダウン式のHelsinkiがお気に入り。

 

2カラムだけれどワイドなのでコンテンツを配置しやすく、使い勝手が良いそう! ロゴがない場合は、ページタイトルを手打ちできるMiamiを使っていらっしゃるようです。

Amsterdam が好き!

Amsterdamのサンプルサイト
クリックでサンプルサイトへ

長年Jimdoをそばで見続けてきた本部長に聞いてみました。

 

今はTokyoレイアウトがお気に入りですが、もともと好きなのはAmsterdamなんだそう。

 

フラットデザインが主流な今、メインコンテンツにくっきりと影がついているレトロさが好きなんだそうです。さすがマニアな意見。喫茶店やクラフト・ハンドメイド系のサイトに使うのも合うんじゃないか、と具体例まで教えてくれました。

レイアウト選びに迷っている方は、今回のランキングをぜひ参考にしてみてください。レイアウトは何回でも、自分のサイトを当てはめて試して見ることが可能です。しっくりくるものを選んでくださいね。

 

※ランキング順位、プリセット数は2016年8月31日時点のデータです

また「何を基準に選べばいいかわからない!」「それぞれのレイアウトの違いや魅力をもっと知りたい!」そんな方は、全国にあるお近くのJimdoCafeで相談するのがおすすめ。

 

JimdoCafeは、実際にJimdoをビジネスに活用していたり、元々Web制作を仕事にしているオーナーさんがたくさんいらっしゃいます。「SEO」「新機能について学ぼう」など、テーマを設けたセミナーもあれば、マンツーマンでサイトの作り方や事業に合わせた見せ方を相談できる、個別相談も開催されています。

パワフルで素敵なオーナーさんばかりなので、ぜひ足を運んでみてくださいね。また、皆さんもお好きなレイアウトや、こだわりの活用法があれば、ぜひ教えてください。

関連記事まとめ

サポートセンター:レイアウトについて

サポートセンター:レイアウトの変更方法

サポートセンター:デザインフィルター

サポートセンター:ブログ

Jimdoユーザーポータル:JimdoCafe

Jimdoユーザーポータル:イベント、セミナー情報


【受付開始】Jimdo Best Pages 2016

$
0
0
Jimdo Best Pages 2016 10/31まで応募受付中!

Jimdo Best Pages 2016 応募受付開始!

Jimdoで作られたサイトの中から、年間のベストサイトを決定するイベント Jimdo Best Pages 2016の募集を開始しました。

 

Jimdoで作られているサイトであれば、作成者が個人でも法人でも、プランも継続年数なども問いません。Best Pagesのために作ったサイトや、「知人が素敵なサイトを作っている」という他薦も大歓迎です。

 

Jimdo Best Pagesの公式ページから応募していただけます。皆様のご応募お待ちしております。

応募と選考審査について

Jimdo Best Pages 応募と選考について
応募条件

Jimdoで作られたサイトであること

プラン・サイトのジャンル・レイアウトなど、応募制限はありません。

応募受付 

10月6日(木) 〜 10月31日(月) 23時59分まで

一次審査  11月1日(火) 〜 11月中旬
最終審査 

11月26日(土) イベント「PAGES」 内で実施&授賞式

最終審査はJimdo最大のイベント「PAGES」で行います。PAGESは11/26(土) に都内にて開催。今年は参加者が審査を行う特別賞も用意しています。ぜひ、応募された方はイベントにもご参加ください。受付開始は追ってお知らせいたします。

皆さまからのご応募、お待ちしております!

関連リンク



[障害及び復旧報告]Jimdoサイト表示不具合について

$
0
0

2016年10月13日07時20分頃から15時00分頃まで、一部のJimdoFree、JimdoPro、JimdoBusinessにおいて、Jimdoウェブサイトの表示が不安定となり、Jimdoへログインできない現象が発生しておりました。

 

現在は通常通りのご利用が可能となっております。

 

お客様には多大なご迷惑をおかけいたしましたことを深くお詫び申し上げます。

障害内容
発生時刻 2016年10月13日 07時20分頃から15時00分頃まで
原因

システムの不具合

対象範囲 JimdoFree、JimdoPro、JimdoBusinessの一部
影響範囲

下記のサービスが不安定な状態となっておりました。

  • 既存Jimdoページの閲覧
  • Jimdoへのログイン、管理メニューのご利用

※Jimdoのメールには影響はございませんでした。

昨年の受賞サイトから、Jimdo Best Pages の評価基準を探ろう!

$
0
0

先日、Jimdo Best Pages のサイト募集が始まりました。Jimdoで作られたサイトの中で、最も輝く年間のベストサイトを決定するこのアワード。せっかく応募するなら賞を獲りたい! と思っている方もいらっしゃるのではないでしょうか。

 

そこで、Jimdo Best Pages 2015で受賞したサイトへの審査員のコメントをもとに、昨年はどんな基準で評価されたのか、ポイントは何だったのかをご紹介します。応募締め切りまでまだあと2週間以上と時間はたっぷり! 応募前の人も応募後の人も、参考にしてみてください。

・Jimdoでできることを最大限に生かす

Jimdo Best Pages 2015 Best Page & Best Content

「Jimdo」の得意なところ、不得意なところを理解した上で、無理のないカスタマイズをしていくことで、多くの方に見ていただけるホームページができるのではないか

 

Jimdo Best Pages 2015 Best Page & Best Content 受賞

「HIROSHIMA Study Abroad Ambassador」



 Jimdoで作られたサイトのナンバーワン(大賞)は、最もJimdoらしさを生かしたものでした。独自レイアウトでカスタマイズをすれば手の込んだサイトを作ることもできますが、そういった専門知識がない人でも簡単にサイトを持てることがJimdoの最大の魅力。

 

高度な技術を使ってサイトを作っても、プロでないと更新できないサイトになってしまいます。この大賞に選ばれたサイトも、ほとんどがJimdoの基本機能。今後だれが担当しても運用していけるように作ったそうです。

・美しさだけでなく、機能的であること

Jimdo Best Pages 2015 Founder Selection

“何よりも一目見た瞬間の美しさにあります。また、ホームページ上に表示されている絵画に、シンプルな構成のレイアウトがよくフィットしていると思います。コンテンツの配置もよく考えられていて、どこにどのコンテンツがあるのか非常に見つけやすいです。

 

Jimdo Best Pages 2015 Founder Selection 受賞 

「瀧川眞人の日本画の世界とこども絵画教室」



Jimdoの創業者が選んだのは、美しさはもちろんのこと、ユーザーにとって使いやすいサイトでした。ここでいう美しさとは、ウェブサイトの内容(このサイトでいう絵画)が一目で伝わるような構成にしてあるということ。

 

見た目の美しさで興味を引き、わかりやすいコンテンツ配置でユーザーが求めている情報に自然にたどりつけるようにしている。ウェブサイトとしてちゃんと機能していることも重要な評価の基準なのかもしれません。

上記で紹介した以外の受賞サイトやノミネートサイトもそれぞれ、見た目が整っていること・情報が整理されていること・Jimdoの良さをうまく引き出していることが主に評価のポイントでした。詳しい昨年の評価についてはこちら。

 

ウェブサイトの目的は「お問い合わせを増やす」「一つでも多く商品を売る」「活動を知ってもらう」など、それぞれです。見た目だけでなく、目的を達成するためのツールであるということを、審査員もじっくり見ているのかもしれません。

 

Jimdo Best Pages は10月31日まで受付中! 一年に一度のこの機会、最も輝くJimdoサイトに選ばれるのはあなたのサイトかもしれません。

皆さまからのご応募、お待ちしております!



Jimdo最大のイベント「PAGES」参加申し込みスタート!

$
0
0
Jimdo Best Pages 2016 10/31まで応募受付中!

Jimdo最大のイベント「PAGES」参加申し込みスタート!


年に一度のJimdo最大のイベント「PAGES」を開催します。実際のJimdoユーザーが登壇したり、一年で最も輝くJimdoサイトを決めるアワードの発表をしたり、見所が満載です。参加したお客さまがその後もっとJimdoを有効活用できるように「ヒント」と「お楽しみ」をたくさんご用意してお待ちしています。

開催概要について


PAGES 2016 の開催について
日時

2016年 11月26日(土)14時〜17時頃

会場 

SMBCホール三井住友銀行東館 ライジング・スクエア内)

東京都千代田区丸の内1-3-2

定員

400名

(先着順。以下の公式サイトよりお申し込みください)

参加費 

無料(限定ノベルティ付き)

スポットライトはユーザーに


実際のJimdoユーザーに、自身の事業やJimdoの活用法をお話していただきます。同じユーザーの話から、踏み出せなかった小さな一歩だったり、つまずいていたことを解決するヒントを得ることができるかもしれません。

 

また、年間のベストサイトを決定するアワード「Jimdo Best Pages」の最終審査と授賞式もPAGESの中で行います。会場のお客さんがその場で審査する特別賞「Audience Select」も新たに追加され、みんなで楽しめること間違いなしです。

 

サプライズとしてドイツよりJimdoの創業者も来日。Jimdoメンバーから新たな発表も行います。今後に役立つトピックを用意して、スタッフ一同お待ちしております。

スピーカー

ウェブデザイナー/Jimdo Expert 山本和泉さん

ウェブデザイナー/Jimdo Expert

山本 和泉さん

徳田畳襖店 四代目/畳屋ラッパー  徳田直弘さん

徳田畳襖店 四代目/畳屋ラッパー

徳田 直弘さん(Mc Tatami)

Lavender sachet* オーナー 井代陽子さん

Lavender sachet* オーナー

井代 陽子さん


Jimdoの創業者

Jimdoの創業者(来日者は調整中)

Christian / Fridtjof / Matthias

JimdoJapan カントリーマネージャー 駒井健生

JimdoJapan カントリーマネージャー

駒井 健生


皆さまとお会いできることを、心から楽しみにしています!




【重要なお知らせ】Jimdoの管理メニューが新しくなります

$
0
0

Jimdoでは常に、どう改善したらもっと快適な環境を提供できるのか、どうしたら今以上に利便性を高められるのか、どうしたら・・?と頭をフル回転しながら開発に取り組んでいます。そして今回、その思いから生まれた新しい管理メニューができました。

2016年11月26日(土)リリース!

新しい管理メニューは、これまで以上の使いやすさ、Jimdoらしさを備えています。関連する項目を集約することで今よりもメインとなるメニューを少なくし、探している項目を見つけやすくしました。また、よく使う項目とそうではない項目をグループ化することで、必要な設定や情報にすぐ辿り着けるようにしています。他にもインフラからプログラムまで最新の技術を採用しているので、読込み速度や動きもスムーズになります。


新しい管理メニューを開発するにあたりもっとも時間を掛けたのは、利用者がどうJimdoを使っているのかという「動線」を知ることでした。ユーザーテストやUX(ユーザー体験)からJimdoは多くのことを学び、今回の開発に活かしています。広域にわたる今の管理メニューをもっと簡素化してまとめるべきだと分かったのも、ユーザーテストとUXがあったからです。

 

ただ、新しい管理メニューがどれだけ使いやすくなったとしても、慣れ親しんだものが変われば戸惑うのも当然です。そこでJimdoJapanではサポートセンターのアップデートだけではなく、新しい管理メニューの虎の巻とも言える「管理メニュー新旧対応表」を作成する予定です。リリース後にまたこちらでお知らせしますのでぜひ参考にしてみてください。

新しい管理メニュー
新しい管理メニューは画面左上に表示されます

次に、今回のプロダクトマネージャーであるKurtに、新しい管理メニューの魅力について聞いてみました。


Kurt Lash

Jimdoのデベロッパー(開発技術者)

今回はプロダクトマネージャーとして、他の開発者たちとともに管理メニューの改修に携わりました。UXを優先したデザインは、利用する人の行動を予期して、欲しいものが適切な場所にある「あたりまえ」を強く意識して設計されています。

新しい管理メニューの魅力とは?

機能美を追及したデザイン

今までバラバラだった項目をグループ化したメニューには、オシャレなアイコンがデザインされています。新たにカラーテーマも設定されたことによって、グループ化も一層分かりやすくなりました。また今の管理メニューは右側からスライド表示される大きな一覧表が、管理画面の半分以上を占めてしまいます。そこでこれを廃止し、控えめだけど必要なものがすぐに見つかるコンパクトな管理メニューにしました。

探しているものが見つからない!なんてことはもうありません

ドライヤーがキッチンにあったらおかしいですよね?それと同じように、管理メニューの各項目も本来あるべきところに配置しました。散らばっていたショップの設定も、これからはあちこち探すことなく「ショップ」内ですべて設定できます。

 

特に毎日使うような項目については「基本設定」へ集約し、簡単にアクセスできるようにしています。逆にクリスマスの飾りのように、必要だけれど年に1度しか使わないような項目については別にまとめました。

時間をムダにせず、効率的よく作業できる

最新の技術を採用しているので、従来に比べて動きもスムーズ。読込み速度も快適で、ストレスなくサクサクと作業ができます。

新管理メニュー(SEO設定)
関連するすべての設定が一か所でできます

新しい管理メニューはすべてのウェブサイト(リリース後に登録されたサイト、および既存のサイト)で、2016年11月26日(土)リリースされます。

一部機能の仕様変更と提供終了について

管理メニューの刷新に伴い、下記の機能について提供の終了を含む一部仕様の変更を行います。重要なお知らせですのでこちらも併せてご確認ください。

アクセス解析

JimdoPro/Businessで提供しているアクセス解析について、管理メニューの刷新後は主要項目に特化した画面に変更されます。これによりモバイルからの訪問者数が新たに加わり、一方で一部機能(キーワード/ ブラウザ/ 印刷 / エクスポート)の提供を終了します。

Google アナリティクス

JimdoFreeで提供しているトラッキングコードの追加機能を、管理メニュー刷新後の新規登録から終了します。(すでに追加済み場合はそのままご利用可能です。)

Twitter

Jimdoの管理画面からTwitterにツイートする機能の提供を終了します。(Twitterコンテンツはなくなりませんので、JimdoとTwitterアカウントを接続してウェブサイト内に表示することはこれまで通り可能です。)

FAQ

Q: 新しい管理メニューへはいつ切り替わりますか?

A: 2016年11月26日(土)リリース予定です。変更は新規登録サイト・既存サイトのすべてのJimdoサイトで適用されます。

Q: 今の管理メニューがいいのですが、このまま使えますか?

A: 申し訳ありません。管理メニューは個別に設定することができないため、すべてのJimdoサイトで適用されます。最初は戸惑うかもしれませんが、利用していくうちにきっと新しい管理メニューも好きになってくれると思います!

Q: ウェブサイトのデザインやコンテンツに影響はありますか?

A: ありません。今回のリリースでウェブサイトの見た目が変わったり、デザインやコンテンツが変わったりすることはありません。Jimdoサイトにログインしたときにだけ、管理メニューの変更が目に見えます。

新しい管理メニューはもうすぐそこです!サイト作成がこれまで以上に効率よく、快適に、楽しくできることを願っています。



Jimdoメールシステムメンテナンス完了のお知らせ

$
0
0

2016年11月11日(金)7時頃から10時頃まで、一部のJimdoメールアカウントで利用しているメールシステムのメンテナンスを実施いたしました。

このメンテナンスの影響により、一部のJimdoメールアカウントにて、最大約3時間、Jimdoメールの利用、Webメールへのログインができない状況でございました。メンテナンス時間中に送信されてきたメールはメンテナンス完了後に受信することができます。

Jimdoのウェブサイトの閲覧、Jimdoへのログインには影響はございませんでした。

 現在は、メンテナンス作業が終了し、Jimdoメールへのログインとメールのご利用が通常どおりご利用いただけます。

お客様には、メンテナンスによりご迷惑をおかけしました事お詫び申し上げます。またご協力いただき誠にありがとうございます。

メンテナンス詳細
開始時刻 2016年11月11日(金) 午前 7時00分頃
終了時刻 2016年11月11日(金) 午前 10時00分頃
メンテナンス内容

メールシステムのメンテナンス作業

対象範囲 JimdoPro、JimdoBusinessでメールサービスをご利用中の一部のJimdoメールアカウント
影響範囲

上記時間帯において、下記のサービスをご利用いただくことができませんでした。

  • Jimdoメールのご利用
  • Jimdoメール(Web)へのログイン

※メンテナンス期間中に送信されたメールは受信されます。

Viewing all 1159 articles
Browse latest View live