お菓子屋さんの『あいうえお』
菓子屋が綴る、小さなお菓子屋さんの作り方。 私の体験をもとに開業・経営に役立つ ノウハウや情報を発信しています。
始め方

①『ジンドゥー』のデザイン設定を解説【管理画面の見方・使い方】

シトロンくん
シトロンくん
ジンドゥーは初心者でも感覚的にホームページが作れるんだよね。
yuuki
yuuki
この記事を読まなくても出来ると思うけど、困ったら参考にしてみてね。

『ジンドゥー』の開設が済んだ方が、次に行うのは管理画面を理解する作業です。

初心者向けに作られている『ジンドゥー』はボタンの数も少なく、感覚的に作成できる仕組みが整えられています。

最初は、「訳が分からない!」と、思うこともあるかもしれませんが、慣れてしまえば何も難しい事はありませんので、焦らず着実に利益の上げられるホームページ作成を行いましょう。

まず、ログインすると、以下のページが表示されます。

ホームページの削除や移動

ジンドゥーを解約する時まで、このページ【削除や移動】は必要ありません。

①赤丸の『 設定 』は、現段階では必要ありません。赤丸の『 設定 』をクリックすると・・・

 

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

 

 

『管理メニュー』を開く

 

①ログインすると表示される画面の『 編集 』をクリック。

 

 

 

③管理メニューをクリックすると、、、。

 

 

③管理メニューが表示され、ここで基本設定を行います。

 

管理メニューから出来る『基本の設定』

ここでは、『基本の設定』を行う事が出来ます。

デザイン
ショップ
ブログ
パフォーマンス
ドメイン・メール
基本設定
サポート
ータル

 

 

 

①デザイン

デザインを開くと『デザインのメニュ』が開きます。

メインメニューは以下の3種

  1. レイアウト
  2. スタイル
  3. 背景

 

 

①-1 レイアウト

ここでは、好きなデザインのホームページを選択してください。

選択したホームページのレイアウトが基本となり、このレイアウトの写真や文字を入れ替えて『お店オリジナル』のホームページを作成していくことになります。

 

 

『プリセット』のクリックでテーマカラーの選択ができます。

プリセットでは同じレイアウトの中でも、背景画像の見せ方・テーマカラー・サイドバーの位置などが少しずつ違う種類の中から好きなデザインを選択してください。

 

スマートフォン・パソコン・タブレット色々な端末で閲覧したときを確認した上でレイアウトを選択します。

 

 

①-2スタイル

ここでは、ホームページ全体のスタイルを設定していきます。ここで、設定できる項目は以下となります。

  1. 文字の配置
  2. フォント
  3. フォントサイズ
  4. フォントカラー(リンクを貼っている時、貼っていない時)
  5. 文字の行間
  6. フォント背景色(リンクを貼っている時、貼っていない時)
  7. 文字設定
  8. 太字
  9. 斜体
  10. 線の太さ
  11. 線のスタイル
  12. 線の色

フォントがや文字サイズが変わるとホームページのイメージが大幅に変わってきます。
『めんどくさいからこれでいいや!』と決めるのではなく、お店のイメージに合わせたフォントやサイズを探しましょう。

 

①-3 背景

ホームページ全体の背景を設定します。
背景はトップページにあたる『お店の顔』となる部分です。
ここでホームページを閉じてしまうか、読み進めるかの分かれ目になり【重要な選】】となります。

1)Jimdo にログイン後、左側のツールバーから「デザイン」を選択後、「背景」を選択します。

2)画面の上部にボタンが表示されますので、「背景」をクリックします。

 

3)「+」記号が表示されているボタンをクリックすると、以下の画面が表示されます。

 

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

 

 

  1. 画像・・・写真の挿入
  2. スライド表示・・・スライド背景の挿入
  3. 動画・・・動画の挿入
  4. カラー・・・背景色

 

第三者が撮影した動画・写真やイラストを利用する際は、著作権を確認し、注意して利用しましょう。

 

 

①画像

①使用したい画像を選択すると、以下の様に表示されます。

②写真の中心に表示される〇の位置が表示したい写真の焦点となります。実際の画面を確認しながら、写真の焦点を決定します。

 

 

②スライド写真

