無料WEBサイトビルダー Mobiriseの魅力

みなさん、こんにちは。
インターン生の石田です。
今回は、WEBサイトビルダーMobiriseについてご紹介していきたいと思います。
a-blog cms のテーマを作るためのサンプルサイトを Mobirise でいくつか作ったのですが、コーディング初心者な私でも簡単に素敵なサイトがいくつも作れてしまいました...！！
少しでも気になった方はご覧ください！

Mobiriseとは？

Mobirise（モビライズ）は、すでにデザインされたパーツを組み合わせるだけでCSSのフレームワークであるBootstrapを利用したWebサイトを作ることができるアプリケーションです。パーツはマウスでドラッグ&ドロップし、簡単に配置することができます。
文面や画像、カラーを変更したり、リンクの設定などを行うだけでWEBサイトの完成！！
商用および非営利利用無料で、とても綺麗なHTMLを書き出してくれます。
基本無料で使用でき、さらにWindows、Mac、AndroidのOSに対応しているので、デバイスを選ばず使用することができます。

Mobiriseをインストールしよう

まずは公式サイトからインストーラーをダウンロードします。
次にインストーラーを起動し、Mobiriseをインストールします。
アカウントが作成できたら準備OK！
早速MobiriseでWEBサイトを作っていきましょう！

WEBサイトの作成手順

このような画面が出てくるので、まず右下にある＋ボタンをクリックします。

そうするとヘッダーやリストなど、様々なパーツがあるページが出てきます。
そこから自分で好きなパーツを選び、どんどん自分好みのサイトを作っちゃいましょう！

ブロックごと動かしたい時は、「ブロックをドラッグ」の矢印のマークを掴んで動かすとブロックを移動させることができます。

またブロックのパラメーターから、サイズやカラーなどを変更したり、いらないパーツを消したりすることができます。

またヘッダーパーツなどは「＋」でメニューの追加、矢印でメニューの位置移動、鎖マークでリンクの追加などができます。

WEBサイトが完成しました〜！

早速右上にある目のマークからプレビューを見てみましょう！！

とても素敵に仕上がりました！
ブラウザで見た時に修正点がなければいよいよ公開です。

右上にある「公開」をクリックすると、どこに保存・公開するのかを選択する画面が出てきます。
自分が保存・公開したい場所を選択し、公開を押せば完了です。
あっという間にサイトができてしまいました！

タイトル・URL名の変更

左上のHomeの下の部分や、「ページの設定」を押すと、ページタイトルやURL名を変更することができます。

また、「サイト」では新しいサイトを追加できたり、先程のページ名等の編集をすることができます。

Mobiriseの魅力

魅力その１　コードが書けない人でも簡単にサイトが作れる

実は私、HTML&CSSは勉強中で少ししかコードが書けません。なので今まで思い通りのしっかりとしたサイトは作ることができませんでした。
私のように「コードは書けないけど、サイトを作ってみたい」、「自分のイメージを形にしてみたい」と思っている方、たくさんいるのではないでしょうか？
Mobiriseではコーディングの知識が無い方でもパーツを組み合わせるだけなので、サイトがほんの一瞬で作れてしまいます！
しかも！レスポンシブにも自動で対応してくれるので、「パーツを入れる」「文面や画像、カラーの変更、リンクの挿入をする」「公開する」のたったの3ステップでWEBサイトを作ることができてしまいます！！！
さらにコードに変換する際は、とても綺麗なコードで書き出してくれますよ。

魅力その２　綺麗なHTML

MobiriseはBootstrapのCSSフレームワークを利用し、綺麗なHTMLを書き出してくれます。
下図からdivタグが濫用されていたり、順番が乱れているといったようなコードが読み取りづらい箇所はなく、綺麗にclass名やタグが使われていてとても見やすいコードとなっていることが分かると思います。
自分が書いていないコードを修正や変更をする際、やりにくかったりしますよね、、
ですがMobiriseでは規則的にコードが書かれているので、修正や変更をする際もとてもやりやすいと思いますよ！

魅力その３　豊富なテンプレート

Mobiriseにはとても豊富なテンプレートがたくさんあります。
「デザインとか分からないよ〜」という方でも、とても綺麗なデザインのサイトが作れますよ。
「医療系」や「ECサイト系」など、たくさんの種類のテンプレートがあるので、「自分の作りたい系統のテンプレートがない...」といったことはあまりないのではないかなと思います。
また、ヘッダー、リスト、コンタクトなど、部分ごとにパーツが分けられているので、色々なテンプレートを組み合わせることも可能ですよ！

魅力その４　自分が調整したパーツは保存可能

Mobiriseを使っていると、「さっき調整・変更したパーツをここにも置きたいな」と思うこともしばしば、、。
私は最初、そう思った時はまた同じテンプレートを持ってきては修正したりしていました。
そこでしばらくMobiriseを使っていくうちに「ユーザーブロックの保存」ボタンに気が付きました。なんだろうと思いクリックしてみると、なんと自分が調整したパーツが保存されたんです...！！

そしてその保存されたパーツは、テンプレートのパーツのように好きなところに入れることができます。さっきまでの苦労はなんだったのか、と思うほど楽になりました（笑）
例えば、Mobiriseでボタンを作るとします。
そうすると、
①テンプレートからボタンがあるものを探す
②そのテンプレートを挿入
③ボタン以外のいらないところを消す
といった手順を踏まないといけません。
しかし、保存ができたらもうそのボタンは使い回しできちゃうわけです。
最初一回一回作らないといけないと思っていた時は面倒に感じていましたが、保存できるのであれば一度作ってしまえばずっと使えるのですから、パーツ作りがとても楽しくなりました！
自分だけのパーツを作っちゃいましょう！

まとめ

Mobiriseを使ってみて、”最初は難しく感じるけれど、触れば触るほど操作に慣れ、素早く綺麗なサイトが作れるアプリケーション”という印象を持ちました。
魅力その４のところにもあったように、使っていくうちに機能がどんどん分かっていきます。
私も最初のうちはただテンプレートを入れるだけの作業をしていましたが、色々なボタンなどを押していくうちに、一つのサイトを作り終える頃には大方の機能を理解できました！
コーディング初心者の私でも楽しんでサイト作りができたので、きっとみなさんも楽しみながら素敵なサイトをたくさん作ることができると思います！
Mobirise、一度使ってみてはいかがでしょうか？＾＾