1. Jimdoで実験用のWebサイトを作る

Updated
2021/8/8 8:28
Author
Jumpei IkegamiJumpei Ikegami
JimdoというWebサイト作成サービスを使うと、簡単にWebサイトを作ることができます。インターネットができたばかりの頃は、自分のWebサイトを世界に公開するためにはサーバーの設定やHTMLの知識が必要でした。今では、シンプルなWebサイトであれば特別な知識がなくてもNoCodeで簡単に作成・公開することができます。こうしたサービスの強力な機能を体験しましょう。
今回のチュートリアルでは、Webサイトを使ったその他のチュートリアルでも使えるような、自分だけの実験用のWebサイトをJimdoを使って構築してみます。

前提知識

特に必要な前提知識はありません。

作るもの

JimdoのFreeプランに登録し、URLを知っていれば世界中の誰でもアクセスできるようなWebサイトを作成します。Webサイトのデザインについては、Jimdoのテンプレートをそのまま使います。

体験すること

このチュートリアルによって、以下を体験します。
  • 「Webサイトを作る」とは何かを理解する
  • Webサイト作成サービスについて知る
  • Jimdoについて知る
  • JimdoでWebサイトを作成する
  • JimdoでWebサイトを更新する
  • Jimdoでの外部サービスのタグ設置方法を知る

チュートリアルスタート!

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。

Webサイト作成サービスとは?

現代において、世の中にはWebサイトを簡単に構築できるWebサイト作成サービスがたくさんあります。そもそも、こうしたWebサイト作成サービスとは何なのでしょうか?
それを知るためには、まず「Webサイトを作る」には何をすればいいのかについて簡単に知る必要があります。「Webサイト」としての機能を実現するには、端的にいうと「WebブラウザでURLにアクセスすると適切なHTMLが返ってくるような仕組み」を提供する必要があります。Webブラウザとは、今あなたがお使いのGoogle ChromeやSafariやMicrosoft Edgeなど、Webサイトを閲覧するためのソフトウェアです。対して、とあるWebサイトのHTMLをWebブラウザに対して返すような存在のことを、Webサーバーといいます。とあるWebサイトがWebブラウザで表示されるまでの処理の流れを簡略化して図示すると、次のようになります。(ちなみに図の細かいことを気にすると「URLに対応するWebサーバーを特定するためにはDNSと呼ばれる仕組みがあってな」みたいな話などもありますが、今は考えないことにしましょう。)
ざっくり言うと、世界中の色々な人が使っているWebブラウザから飛んでくる「HTMLください」というリクエストに対して適切なHTMLを返すためのWebサーバーを用意すれば、Webサイトを作ったことになります。Webサイトの表示に必要なHTMLをただ手元で書くだけでは足りず、「Webブラウザからアクセスが来たらこのHTMLを返してね」というように、Webサーバーに対してHTMLを登録する必要があります。また、1つのWebサイト内に複数のページがある場合は、URLパスなどに応じて返すHTMLを変える必要があります。
インターネットがこの世に誕生してからしばらくは、物理的なサーバーマシンを自分で用意し、HTMLも自分で記述する必要がありました。Webサーバーについては、しだいにレンタルサーバーサービスの登場によって物理的なサーバーを意識せずに利用できるようになりました。しかし、依然としてWebページのレイアウトなどを独自に拡張するには、HTMLやCSSを自分で記述する必要がありました。
2000年代に入ると、Webサイト作成をさらに強力にサポートするようなサービスが登場し始めました。2007年にサービススタートしたJimdoもその中の1つです。企業や個人がWebサイトを持つことが当たり前になる中で、HTMLなどの知識が無い人であっても簡単にWebサイトを構築できる需要が高まっていました。多くのWebサイト作成サービスでは、サイトのテキストや画像などを管理画面上でGUIで編集することができます。Webサイト作成サービスの登場によって、誰でも簡単に自分のオリジナルのWebサイトを作成できる時代になったわけです。
Jimdoでも、サイトのプレビュー画面で直接テキストを書き換えられたりする
「Webサイト作成サービス」と一言にいっても、その用途や自由度に応じてさまざまな種類があります。ブログに特化したサービス、企業やサービスのランディングページが想定されたサービス、より自由度が高く複雑なコンテンツ管理ができるサービスなど、数多くのバリエーションがあります。
一般的に「とりあえずWebサイトを作りたい」という場合でよく耳にするWebサイト作成サービスには、たとえば次のものがあります。