スライド表示では、複数の写真をを順番に表示し、スライドショーの様な背景を設定する事が可能です。スライド写真の設定には、最低2枚以上の画像をアップロードする必要があります。

 

③動画

予め撮影した動画を挿入することで、動く背景の設定が可能です。
動く背景は人の目を惹く効果があります。うまく利用する事で、他社との差別化も可能です。

動画はホームページのサーバー容量も沢山使う事になるため、容量無制限のビジネスプランでの利用をおすすめします。

プランについて詳しく知りたい方は以下の『ジンドゥーのプラン選び』で詳しく解説しています。

【ジンドゥーのプラン選び】お菓子屋さんのオンラインショップとホームページホームページ・オンラインショップを『ジンドゥー』で作ろうと決めたはいいけど、色々なプランがあり、一体どのプランにしたらよいか困惑していま...

 

 

④カラー

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

背景を変えると、ホームページの雰囲気がガラッと変わります。お店のイメージを伝えることができます。

 

②ページの編集

②-1 スタイルの詳細設定

ここまでの過程で、デザインの基本設定が済んでいますので、次は、実際にページの編集を始めます。

 

① スタイル➡詳細設定オンで、詳細設定が可能となります。

 

 

ページを編集していく中で全体のバランスやフォント・文字の大きさに違和感が出てくるようでしたらその都度基本設定を修正しながら構成していきます。

 

 

②ー2 ファーストビューの編集

①ブランド名やキャッチコピー・ロゴは以下に記入。

 

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

 

 

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

 

 

 

 

②ー3 TOPページ本文の編集

本文の編集には2通り存在します。

①既にあるコンテンツを上書きする。
②新しくコンテンツを追加する。

 

 

 

②ー4 既にあるコンテンツを上書きする

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

 

 

 

 

文字の大きさを変える

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

 

 

 

 

②ー5 新しくコンテンツを追加する

基本コンテンツ

  1. 見出し
  2. 文章
  3. 画像
  4. 画像付き文章
  5. フォトギャラリー
  6. 水平線
  7. 余白
  8. カラム
  9. YouTube等
  10. ボタン
  11. 商品
  12. シェアボタン

 

 

 

①コンテンツを追加したい場所にカーソルを合わせ『コンテンツを追加』をクリック

②加えたい基本コンテンツを以下から選択する。(『その他コンテンツ&アドオン』をクリックすると、基本コンテンツ以外の応用コンテンツの追加が可能です)

 

 

その他コンテンツ

  1. Googleマップ
  2. ファイルダウンロード
  3. ゲストブック
  4. 商品カタログ
  5. ウィジェット/HTML
  6. フォーム
  7. FaceBook
  8. Twittre
  9. RSSフィード

 

 

 

アドオン

  1. メルマガ登録フォーム
  2. カスタム検索
  3. Googleカレンダー
  4. Instagramフィード
  5. PDF埋め込み
  6. 予約ボタン
  7. POWr Form
  8. social icon buttons
  9. Countdown Timer
  10. PopupWindow
  11. Comments & Reviews
  12. PowrSlider
  13. Powr-Gailery
  14. Hit counter
  15. FAQ
  16. POWr-Ecommerce
  17. PaymentButton
  18. Multi-Location Map
  19. Live Chat
  20. Tabs
  21. More Plugins

 

 

③リンクを貼る

③ー1 リンクとは?

リンクとは、今現在閲覧しているページから、他のページにアクセスする為のボタンを作成するという事です。

リンクを貼ることで、購入ページへ誘導したり、お問い合わせフォームに誘導したりする事が出来ます。

つまり、お客様が知りたいと思った事を検索せずとも、クリック一つで欲しい情報に、アクセスする事が可能となる、WEB設計となります。

 

 

③ー2 リンクの種類

リンクには3種類の設定があります。

  1. 内部リンク
  2. 外部リンクかメールアドレス
  3. 商品リンク

 

 

 

内部リンクとは

内部リンクとは、自分のホームページ内の別のページへ誘導するためのリンクの事。

 

 

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

外部リンクとは、自分のホームページ以外のWEBへ誘導するリンクの事。もしくは、メールアドレスへのリンク。

 

 

商品リンク

