PCページのスマホ変換サービスshuttoのちょっと便利な機能(1)

PCページのスマートフォンページ変換サービスshutto には便利な細かいテクニックが色々あります。
そのドラッグ&ドロップの操作性があまりにも目立ってしまうせいか、あまり細かいところの機能までは理解してもらいにくいところがあるのかもしれませんが、ここで紹介するようないくつかのテクニックを覚えてるだけでも、PCページからスマートフォン用のページを作るにも、表現力も変わってきますし、変換効率も随分と違うものになるかと思います。その一部をいくつか紹介してみたいと思います。

ちなみに、shuttoがどういうものかというのは、こちらのエントリー(PCサイトを簡単にスマホサイトに変換できる「shutto」 | papativa.jp)を見て頂けると幸いです。

■電話番号、メールアドレスのリンクを設定
スマートフォンサイトであれば、ガラケーと同じくページからダイレクトに電話をしてもらう/電話ができるというのは、機能としては必須でしょう。飲食店や美容院などのサイトなどでは重宝されるのではないかと思うちょっとした機能がこれです。
右側に表示されているのが、弊社の別サービス「さぶみっと!携帯メール配信」のサイトのトップページです。
この右上にお問い合わせ電話番号の画像があります。
これと同じものをスマートフォンページにも設定し、且つ、スマートフォンではこの画像をクリックした場合に直接電話ができるようにします。



手順はいたって簡単です。
(1)電話番号を設定したい画像をドラッグ&ドロップ。
(2)その画像にリンク設定。URLのところに「tel:」と書いて、
そのまま電話番号を書けばOK。(電話番号は、ハイフンが入っててもなくても大丈夫です)
同じように、URLに「mailto:」と書いて、メールアドレスを記載すれば、メールリンクになります。

■繰り返し要素の簡単設定
ページ内で同じ要素の繰り返しがある場合です。
会社ページなどによくある新着情報やニュース、トピックスなどの見出しを変換する時に大変便利な方法です。

下の動画で変換しようとしてる「インフォメーション」のエリアですが、これは、<ul><li>の要素で繰り返されています。こういうものであればshutto側でも容易に変換設定ができます。



繰り返したい要素を持ってきて、右クリックで「繰り返し」から、繰り返したい要素を選べばOKです。

■繰り返し要素の応用/画像の周り込み設定
HTMLの構造上、同じ要素で繰り返されてるものであれば、これはどんなものでも使えるので例えば、下記の動画のような、メニューの一括変換のようなものも可能です。
また、shuttoでは、このような繰り返し要素の何番目から何番目までを表示というように、スマートフォン側で表示させる場合の個数や範囲に制限をかけることもできます。また、この動画の中でやってるますが、ちゃんと「画像の周り込み」などの設定もできます。これもうまく使うと表現の幅もぐっと広がると思います。




■HTML構造保持とCSS設定
これも覚えるとかなり便利な機能です。WEB制作に従事している方、HTMLやCSSが多少解る人であれば、この機能をうまく使えば、スマートフォンページでも凝った表現も可能になります。簡単に言ってしまえば、PCページの構造をそのままスマートフォン側でも保持した形で変換できます。そこでさらにCSS設定の機能を使えば、各要素にスマートフォン用の表現を設定できます。この動画の例では、弊社のこのページ([サイト構築実績]アールシーコア様 BESS 拠点サイトフルリニューアル | 株式会社イー・エージェンシーの実績紹介)をスマートフォンページに変換しています。



そのまま要素をドラッグ&ドロップで持ってきただけでは、素のテキストだけになってしまうので、「構造を保持する」にチェックを入れることで、PCと同じHTML変換機能構造がスマートフォンページにも反映されます。
この状態で、HTMLの要素に対してCSSの設定を行うことで見た目を調整していくのです。

■TwitterやFacebookのボタンの変換
shuttoでは、twitterのtweetボタンや、Facebookのいいねボタンに対応してます。
変換はいたって簡単です。shutto画面で見ると、PCページでボタンで表示されている部分がテキストで表示されています。この要素をそのままスマホ画面にドラッグ&ドロップするだけです。



なお、twitterやfacebookから提供されてるコードで実装されてるボタンにのみ適応が可能なので、たとえば、ソーシャルメディア関連のボタンをまとめて実装できるようなスクリプトなどを使って実装されてる場合には、対応することができません。

■shut to変換パートナーの募集
あと、現状、shuttoでの変換作業をおこなって頂ける制作会社さん、パートナーを大大募集してます。
簡単スマホ変換とはうたっていますが、お客さまからは変換作業をお願いしたい、というご依頼を現時点でも多数いただいております。残念ながら弊社では現状、変換作業自体はお受けできないので、ご協力頂けるパートナーさんをご紹介させていただきたいと考えてます。変換作業費などについては、パートナーさん側で自由に設定頂いて構いません。
shuttoをうまく使いこなして、効率良くスマートフォンサイトの構築をおこなって頂き、パートナーさんのビジネスにしていただきたいと思ってます。詳しくはこちらからよろしくお願いします。

簡単スマホ変換ツール「shutto」変換パートナー募集 | さぶみっと!JAPAN

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です