Jimdoとは?

目的の近いWebサイト作成サービス同士は機能も似通っているので、どれを使っても似たようなことは実現できます。このチュートリアルでは、Jimdoというサービスを使ってWebサイトを構築してみましょう。
Jimdoは、ドイツ発のサービスです。シンプルなWebサイトの構築であれば、テンプレートをもとにNoCodeで実現できます。無料のプランであっても多くの機能を利用できるのが特徴です。
特に、外部サービスのタグをサイトのヘッダーに自由に埋め込むことができます。『非エンジニアのためのエンジニアリング』では、GoogleアナリティクスやGoogleタグマネージャーなどのWebサイト運営者のためのサービスに関連するチュートリアルも提供されています。こうした外部サービスとWebサイトを連携させるためには、その外部サービスが提供しているタグをWebサイト上に設置する必要があります。Jimdoでは、無料プランの範囲内でこうした独自のタグ設置が可能になっています。実験用のWebサイトを作るにはぴったりのサービスですね。
もちろん、会社や個人の本番サイトを作るために利用することもできます。無料プランでは https://non-engineers-test.jimdofree.com のようにjimdoの名前が入ったドメインしか使うことができません。自分で決めたドメインでWebサイトにアクセスできるようにするためには月額1,000円程度の有料プランにアップグレードする必要があるようです。

実験用のWebサイトを作る

それでは、いよいよJimdoを使ってWebサイトを作ってみましょう。さっそく、Jimdoのサービスサイトにアクセスします。
(なお、ここから先のスクリーンショットは2020年6月現在のものです。実際の画面とずれている場合は、フィードバックフォームから教えてください。)
[無料ホームページを作成] や [登録する] ボタンをクリックすると、アカウント登録画面が開きます。登録に使いたいメールアドレスでアカウントを作成しましょう。Googleアカウント等で作成するのが楽です。
次に、ホームページのタイプを選びます。シンプルな実験用のWebサイトを作りたいので、ここでは、[ホームページ]を選択します。
次に、サイト作成の方法を選びます。JimdoでWebサイトを作成するとき、よりできることがシンプルな「ジンドゥー AI ビルダー」と、カスタマイズ性の高い「ジンドゥークリエイター」の2つの手段から選ぶことができます。今回は外部サービスのタグ設置などカスタマイズをしたいので、「ジンドゥークリエイター」を選びましょう。「ジンドゥークリエイター」の説明には、「コーディングができるあなたにも」や「ホームページの専門家なら」など選ぶことのハードルを上げるような内容が含まれていますが、実際にはそこまで難しいわけではないので、安心して選んでください。
業種の選択は、特に関係がないので適当に選びましょう。スキップすることもできます。
いよいよ、Webサイトのレイアウトを決めるためのテンプレートを選びます。今回は実験用のWebサイトなので、自分の好みのものを適当に選んでください。
ここで、現実的なプランの話が出てきます。中間の有料プランを選びたくなるデザインになっていますが、心を強くもってFREEプランを選択します。
最後に、Webサイトのドメインを決めます。FREEプランの範囲内であれば、[無料のサブドメインを利用する]しか利用することしかできません。適当なサブドメインを入力します。
驚くべきことに、これだけでWebサイトが作成され、URLを知っていれば世界中の誰でもアクセスできるようになりました。それを確かめてみましょう。
Webサイトの編集画面で、右上のモニタのアイコンをクリックします。
すると、プレビュー画面が開きます。ちなみに、このプレビュー画面では画面サイズをPCとスマホで切り替えて表示確認をすることができます。実際のサイトを確認するためには、ヘッダの[閲覧]をクリックします。新しいタブが開き、実際のWebサイトのURLが読み込まれます。
実際のWebサイトを開いているタブのアドレスバーに表示されるURLは、次のようなものになっているはずです。
Plain Text
なお、Webサイト作成サービスの機能によっては「サイトが未公開の場合でも、別のタブでそのサービスにログインをしている場合のみ実際のサイトが見られる」ということがあります。実際に誰でもサイトにアクセスできることを確認するためには、Webブラウザの「プライベートブラウズ」機能を使ってそのURLを閲覧してみるのがおすすめです。ここでは、Chromeを例に説明しますが、SafariやEdgeにも同様の機能があります。Chromeの場合、Windowsなら「Ctrl+Shift+n」、Macの場合は「Cmd+Shift+n」のショートカットで、シークレットモードのウィンドウが開きます。そのアドレスバーに、Jimdoで作成したWebサイトURLを入れてください。シークレットモードのウィンドウ側でサービスにログインしていない状態でもWebサイトが閲覧できれば、そのWebサイトは誰でも見られる状態になっていると考えられます。実際に試して、Webサイトが見られることを確認しましょう。
これで、無事に自分のWebサイトを世界に公開することができました。簡単でしたね。

