Mobirise：モビライズ：HTML−WEBサイトをエクスポートできる海外ツール（編集途中）
Mobiriseって？
初心者でも簡単にWEBサイトやLP作成ができるツール、ペライチ、WIX、JIMDO〜色々ありますね。
ちょっと玄人向けの仕様の海外製のマーケティングツール、やメール配信ツール、MailChimp、QUICKFannels（クイックファネルズ）、Instapageといったツールでも、LP作成は簡単にできます。
また、最近はStudio、Webflow、Bubbleといった選択肢もあります。
しかし、これらは提供サービスのサーバー内にデータがあるわけで、自分の契約したレンタルサーバー内にデータをおけるわけではありません。
その分いろんな利便性もあるのです。
今回紹介する、Mobiriseは
・自前のサーバー内にWEBページをおきたい場合
・手っ取り早くWEBページを作成したい場合
・コーディングの知識がない、コーダーに依頼しなくてもHTMLデータを作成してしまいたい。
自前のサーバーの場合でWEBサイト公開する場合、多くはWordPressが選ばれていますが、アップデートやバージョンアップなどのメンテナンスが必要となり、知識がない場合は専門家の力を借りないといけない部分が出てきてしまいます。
スピード重視でLP、WEBサイトを作成したい！
そんな時はMobiriseは一択となりそうです。
コーディングができないWEBデザイナーさんも
このツールがあれば、コーディングデータ納品も可能となりそうですね😊
◯コーディングの知識がいらない
◯レスポンシブ対応で作成できる
◯無料！
ちなみに、他にも似たようなツールがあるようです。
国内産のツールですと、有償ですがこちら。
海外の別のツール（詳細未調査）
3 Projectsまでは無料
https://teleporthq.io/
Mobiriseは比較的操作方法の情報なども多そうなので、使ってみることにしました😊
１：WEBサイト（単一ページ、LPなどを作る場合）
1-デスクトップアプリをDownload
２-アプリを開く
３−「ページ」「サイト」新規作成
とありますが、
複数ページを作成する時は「サイト」、
1枚のページを作成したい時は「ページ」でよいのかな？
と思いますが、後ほど理解が進めばまた追記します😆
とりあえず、「サイト」の方から作成してみます。
テンプレートを選択できるのですが、上の方のほぼ同じレイアウトベースと思われる「Mobirese5」 というテーマがベースのもののみが無償です。背景画像なども自由に設定できるので、無償の機能内でも充分自由なデザインが可能です。
有償の場合はセット購入のようで2022年8月時点で
149ドル＝約19,000円 ほどですべてのページやブロックのテーマなどが購入できるようです。
また、全部でなくても個別のテーマですと
49ドル＝約6300円程度で購入できるようです。
1テーマ49ドルなら、149ドルで全テーマ購入するほうがお得ですね。。
新しいテーマは毎月追加されるようです😆
ちなみに、ポップアップ、フォームビルダー（お問い合わせフォーム作成）やPWA（スマホのアプリのような使用感のものを作成）、ペイパルのカード設置などは、別途有償アドオンがあるようです。これも39ドル〜59ドルで購入可能です。
ちなみに、HTMLコードからの編集もできるようですが、こちらは年間1万円程度の模様。無料ですが、色々機能追加がマネタイズになっているようですね。
DownloadしたHTMLデータを自分で編集するとどうなるのか・・・ちょっと気になるのでまた後日トライしてみます。
実際に作ってみよう！
①サイト＞新しいサイトを作る
②白紙から作るか、テーマを選ぶ。
テーマ＞Mobirise5⇒この中は無料になるけれど、それ以外は有料
テンプレートから作成する場合は、既存のデザインテンプレートを選択します。
左上の「白紙」を選択してみます。
右上のテーマ選択のところで「Mobilize5」が選択されている状態にします。（それ以外が選択されていると、有償契約しないとDownloadできません）
各ブロックのデザインで有償デザインも見てみたい場合は「More・・・」をクリックするとみることができます。「Hide・・・」を押すと再度、有償デザインを非表示にすることができます。
右側で必要なブロックのデザインを選んで、左のページ作成スペースに、どんどんドラッグ＆ドロップしていきます。
これだけレパートリーがあれば、ほとんど希望するデザインは実現できそうです。フォームのブロックもあるのですが、設定方法等がどうなるのかは、後で見ていきましょう。
以下の動画も参考になります😊（英語）
https://www.youtube.com/watch?v=UJHawf8MF7E
デザインができたら
右下の「✕」を押すと、フルサイズになります。
再度ブロックを追加したい場合は、右下の「＋」ボタンを押します。
★ブロック内の詳細設定
はネジマークをクリックすると可能です。
★作成済みのBlockを移動
以下の矢印をクリックしてドラッグ・アンド・ドロップすると移動できます。（ちなみに、＜／＞のマークはHTML編集ですが別途有償機能です。）
★ブロックの複製や使い回し
再利用したいブロックは、一度保存すると利用できます。
単純にブロックを複製するような機能はなさそうですが、こちらの機能で複製できるので楽です。
「ユーザーのブロックの保存」を押すと、そのブロックが保存されます。
次からは、「USER Blocks」から選択できます。
◯ソース
とてもきれいです。😊
△フォーム
どうも、3項目までしか指定できないようです。それ以上の機能を求める場合は有償のアドオン購入の必要がありそうです。
受信先のメールアドレスを指定できます。また、受信したメールすべてを一覧で見れる、別の管理ページも用意されています。これは便利。
一度送信先のメールアドレスを指定してフォーム作成すると、そちらにその管理画面のIDやパスが送られてきました。
ーー
＜エクスポートしたHTMLデータを
編集して、アップしても特に支障はない？＞
⇒タイトル、ファビコンの変更をしてみましたが特に問題なさそうです。
以下はデフォルトの機能内にあるのかも・・・
★ファビコンの変更方法
ディレクトリ：assets/images 内の
logo.png のデータを自前のファビコンデータに差し替えます。
データ名は「logo.png」のままにしておけばHTMLソースの方はいじらなくてOKです。
★titleの変更方法
ブラウザで表示される、ページタイトルはindex.html HTMLソース内の
＜title＞HOME＜/title＞⇒HOME の部分を希望する文字列に変更します。
例：◯◯不動産
＜title＞HOME＜/title＞
□ フッタに表示される
「Designed with Mobirise HTML Website Creator」
⇒コードエディタを購入（１万円程度、1年更新の模様、デザインテンプレートとセットで購入で2万円ほど。）する必要がある。その中の設定で消すことが可能。普通にコードを編集して消そうとすると、レイアウトが崩れてしまう仕様になっていました。
？引き続き要検証＆不明点？
□ Downloadしたソースを独自に編集してからアップするなどは問題無い？
可能だが、一度自分でローカルで編集したデータは、再度MOBISEでの編集は不可かもしれない。。（未調査）
□ モバイルで表示される画像を別途指定可能？
⇒自分でソース編集して、CSS等の設定すれば可能
□ メタタグ、タイトル設定などはMOBIRISE上で可能？
⇒ぱっとみ設定はなさそうなので、ソースを自分で編集すれば可能？