Skip to content
··1分で読めます

モバイルの世界への準備はできていますか?あなたの選択肢は?

スマートフォンはブランドに顧客との親密なチャンネルを提供しますが、あなたのサイトは準備ができていますか?モバイルサイト、ネイティブアプリ、レスポンシブデザインの選択肢を探ります。

この記事は2013年に書かれたものです。一部の情報が変更されている可能性があります。

何百万人ものスマートフォンユーザーが毎日携帯を使用している中、それを活用するために何ができるのでしょうか?ますます多くの消費者にとって、市場、所得水準、人口統計を超えて、携帯電話は彼らの心に最も近いデバイスであり通信チャンネルです。定義上親密個人的であり、どこにでも持ち歩き、一日中使用し、個人的な写真の撮影・保存、音楽のダウンロード、壁紙の追加、ショートカットの作成、そしてますますアプリや機能の選択を通じてカスタマイズされています。」TNS Global Key Insights Mobile Lifeより。このため、スマートフォンはブランドが顧客と親密で1対1の関係を築く大きな機会を表しています。オウンドメディアの観点からは、以下のような選択肢があります:

  • モバイルサイトの開発
  • ネイティブモバイルアプリ
  • Facebook、Twitter、Instagramなどの既存ソーシャルネットワークの活用

モバイルサイトでは、フォトアルバム、カメラ、ビデオ、連絡先などへのアクセスといった異なる機能を活用することができません。エクスペリエンスはネイティブモバイルアプリほどリッチ/インタラクティブにはならないでしょう。しかし良い点は、モバイルサイトはプラットフォームに依存しない、つまりiOS、Android、Windowsのいずれでも動作できることです。ネイティブアプリについては、リッチなエクスペリエンス、美しいグラフィックス、3D画像などの本当に複雑なアプリを構築できます。しかし、iOS、Android、Windows Mobileまたはその他のオペレーティングシステム用に、同じアプリの異なるバージョンを作成する必要がある可能性が高いことを知っておくことが非常に重要です。

現在のサイトはモバイルフレンドリーですか?

この質問に答えるには、スマートフォンで自分のサイトを訪問してみるか、モバイルフォンシミュレーターを使用できます(「モバイルでサイトはどう見えるか?」でオンライン検索すると、多くの無料ツールが見つかります)。サイトがFlashで作られている場合、iPhone(またはiPad、iPod Touchなどの他のiOSデバイス)では何も表示できません。iOSはFlashをサポートしていないからです。一部のツールはモバイルサイトを最適化するヒントを提供してくれます。質問の例:

  • 「壊れた画像や欠落しているコンテンツがありますか?
  • ズームや左右のスクロールなしでテキストを読めますか?
  • リンクやボタンを親指でクリックできますか?
  • ビデオ、ゲーム、その他のアニメーションは表示されますか?
  • ビジュアルとトーンは他のマーケティング資料と一貫していますか?」

これらの質問に答え、モバイルサイトの読み込み時間を知ることで、モバイルサイトのパフォーマンスとどの分野を改善すべきかの大まかなアイデアを得ることができます。上記のリストは非常に基本的で、サイトがモバイルフレンドリーかどうかを知るためにチェックすべき他の多くのことがあります。

モバイルフレンドリーサイト

ベトナムでモバイルサイトを開発する際、技術的な観点からいくつかの選択肢があります:

レスポンシブWebデザイン

