Jimdoでのホームページ制作のメリット・Tayoriフォーム設置方法
目次
企業の顔でもあるホームページ。その有無は顧客からの信頼度にも関わってきますし、デザイナーの方に必要となるポートフォリオにも使用されます。
「ホームページを立ち上げよう！」と思って真っ先に上がるものがCMSプラットフォームのWordPress。しかしWordPressはある程度のプログラミングスキルが必要という点がネックです。残念ながら誰でも簡単にWordPressでホームページが作れるわけではありませんし、ホームページ制作業者に頼むと費用が発生するため、予算がない方にはつらいものがあります。
そこで登場してきたのがホームページ作成サービスです。ホームページ作成サービスは誰でも簡単に短時間でホームページを作成できるというもの。ホームページ作成サービスの登場により、ホームページを立ち上げる難易度は劇的に下がりました。
Jimdoとは？
Jimdoは国内シェアNo.1を誇るホームページ作成サービスです。本来、ホームページとはHTMLやCSSといった専門知識が必要になりますが、基本的にそれらを必要としない作りになっており、ホームページ制作画面をクリックしていくだけでテキストや画像などコンテンツを追加していくことが可能。
レスポンシブデザインにも対応しており、パソコンでもスマートフォンやタブレットで閲覧した際に最適なデザインで表示してくれます。
AIを使用していて、サービスから問いかけられる質問に答えていくだけでホームページの大部分が作成できる点もポイント。
プランは無料と有料の2つ用意されており、有料プランを選択することによってSEOやアクセス解析などホームページ運営に必要となる要素や作れるページの数が増えるなど様々な恩恵を受けることができます。
[画像引用：](https://jp.jimdo.com/pricing/)
無料プランでは5ページまでしか作れない、帯域幅が2GBまでしかないなどの制限があるため、まずは無料プランでホームページ作成を経験してみて、Jindoが気に入ったのなら有料プランに移行すると良いでしょう。
Jimdoでホームページを作成するメリットは？
Jimdoでホームページを作るメリットは大きく分けて3つ。
- 無料で簡単にホームページを作成できる
- 専門技術は基本的に必要なし
- 更新作業が簡単
無料でサービスを利用でき、Web制作に関する専門知識が基本的に必要ないため、誰でも簡単にホームページを開設することができます。
コンテンツの更新もクリックしてテキストや画像などの要素を入れ込んでいくだけのため、簡単に行えます。パソコン以外にもスマートフォンから更新作業を行えるところもポイントで、「出先で急にコンテンツの更新を行わなければならなくなった！」といった状況にも柔軟に対応できます。
Jimdoでホームページを作成する前に知っておくべきこと
Jimdoでホームページを作る際に注意しなければならない点は3点です。
- 無料プランでは5ページまでしか作れない、帯域幅が2GBまでしかないなど制限がかかる
- 広告が表示される
- 初期設定では自動で公開されてしまうため注意が必要
無料プランでは5ページまでしか作ることができず、広告が表示されてしまいます。無料プランはあくまで体験版としての位置付けのため、仕方ないとはいえユーザーからしたら少々残念な面があります。
有料プランにすることによって最大50ページまで作成可能になり、広告も表示されなくなるため「今後もJimdoを使おう！」と気持ちが決まったのであれば有料プランに加入することをお勧めします。
また、ホームページを作成するときに「ジンドゥークリエイター」コースを選んでしまうと初期設定では作成中でも公開されてしまいます。非公開にするには別途操作が必要になるため、注意が必要です。
Jimdoの登録方法
Jimdoにアクセスして「登録する」ボタンをクリックします。
アカウント作成画面が表示されるため、メールアドレスとパスワードを入力し、「ジンドゥーの利用規約に同意します」にチェックを入れて「アカウントを作成」をクリックします。
登録したメールアドレスに確認メールが来るため、本文に貼られてあるリンクをクリックします。するとメールアドレス確認画面が表示されるため、「ログイン画面に戻る」をクリックして一度ログイン画面に戻ります。
以上でJimdoの登録作業は完了です。
Jimdoでホームページを作成してみよう
Jimdoに無事登録ができたら早速ホームページを作ってみましょう。
ここでは「ホームページの大枠作成」と「ホームページのカスタマイズ」の二つに分けて説明します。
ホームページの大枠を作る
Jimdoのトップページから「無料ホームページを作成」ボタンをクリックします。
作成するホームページのジャンルを聞かれるため、以下の3つから任意のものを選びます。
- ホームページ
- ネットショップ
- ブログ
今回はホームページを選んでみましょう。
サービスを選択画面が表示されるので画面左の「ジンドゥークリエイター」をクリックします。
作成するホームページのジャンルを聞かれるため、任意のものを選びます。今回は「まだ決めてない」にチェックを入れて「次へ」ボタンをクリックします。
レイアウト選択画面が表示されるので、任意のものを選択します。今回は一番左上にあるものを選びます。
プラン選択画面が表示されるので、有料プランか無料プランを選択します。ここでは「FREE」プランを選択します。
ホームページのドメイン設定画面が表示されます。無料ドメインでホームページを運営したい場合は、無料ドメインのテキストボックスに任意のドメイン名を入力して「使用可能か確認する」ボタンをクリック。
入力したドメインが使用可能な場合は「無料ホームページを作る」ボタンが表示されるためクリックします。
作成したホームページのトップページが表示されます。ここから詳細にホームページをカスタマイズすることになります。
ホームページをカスタマイズする
ホームページの大枠を作ったら、テキストや画像などを入れて自分だけのホームページにカスタマイズしていきましょう。
文字を編集する
試しに初期状態で用意されているテキストをクリックしてみましょう。すると、テキストの入力や修正を行うことができます。
テキストはサイズ変更はもちろん、太字やイタリック、リスト、色変更などテキスト入力に必要な機能が揃っているため、不自由はしませんし、直感的に操作できるためとても簡単です。
コンテンツを設置する
コンテンツを新規で追加する時は、マウスカーソルを画面内で動かすと表示される「コンテンツの追加」をクリックします。
すると追加できるコンテンツのメニューが表示されます。追加できるコンテンツは見出しや文章だけではなく、画像やフォトギャラリー、YouTubeなど多岐に渡ります。
試しに画像を設置してみましょう。
先のメニューから「画像」をクリックすると画像をドラッグするように指示されるので、パソコンの中に入っている使用したい画像をドラッグしてみましょう。
画像をドラッグしてアップロードしてみましたが、とても簡単に画像を入れ込むことが可能です。
画像は左揃えや中央揃えなどの位置変更やキャプション、代替テキストの追加などができるようになっていて、十分な機能が揃えられています。
次はYouTubeを埋め込んでみました。
動画のURLを指定するだけなのでとても簡単です。
他にもボタンや表、カラムなどをメニューから選ぶだけで設置することができます。特殊な知識が必要ないため、どなたでも簡単にカスタマイズしていくことが可能です。
プレビューを確認
プレビュー機能を使用することでPC、スマートフォンで作成したホームページがどのように見えるのか確認することが可能です。
確認するには画面右上にあるプレビューアイコンをクリックします。
プレビュー画面が表示されました。
画面右上に表示されているPC、スマホアイコンをクリックすることでパソコンで見た画面、スマホ（縦向き）で見た画面、スマホ（横向き）で見た画面の3通りのプレビューを切り替えることができます。
スマホ（縦向き）、スマホ（横向き）のプレビュー画面は以下のようになります。
ホームページのカスタマイズは以上で完了です。
Jimdoにお問い合わせフォームを設置する
ここからはTayoriを使ってJimdoにお問い合わせフォームを設置する方法を説明します。
まずはTayoriにログイン後、左のメニューから「フォーム管理」をクリックします。
フォーム管理画面が表示されたら作成したフォーム名の下に記載してあるメニューから「設置」をクリック。するとフォーム設置画面が表示されます。
コード埋め込みでの設置
まずコード埋め込みでの設置方法をご紹介します。コード埋め込みで設置をするとホームページ上にお問い合わせ用のボタンを表示することができます。
まず4種類の設置方法の中からコード埋め込みを選びます。
管理画面の案内に従ってボタンのデザインや色、表示位置を選択します
設置するサイトのドメインを選び、表示されるコードの右上の「コピー」ボタンをクリックして表示されているコードをコピーします。
次にコピーしたコードをJimdoに埋め込んでフォームを表示させましょう。
フォームを表示させたいと考えているJimdoで作成したホームページの左上にある「管理メニュー」をクリックして表示されるメニューから「基本設定」→「ヘッダー編集」の順番でクリックします。
ヘッダー編集画面が開くので、タブが「ホームページ全体」になっているのを確認したらコピーしたコードをペーストとします。最後に保存ボタンをクリックして保存します。
動作確認のため、ダッシュボードリンクをクリックしてダッシュボード画面に戻ります。
コードを貼り付けたホームページの「閲覧」リンクをクリックします。
トップページをはじめ、他のページにもTayoriで指定した表示位置に埋め込んだフォームのボタンが表示されます。
表示されているフォームボタンをクリックすることでフォームの画面を開くことができます。
以上でコード埋め込みによるフォーム作成は完了です。
iframeでフォームを設置する
Tayoriでは「コード埋め込み」だけではなく、iframeでフォームを作成することができます。まずはTayoriのフォーム管理画面を表示して、コード埋め込みの時と同じように「設置」リンクをクリック。
次にフォームのタイプの中から「iframe」をクリックします。
下にスクロールしていき、必要ならばiframeの高さを設定します。何も入力しないと高さは初期値の600pxに設定されます。最後にコピーボタンをクリックしてコードをコピーしましょう。
Jimdoでframeのフォームを埋め込みたいホームページの「編集」をクリックします。
フォームを設置したいページへ遷移するリンクをクリックします。今回は初期設定で自動的に作られたお問い合わせページに設置します。
フォームを設置したい場所にマウスカーソルを移動させると「コンテンツを追加」が表示されるのでクリックします。
メニューが表示されるので、「ウィジェット／HTML」をクリックします。
テキストボックスが表示されるので、コピーしておいたiframeのコードをペーストして「保存」をクリックします。
するとiframeのフォームが表示されます。
これでiframeでのフォーム作成は完了です。次は動作を確認してみましょう。
「管理メニュー」をクリックしてメニューを開き、「ダッシュボード」をクリックしてダッシュボード画面に遷移します。
先ほどフォームを設置したホームページの「閲覧」をクリックします。
フォームを設置したページを開きます。今回はお問い合わせページにフォームを設置しましたから、お問い合わせページを開きましょう。するとiframeでフォームが表示されます。
iframeを使用したフォームの作成は以上で完了です。
Tayoriフォームページへのリンクを設置する
JimdoにTayoriのフォームページに遷移するためのリンクを貼り付けるには、まずは再度Tayoriのフォーム管理画面を表示して、コード埋め込みの時と同じように「設置」リンクをクリック。
次にフォームのタイプの中から「リンク」をクリックします。
ページを下にスクロールして、コピーボタンをクリックしてコードをコピーします。
iframeでフォームを作った時と同じ手順で、Jindoでフォームを作成したいホームページの編集リンクをクリック→お問い合わせリンクをクリックしてお問い合わせページを表示します。
iframeと同じく「コンテンツを追加」をクリック→「ウィジェット/HTML」をクリックしてaタグを使ってリンクを書きます。
具体的には下記のように書いてください。
<a href=”コピーしたリンク” target=”_blank”>表示したいテキスト</a>
iframeの時と同じように「閲覧」リンクから確認すると書いたテキストリンクが表示されています。
リンクをクリックするとTayoriのフォームに別のタブで遷移することが確認できます。
Tayoriのフォームページを表示させるテキストリンクの作成は以上で完了です。
まとめ
今回は無料でホームページを作成できるJimdoを使ったWebサイトの制作方法とお問い合わせフォームの設置方法を説明しました。Jimdoは項目をクリックしていくだけで簡単にホームページを作成できるため、誰でも簡単に使いこなせます。
Tayoriはシンプルな操作でお問い合わせフォームを作成できて、お問い合わせ先を一元管理できます。フォームの作り方は一度触れば覚えられるほど簡単なのでぜひ一度試してみてください。
