シナジーマーケティング株式会社

Menu

カンタンスマホ変換サービス「Shutto(シュット)」を使ってみた

皆さんのWebサイトはスマートフォン対策されていますか?

弊社のコーポレートサイトは、2013年1月時点でモバイルからのアクセスが全体の9%ほどでしたが、1年経った2014年1月には17%と2倍近くまで増加しました。弊社はBtoB企業ですが、BtoC企業であればさらにモバイルからのアクセスが増えていると思います。

BtoB企業とはいえ、もはや避けては通れないスマートフォン対策。レスポンシブ化など手法はさまざまありますが、今回は時間短縮を優先!ということで、スマホ変換サービス「Shutto(シュット)」を使い、コーポレートサイトのスマートフォン対応を行いました。今回は、そのレビューをご紹介したいと思います。

108_masumi_01_2

1. 変換したいサイトの登録

108_masumi_01_3

ログインしたら、まずは変換したいサイトを登録。(サブドメインは別サイト扱いになるので、別途料金が必要!)ここは10秒もあれば完了します。

2. 変換用テンプレートの作成

108_masumi_01_4

ここからが本番です。変換用テンプレートを作成していきます。
Shuttoは、登録したら勝手に自動変換!というシステムではありません。自分で変換用のテンプレートを1から作成する必要があります。

この辺は同じようなスマホ変換サービスであるDudaMobileとは違いますね。DudaMobileは、URLを入力すると、最初にシステムが自動で変換してくれます。そこから自分で気になるところを編集、カスタマイズしていく流れです。

変換用テンプレートについては、たとえばシンプルなページ構成のコーポレートサイトあれば最少でトップと下層の2枚で対応できると思います。それに加えて、複雑なレイアウトのページについては個々にテンプレートを用意します。ちなみに今回私がコーポレートサイト用に作成したのはテンプレートは10枚でした。

3. 変換用テンプレートの編集

108_masumi_01_5

これは文章で説明するより、実際に試してもらった方がわかりやすいと思います。
Shuttoのトップページの「変換したいURLを入力してください」のところに、お好きなURLを入れて「変換スタート」をクリック。編集画面になったら、右側のPCの画面から、スマートフォンの画面へ要素をドラッグして、レイアウトしていきます。

デフォルトで用意されているプルダウンメニューやアコーディオンのパーツを利用すれば、簡単にスマホならではの表示が可能になります。慣れるまでは思い通りにいかなかったり、迷ったりすると思いますが、1時間もさわればだいたいのやり方は理解できると思います。

4. HTMLにJavaScriptタグを追加

一通りの作業が終わったら、HTMLソースにJavascriptタグを追加してサーバーにアップします。PC上でもプレビュー機能があるのでスマートフォンでの見え方を確認できますが、やはり実機で見るのとは違います。最終的には実機で確認しましょう。

いかがでしたか?スマホ変換のイメージがつかめましたでしょうか。

まとめ

スマートフォン対応で作業負荷が高いことの1つが、やはり実機での動作検証だと思います。Shuttoは「OSがiOS4.0以上 、Android2.2以上に対応」ということなので、安心して使えますね。(もちろん実機での確認は必要ですが)

とても簡単にスマートフォン対応できるShuttoですが、そうはいってもやはりCSSの知識はあった方がベターという印象は受けました。CSSを理解していなくても作業は進められますが、ページ数が多い場合、CSSを自分で書けるか、書けないかで作業効率が大きく変わります。CSSの知識が全くない人でも変換は可能なように作られていますが、ページ数が多い・構成が複雑という場合は、やはりCSSが書けるプロに依頼した方が無難だと思います。

とはいえShuttoは今も随時、機能追加されているようなので、今後もさらに使いやすくなりそうです。上述した通り、実際の画面で操作感も試せるので、気になった方はぜひ試してみてください!

最後に1つ、Shuttoを使う上でのポイントを。

「作業に入る前にマニュアルを全部読むべし!」
電化製品を買ったとき、取扱説明書を読まずにとりあえず動かしてみる、という人は要注意です。一通り作業した後で「あれ、こんな便利な機能あったの!?」となってしまう危険性が。共通CSSやシンボル機能など、より効率的に作業するための機能がいろいろあるので、まずは基本的な使い方を把握してから作業することをおすすめします。

※この記事は2014年2月4日公開時点の情報です。掲載情報と最新情報が異なる可能性がありますのでご注意ください。

※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。ご了承ください。

あらゆる課題にワンストップで対応した実績

Strategic Communication Designing

販促・マーケティング活動をスマートフォンに最適化するための
スマートフォン対策完全マニュアル【Web編】

  • スマートフォン対策って、何から手を付ければいいかわからない
  • そもそもスマートフォン対策が必要かどうか判断がつかない

とお悩みのあなたは、いますぐダウンロード!

自社のスマートフォン対策の戦略立案や、誰でもできるスマートフォン対策の実践的な手法とポイントをまとめました。

スマートフォン対策完全マニュアル【Web編】

無料ダウンロード

PageTop