どうも
Ganapatiです。
個人や中小企業がWEBサイトを構築するためのハードルが毎年のように下がってきていることを感じる今日この頃です。
HTMLなどの知識があったほうが良いのは確かですが、なくとも全く問題ないという最近の技術にはただただ驚くばかりです。
15年前くらいにホームページビルダーでサイトを作ったことがありますが、あの当時とはデザインも含めてまったく別次元のものになってしまいましたね。
ドラッグアンドドロップでOKな無料のWEBサイトビルダー「Mobirise」
今回紹介したいツールは「Mobirise」というツールです。WEBサイトを作ってみたいけどWordpressなどのCMSは難しそう・・・でも大量もしくは手軽にWEBサイトを作ってみたいな・・・という方にお勧めです。
Mobiriseの特徴
Mobiriseには次のような特徴があります。
- PCインストール型（オフラインでも使える）
- いまどきのデザインテンプレートが108種類無料で使える
- 静的WEBサイトが簡単に作れる
- ドラッグアンドドロップの簡単操作
- その名の通りモバイル表示対応
- ソフトの利用も無料
- オンラインでCC0写真素材サイトから画像を取得可能
ここまでは良い面での特徴ですが、悪い面での特徴もあります
- こだわる人は有料（後述）でないと細やかなカスタマイズができない
- 操作UIが英語（でもそんなに難しくはない）
細かいカスタマイズが不要な人、テンプレート通りのレイアウトで十分という人にはデメリットは少ないと思います。
Mobiriseの制限（＝ビジネスモデル）
無料で便利なMobiriseですが、無料では細かいカスタマイズができないというデメリット部分にビジネスモデルをあてています。
一言でいえば「便利に使いたければお金払ってね」「もっとテンプレートが欲しければお金払ってね」ということです。
例えばCSSを自分で作って適用したり、HTMLそのものを編集したり、AMPに対応させたり、もっと素敵なデザインテンプレートを使ったりするにはそれぞれ個別に決められた料金が必要になります。ただし、いずれも「1回払い」で買い切り型なので助かります。
Mbiriseを実際に触ってみた
インストールして早速起動して実際に触ってみました。
① 起動後まずは登録
このポップアップ表示はとりあえずスキップします。
言語選択はデフォルトでは英語です。キャンセル（×）してOK。
初回は登録画面（ポップアップ表示）が表示されます。
少し面倒でもメールアドレスで登録が無難です。
メールアドレスで登録した場合は、登録確認のメールが届きますので案内に沿って認証を完了しましょう。
② 初期画面
ログインして最初に表示されるのは「デモサイト」です。
操作を覚えるためにも最初はデモサイトをベースにカスタマイズ（文章や画像を差し替え）してみましょう。
③ 画面左メニュー
左上のメニューアイコンをクリックしてみましょう。
左側に表示されるメニューは大きくは５つあります。
- Page：表示中のサイトのページ一覧を表示します。
- Sites：管理しているサイト一覧とサイト設定を表示します。
- Account：アカウント設定の画面を表示します。
- Extensions：拡張機能一覧を表示します。無料・有料いろいろあります。
- Help：ヘルプドキュメント・リンクを表示します
Page
ページ構成一覧。デモの状態では1ページのみ。ここで追加できます。
Sites
↑サイト一覧画面。サイト単位での設定もここからできます。
Extensions
④ 画面右上メニュー
右上には次のようなアイコンメニューが表示されるはず。
- アンドゥ：選択しているブロックにおける操作を一つ前に戻します
- ブラウザで表示する（目の形のアイコン）：PCで設定している標準ブラウザ上に表示します
- Publish（クラウドのアイコン）：ローカルにサイトデータを保存したり、FTPでサーバーにアップロードします。
※↑Publish設定画面
⑤ 画面中央メニュー
モバイルビューとPCビューの切り替えができます。つまるところレスポンシブウェブデザインで画面表示幅ごとにどのように表示が変化するのかを確かめることができるということです。
より詳しく変化を見たい人はブラウザで表示させてから画面幅をドラッグして変更したほうが良いです。
⑥ ブロック操作関連
ブロック単位の設定画面です。ブロック単位で操作ができます。
- ドラッグアンドドロップ：選択したブロックを他の場所に移動したいときに便利です。
- ユーザーセーブ：作成したブロックを登録し再利用しやすくします。
- ブロックパラメーター：ブロックによって様々な表示・非表示等の設定ができます。
- ゴミ箱：選択したブロックを削除します。
ちなみに新しいブロックを配置したいときは画面右下の＋アイコンをクリックします。
※↑無料でも十分なテンプレートが選択できます。
そうすると利用可能なデザインテンプレート（ブロック）が表示されますので、ドラッグアンドドロップで配置したい一にドロップするだけでブロックが追加されます。
⑦ テキスト等の追加・編集
デザインテンプレート（ブロック）を配置したら、テキストや写真・アイコンなどを自由に変更できます。もちろん日本語もOKです。
変更方法は基本的には変更したい部分をカーソルで選択して直接入力するだけ。
太字などの装飾もカーソルで編集箇所を選択することで編集ボタンのようなものが自動的に表示さるようになっています。
背景イメージは前述のブロック単位の操作で変更します。
アイコンを追加したいときはアイコンを追加可能な部分でのみ以下のようなアイコンが追加できるように表示されます。
Mobiriseを使うのに向いている人
① ペラサイトを量産したい人
ペラサイト（ページ数の少ないサイト）を量産したい人にはMobiriseは向いています。
ペラサイト量産している人のほどんどは一定のデザインテンプレートに文章を流しこむようなスタイルです。
Mobiriseはサイト全体でもブロック単位でもテンプレートかが簡単ですのでサクサク量産することができます。
② ランディングページが必要な人
Mobiriseのデザインテンプレートはランディングページに適したものが非常に多いです。
縦長ページはドラッグアンドドロップで作りやすいということもありますね。
③ 細かな調整は不要という人（テンプレート通りでいい人）
④ さっさとサイトを作りたい人（特に法人）
CMSなどを使ってサイトを立ち上げるのはなんだかんだ言って結構面倒です。
それに比べると圧倒的に早くサイトをたちあげることができます。
ちなみに・・・
登録後オールインワンの有料パックの割引価格提供の案内があるはずです。2万円と少しかかります。
決して安い価格ではありませんが、「静的サイト」の作成請負で開業できるほど多種多様なデザインテンプレートを手に入れることができます。