レスポンシブWebデザイン(RWDまたはレスポンシブデザイン)は比較的新しいため、デザイナーや開発者がこのコンセプトをマスターし、美しく実現するにはまだ長い道のりがあります。レスポンシブデザインのウェブサイトの例は多くあります。例えばhttp://mashable.comhttp://www.bostonglobe.com/、または私自身のブログもレスポンシブデザインをサポートするテーマを使用しています。ベトナムでレスポンシブデザインを実装しているサイトにはあまり出会っていません。「[Think Insights with Google](http://www.google.com/think/articles/business-perspective.html)」から引用すると、「_レスポンシブWebデザイン(RWD)を使えば、複数のウェブサイトを作成せずに、異なる画面サイズ間でサイトエクスペリエンスを最適化できます。フレキシブルなテンプレート、CSSメディアクエリ、JavaScriptイベントを使用することで、レスポンシブWebデザインはデバイスのビューポートサイズに応じて、画像、テンプレートレイアウト、コンテンツの表示を調整できます。タッチデバイスで認識されるドラッグ、スワイプ、その他のユーザージェスチャーなどの新しいデバイス機能も活用できます。これらのCSSとJavaScriptのテクニックはすべて、すべてのデバイスに配信される単一のHTMLコンテンツファイルに重ねることができます。_」レスポンシブWebデザインとは何かがわからない場合のために、Mashableからの以下の例をご覧ください:[![mashable desktop version](https://pttzjcsdqky8719a.public.blob.vercel-storage.com/images/2013/10/mashable-desktop-version-300x185.webp)](https://pttzjcsdqky8719a.public.blob.vercel-storage.com/images/2013/10/mashable-desktop-version.webp) これはデスクトップの通常の画面サイズです(Macbook Proを使用しており、解像度は「最適スケーリング」)。右側の記事タイトル「Google Glass Photographer Makes Picture Taking Awkward」に注目してください。ハイライトされた部分を見ると、記事のタイトルが2行で、その下にいくつかの説明があります。次にiPadの画面サイズの下の写真をご覧ください。これを再現したい場合は、ブラウザウィンドウのサイズを縮小するだけです。mashable ipad screen size 画面サイズが小さくなったため、記事のタイトルは4行になり、記事の説明のスペースがなくなりました。しかしご覧の通り、レイアウトは_レスポンシブ_で、ビューは最適なままです。レイアウトは壊れず、コンテンツを簡単に読むことができます。最後の例は、同じMashableサイトのスマートフォン画面サイズです。ご覧の通り、レイアウトは小さな画面サイズに対応するために完全に変わります。ホームページにはNewsセクションのみ表示されます。メインナビゲーションは左上のボタンに縮小されます。他のセクションに移動するには、そのボタンをクリックする必要があります。mashable iphone screen size

モバイルサイト:同一URLで異なるHTMLを動的に配信

顧客がウェブサイトを訪問すると、ウェブサーバーがどのデバイスを使用しているかを検出し、同じURLでカスタムページ(HTML+CSS)を提示することが可能です。これらのカスタムページは、携帯電話、タブレット、デスクトップコンピューター、さらにはスマートTVなど、あらゆるデバイス向けに設計できます。ユーザーのデバイスを検出してコンテンツを変更するには、デバイスごとに維持する必要があるカスタマイズ(例:スタイルシート)が必要です。

別のモバイルURL

デバイスタイプに基づいてユーザーエクスペリエンスをカスタマイズするもう一つの選択肢は、デスクトップサイトとは独立した、モバイルトラフィック用の別サイトを構築することです。ブラウザが訪問者がモバイルデバイスを使用しているかを検出し、モバイル最適化版サイト(例:m.vnexpress.net)にリダイレクトします。専用のモバイルサイトを使えば、モバイルユーザー向けにサイトを特化でき、独立して構築・ホスティングされることが多いです。このソリューションはベトナムでかなり一般的に使用されています。ベトナムの最大級のニュースポータルの中には、VnExpress、Vietnamnet(2013年)など、このタイプの実装を使用しているものがあります。vnexpress mobile site

モバイルフレンドリーサイトか、ネイティブモバイルアプリか?

予算の観点からは、最も低予算の選択肢はモバイルURL分離型サイトです。レスポンシブWebデザインはモバイルサイトと比較して一般的にやや高額です。そしてもちろん、レスポンシブデザインのモバイルサイト構築は、ネイティブアプリに比べればはるかに安価です。モバイルサイトvsネイティブアプリの正確な価格差については、状況によりますが、ネイティブアプリの方が3〜20倍高額になると推定します。構築コストが低いことに加えて、モバイルサイトにはリーチ、クロスプラットフォーム・ブラウザ間の互換性という利点があります。ユーザーはGoogleで検索するだけでモバイルサイトを簡単に見つけられます。レスポンシブWebデザインサイトは、モバイルサイトの上記の利点をすべて継承し、さらにカスタムレイアウトによりデバイス間でより良いユーザーエクスペリエンスを提供します。レスポンシブWebデザイン(RWD)サイトを更新したい場合は、CMSを通じてかなり簡単に行えます。Apple AppStoreのようなサードパーティの承認なしに、変更はユーザーのブラウザ上で即座に反映されます。「通常の」モバイルサイトとRWDサイトの両方には、非常に大きな欠点があります:

  • 多くがインターネット接続なしでは機能しません(私の限られた理解では、オフラインモードを提供するWeb Appもいくつかあります)
  • ユーザーの携帯本体の個人データカメラカレンダー写真ストリーム、加速度センサーなどにアクセスできません(将来変わるかもしれません)
  • 一般的に、複雑なアニメーション、ゲーム、レポーティング、計算などが簡単に実装できないため、ネイティブアプリほどリッチなユーザーエクスペリエンスを提供しません。
  • プッシュ機能:モバイルサイト(Webアプリ)をバックグラウンドで実行して通知を送信したい場合、現時点では不可能です
  • マネタイゼーションの容易さ:Google PlayとApple App Storeまたはその他のマーケットプレイスにより、ネイティブアプリのマーケティングと有料ダウンロードやアプリ内課金に応じる大規模なオーディエンスへのリーチがはるかに容易です。モバイルサイトの場合、サブスクリプションモデルがマネタイゼーションの数少ない選択肢の一つです。

