『ジンドゥー』の開設が済んだ方が、次に行うのは管理画面を理解する作業です。
初心者向けに作られている『ジンドゥー』はボタンの数も少なく、感覚的に作成できる仕組みが整えられています。
最初は、「訳が分からない!」と、思うこともあるかもしれませんが、慣れてしまえば何も難しい事はありませんので、焦らず着実に利益の上げられるホームページ作成を行いましょう。
まず、ログインすると、以下のページが表示されます。
ホームページの削除や移動
ジンドゥーを解約する時まで、このページ【削除や移動】は必要ありません。
①赤丸の『 設定 』は、現段階では必要ありません。赤丸の『 設定 』をクリックすると・・・

②ホームページの移動や削除について書かれています。

『管理メニュー』を開く
①ログインすると表示される画面の『 編集 』をクリック。
③管理メニューをクリックすると、、、。
③管理メニューが表示され、ここで基本設定を行います。

管理メニューから出来る『基本の設定』
ここでは、『基本の設定』を行う事が出来ます。
①デザイン
②ショップ
③ブログ
④パフォーマンス
⑤ドメイン・メール
⑤基本設定
⑥サポート
⑦ポータル
①デザイン
デザインを開くと『デザインのメニュ』が開きます。
メインメニューは以下の3種
- レイアウト
- スタイル
- 背景
①-1 レイアウト
ここでは、好きなデザインのホームページを選択してください。
選択したホームページのレイアウトが基本となり、このレイアウトの写真や文字を入れ替えて『お店オリジナル』のホームページを作成していくことになります。

『プリセット』のクリックでテーマカラーの選択ができます。
プリセットでは同じレイアウトの中でも、背景画像の見せ方・テーマカラー・サイドバーの位置などが少しずつ違う種類の中から好きなデザインを選択してください。
スマートフォン・パソコン・タブレット色々な端末で閲覧したときを確認した上でレイアウトを選択します。
①-2スタイル
ここでは、ホームページ全体のスタイルを設定していきます。ここで、設定できる項目は以下となります。
- 文字の配置
- フォント
- フォントサイズ
- フォントカラー(リンクを貼っている時、貼っていない時)
- 文字の行間
- フォント背景色(リンクを貼っている時、貼っていない時)
- 文字設定
- 太字
- 斜体
- 線の太さ
- 線のスタイル
- 線の色
フォントがや文字サイズが変わるとホームページのイメージが大幅に変わってきます。
『めんどくさいからこれでいいや!』と決めるのではなく、お店のイメージに合わせたフォントやサイズを探しましょう。
①-3 背景
ホームページ全体の背景を設定します。
背景はトップページにあたる『お店の顔』となる部分です。
ここでホームページを閉じてしまうか、読み進めるかの分かれ目になり【重要な選】】となります。
1)Jimdo にログイン後、左側のツールバーから「デザイン」を選択後、「背景」を選択します。
2)画面の上部にボタンが表示されますので、「背景」をクリックします。
3)「+」記号が表示されているボタンをクリックすると、以下の画面が表示されます。

「背景」機能には、4 種類の機能があります。

- 画像・・・写真の挿入
- スライド表示・・・スライド背景の挿入
- 動画・・・動画の挿入
- カラー・・・背景色
第三者が撮影した動画・写真やイラストを利用する際は、著作権を確認し、注意して利用しましょう。
①画像
①使用したい画像を選択すると、以下の様に表示されます。
②写真の中心に表示される〇の位置が表示したい写真の焦点となります。実際の画面を確認しながら、写真の焦点を決定します。

②スライド写真
スライド表示では、複数の写真をを順番に表示し、スライドショーの様な背景を設定する事が可能です。スライド写真の設定には、最低2枚以上の画像をアップロードする必要があります。
③動画
予め撮影した動画を挿入することで、動く背景の設定が可能です。
動く背景は人の目を惹く効果があります。うまく利用する事で、他社との差別化も可能です。
動画はホームページのサーバー容量も沢山使う事になるため、容量無制限のビジネスプランでの利用をおすすめします。
プランについて詳しく知りたい方は以下の『ジンドゥーのプラン選び』で詳しく解説しています。

④カラー
背景を写真ではないシンプルなものに設定する事も可能です。

背景を変えると、ホームページの雰囲気がガラッと変わります。お店のイメージを伝えることができます。
②ページの編集
②-1 スタイルの詳細設定
ここまでの過程で、デザインの基本設定が済んでいますので、次は、実際にページの編集を始めます。
① スタイル➡詳細設定オンで、詳細設定が可能となります。

ページを編集していく中で全体のバランスやフォント・文字の大きさに違和感が出てくるようでしたらその都度基本設定を修正しながら構成していきます。
②ー2 ファーストビューの編集
①ブランド名やキャッチコピー・ロゴは以下に記入。

②ロゴマークをクリックし、画像のアップロードを行う。

④画像の位置やサイズを調節する。

②ー3 TOPページ本文の編集
本文の編集には2通り存在します。
①既にあるコンテンツを上書きする。
②新しくコンテンツを追加する。

