ジンドゥー(jimdo)クリエイターでのホームページ作成方法【STORES・BASEとの連携まで】

2020/07/24

ジンドゥー ホームページ作成

t f B! P L

ジンドゥーの特徴

ジンドゥー(jimdo)は無料のプランで必要十分すぎることが可能なホームページ作成サービスです。広告の入り方も親切で、フッター(各画面の一番下)部分に少し入る程度で好感を持てます。

ジンドゥーには2種類のホームページ作成方法があり、自動生成機能をもつジンドゥーAIビルダーのホームページ作成手順は次の記事で説明しています。

今回はジンドゥークリエイターという、中級者以上向けのホームページ作成方法について詳しく取り上げてゆきます。

ジンドゥークリエイターでのホームページ開設

ジンドゥークリエイターもジンドゥーAIビルダーと同じく、GoogleかFacebookのアカウント、もしくはメールアドレスとパスワードの入力ですぐに開設できます。

最初の「どんなホームページを作成しますか?」の画面で「ネットショップ」「ブログ」を選ぶとジンドゥークリエイターでの作成となります。

ジンドゥーAIビルダーとの違い

ジンドゥーではAIビルダ―という自動作成機能を使ってホームページを作成することもできます。ジンドゥーAIビルダーではシンプルにホームページ作成を行うことができ、ジンドゥークリエイターではさらに詳細な設定ができます。クリエイターの方ではブログやショップの追加も可能です。

プラン変更について

途中で「AIビルダ―」から「クリエイター」へと変更することができないため、最初からどちらを選択するか選んでおく必要があります。初めてのホームページ作成なら「AIビルダー」で試してみて、2回目以降は「クリエイター」で作っていくことをおすすめします。

最初から本格的にカスタマイズをしてみたい場合はジンドゥー「クリエイター」を選択しましょう。

スマホでの操作について

また、ジンドゥークリエイター専用のスマホアプリがあります。ちなみにジンドゥーAIビルダーはスマホでもブラウザ上で操作できます。ただ現状ではどちらもスマホでの操作には限界があり、PCで完成させてスマホやタブレットでチェックするという方が良いです。

ジンドゥークリエイター専用のスマホアプリを用いるなら、ブログ記事の概要を作成するというようなライトな使い方が良いですね。

しっかりとした構成を行うのはちょっと苦手ですので、PCを使って完成させたほうがストレスが溜まりません。

ジンドゥークリエイターでのホームページ作成方法

全体のデザインを決める

「管理メニュー」の「デザイン」⇒「レイアウト」を選ぶとの選択を行うと大まかなデザインが決まります。

このとき、タイトル部分のやロゴの位置、メニューの配置などがだいたい決まり、テンプレートごとに細かな変更が可能な部分が異なります。一度テンプレートを決定した後でもさらに変更することも可能です。いくつかのパターンで試してみて好みのものを選ぶと良いです。

デザインの詳細を変更する

「レイアウト」から気に入ったデザインのテンプレートを選んだら、詳細の設定をいじりましょう。「レイアウト」の隣の「スタイル」を選択し、各項目の微調整ができます。

文字の部分を選ぶと、フォントやサイズ、カラー、配置などを調整できます。文字部分を調整すると、例えば「見出し 大」のフォントサイズを変更すると他のすべてのページの「見出し 大」が変更されます。

操作していて気付くことですが、選択している「レイアウト」を大幅に作り直すということはできません。もともとサイドバーがあるものはありますし、無いものはないです。HTML編集による「独自レイアウト」を行えば可能ではありますが、難易度は高いです。

ホームページ製作時の基本的な操作

コンテンツを追加を選択

ページの編集を行うのは「コンテンツの追加」で新しく見出しや本文、画像を挿入できます。コンテンツを削除したい場合は「ゴミ箱」マークで消すことができます。

コンテンツを追加したら、右下に出てくる保存マークを押さないとしっかり保存してくれませんので注意してください。