ネイティブアプリの大きな欠点は、最高のユーザーエクスペリエンスを提供するために、各プラットフォーム向けにアプリをカスタマイズ/構築する必要があることです。つまり、iOS用のバージョンとAndroid用のバージョンが必要です。これは開発コストが高くなることを意味します。メンテナンスコストも高くなります。モバイルサイトの欠点は当然ネイティブアプリの利点です。しかし、ネイティブアプリもソーシャルメディアアセットやウェブサイトと同様に、構築したら、ユーザーに宣伝し、その後もメンテナンスにお金をかける必要があることに注意してください。なので、2ヶ月のキャンペーンのためだけにアプリを開発して、その後サポートを停止することはお勧めしません。

ネイティブアプリ開発フロー

ネイティブモバイルアプリを構築したい場合、一般的なフローは以下の通りです:

  • アイデア発想:アプリのコンセプト、主要な機能を含みます。通常は、キャンペーンバースト(1-2ヶ月)だけでなく、アプリの長期的な利益(ユーザーとブランドの両方にとって)を考える方が良いでしょう。アプリの構築とダウンロード促進のコストは小さくないからです。
  • ビジネス分析:要件を分析し、各オペレーティングシステムに適した技術ソリューション、基盤フレームワークを提案します。
  • ワイヤーフレームデザイン:ウェブサイト作成と同様に、ワイヤーフレームはユーザーインターフェースの基盤であるため、アプリにとって非常に重要です。ワイヤーフレームに論理的な問題や欠落があれば、ユーザーエクスペリエンスが深刻に影響を受けます。

画面フローはアニメーションがどのように機能するかを説明します。画面フローにより、クライアントはアプリの使い方、ボタンがタッチされたときに何が起こるかを「視覚化」できます。

  • データベースCMSAPI:この段階は要件に従ってデータベースを設計し、CMSとAPIをコーディングすることです。CMSとAPIはphp、Java、.Netなどでコーディングできます。「通常の」Web制作チームがこの部分を担当でき、要求に従ってAPIを作成するだけです。
  • アプリのフロントエンドをデータベース、CMS、APIと接続するプログラミング:この段階ではApple/Android SDKを使用して、iOS用のObjective Cなどの言語でプログラミングする必要があります。

次に考えるべき質問は、ネイティブアプリをAndroid、iOS、Windowsのどれで開発すべきかということです。

AndroidかiOSかWindowsか?

考慮すべき主な点は、ターゲットオーディエンス間でのiOSとAndroidの市場シェアです。Windowsは明らかに一般的なプラットフォームではないので、選択肢はAndroidかiOSになります。予算があれば両方やることをお勧めします。公式ストアでの支払いによるアプリのマネタイゼーションを考えている場合は、iOSが最適です。Apple Appを使用するユーザーは、Androidのクラック版を見つけるのがはるかに容易であるため、Androidよりも何かに支払う可能性がはるかに高いです。monthly store revenue ios android and windows App Annieから、iOS Storeの収益が月間ベースでGoogle Playの約4倍であることがわかります。1つのプラットフォームを選ぶ必要がある場合、ターゲットオーディエンスとそのスマートフォンの選択次第です。マーケターとして、ユーザーについていき、魚のいるところで釣りをする必要があります。最後に、上記はVietnam Digital Marketingについての最新の書籍の「モバイルアセット」章からの抜粋です。電子書籍を購入するには、このリンクをご利用ください。

続きを読む

私の歩み
つながる
言語
設定