現役エンジニアがJimdoを使って感じたメリット・デメリット


現役エンジニアがJimdoを使って感じたメリット・デメリット

「とりあえず Web サイトが欲しい」と思った時に、真っ先に思いつくサービスはWix.comあたりかもしれませんが、 Jimdoジンドゥー も有名です。

今回は Jimdo を使ってみた感想と、利用前の注意点、それからカスタマイズをイメージする際の注意点を解説します。

使ってみてから「あれっ、思っていたのと違う」とならないよう、本稿で情報収集していただければ幸いです。

【今回利用した Jimdo のプラン】

・Free Plan
目次
  1. 現役エンジニアがJimdoを使って感じたメリット・デメリット
  2. Jimdoとは
  3. Jimdoでできること(メリット)
  4. Jimdoでできないこと(デメリット)
  5. Jimdoを利用する時にあった方がいいスキル
  6. Jimdoのデザイン編集力を身に付ける方法
  7. Jimdoに対する求人状況
  8. まとめ

現役エンジニアがJimdoを使って感じたメリット・デメリット

Jimdoとは

image

https://www.jimdo.com/about-jimdo/

20年ほど前、ドイツのとある町の古い納屋から始まった Jimdo。創業者の 3人は、学生時代から Web サイトの作成に明け暮れ、「コーディングの部分が難しくなかったら... 」 と考え、そして編み出されたサービスが Jimdo になります。

3分で Webサイトを立ち上げられる Jimdo は、ブラウザ上でホームページやブログ、ネットショップを作成・開設でき、無料から 月 1,590円と他の Wix.com などに比べてややリーズナルなサービス。

実際にアカウントを作成し、使ってみると本当に 3分ぐらいで Web サイトを公開でき、「すごいな、 Wix より軽快でいいぞ」というのが最初の私の感想です。

image

3分で作成した Jimdo

次のセクションでは、実際に触ってみた感想をご紹介していきます。

Jimdoでできること(メリット)

ショプ機能やブログ機能など公式ページで紹介されている大まかな部分は割愛させて頂き、実際にページを作成・カスタマイズする場面を想定してメリット・デメリットをご紹介していきます。

  • 要素の追加・編集
  • 要素毎のスタイル設定
  • 拡張機能(アドオン)
  • ヘッダーエリアへのコード追加(制限あり)
  • 独自レイアウト
  • 複数サイトを作成できる

「要素の追加・編集」は、サイトビルダーの基本機能で、お好みのポイント(行)に画像やテキストなどを追加できます。

image

コンテンツを追加する場合の様子

基本ペライチや Ameba Ownd などと同じ要領で ”行” に対して、要素の追加や挿入が可能。”列” の追加については、一旦 ”カラム” 要素を行として追加し、それから 2列レイアウト、 3列レイアウトと指定する必要があります。 プログラミング知識がなかったらこうした ”列” の制御って難しいですが、 Jimdo はクリックだけで思うように "列" をデザインしてくれます。

そして追加する要素に対して個別にスタイルを設定でき、文字の色や大きさ、フォントなども変更可能。

image

文字の書体を変更した様子

ここで HTML や CSS の知識がある方なら、「個別にスタイル設定? CSS ファイルは編集できないの?」 と思われますよね。 Jimdo については、テンプレートを利用している場合、 HTMLタグ毎への個別スタイル設定でないとデータが反映されません。ヘッダーエリアにコードを足すことも許されていますが、 CSS は ❌ でした(テンプレート使用時)。

image

ヘッダーに CSS コードを追加したが、 /* <![CDATA[ */ と追記され、独自テンプレートのみで利用できるようになった様子。

そして先ほど要素の追加のところで表示していた ”追加できる要素” の中に、「アドオン(拡張機能)」 があります。例えば、予約機能を自分のページに追加したい場合は、 Coubic という他のサービスを利用し、 iframe コードを発行、それからカレンダー機能を自分のサイトに埋め込み、という手順で Jimdo にはない機能を追加でき、自分のサイトに様々な機能を追加することが許されています。

Wix.com などに比べると外部サービスを利用するようになるので、やや煩雑ですが、このやり方は ペライチ など他のビルダー系でも利用できるとなると、 Jimdo から学ぶところは多いですね。

最後に「独自レイアウト」ですが、一見すると自由度が高く良さそう、と思いましたが、ドキュメントを読んで手が止まりました。理由は、特別だからです。例えば、以下の HTML コード、特別です。

<var>sidebar</var>

image

コードの内容 = 表示内容ではありません

普通の HTML タグとは違い、 Jimdo オリジナルのタグを使用する必要があり、 Jimdo でしか使えないコーディング・ルールを学ぶ必要はある? と考えた結果、私は必要ない、と判断しました。オリジナルのテンプレートが必要であれば、レンタルサーバーで静的なWebサイトか WordPress とかでいいんじゃない?というのが私の答えです。

Jimdo に限った話ではありませんが、サーバーは Jimdo の場合 アイルランド です。 Jimdo.com にアクセスしている感じでは ”遅い” など違和感ありませんが、できれば国内のサーバーを利用しておく方が、安心ですよね。

この他にも Jimdo のデメリット的な内容がありますので、次にご紹介させて頂きます。

Jimdoでできないこと(デメリット)

  • コンテンツ以外のスタイルの変更(テンプレート使用時)
  • JavaScript の追加(テンプレート使用時)
  • 構造化データ(SEO)
  • 販売商品のインポート

