サイト制作

ブラウザ上でスマホ用サイトを簡単に作成できるサービス

更新日:2016/09/20 公開日:2014/04/22

西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

こんにちは。All About ホームページ作成ガイドの西村文宏です。

ウェブサイトを自由自在に作るには、自力でHTMLやスタイルシートを書くのが一番ですが、慣れないうちはなかなか難しいですよね。

PC用サイトだけならまだしも、スマートフォン独特のインターフェイスを備えたスマホ用サイトも作ろうと思うと、必要な知識が多くなって大変です。

そこで今回は、直接HTMLやスタイルシートを書くことなく、ソフトウェアのインストールすらも必要なく、ブラウザ上だけで簡単にスマホ用サイトを作れるサービスをご紹介いたします。

Jimdoは、ブラウザ上に表示されるツールだけを使って、無料で500MBまでのウェブサイトを作成・公開できるサービスです。

ドイツ製ですが、日本国内ではKDDIがサポートしており、日本語で利用できます。
基本的に、マウス操作だけで簡単にレイアウトやデザインを調整できます。

しかし、必要に応じてHTMLソースを直接編集することもできる、便利なサービスです。

PC用サイトの画面構成をベースにして作ることになりますが、同時にスマホ用サイトも生成されますから、スマホ用サイトの作成ツールとしても使えます。

以下に、Jimdoの使い方を簡単にご紹介いたしますので、ぜひ試してみてください。

1. Jimdoの日本語版ウェブサイトにブラウザでアクセスします。

2. 上部の入力欄に、希望のURL、メールアドレス、パスワードを入力します。

3. 利用規約を承認するチェックボックスにチェックを入れてから、「無料ホームページを登録!」ボタンをクリックします。

4. スパム防止用のCaptcha(歪んだ文字の画像)が表示されるので、そこに見えている文字列を入力して、再度「無料ホームページを登録!」ボタンをクリックします。

5. すると、「Jimdoにご登録いただきありがとうございます。」と表示され、入力したメールアドレス宛に確認メールが届くので、受信します。

6. メール本文内に記載された「メールアドレスを確定」というボタンをクリックします。ブラウザに、「あなたのメールアドレスが確定されました。」と表示されれば、アカウントの開設は完了です。

7. そのまま「さあホームページを編集しましょう」というボタンをクリックすると、ログインページへ移動できます。

以下のログインページをブックマークに登録しておくと便利です。

自分のドメイン名( xxxx.jimdo.com など )と、
パスワードを入力して「ログイン」ボタンをクリックします。

編集したい箇所にマウスを載せると、編集用のボタンなどが表示されます。本文そのものをクリックすれば、エディタが現れて、その場で編集できます。なお、右端には各種設定アイコンの並ぶメニューバーが表示されています。

この時点で、既にウェブサイトは一般に公開されています。ブラウザに自分のJimdoのURLを入力すれば、表示を確認できます。

なお、スマートフォンで閲覧すると、次のように見えます。(デザインは後で変更できます。)

まずはページのタイトルを設定しましょう。以下のように操作してください。

1. .右端に並んでいるアイコンの中から「SEO」アイコンをクリックします。

2. すると、図3のようにページタイトルや説明文が入力できるようになります。

3. 入力後に「保存」ボタンをクリックすると、保存されます。

なお、全ページに共通する「サイト名」は、以下の手順で登録できます。

ここに入力した名称は「サイト名」として扱われ、全ページで使われます。

1. 右端に並んでいるアイコンの中から「設定」アイコンをクリックします。
2. たくさん出てくるアイコンの中から「ページタイトル」アイコンをクリックします。
3. すると、下記のような画面になりますので、自由な名称を入力します。
4. 最後に「保存」ボタンを押して保存します。

Jimdoには、豊富にページデザインが用意されていて、いつでも自由に変更できます。

なお、PC用デザインとスマホ用デザインは、別々に指定します。まず、PC用サイトのデザインを変更するには、以下のように操作します。

1. 右端に並んでいるアイコンの中から「レイアウト」をクリックします。
2. 下記の図のように様々なレイアウトが表示されます。(最初はF4193が選択済み)
3. 好きなレイアウトをクリックすることで、実際にそのレイアウトを適用できます。

レイアウトを切り替えると、ページの最上部に「新しいレイアウトを適用しますか?」と質問が表示されます。「はい」をクリックすればデザインが確定され、「いいえ」をクリックするとキャンセルされます。PC用サイトのデザインを変えても、スマートフォンで閲覧した場合のデザインは変わりません。

スマホ用サイトのデザインを変更するには、以下のように操作します。

1. 右端に並んでいるアイコンの中から「設定」アイコンをクリックします。
2. たくさん出てくるアイコンの中から「スマートフォン表示」をクリックします。
3. 図のように、スマートフォンでのプレビュー画面が表示されます。
4. 左側に表示されているデザイン一覧から好きなものを選ぶことで、スマホ用のデザインを変更できます。

※もし、何らかの設定画面が開いている場合には、左上の丸い[×]ボタンをクリックすることで、元の画面に戻れます。

編集したい箇所にマウスを載せると、下部や左端などに、編集用の各種ボタンが表示されます。

また、本文(文章)の修正であれば、表示されている文章を直接クリックするだけで、図のような編集領域が現れます。

ここで、自由に文字を入力したり、色を変更したり、リンクを作ったりできます。

編集が終わったら、編集領域の下部にある「保存」ボタンを押してください。

Jimdoでは、HTMLソースの直接編集も可能です。アフィリエイトを掲載したいなど、何らかのHTMLソースを直接記述する必要がある場合は、以下のように操作します。

1. 先ほどの図で見えている編集領域上部のツールバーには、右端に「HTML」と書かれたボタンがあります。それをクリックします。

2. すると、次の図のように「HTMLソースエディタ」が開き、自由にHTMLを編集できます。アフィリエイト用のHTMLソースをここに貼り付けると良いでしょう。

最初から「ホーム」・「プロフィール」・「お問い合わせ」の3ページが作られています。

これらのページには、ナビゲーションバー上のリンクをクリックすることで移動できます。

新しくページを追加したい場合は、ナビゲーションバー上にマウスを載せたときに表示される「ナビゲーションの編集」をクリックします。

すると、図9のように、ページの順序変更や新規追加ができるダイアログが表示されます。ここで「新規ページを追加」ボタンをクリックすると、ページを追加できます。

このように、ブラウザ上での操作だけで、簡単にウェブサイトが作成できます。500MBまでは無料で作れますので、ぜひ、試してみてください。

なお、右端のメニューから「?」アイコンをクリックすると、詳しいマニュアルが読めますので、そちらも参考にしてください。

SHARE
西村 文宏 (ニシムラ フミヒロ)

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2016/09/20更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう!
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら