スマホサイトに自動的に変換してくれるサービス「mobeek」を使ってみた！
今回は、"既に存在しているPCサイトを、自動的にスマホサイトへ変換してくれるサービス"、「mobeek（モビーク）」にチャレンジしてみたいと思います！
俗に言う「スマホサイトビルダー」というやつです。
このサービスはドラッグ&ドロップで、既にあるPCサイトをスマホサイトへと構築し直してくれるサービスです！そのまんまですね！
「そんなことできるの…？」と思う方が大半でしょう。
…できるんです！ ＼(^o^)／ 出来ちゃいました！ ＼(^o^)／
↓こちらのURLからアクセスしてください。
「mobeek」
URL:http://mobeek.net/
それでは早速使ってみましょう！
今回は、このブログ自体をスマホサイトに変換してみようと思います。
Step1
—――――――――――――――――――――――――――――――――――
まずは会員登録です。
任意のアドレスにメールが届くのでそこにアクセスして、会員登録をしてみます。
Step2
—――――――――――――――――――――――――――――――――――
登録が終了したらログインをして…
！！
おぉ！もう早速デザインを決められる！
しかも結構カラーバリエーションがある (^p^)
ここは初心者を意識して、緑系のカラーを選択。
うん普通にかわいい。
Step3
—――――――――――――――――――――――――――――――――――
大まかな要素たちの形を選べ、だそうです。
今回は左から２番目の「シンプルタイプ角丸」を選択。
詳細なデザインはこの後決定出来る。と書いてあるので直感的に選択しました。
Step4
—――――――――――――――――――――――――――――――――――
次に詳細なデザインを決定していくようです。
わー(^o^)すごい！
カラー設定はもちろんのこと、リンクボタンやタブメニューのデザインも変更出来るようです！
すごい種類があって迷っちゃうなー。
この設定も後で設定し直すことが出来るようです。
Step5
—――――――――――――――――――――――――――――――――――
お次は…
mobeek内で編集する時のために、このページに名前を設定してくださいとのこと。
ここでは普通に「TOPページ」と設定。
もう一つは…
スマートフォンサイトに変換したいサイトのアドレスを入力してくださいとのこと。
ここでは「webm-b.hatenablog.com/」と設定。
このブログのトップページのアドレスです。
Step6
—――――――――――――――――――――――――――――――――――
ここまできたら後は自分好みで編集するだけですね。
①の赤い四角の中から入れたい属性を選択してから
↓
②の既存サイトの要素をドラック&ドロップで、③の疑似スマホの中に放り込むだけです。
既に大まかなデザインは設定してあるので、やることと言えば放り込むという動作だけのようです！
便利！！！
又、細かいところが気に入らなければその場で直接編集することも出来ました。
試しに、１記事分のページを作成してみました！
↑左は既存サイト、右がスマホ版に修正したものです。
こんな感じになりました！
結構しっかりとしたものが出来ましたねー。
でも少々使い勝手が悪いところがありました (;´Д｀)
以下はまとめです。
まとめ
—――――――――――――――――――――――――――――――――――
良かった点
★PCと連動してくれているので、更新の手間が省ける
★スマホサイトに必要な要素だけを選んで、設置出来る
★既存サイトの画像を任意の大きさで切り取ってくれる
★デザインをする際に簡単に試し見ができる
★自動でQRコード生成してくれるので、サーバ等を使わずに実機で確認出来る
不安な点
★全て自動というわけではなく、実際に作り込んでいくと不都合が出てきてコードを打つ場面も会った
★実際のコードが見えないので、世に出た時に不具合がないか不安である
★始めの方でレイアウトの設定をしたつもりだったが、結局細かい部分は自分で作らなければならなかった（レイアウトをどう組んだら良いか分からない）
…という結果です。
私の場合、あくまで全自動というわけではなく、「そうじゃないんだけどなー」と思う場面少しありました…
が！！
スマホサイトに必要な要素は十分すぎるぐらい揃っているので（タブ機能やスライド機能 等）、十分に使っていけるツールだと感じました！
今回はブログの変換しかしていないので、ECサイトやポートフォリオの作成もこれでやったら楽しいんじゃないかなーと思いました。
是非みなさんも、「mobeek」 面白いので試してみてくださいねー ヽ(･∀･)人(･∀･)ﾉ
終わり。