同類サービスの ペライチ や Ameba Ownd などが CSS のカスタマイズを開放しているのに対して、 jimdo は CSS の編集を許可していません。例えば、テンプレートを使用しつつ、部分的にデザインを変更したい! ということができないんですね。 Jimdo プラットフォームで CSS を変更したい場合は、追加する HTMLタグに直接 style コードを足すか、”独自レイアウト” で CSS を作成する必要があります。

image

文字のサイズや間隔を調整している様子

「JavaScript の追加」、こちらはヘッダーや追加要素内に <script> を設置することが許可されておらず、基本 JavaScript は使用できません。 ”独自レイアウト” を使用すれば JavaScript も利用できますが、 Jimdo 独自の HTML 処理に気をつける必要があるでしょう。

「構造化データ」については、 <script> が許可されていないので ❌ (テンプレート使用時)。そして 「販売商品のインポート」機能については、純粋に機能なしで ❌ となっています。たくさんの商品を販売したい場合は、 Jimdo ではなく、 Makeshop や カラーミーショップ などの ECサイト・サービス を利用する必要があるでしょう。

【Jimdo - ショプ機能利用時に使用できる決済方法】

Jimdo はグローバリゼーションな Web サービスで、決済方法もグローバルに展開できる "PayPal" と "Stripe" を使用。
無料プランの場合は、PayPal のみをサポートするようになりますが、支払いを行う画面は PayPal の画面になり、デザイン的な統一感は欠如します。

Jimdoを利用する時にあった方がいいスキル

image

  • 画像編集スキル
  • HTML、CSS
  • 読解力・実践力

Jimdo ベースのホームページ制作を行う 「Jimdo研究所」さんなどの制作事例を見てみますと、画像フレームや複雑なデザイン処理が伴う箇所では、CSS ではなく ”画像処理” でデザインを整えている様子。このことから Jimdo で本格的な Web サイトを作る場合は、 Photoshop などイメージ通りに画像加工できるスキルがあった方が ◎ でしょう。

「HTML、CSS」は、コンテンツ追加時の文字や画像のサイズを調整する際にあった方がいいスキル。例えば、 Jimdo に対するフリーランス案件でも「フォントを変えて欲しい」といった内容のものが。 Jimdo で フォントを変更しようと思うと、 ヘッダーでフォントを読み込み、 HTML タグ内でフォントを指定する必要があります。

「読解力・実践力」については、独自テンプレートを使用する際に必要となってくる「Jimdo デザインキット(Link)」の解読のため。残念ながら Jimdo のレイアウト変更チュートリアルは、 Wix に比べると少ない印象で、YouTube コンテンツについては皆無の状態。自分でドキュメントを読んで、試せる力が必要です。

Jimdoのデザイン編集力を身に付ける方法

さて Jimdo を使う時には、「画像加工」「HTML、CSS」「読解力」があった方がいい、ということですが、果たしてどうすればそれらのスキルを簡単に手に入れることができるでしょうか? Jimdo のデザイン編集力を身に付ける方法を考えた結果、以下の項目が浮かび上がりました。

  • Jimdoを使った制作事例のサイトのコードを読む
  • 自分で画像加工や HTML、CSSを学ぶ
  • プログラミング・スクールで画像加工や HTML、CSS を学ぶ

「Jimdo製サイトのコードを読む」は、jimdo製サイトにアクセスし、『右クリック ---> 要素を検証』 でサイト内のコードを確認することです。

image

コードを読むことで、Jimdo の場合はこんな風な表現ができるんだな、ということが分かります。これによって「できること」の範囲がイメージしやすくなるでしょう。

そしてコードを読む、といっても書かれている HTML や CSS のことが分からないと、読めませんよね。 HTML や CSS のスキルは、独学でも身に付けることができると思いますが、時間はかかる傾向。「短時間」に「効率よく」 HTML、 CSS スキルをインストールしたいならプログラミング・スクールが ◎ ですよね。

プログラミング・スクールと聞くと「お金が心配...」 となると思いますが、 CodeCamp の Webデザインコースは月々 7,700円からで OK 。 HTML、CSS は Jimdo 以外でも使えるスキルと思いますので、これを機会に検討してみるのもいいかもしれませんね。

月 7,700円は、 CodeCamp の Webデザインコース 2ヶ月プラン(162,800円) を 24回ボーナスなしで試算した場合の月額料金。初回は 9,143円。

Jimdoに対する求人状況

自分のサイト、自社のサイトなどで Jimdo が扱えるようになると、それは大きな実績になり、自分で仕事を受注できるようになるかもしれません。

image

クラウドワークスの Jimdo 案件例(Link

例えば、クラウドワークスやランサーズなどのフリーランス案件では、月に 3,4 件ほど Jimdo 関係のお仕事が投稿されています。 Jimdo の制作実績があれば、お仕事受注に繋がるでしょうし、何より困っている人を助けることができますね。 コロナ社会で不確かな要素が増える中、こうした ”自分で仕事をとってくる” ということもできれば、将来の安心に繋がりそう。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

Wix.com に比べると存在感薄めの Jimdo ですが、画面編集しやすく、レスポンスもいいです。 大体のレイアウトでいいから、とにかく Web ページを公開したい場合には とてもいいと思います。

また Jimdo ベースの Web制作会社の金額を確認すると、新規作成に 30万円以上などの値が付いていました。 Jimdo を極めるのはそれだけ難しいというのは理解しておきたいですね。

「簡単に Webサイトを制作したい..」「Jimdoで作ったけど、自分のイメージとは違う」 と Web制作で悩まれている方、まずHTML や CSS からプログラミングの世界を体験してみませんか?

CodeCamp では無料体験レッスンを通じて、初めての方でも安心して ”プログラミング” を体験できます。 CodeCamp の 公式サイト から、無料体験の予約をしてみませんか?


関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp