SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

新着記事一覧を見る

連載記事

MarkeZine Day(マーケジンデイ)は、マーケティング専門メディア「MarkeZine」が主催するイベントです。 「マーケティングの今を網羅する」をコンセプトに、拡張・複雑化している広告・マーケティング領域の最新情報を効率的にキャッチできる場所として企画・運営しています。

直近開催のイベントはこちら!

MarkeZine Day 2026 Spring

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1652255827456-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1652255827456-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1652255827456-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1652255827456-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1652255827456-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
企画するなら知っておけ!マーケター向けのWeb技術のキホン

レスポンシブか、それぞれUIを作るか 多様化するデバイスへの対応をWebの仕組みから考える


 Webの仕組みがわかれば、サービス開発やマーケティング施策の企画力が上がる? Webサービスを多数開発した実績を持つゆーすけべーさんに、技術が苦手なマーケターにもわかりやすく解説してもらいます。

PCだけじゃない 多様化するデバイスへの対応

 こんにちは。ゆーすけべーです! 連載企画「企画するなら知っておけ!マーケター向けのWeb技術のキホン」は今回で最終回となります。最後ということで、今、そして、これからも重要なトピックとなる「デバイス」の話をしていきたいと思います。

 というのも、iPhoneやAndroid端末が急速に普及しつつあり、従来までの「WebはPCで見る」という概念が昨今壊れつつあるからです。様々なデバイスをターゲットとしつつ、そのためにWebの作りかたはどうするべきか、考えていきましょう。

スマホへの対応 ブラウザはもちろん、アプリという方法も

 サイトの性質にもよりますが、Webが閲覧されるデバイスはPCのブラウザ経由だけではありません。iOSやAndroid OSを積んだスマートフォンデバイスのブラウザから見られるケースや、専用のモバイルアプリからサイトの機能が利用されることもあるでしょう。

 例えば、僕が開発している「ボケて(bokete)」では、以下4つの各種デバイス向けサービスを展開しています。

  • PC ブラウザ向けサイト
  • スマートフォン ブラウザ向けサイト
  • iOSアプリ
  • Androidアプリ

 興味深いのは、PCとスマホのWebを比べても、スマホのそれのアクセス比率が相対的に高くなっていることです。その要因の1つとして、コンテンツがFacebookやTwitterなどのソーシャルメディアに「シェア」されることで、モバイル端末から「今すぐ見たい!」というニーズがあることが挙げられます。例えば、移動中にスマホでSNSサイトを見る状況が増えていますが、そこに流れた来たURLをクリックして閲覧するというパターンが多いのです。

 モバイルアプリをつくってサイトの機能を使えるようにすれば、スマホに特化したユーザーインターフェース=UIでコンテンツを見せることができます。ボケてのiOSアプリをつくって最初に試用した際に、PCのブラウザでコンテンツを閲覧する経験とはまた違う面白さがありました。

ゆーすけべーさんが語る!11月19日「1年生ディレクターのためのWebサービス制作基礎講座」講座開催

Webの記事を読むのもいいけれど、リアルゆーすけべーさんに会って直接講義を受けませんか?

本講座では、実際のWebサービス制作における事例やエピソードを交えながら、ディレクターの役割と必要なスキル、そしてチームの共通言語となるWeb基礎技術について学びます。Webディレクターに成り立ての人やWebクリエイターとのやり取りがイマイチうまくいかない人にオススメです。

★☆講座「1年生ディレクターのためのWebサービス制作基礎講座」の詳細・お申し込みはこちら★☆

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
    ※プレミアム記事(有料)は除く
  • ・会員限定メルマガを受信できます
  • ・翔泳社の本が買える!
    500円分のポイントをプレゼント

メールバックナンバー

次のページ
多様化するデバイスへの対応その1:それ用のUIを用意する

この記事は参考になりましたか?

  • Facebook
  • X
  • note
企画するなら知っておけ!マーケター向けのWeb技術のキホン連載記事一覧

もっと読む

この記事の著者

和田 裕介(ワダ ユウスケ)

1981年生まれ。Webアプリケーションエンジニア。株式会社ワディット代表取締役社長。未踏ユース準スーパークリエータ。

学生時にSIGGRAPH Emerging Technologies採択。プロジェクトのリーダーを務める。大学院卒業後に父親とワディットを立ち上げ、株式会社オモロキではCTOとしてWebアプリケーション開発を担当する。小粒なWebサービスをいくつも開発してきた。

代表作はWeb音楽プレイヤーの「君のラジオ」。また...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2013/10/09 16:27 https://markezine.jp/article/detail/18067
' ); }

Special Contents

PR

' ); document.write(''); } $(window).on('load', function() { // 中身が無い広告でslotOnloadを通らない場合がある var show_ad = 0; dfp_special.map(function(ad_id) { var ad_special_flag = 0; var ad = $('#'+ad_id[0]).find('iframe').last(); var contents = ad.contents(); if (contents.find('body').length === 0 || !contents.find('body').html()) { $('#ad_special_' + ad_id[0]).remove(); $('#ad_special_' + ad_id[0]).attr('class', 'noad'); } else { show_ad++; } }); if (show_ad == 0) { $('.ad-special-wrap').hide(); } }); } else { $('.ad-special-wrap-sp').hide(); }

Job Board

PR

' ); document.write(''); } $(window).on('load', function() { // 中身が無い広告でslotOnloadを通らない場合がある var show_ad = 0; dfp_job_board.map(function(ad_id) { var ad = $('#'+ad_id[0]).find('iframe').last(); var contents = ad.contents(); if (contents.find('body').length === 0 || !contents.find('body').html()) { $('#' + ad_id[0]).remove(); //$('#' + ad_id[0]).attr('class', 'noad'); } else { show_ad++; } }); if (show_ad == 0) { $('.ad-job-board-wrap').hide(); $('.ad-job-board-wrap-sp').hide(); } }); } else { $('.ad-job-board-wrap-sp').hide(); }

おすすめ

イベント

新規会員登録無料のご案内

メールバックナンバー

アクセスランキング

  1. 1
    「生成AI時代」のその先は?アクセンチュアに聞く、AIエージェントがもたらすマーケティングの未来
  2. 2
    資生堂「クレ・ド・ポー ボーテ」グローバルECサイト構築の道のり──ブランドらしさと実運用の両立
  3. 3
    X起点の共感型動画で売上も好調!サントリーの会話を生む「反応設計」とは
  4. 4
    CVR286%を実現!認知で終わらず獲得までつなげたNTTドコモ ahamoの「スマホ不安超常現象」
  5. 5
    売上計画比2倍の花王「THE ANSWER」が戦略の実行プロセスを公開 鍵は感情ニーズ×スクラム組織
  1. 6
    楽天の1億ID×AIで広告配信の「WHO」はここまで変わる!顧客の過去~未来を捉える楽天のデータ革命
  2. 7
    稼働転換率326%増!タイミーの潜在ワーカーを動かしたYahoo!広告「動的ディスプレイ広告」の真価
  3. 8
    なぜLTVが伸びる?ファンケルとGDOの戦略に見る成功の共通点
  4. 9
    なぜDECORTÉは過去最高売上を記録? EC×OMO戦略の成功要因と体験設計フロー
  5. 10
    味の素「アミノバイタル」30周年企画 企業とファンへ「感謝」を伝えるギフト施策の舞台裏

アクセスランキング

  1. 1
    「生成AI時代」のその先は?アクセンチュアに聞く、AIエージェントがもたらすマーケティングの未来
  2. 2
    資生堂「クレ・ド・ポー ボーテ」グローバルECサイト構築の道のり──ブランドらしさと実運用の両立
  3. 3
    X起点の共感型動画で売上も好調!サントリーの会話を生む「反応設計」とは
  4. 4
    CVR286%を実現!認知で終わらず獲得までつなげたNTTドコモ ahamoの「スマホ不安超常現象」
  5. 5
    売上計画比2倍の花王「THE ANSWER」が戦略の実行プロセスを公開 鍵は感情ニーズ×スクラム組織
  6. 6
    楽天の1億ID×AIで広告配信の「WHO」はここまで変わる!顧客の過去~未来を捉える楽天のデータ革命
  7. 7
    稼働転換率326%増!タイミーの潜在ワーカーを動かしたYahoo!広告「動的ディスプレイ広告」の真価
  8. 8
    なぜLTVが伸びる?ファンケルとGDOの戦略に見る成功の共通点
  9. 9
    なぜDECORTÉは過去最高売上を記録? EC×OMO戦略の成功要因と体験設計フロー
  10. 10
    味の素「アミノバイタル」30周年企画 企業とファンへ「感謝」を伝えるギフト施策の舞台裏
  1. 1
    マーケティング戦略は「現状分析」が8割。リクルート時代の“しくじり”で学んだ、戦略を考える5ステップ
  2. 2
    常識を覆す。画面占有率50%超でも嫌われない『High Impact広告』のカラクリと成果
  3. 3
    DMのCV率が20%向上!再春館製薬所がGROWTH VERSEと挑む、顧客起点のAI活用
  4. 4
    【広告意思決定論】芹澤連が説く「広告にできること/できないこと」
  5. 5
    リクルートから3畳半の生活。逆境を越え、Nateeの代表取締役CEOになった大江祐介さんのキャリア
  6. 6
    資生堂「クレ・ド・ポー ボーテ」グローバルECサイト構築の道のり──ブランドらしさと実運用の両立
  7. 7
    X起点の共感型動画で売上も好調!サントリーの会話を生む「反応設計」とは
  8. 8
    なぜDECORTÉは過去最高売上を記録? EC×OMO戦略の成功要因と体験設計フロー
  9. 9
    広告が“効かなくなる日”が来る前に──CVR200%向上を実現した次の一手「タレントの素材活用」とは
  10. 10
    稼働転換率326%増!タイミーの潜在ワーカーを動かしたYahoo!広告「動的ディスプレイ広告」の真価