②ー4 既にあるコンテンツを上書きする
既にあるコンテンツを上書きする場合は、
記入したい文章をクリックすると編集画面に移行します。

文字の大きさを変える
文字の大きさを調節するには、テキストをドラックで指定して文字の大きさを好みの大きさに変換する。


②ー5 新しくコンテンツを追加する
基本コンテンツ
- 見出し
- 文章
- 画像
- 画像付き文章
- フォトギャラリー
- 水平線
- 余白
- カラム
- YouTube等
- ボタン
- 商品
- シェアボタン
①コンテンツを追加したい場所にカーソルを合わせ『コンテンツを追加』をクリック
②加えたい基本コンテンツを以下から選択する。(『その他コンテンツ&アドオン』をクリックすると、基本コンテンツ以外の応用コンテンツの追加が可能です)

その他コンテンツ
- Googleマップ
- ファイルダウンロード
- ゲストブック
- 商品カタログ
- ウィジェット/HTML
- フォーム
- 表
- Twittre
- RSSフィード
アドオン
- メルマガ登録フォーム
- カスタム検索
- Googleカレンダー
- Instagramフィード
- PDF埋め込み
- 予約ボタン
- POWr Form
- social icon buttons
- Countdown Timer
- PopupWindow
- Comments & Reviews
- PowrSlider
- Powr-Gailery
- Hit counter
- FAQ
- POWr-Ecommerce
- PaymentButton
- Multi-Location Map
- Live Chat
- Tabs
- More Plugins

③リンクを貼る
③ー1 リンクとは?
リンクとは、今現在閲覧しているページから、他のページにアクセスする為のボタンを作成するという事です。
リンクを貼ることで、購入ページへ誘導したり、お問い合わせフォームに誘導したりする事が出来ます。
つまり、お客様が知りたいと思った事を検索せずとも、クリック一つで欲しい情報に、アクセスする事が可能となる、WEB設計となります。
③ー2 リンクの種類
リンクには3種類の設定があります。
- 内部リンク
- 外部リンクかメールアドレス
- 商品リンク
内部リンクとは
内部リンクとは、自分のホームページ内の別のページへ誘導するためのリンクの事。
外部リンクかメールアドレス
外部リンクとは、自分のホームページ以外のWEBへ誘導するリンクの事。もしくは、メールアドレスへのリンク。
商品リンク
商品リンクとは、商品カートへ紐づけるリンクの事。
③ー3 リンクの紐づけができる箇所
- テキスト
- 画像
- ボタン
③ー4 リンクの貼り方
①リンクを貼りたい箇所【テキスト・画像・ボタン】を指定して、クリック(テキストの場合ドラックで指定)
②リンクマークをクリックして、リンクの種類【テキスト・画像・ボタン】を選択する。
③リンクしたいページの選択を以下の画像で選択する。(内部リンクの場合は選択。外部リンク・メールアドレスの場合は記入する)
① 内部リンク

②外部リンクかメールアドレス

③商品リンク

④文字色の設定
④ー1 テキストの文字色設定
テキストの文字色は選択する事が出来ます。
全ての文の文字色を変える事も出来ますし、ドラックで指定した『選択肢した文字のみ』文字色を変える事も可能です。
まず文字色を変えたいテイストを選択し、市松模様のマークをクリックして、好きな色に変換させる。

④ー2 テーマカラーの設定
ページデザインをする上で、テーマカラーはとても重要になってきます。
色の少ないページはインパクトが少なく、魅力的に映らない場合もありますが、逆に
一つのページに色々な色が入り乱れると、人は感覚的に拒否反応をしめしてしまいます。
テーマカラーを決めたらその色に近い色や相性のいい色の組み合わせを利用して、ページを構成していくと見やすいページ作りになります。
自分の好みの色をテーマカラーとして決めたなら、カラーコードを記憶して、その色を主体としてコーディネートしていきましょう。

⑤画像の設定
コンテンツかの画像設定の中から以下の3種を選択します。
画像の設定には以下3種類があります。
- 画像の設定
- 画像付き文章の設定
- フォトギャラリーの設定

① 画像の設定

② 画像付き文章の設定

③ フォトギャラリーの設定

⑤-1 画像の入れ替え(上書き)
画像を上書きする場合は以下の様に画像をクリックして写真を入れ替える

まとめ
①ホームページを立ち上げたら、管理画面から、ホームページのベースとなる基本的な設定をしましょう。
②デザインを選択しベースとなるレイアウトの設定
③スタイルで選択できるのは以下の12点
- 文字の配置
- フォント
- フォントサイズ
- フォントカラー(リンクを貼っている時、貼っていない時)
- 文字の行間
- フォント背景色(リンクを貼っている時、貼っていない時)
- 文字設定
- 太字
- 斜体
- 線の太さ
- 線のスタイル
- 線の色
④背景を設定して店舗のイメージを決定
ホームページを作るうえで、ホームページの構成要素が重要になります。『ホームページの構成要素』の基本的な考え方は以下で解説しています。

また、『お菓子屋さんのマーケテイング戦略』も頭に入れておく必要がありますので、以下も併せてご参照ください。
