Jimdoでのホームページ制作のメリット・Tayoriフォーム設置方法

2019/08/22How to

SNSでシェア

Tayori_blog_banner_jimdo

 

目次

企業の顔でもあるホームページ。その有無は顧客からの信頼度にも関わってきますし、デザイナーの方に必要となるポートフォリオにも使用されます。

「ホームページを立ち上げよう!」と思って真っ先に上がるものがCMSプラットフォームのWordPress。しかしWordPressはある程度のプログラミングスキルが必要という点がネックです。残念ながら誰でも簡単にWordPressでホームページが作れるわけではありませんし、ホームページ制作業者に頼むと費用が発生するため、予算がない方にはつらいものがあります。

そこで登場してきたのがホームページ作成サービスです。ホームページ作成サービスは誰でも簡単に短時間でホームページを作成できるというもの。ホームページ作成サービスの登場により、ホームページを立ち上げる難易度は劇的に下がりました。

 

Jimdoとは?

Jimdoは国内シェアNo.1を誇るホームページ作成サービスです。本来、ホームページとはHTMLやCSSといった専門知識が必要になりますが、基本的にそれらを必要としない作りになっており、ホームページ制作画面をクリックしていくだけでテキストや画像などコンテンツを追加していくことが可能。
レスポンシブデザインにも対応しており、パソコンでもスマートフォンやタブレットで閲覧した際に最適なデザインで表示してくれます。

AIを使用していて、サービスから問いかけられる質問に答えていくだけでホームページの大部分が作成できる点もポイント。

プランは無料と有料の2つ用意されており、有料プランを選択することによってSEOやアクセス解析などホームページ運営に必要となる要素や作れるページの数が増えるなど様々な恩恵を受けることができます。

image1