商品リンクとは、商品カートへ紐づけるリンクの事。

 

③ー3 リンクの紐づけができる箇所

  1. テキスト
  2. 画像
  3. ボタン

 

 

③ー4 リンクの貼り方

①リンクを貼りたい箇所【テキスト・画像・ボタン】を指定して、クリック(テキストの場合ドラックで指定)

②リンクマークをクリックして、リンクの種類【テキスト・画像・ボタン】を選択する。

③リンクしたいページの選択を以下の画像で選択する。(内部リンクの場合は選択。外部リンク・メールアドレスの場合は記入する)

 

① 内部リンク

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

 

③商品リンク

 

 

④文字色の設定

④ー1 テキストの文字色設定

テキストの文字色は選択する事が出来ます。

全ての文の文字色を変える事も出来ますし、ドラックで指定した『選択肢した文字のみ』文字色を変える事も可能です。

まず文字色を変えたいテイストを選択し、市松模様のマークをクリックして、好きな色に変換させる。

 

 

④ー2 テーマカラーの設定

ページデザインをする上で、テーマカラーはとても重要になってきます。
色の少ないページはインパクトが少なく、魅力的に映らない場合もありますが、逆に
一つのページに色々な色が入り乱れると、人は感覚的に拒否反応をしめしてしまいます。

テーマカラーを決めたらその色に近い色や相性のいい色の組み合わせを利用して、ページを構成していくと見やすいページ作りになります。
自分の好みの色をテーマカラーとして決めたなら、カラーコードを記憶して、その色を主体としてコーディネートしていきましょう。

 

⑤画像の設定

コンテンツかの画像設定の中から以下の3種を選択します。
画像の設定には以下3種類があります。

  1. 画像の設定
  2. 画像付き文章の設定
  3. フォトギャラリーの設定

① 画像の設定

 

② 画像付き文章の設定

 

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

 

 

⑤-1 画像の入れ替え(上書き)

 

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

 

まとめ

①ホームページを立ち上げたら、管理画面から、ホームページのベースとなる基本的な設定をしましょう。

②デザインを選択しベースとなるレイアウトの設定

③スタイルで選択できるのは以下の12点

  1. 文字の配置
  2. フォント
  3. フォントサイズ
  4. フォントカラー(リンクを貼っている時、貼っていない時)
  5. 文字の行間
  6. フォント背景色(リンクを貼っている時、貼っていない時)
  7. 文字設定
  8. 太字
  9. 斜体
  10. 線の太さ
  11. 線のスタイル
  12. 線の色

④背景を設定して店舗のイメージを決定

シトロンくん
シトロンくん
デザイン変えると急に自分のホームページって感じがしてくるね!!!
yuuki
yuuki
なんかテンション上がるよね。次回はショップの設定をしていこう!

 

ホームページを作るうえで、ホームページの構成要素が重要になります。『ホームページの構成要素』の基本的な考え方は以下で解説しています。

ホームページの基本構成【お菓子屋さんが初めてつくるwebサイト】 お菓子屋さんが自分でホームページを作る…といっても、どのような構成にしていいかわからない…という方も多いのではないでしょ...

 

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

攻略 | 小さなお菓子屋さんのマーケティング戦略【売り方を学ぶ】 小さなお菓子屋さんであっても、闇雲にお菓子を作る訳ではなく、マーケティングが大切です。 しかし…菓子職...
NEW TOPIX
ジンドゥー•ビジネスプランがおすすめ
ビジネスプランのおすすめポイント

私のお店は、実際にジンドゥービジネスプランを利用しています。

◉ホームページもオンラインショップもひとまとめにできる。

◉かっこいいホームページが、簡単にできる。

オンラインショップの販売手数料がかからない。

◉コスパが最高。

◉ブランディングがしやすい。

◉バースデーケーキの予約ページで予約が増えた。

お菓子屋さんの『あいうえお』編集長
yuuki
🍋好きなお菓子*タルトシトロン 🍋現在の仕事*お菓子職人・お菓子屋経営者 🍋職人歴*21年 🍋独立*10年目🍋 0からの立ち上げ経験*3店舗 🍋海外渡航歴*フランス4年間
\ Follow me /
ConoHaWINGでWordPressテーマ【JIN】を利用しています