さらに重要な注意点は間違えてコンテンツを削除してしまった時です。その場合「戻る」ボタンが存在していないので、長文を書いて誤って削除すると悲しい想いをすることになります削除する前にしっかり警告してくれるのでそこまで間違えて消すことはないと思いますが、注意しましょう。

いくつかの機能の説明

マップの挿入


Googleマップを選択する

マップを埋め込むことも非常に簡単です。コンテンツの追加から、「Googleマップ」を選ぶだけで挿入されます。これで自分のGoogleマップを挿入することができます。

このGoogleマップは自分のGoogleアカウントに紐ついているため、保存しているお気に入りなどが入っているのでこの点は注意が必要になるかもしれません。

これを回避するためには、「Googleマイマップ」を作成して貼り付けるというのが良いでしょう。この場合はHTMLコードを作成して「ウィジェット/HTML」から貼り付けることになります。

カレンダーの挿入

Googleカレンダーを選択

Googleカレンダーの挿入も可能です。コンテンツの追加から「Googleカレンダー」を選びます。そうするとGoogleカレンダー追加の手順が出てきますのでその通りに行うことで追加可能です。

この際、HTMLコードをコピー&ペーストすることになるのでその部分が少々難しさを感じるかもしれません。(HTMLの編集で「width="100%"」として横幅をいっぱいに調整するとだいたいいい具合に表示されます)

さらにGoogle以外のカレンダーを設置することもできます。

このようなツールを使わせていただき「ウィジェット/HTML」で貼り付けることによって別のカレンダーも作成可能です。このカレンダーはシンプルなタイプで見やすいです。

応用編

ここから別のサービスを併用するなどして、ジンドゥーにさらに機能を追加していく例をいくつか取り上げていきたいと思います。

予約フォームを作る

無料もしくは有料の予約フォームサービスをジンドゥーに追加します。機能追加のためにはHTMLコードを挿入する方法があります。予約フォームとしては「Airリザーブ」が無料で比較的使いやすいです。

無料でアカウントを作成し、予約のフォームを作りページに挿入できます。詳細はAirリザーブのホームページから見ることができますので、確認しつつ作成しましょう。作ってみるとこうなります。正直デザインはダサいですが、無料でしっかり機能してくれるサービスです。

エアーリザーブをジンドゥーに埋め込んだ様子

エアーリザーブ以外にも、筆者自身がいくつか無料の予約フォームを探して使ってみました。有料プランに申し込むとデザインが良いのは多いですね。

ブログ記事を他のページに埋め込む

だいぶややこしい方法ですがブログページを作ったものを他のページにも表示させたい場合の方法です。

「新しいコンテンツを追加」で「RSSフィード」を選択します。ここに

https://ホームページのURL.jimdofree.com/rss/blog/

と埋め込むと記事一覧を表示させることができます。カテゴリ別にしたい場合

https://ホームページのURL.jimdofree.com/rss/blog/(カテゴリ名)

というように記載します。そして表示させたい記事数や範囲を選択します。

ナビゲーション(メニュー)を外部リンクにする

ナビゲーションメニューを直接外部リンクに飛ばしたい場合の方法です。非常に簡単で、ナビゲーションメニューに新しくタイトル作るかもしくは現在のメニューのあとに次のように記載するだけです。

「メニュータイトル::_::リンク先URL

このように表記するだけでOKです。

ナビゲーションメニューにリンクURLを記載する

画像ではブログを外部のブログサービスに飛ばすための設定を行いました。他にも様々な使い方があると思います。

CSS編集を行う

ジンドゥーの凄いところはHTMLやCSSを書き換え、追加できて自由に編集できることです。

CSSの追加を行う方法は「管理メニュー」の「基本設定」⇒「ヘッダー編集」にコードを書き込むことでホームページ全体に影響するCSSの追加が可能です。(各ページごとに編集するにはアップグレードが必要)

ヘッダー編集画面でHTMLコードを入力する

ちなみに画像ではh2見出しを帯状に変えるコードを挿入しています。このあたりの編集内容についてはちょっとだけCSSについての勉強が必要となります。

STORESとの連携

