【PCサイトを簡単にスマホ対応サイトに変換できるサービス「shutto」】 ドラッグ&ドロップに対応してるので感覚的にできる

どうも、東京都北区十条の今村です。

ここ最近のスマホ市場の急激な拡大で「自分のサイトもスマホ対応したいな・・・」

なんてお思いの方もいらっしゃるのではないでしょうか。

そんな方に、便利なサービスがあります。

簡単にPCサイトをスマホサイトに変換してくれます。

感覚でできるのでオススメです!

1.「shutto」にアクセスしましょう

そのサービスは「shutto」と呼びます。「shutto」のサイトはこちらです。

ドラッグ&ドロップだけの簡単手順であなたのサイトをスマートフォン対応サイトに変換!「shutto」

試しに私のブログでやってみますね。

入力欄に「https://www.imamura.biz/blog/」を入力し「デモ変換スタート」を押します。

【変換したいPCサイトのURLを入力】

こんな画面になります。

【操作画面】

ページ右がPCで見たときのサイトですね。

で、左がスマホで見たときのサイトですが、空欄ですよね。

ここに好きなように右のサイトのパーツをドラッグ&ドロップすることによってスマホ用サイトが出来上がります。

たとえば、ロゴマークをドラッグ&ドロップしたらこうなります。

【ロゴマークをドラッグ&ドロップ】

ドラッグ&ドロップなんで、感覚的にできます。

加えて、画像・文字の大きさや文字の装飾(色、太字、斜線、影など)や背景色の指定もできます。

ちょっとお試しで作りました。

【お試しで作りました】

タブやセルの要素も追加できます。工夫次第ですね。

多分もっとかっこよく出来ると思います。これを作るのにだいたい10分くらい。

それでは、これを保存しましょう。

【保存してプレビュー画面へ移動しましょう】 

保存したら、右上にプレビューへのリンクがされていますので、クリックしましょう。

と、こんな感じで画面が切り替わります。

【プレビュー画面:QRコードも発行されている】 

ちなみにQRコードを読み取れば、実際のスマホで表示確認ができます。

では、これでよし、としてホームに行きましょう。

【管理画面】

私はユーザ登録しました。URLの追加ができると言うことで、複数のサイトorページも作成できるということですね!

青枠にコードがあります。これをお持ちのPCサイトのヘッダー部に貼り付けてください。

作成されたページ全てに対してこのコードを貼り付けることでスマホ対応になります。

これで完了です。

2.操作は感覚的で簡単でしたね

WEBサイトをお持ちの方、今や結構いらっしゃるでしょう。

ただし、お持ちのWEBサイトがモバイル対応、しかもスマホ対応されてるサイトは

いったいどれくらいあるでしょうかね。

この「shutto」を利用すれば、スマホ対応サイトが簡単に作れます。

3.「shutto」は少しのWEB知識で設置ができるのですが・・・

「shutto」は便利です。

しかし、思い通りに使いこなすには少しのWEB知識で良いのですが、

できない方もいらっしゃると思います。

おそらく、

「shutto」で生成されたjavascriptのソースコードをお持ちのPCサイトに貼り付けること

です。

4.「shutto」の動的コンテンツとの連動について

また、「shutto」では機能上、出来ないこともあります。

それはPCサイトの更新と連動する部分です。

具体的には、

ブログの新着記事などのシステム上自動で追加されるコンテンツなど

です。こういった「自動で追加されるコンテンツ」の場合は、いくら「shutto」を利用するにしてもこまめに更新が必要になります。

それは少し面倒ですね。

動的コンテンツも対応できるようです。

参考URL: スマホ変換shuttoで動的サイトは、対応できるのか?

すみません、お詫び・訂正します。

5.「shutto」はスマホ対応したいページ数の制作とコードを貼り付ける必要がある場合もある

例えばwordpressのようなCMSを利用しているのであれば、

header.phpと呼ばれるファイルにソースコードを1つ書けば全ページ対応できます。

ですが先ほども触れましたが、動的コンテンツとの連動はされていないので、

対応したいページ分作る必要がありますね。