[画像引用:](https://jp.jimdo.com/pricing/)

無料プランでは5ページまでしか作れない、帯域幅が2GBまでしかないなどの制限があるため、まずは無料プランでホームページ作成を経験してみて、Jindoが気に入ったのなら有料プランに移行すると良いでしょう。

 

Jimdoでホームページを作成するメリットは?

Jimdoでホームページを作るメリットは大きく分けて3つ。

  1. 無料で簡単にホームページを作成できる
  2. 専門技術は基本的に必要なし
  3. 更新作業が簡単

無料でサービスを利用でき、Web制作に関する専門知識が基本的に必要ないため、誰でも簡単にホームページを開設することができます。

コンテンツの更新もクリックしてテキストや画像などの要素を入れ込んでいくだけのため、簡単に行えます。パソコン以外にもスマートフォンから更新作業を行えるところもポイントで、「出先で急にコンテンツの更新を行わなければならなくなった!」といった状況にも柔軟に対応できます。

 

Jimdoでホームページを作成する前に知っておくべきこと

Jimdoでホームページを作る際に注意しなければならない点は3点です。

  1. 無料プランでは5ページまでしか作れない、帯域幅が2GBまでしかないなど制限がかかる
  2. 広告が表示される
  3. 初期設定では自動で公開されてしまうため注意が必要

無料プランでは5ページまでしか作ることができず、広告が表示されてしまいます。無料プランはあくまで体験版としての位置付けのため、仕方ないとはいえユーザーからしたら少々残念な面があります。

有料プランにすることによって最大50ページまで作成可能になり、広告も表示されなくなるため「今後もJimdoを使おう!」と気持ちが決まったのであれば有料プランに加入することをお勧めします。

また、ホームページを作成するときに「ジンドゥークリエイター」コースを選んでしまうと初期設定では作成中でも公開されてしまいます。非公開にするには別途操作が必要になるため、注意が必要です。

 

Jimdoの登録方法

 

Jimdoにアクセスして「登録する」ボタンをクリックします。

image11

 

アカウント作成画面が表示されるため、メールアドレスとパスワードを入力し、「ジンドゥーの利用規約に同意します」にチェックを入れて「アカウントを作成」をクリックします。

image49

 

登録したメールアドレスに確認メールが来るため、本文に貼られてあるリンクをクリックします。するとメールアドレス確認画面が表示されるため、「ログイン画面に戻る」をクリックして一度ログイン画面に戻ります。

image10

以上でJimdoの登録作業は完了です。

 

Jimdoでホームページを作成してみよう

Jimdoに無事登録ができたら早速ホームページを作ってみましょう。

ここでは「ホームページの大枠作成」と「ホームページのカスタマイズ」の二つに分けて説明します。

 

ホームページの大枠を作る

Jimdoのトップページから「無料ホームページを作成」ボタンをクリックします。

image45

作成するホームページのジャンルを聞かれるため、以下の3つから任意のものを選びます。

  • ホームページ
  • ネットショップ
  • ブログ

今回はホームページを選んでみましょう。

image15

 

サービスを選択画面が表示されるので画面左の「ジンドゥークリエイター」をクリックします。

image43

 

作成するホームページのジャンルを聞かれるため、任意のものを選びます。今回は「まだ決めてない」にチェックを入れて「次へ」ボタンをクリックします。

image52

 

レイアウト選択画面が表示されるので、任意のものを選択します。今回は一番左上にあるものを選びます。

image3

 

プラン選択画面が表示されるので、有料プランか無料プランを選択します。ここでは「FREE」プランを選択します。

image41

 

ホームページのドメイン設定画面が表示されます。無料ドメインでホームページを運営したい場合は、無料ドメインのテキストボックスに任意のドメイン名を入力して「使用可能か確認する」ボタンをクリック。

入力したドメインが使用可能な場合は「無料ホームページを作る」ボタンが表示されるためクリックします。

image62

 

作成したホームページのトップページが表示されます。ここから詳細にホームページをカスタマイズすることになります。

image63

 

ホームページをカスタマイズする

ホームページの大枠を作ったら、テキストや画像などを入れて自分だけのホームページにカスタマイズしていきましょう。

 

文字を編集する

試しに初期状態で用意されているテキストをクリックしてみましょう。すると、テキストの入力や修正を行うことができます。

image54

 

テキストはサイズ変更はもちろん、太字やイタリック、リスト、色変更などテキスト入力に必要な機能が揃っているため、不自由はしませんし、直感的に操作できるためとても簡単です。

image22

 

 

 コンテンツを設置する

コンテンツを新規で追加する時は、マウスカーソルを画面内で動かすと表示される「コンテンツの追加」をクリックします。

image39

 

すると追加できるコンテンツのメニューが表示されます。追加できるコンテンツは見出しや文章だけではなく、画像やフォトギャラリー、YouTubeなど多岐に渡ります。

image38

 

試しに画像を設置してみましょう。

先のメニューから「画像」をクリックすると画像をドラッグするように指示されるので、パソコンの中に入っている使用したい画像をドラッグしてみましょう。

image35

 

画像をドラッグしてアップロードしてみましたが、とても簡単に画像を入れ込むことが可能です。

画像は左揃えや中央揃えなどの位置変更やキャプション、代替テキストの追加などができるようになっていて、十分な機能が揃えられています。

image37

 

次はYouTubeを埋め込んでみました。

動画のURLを指定するだけなのでとても簡単です。

image42

他にもボタンや表、カラムなどをメニューから選ぶだけで設置することができます。特殊な知識が必要ないため、どなたでも簡単にカスタマイズしていくことが可能です。

 

プレビューを確認

プレビュー機能を使用することでPC、スマートフォンで作成したホームページがどのように見えるのか確認することが可能です。

確認するには画面右上にあるプレビューアイコンをクリックします。

image12

 

プレビュー画面が表示されました。

画面右上に表示されているPC、スマホアイコンをクリックすることでパソコンで見た画面、スマホ(縦向き)で見た画面、スマホ(横向き)で見た画面の3通りのプレビューを切り替えることができます。

image21

 

スマホ(縦向き)、スマホ(横向き)のプレビュー画面は以下のようになります。

image60

image36

ホームページのカスタマイズは以上で完了です。

 

Jimdoにお問い合わせフォームを設置する

ここからはTayoriを使ってJimdoにお問い合わせフォームを設置する方法を説明します。

まずはTayoriにログイン後、左のメニューから「フォーム管理」をクリックします。

image23

 

フォーム管理画面が表示されたら作成したフォーム名の下に記載してあるメニューから「設置」をクリック。するとフォーム設置画面が表示されます。

image24

 

 

 コード埋め込みでの設置

まずコード埋め込みでの設置方法をご紹介します。コード埋め込みで設置をするとホームページ上にお問い合わせ用のボタンを表示することができます。

まず4種類の設置方法の中からコード埋め込みを選びます。

スクリーンショット 2019-08-22 16.22.34

 

管理画面の案内に従ってボタンのデザインや色、表示位置を選択します

Tayori_コード_設定1

 

設置するサイトのドメインを選び、表示されるコードの右上の「コピー」ボタンをクリックして表示されているコードをコピーします。

image44

次にコピーしたコードをJimdoに埋め込んでフォームを表示させましょう。

フォームを表示させたいと考えているJimdoで作成したホームページの左上にある「管理メニュー」をクリックして表示されるメニューから「基本設定」→「ヘッダー編集」の順番でクリックします。

image5

 

ヘッダー編集画面が開くので、タブが「ホームページ全体」になっているのを確認したらコピーしたコードをペーストとします。最後に保存ボタンをクリックして保存します。

image56

 

動作確認のため、ダッシュボードリンクをクリックしてダッシュボード画面に戻ります。

image17

 

コードを貼り付けたホームページの「閲覧」リンクをクリックします。

image6

 

トップページをはじめ、他のページにもTayoriで指定した表示位置に埋め込んだフォームのボタンが表示されます。

image53

 

表示されているフォームボタンをクリックすることでフォームの画面を開くことができます。

image50

以上でコード埋め込みによるフォーム作成は完了です。

 

iframeでフォームを設置する

Tayoriでは「コード埋め込み」だけではなく、iframeでフォームを作成することができます。まずはTayoriのフォーム管理画面を表示して、コード埋め込みの時と同じように「設置」リンクをクリック。

次にフォームのタイプの中から「iframe」をクリックします。

image47

 

下にスクロールしていき、必要ならばiframeの高さを設定します。何も入力しないと高さは初期値の600pxに設定されます。最後にコピーボタンをクリックしてコードをコピーしましょう。

image55

 

Jimdoでframeのフォームを埋め込みたいホームページの「編集」をクリックします。

image28

 

フォームを設置したいページへ遷移するリンクをクリックします。今回は初期設定で自動的に作られたお問い合わせページに設置します。
image222

 

フォームを設置したい場所にマウスカーソルを移動させると「コンテンツを追加」が表示されるのでクリックします。

image19

 

メニューが表示されるので、「ウィジェット/HTML」をクリックします。

image20

 

テキストボックスが表示されるので、コピーしておいたiframeのコードをペーストして「保存」をクリックします。

image34

 

するとiframeのフォームが表示されます。

image57

これでiframeでのフォーム作成は完了です。次は動作を確認してみましょう。

 

「管理メニュー」をクリックしてメニューを開き、「ダッシュボード」をクリックしてダッシュボード画面に遷移します。

image33

 

先ほどフォームを設置したホームページの「閲覧」をクリックします。

image29

 

フォームを設置したページを開きます。今回はお問い合わせページにフォームを設置しましたから、お問い合わせページを開きましょう。するとiframeでフォームが表示されます。

image32

iframeを使用したフォームの作成は以上で完了です。

 

 

まとめ

今回は無料でホームページを作成できるJimdoを使ったWebサイトの制作方法とお問い合わせフォームの設置方法を説明しました。Jimdoは項目をクリックしていくだけで簡単にホームページを作成できるため、誰でも簡単に使いこなせます。

Tayoriはシンプルな操作でお問い合わせフォームを作成できて、お問い合わせ先を一元管理できます。フォームの作り方は一度触れば覚えられるほど簡単なのでぜひ一度試してみてください。

SNSでシェア

Tayoriを無料で使ってみる

無料でお問い合わせフォームやFAQをあなたのウェブサイトに簡単に設置

今すぐ始める

関連記事

Tayoriのおたよりを購読する

Twitterでフォロー

facebookでいいね!

RSSで購読