これはかなり上級業というか、結構ややこしい作業となります。無料ではジンドゥーは商品を5つまでしか掲載できず、決済方法もPayPalのみとなります。

しかし、STORESでショップを開設して商品の「購入」ボタンを生成し、ジンドゥーに貼り付けることにより、無料にて基本的に無制限に商品を販売することが可能です。

しかもSTORESなら決済方法もクレジットカードやコンビニ決済などにも対応しているので素晴らしく使いやすい仕様となります。

STORESとの連携方法

まずSTORESでショップを開設する必要があります。STORES(ストアーズ)でのショップ開設については次の記事を参照されてください。

ストア開設後「ストア設定」から「ボタンを設置」を選択します。

ストア設定とボタン設置

そしてボタンのデザインを選択し、販売アイテムの登録を行います。「貼り付けコードを生成する」でHTMLコードをコピーします。

ボタンの種類を選択し、コードを作成する

ジンドゥーへ戻ります。「コンテンツを追加」から「ウィジェット/HTML」を選択します。

メニューからウィジェット、HTMLを選択する

そこにSTORESでコピーしたコードを貼り付けると「今すぐ購入する」のボタンが設置できます。

HTMLコードを貼り付ける

貼り付けるとこういう具合に表示されます。わたしのサイトであまりでデザインは参考にならないと思いますが、商品の解説などと共に張り付けてあるととても馴染みます。

クリックするとこうなります。かなり自然に連携出来ていますよね。

注意点なのですが、編集画面に「購入する」の表示がされなくても実際のページではしっかり表示されている場合がほとんどです。(ちょっとしたバグです)それで、公開しているホームページから直接確認して、クリックするとしっかりSTORESに繋がるかもチェックしましょう。

BASEとの連携

STORESと同じく人気のネットショップである「BASE」もジンドゥーと連携させてみましょう。BASEでのネットショップの作成は次の記事を参考にされてください。

これまで「BASE」でもSTORESと似たような操作は可能だったようですが、2020/01/14に商品のリンクタグ作成サービスが終了となってしました。

その代わりにiframeでのタグを作成できます。BASEの公式で解説されていますね。

「外部リンクに貼る」のタグを作成・利用することはできますか?

実際にやってみますと…。

BASEの商品を2つ並べて掲載

こんな具合になります。

これは一番大きいサイズの320×480pxのものを、カラムを2つにして並べて掲載しています。使用したのは下記のコードです。

<iframe frameborder="0" height="480" width="320" src="【商品詳細ページURL】/widget/large" ></iframe>

【商品詳細ページURL】というところをすべて書き換えて、STORESの時と同じように「ウィジェット/HTML」に張り付けることでBASEと連携できました。

商品をクリックするとBASEのサイトに飛びます。このあたりはボタンを作成できるSTORESとの連携のほうが違和感が少ないですね。

独自レイアウトを使ってみる(上級者向け)

ここまでジンドゥーのテンプレートを用いて様々なカスタマイズの方法をお伝えしてきました。

さらにジンドゥーには用意されているテンプレートでは微妙なコンテンツの高さや幅の調整「ここにボタンを設置させたい!」などという要望に応えてくれない部分があります。

それを完全に(全くオリジナルとまではなかなかいきませんが)打ち砕いてくれるのが「独自レイアウト」です。

ヘッダー部分を自由にカスタマイズして電話番号やいくつかのリンクを置いたり、ナビゲーションメニューをさらに自由に変更したり、スマホ等へ対応させたレスポンシブデザインも実現可能です。

かなりの知識が必要…

こんな具合にメリットをたくさん感じる独自レイアウトなのですが、正直相当勉強が必要となってきます。HTML、CSSにはじまり、jQueryなどの知識もないと思った通りにできないことが多発してしまいます(しています)

それでもコーディングの勉強にもなりますし、自分の完全オリジナルデザインのジンドゥーサイトが完成するということを考えると損はないです。ということで次の記事で独自レイアウトの詳細を解説しております。ご興味がわきましたらご覧ください。

QooQ