JimdoでWebサイトを作成すると何が起こるか?

ここで改めて、JimdoでWebサイトを作成すると何が起こるのかについて考えてみます。最初に確認したように、Webサイトを作成するには「WebブラウザでURLにアクセスすると適切なHTMLが返ってくるような仕組み」を構築する必要がありました。しかし、あなたはJimdoの管理画面をぽちぽちしただけでした。Jimdoを使ってWebサイトを作れるということは、Jimdoは自分たちでWebサーバーをたくさん持っていて、Webサイトを作りたいJimdoユーザーにそれを使わせてくれています。あなたがJimdo管理画面に入力したサブドメインの設定やレイアウト情報は、Jimdoの機能によってJimdo側のWebサーバーに反映されます。
本来、「WebブラウザでURLにアクセスすると適切なHTMLが返ってくるような仕組み」を作るには、適切に設定されたWebサーバーを構築する必要があり、その中には技術的で複雑なプロセスがたくさんあります。あなたはただWebサイトを作りたいだけなのに、やりたいことと一見無関係なWebサーバーやHTMLの知識を身に付ける必要があったわけです。一方、JimdoなどのWebサイト構築サービスを使うと、そうした複雑な設定をJimdoの機能が担ってくれます。Jimdoユーザーであるあなたは、テキストやレイアウトなどWebサイトの価値に直結する部分の意思決定に集中できるわけです。

Webサイトの見た目を少し編集してみる

これでWebサイトの作成やその裏で行われていることの理解ができました。ただ、Webサイトの見た目がテンプレートのままというのは味気ないものです。せっかくなので、少しだけWebサイトの見た目を自分なりに変更してみましょう。
Jimdoの管理画面から、サイト編集画面を開きます。どのレイアウトを最初に選んだのかによって実際の見た目は異なりますが、気にせず進みましょう。
次に、キービジュアルをクリックします。画像をアップロードできそうなUIが表示されるので、適当な画像を追加してみます。
アップロード後に右下の[保存]ボタンを押すと、実際にサイト上の画像が切り替わります。
今度は、テキスト部分をどれか一つ選んでクリックしてみましょう。文字入力ができるようになるので、変更したい適当な文字列を入力します。[保存]ボタンを押すと、実際にサイト上のテキストが変更されました。とても簡単ですね。
画像とテキストの変更と保存が終わったら、管理画面上のプレビューだけでなく実際のサイトも変更されていることも確認してみましょう。
Webサイト作成ツールを使うと、Webサイトの簡単なテキストや画像の変更程度の作業であれば、特別な知識がなくてもできることがわかりました。複雑なレイアウト変更などをしようとすると少し難しくなりますが、シンプルなWebサイトを作りたいだけであれば十分と言えるでしょう。

外部サービスのタグを設置する方法を知る

チュートリアルの最後に、Jimdoで作ったWebサイトに外部サービスのタグを設置する方法を紹介します。今回作ったサイトは、Webサイト管理者のためのサービスを体験するための実験サイトとして利用できます。ただし、そのためにはそのサービスが提供するタグをWebサイトに設置することが必要です。Jimdoでは、こうしたタグをWebサイトのHTMLの<head></head>で囲まれた領域に対して設置します。Jimdoでは「ヘッダー」と呼ばれます。
さっそく実際の設定方法を見てみましょう。Jimdoのサイト編集画面を開きます。上に表示された[管理メニュー]を開き、[基本設定]に進みます。
[ヘッダー編集]を選ぶと、ヘッダーに挿入するタグを編集することができます。次の画像は、Googleタグマネージャー(GTM)のタグを設置している例です。なお、FREEプランではWebサイトの全てのページに対して共通のタグしか埋め込むことができません。ただし、GTMさえ設置してしまえば、GTMの機能でページ毎に違うタグを配信できるのでそこまで問題にならないことが多いでしょう。
以上で、今回のチュートリアルは終了です。お疲れさまでした。