CMSを利用していない静的ページの場合は、スマホ対応させたい全てのページ数分の制作とコードの貼り付けが必要ですね。

要するに、今お持ちのPCサイトの環境次第ということだと思います。

では、例としてCMSではない静的ページが10ページあったとしたら。

10ページ分の制作と10ページ分のコードの貼り付けが必要ですね。

100ページなら、100ページ分ですね。

「shutto」で100ページ分作りますか?

うーん・・・検討する必要があると思います。

これを踏まえた上で、この「shutto」を別角度で見ました。

6.例えば、スマホサイトをイメージする為に「shutto」を利用する

もし、このような方がいらっしゃったら。

  • WEBの知識は「ほぼ」ない。
  • PCサイトは業者に作ってもらった。
  • スマホサイトに興味がある。今のPCサイトをスマホサイトに対応させたい。
  • でも、自分のサイトってスマホ対応されたらどうなるんだろう??

そういった方には「shutto」を使って、

「トップページ1ページのみプレビューまでは自力で作る」ことをオススメします。

好き勝手自分のイメージで作れるんですからね。

業者に頼んだPCサイトだって、納品まで何度打ち合わせしたのかはわかりませんが

妥協していた部分は必ずある、と思います。

で、作ってみたら次はこんな感情をお持ちになると思います。

  • 自分で設置できるんなら業者に頼む必要ないよね。
  • ページ分作ればいいんでしょ?

と。

はい、気持ちわかります。

それではここで、今お持ちのPCサイトのどのページをスマホ対応させるかをちゃんと計算しましょう。

・・・・計算するのが面倒な方へ。

じゃあ、10ページだとしましょう。これなら「shutto」を使って自力で出来そうですかね。

「自力で勉強してPCサイトに導入する」場合は可能性の1つとしてですが、注意が必要ですよ。

PCサイトのhtmlページにjavascriptのコードを貼り付けることになるので、

万が一この作業でPCサイトのデザインが崩れて自力修復が困難になった場合は、

PCサイトを制作した業者に修繕費として料金をとられる場合がありますね。

なので、自信のある方でしたら、ページ数分作って自力で設置しましょう。

というわけで、次のケースを。

もっと増やして100ページあったとしましょう。

・・・私だったら業者に頼みますね。作る時間と労力を考えると。

ですので、

「shutto」でとりあえず1ページプレビューを作ったうえで、自力設置か業者に依頼するかを検討する。

つまり、


「自力で作るにしても、業者に依頼するにしても自分なりのイメージがあったらいい」

 

と私は思うのです。

いかがでしょうか。「shutto」を利用すれば、

スマホサイトのイメージが何となくつかめるのではないでしょうか。

私なら、こう使うと思います。

「今のPCサイトをスマホ対応したいんですよ。

で、「shutto」を使ってトップページを作ったらこんなイメージなんです。

自力でもできそうなんですが、結構大変かもしれなくて。もしこんなイメージで作ってもらうとしたら、いくらくらいですか?」

なんて、業者に依頼するかもです。

で、業者からの見積金額と自力での時間効率やWEB知識などを検討して、どちらか判断する

ってのが私は良いと思うのですが、いかがでしょうか。

7.「shutto」は制作者側の立場でも利用価値はある

私のような制作者の立場からすれば、

  • 「shutto」を利用することで、お客さんに仕上がりイメージサンプルとして提案するのに使える
  • WEB閲覧環境さえあれば、お客さんとの打ち合わせの場でもレイアウト変更などがすぐできる
  • つまり、お客さんの要望のスマホサイトのイメージがつかみやすい

と思いました。

それに、これは既存のPCサイトを素材として作成しますので、

この機会に、「そういえばPCサイトもリニューアルしたいんだよな・・・」

といったような思わぬ依頼をいただくかもしれませんね。

8.以上、今村的まとめでした

と、いうわけでPCサイトを簡単にスマホ対応サイトに変換できるサービス

ドラッグ&ドロップだけの簡単手順であなたのサイトをスマートフォン対応サイトに変換!「shutto」

のご紹介でした。

便利なサービスですね!

著者:bouya Imamura