第17回 日 本 テ レ ワ
ー
ク 学 会 研 究 発 表 大 会 予 稿 集 論 文 部 門レ ス
ポ
ン
シ
ブウ
ェブ
の
新
し
い
デザ
イ
ン
の
提 案
Proposal
of
a
new
design
fbr
Responsive
web
尚
美学園
大学
斎藤
忍
Shobi
University
Shinobu
SAITO
要旨 ：ス マ
ー
トフ ォン （モ バ イル ）用 とパ ソコ ン （デス ク トッ プ ） 用の両 方 に 最 適化され た一
つ のHTML
フ ァイル に よ り各ペー
ジが構成 され たレ スポン シブウェ ブが多くのホー
ムペー
ジに 使 わ れ 始 めてい る。し か し 現 状の レ ス ポン シブウェ ブに は
、
構 成 が 複 雑 （個 人で制 作 す る た め に は 高 度 な専門 知 識 が 必 要 と な り、 ア ウ トソー
シ ン グ す る た め に は 高 額な制 作 費が 必要 ）、 モ バ イル 用での 視 読 性が劣る、
モ バ イル とデス ク トップで の 共 有 化が不 完 全、
等の 問 題があ り、 個人 事 業 主のテ レ ワー
カー
に とっ て 「ホー
ム ペー
ジ」は 仕事の 受発 注やス キル を告知 す る上で 重 要 なツー
ル で ある に もか か わ ら ずス マー
トフ ォ ン用ホー
ム ペー
ジ その もの が普及 はし てい ない。
これ らの 問 題の 解 決を 目指した レ ス ポン シブ ウェ ブの新しい デ ザインを 提案す る。
Abstract：Responsive Web has begun to be used in a number ofhomepage that each
page
has been constuctedby
both
optimized one HTMLfile
in for the desktop and mobile．
Butin
Responsive web of statUsquo，
configuration complexity （requires highly specialized owledge
in
order toproduce
anindividual
， requirescxpensive production costs
in
order to outsourcing ），
vision readability
f
（）r mobile is inferior，
sharing ofmobile and
desktop
areincomplete
，
etc．
of theproblem，
’
「
Homepage「
1
for
teleworkers
of a soleproprietorship
is
notpopular
tobe
animportant
tooldespite
Homepage
itself
for
the smart phone in order to noticethe
ordering and skills ofwork．
this
paper
proposes
a new design ofResponsive web thataims
to solve aboveproblems．
キ
ー
ワー
ド：レ ス ポン シ ブ ウェ ブ、
ホー
ムペー
ジ、
HTML、
モ バ イルKeyword
：Responsive
web ， website ， HTML， mobile
1．
スマー
トフォン 用ホー
ムペー
ジの実情
2013
年後
半か ら国 内の多
くのホー
ムペー
ジで のア クセ ス ロ グの モ バ イル 用 がデス ク トップ用 を上 回っ た と言 わ れてい る。
し か し多くの ホー
ム ペー
ジ は未 だにモ バ イル 用に対 応してい ない。2014
年11
月よ りモ バ イル でのー
ムペー
ジ に は 「ス マ ホ対 応」 の文 字が表示 され る よう
になっ た。
「テ レワー
ク」とい うキー
ワー
ドでモ バ イル で の、
上位100
件の うち「ス マ ホ対 応」は38
件 （2015
年2
月21
日現 在 ）で、
その 大 半が大手 企業、
中 央 省 庁、
新
聞 社、中
小企業
や個
人事業
主のホー
ムペー
ジ は 含 ま れていなかっ た 。ス マ
ー
トフ ォ ン 用 ホー
ム ペー
ジへ の対 応の遅 れは業 態、
業 種 を 問 わ ず 中小企業
や個
人事業
主に 共通し てい る問 題であり、
上記〜
がその大 き な要 因であ るこ とが推測 でき る。2
．
現在
の レスポ
ンシブ ウェ ブの問 題 点2
．
1
構 成が複 雑HTML
はハ イパー
テ キス ト を利 用 し た相互間 文 書 参照の フ レー
ム ワー
ク で あ り、
プ レー
ンテ キス トの 文書を 要素で括 っ て意
味付 けする こ とで、
文書 の 特 定 要 素 に URI （Uniform
Resource
Identifier
）
を 用い た他文書へ の リン ク を記 載し て お けばユー
ザエー
ジェ ン トはそ れ を解 釈 して 指 定 され た他文書
を表示 さ せ るこ と が可 能 とな る もので あ る。 プロ グ ラム言 語の中で も比較 的 難 易 度が低く、HTML1，
0 （
1990
年 代 初 期 ）ではHTML
を 活 用 するこ とで一
般の 人 が気 軽に実用的 なホー
ム ペー
ジを 制 作 するこ とができ た。
し か しHTML5．0
と な りレス ポ ン シブ ウェ ブ が 登 場 する と、HTML
の コーデ
ィ ングは 難 解 な css やJavaScript
、
PHP
など との連携
に よ り高度
で複
雑 にな り、
ホー
ムペー
ジの制 作に は専 門 的 な 知 識と ス キルが必 要 と されるよ うになり、一
般の 人 が気 軽に作ること はで き な くなっ てきてい る，第17回日本テレ ワ
ー
ク学 会 研 究 発 表 大 会 予稿 集 論文部 門 ま た、
近 年で はHTML
を 直 接入力し て ホー
ムペー
ジ を 作 る 人 は少 な くな り、 CMS
（content management system ） や ウェ ブ上での ホー
ム ペー
ジ作 成 サー
ビス を 利 用 する場 合が一
般 的になっ て い る。CMS
に よる レス ポ ン シ ブ ウェ ブ で は ＜head
＞か ら〈／head
＞まで の間が100
行 を 超 えるも の も一
般 的になっ てい る。
2．2
モ バ イル用 で の視読性
が劣
るレ ス ポン シ ブ ウェ ブの
多
く はデス ク トッ プ 用 の ペー
ジを 制作 し た後にモ バ イル 用 に変換
する た め、 コ ンテ ン ツ はデス ク トッ プ 用 を その ま ま 表 示 し てい る。
画 面 サ イ ズ を紙に例え る とデス ク ト ッ プ用 がA4
サ イ ズ相 当で、
モ バ イル 用 は名刺 サ イ ズ相 当とい うこと になる。 モ バイル 用 で も 画 面 をス クロー
ル して い くことでA4
サ イ ズ相
当の テ キス ト を 表 示 す ること が 可能であ る が、
同じ文字
数の テ キス トをモ バ イル用で ス ク ロー
ル しなが ら読 むことは、
視 覚 的に も精 神 的に もス トレ ス を 感 じ、
視 読 性に劣る とい うこ とに なる。
A4
サ イズに書かれたテキス トを 名 刺 サ イズに 納め る た め に は 「テ キス ト を 短 くする た めの推 敲」 「省 略された単 語の多 用」 「命 令 形の多 用」など に よ りテ キス トの簡 略 化 を行 う必 要がある。
逆に モ バ イ ル 用に簡 略 化 された テ キス トをそのま ま デ ス ク トッ プ 用 で表示 した とし て も 問題 が ない 場 合がほ と ん どで ある。
従っ て 最 初にモ バ イル 用の テ キス トを作っ て か ら デス ク トッ プ用に展 開 することが望 ま し い が、
現 状の レス ポ ン シブ ウェ ブの多 くは、
その作 成 作 業 を デス ク トップ 上で行 うため に、
自然 とデ ス ク トップを優 先 した構 成になっ て い る。
2
．
3
モバ イル とデ
ス ク トッ プでの 共有
化 現 在の レ ス ポン シ ブ ウェ ブ の 多 くはモ バ イル とデス ク トッ プ での 共有
化につ い て は ま だ 不完 全で あ る とい っ て良
い 。レ ス ポン シ ブ ウェ ブの
多
く は横
長の デス ク ト ッ プ 用 画 面を縦 長の モ バ イル 用 画 面 に 強制的 に 表 示 させ てい る。 ま たデス ク トッ プ用 画 面 で はブ ラ ウザの横
幅の 可変に応 じ てボタン の位
置を オー
バー
フ ロー
させ て 配置を変 化 させ て 画 面 を有
効に使っ てい る もの も あ る。利用
者
側か ら はデス ク トッ プ用 とモ バ イル 用 が同じペー
ジを 共 有し て い るこ とが 理解 され ず、
利 用 者がそ れ ぞ れ 異 なっ たデバイス （デス ク トッ プ用とモバ イル用 ）や 異 なっ た環 境、
異 なっ た設 定で 見て いた場 合に コ ミュ ニ ケー
シ ョ ン に 不 具 合を 生 じ る （例え ば2
段 目に一
番 右のボ タンは状 況に よっ て異 な る ）こ とも あ る。
また電 話で の コ ミュ ニ ケー
シ ョ ン の場 合、
通 話 中に モ バ イル用のペー
ジを 確認 すること がで き ないため、
デス ク トップ 用 を 見 な が らの会 話で は 通 話 内 容が噛み合 わ ない場 合 も ある。
● eく
コ脚 ▼
勵聯
F＃
鄲
kU ノラ
フ
”’
ズ
ニ
」
−
x曽
．
r」
で
2TtSlC．
こ
t「
玄
♂
．
．
兀
尸
L「
7．
．
，
ヒ
幽
一
炉
rハ
」
了
一
．
7广
ン
「
P：
そ
r．
；
／
．
ltl亘一
’
Xs，
毘「
’
る
・
ハ
”
7V一
匸
・
〆
」
，
ヒ
ュ
ヒ
y一
ギ
ス
ー
一
ト
．
？
，
」
P：
そ
r，
7お
蟷
幹
fて
t興
な
る
〒
「
’
コ
で
見
匸
ご
．
、
て
｛
「
さ
．
‘
r乙
で
t’
tt二
．
Lrl
．
；
告
唱
．
ま
t O‘
−・
こ
t：
・
S・
Eiパ・
〒
／／
レ
ヒ
て
、
肪．
t
＋
trrt“・
．
“な
．
ir．
，
λ
引．
ア．
．
・
一
尸
一
t’
・
マ
ー
・
7雷
〆
rマ
t‘
trモ
Lr」
亭
塾「
【
「
．
「
’
T」
尸
tt’
ヒ
・
一
9．
tt
’
了
冒
r尹
P’
t，
そ
T 亭r 湛 山」
「
イ
it・
異 なう
〒
n”
〒
見了
．
’
ヒ
｝
−o一
や
1了
一
7rン
℃
尸
そrl【
鬥
五ぞ
「
〈
4 輿 」1．
「
入
で 壁、
・
ド
ベ
て匸
t5．
・
て
了
｛
1
’
ア
5L
．
「
．
ア
二
ニ
LLtt
：
メ
「
て
、
’
：
「
．
頁
±
t．
ご
．
r’
ご
：
’
．
−
厂
訟
略
1／
／
c．
二
’
尸
｛
r一
民
，
．
厂
7−thZ
マ
ー
’
，
’
な
ご
：
「
厂
’
L‘
．
「
P’
二
tt’
．
畏
二
る
．
”
zで
見
、
・
．
へ
：
：
齟
1 て丁
歌
、
詞
り
冂
．
．
な
1【
ρ
1尸
P
’
十
〈 図 1＞ デスク トップと モ バ イ ル の 400字 の見え方 o＃
・
嘱
髄症
← o 丙…”
的噂
P兀
．
鴎
π
呂
’
a＝
’
7ア
撃
薩噛 臼”
臼冑
穐
：
¢
。皇
．
．
撒 ＿ ＿＿
：：
L771
’
臼 團 睥闇
臼殉
QCO つ青 隈盒社浬 …
mOO 有 眼 鰍沓
」
且
A
●
添
｛ひ篇
♂
皐
一
ム
覆
鱒
Ω
弓
顧
旧
翠
一
丙 即 多膣
o撃咒ア
ク
セ
λ
丿
ン
ク
陶 耻 一 E．
¶
表
三x，
げ
ア■
．
Fsceboek蠶
X
”●
且黒
．』
♂
”沓
屆
嘱
脚 BIOgrEL 伽 一 E．
m翻
．
1 メ 庁レアilF
−
tebeOk 2ー
第17回日本テレワ
ー
ク学 会研究 発 表 大 会予稿 集 論 文部門3
．本提案
の具体的
内容
3
．
1
徹 底したシン プ ルなコー
ディングviewport は contenF ”
width
＝
device
−
width とは せ ず content・
・
” width＝
600
” と幅に ピ クセ ル の数 値 を 入れて 固定 （ピ クセ ル数の600
は任 意である が、
以 下600
で統一
し て説 明 する）。
以降のimg
や table な ど全て width＝
600 とするこ とで解 像 度の 数 値の 変 化によるモ バ イル での 見 え 方 を一
定にする。 ま たモ バ イル の機
種に よっ てコー
ディ ン グの 表示 結 果が若干異 なる た めnitial
−
scal と user−
scalableは敢 えて 入 れない （入 れ ない 場 合の
初
期値
はnitial
−
scale＝
1
．
O
， user−
scalable＝yes
となる）
。
HTML
で の構 造 化 タ グはheader、
aside、
article、
footer
及 びdiv
class−
rightを デス ク トップ 用 （p．
css） で は全て利 用。
モ バイル 用 （m．
css）で は nav と article の み を 利 用 し、
他 の 構 造 化タ グは全てdisplay
：none ；とし て非 表示 とする。 こ うするこ と で リダイ レ ク トは不 要となり、
リダイ レ ク トの た めのhtaccess
ま た は JavaScript 等での 記述 も 不要 となる （一
般 的にレ ス ポン シブ ウェ ブでは リダイ レ ク トは使 用 しない と定 義 され てい る が最終
的 に使 わ ざるを得 ない場 合も多
い）
。 ま た全く 同一
のHTML
フ ァイル でデス ク トップ用 とモ バイル 用 が兼
用 で き、
ア クセス数
もデス ク トップ とモ バ イル で振 り分
け られ た り リダイ レ ク トの た め だ けの ア クセス数
が加算
され るこ と も ない 。デス ク トソプ 用
（
p．
css）
では横
方向の 分 割をaside を
35
％、 article を600pix、．
right を30
％とするこ と で article は
600pix
固定の ま まブラ ウザの 幅 に 応 じては 左右の スペー
ス の 幅は割 合 が同 じままで 可 変 する
。
ま たaside、
article、．
right の そ れ ぞ れの高 さ を100
％ に し て、
aside、．
right
はposition
をfixed
とすることでブ ラ ウザの 高 さ方 向の サイ ズに追 従 す るか た ちとした。
index．
html
が約 70 行、
p．
css が約 70行、
m．
css が約35
行である。
ま た他の ペー
ジの HTML フ ァイル も サン プル ファイル ではコー
ディン グの行数が 100行 以 内に お さめ てい る。
＜ ファイ ル
ー
式＞htt’
〃con−
sma、
com ／h
！mss ！sml．
ziこ の 量で あ れ ば 決 め られ た 時 間 内 にコ
ー
ディ ン グ を1
行 ずつ 解説 し な が ら初 心 者 （大 学 生 な どにも） に 指 導 し、 実 際 に サンプルホー
ム ペー
ジ を 制作す る こ と も 可 能であ る。3
，
2
デバ イ ス の違
い に よ る差異を
最小限と し た次 項く図
5
＞ でデス ク トッ プの中
央 や や右
寄 り 縦 長の部分 （
nav と article）
が その ま まモ バイル で反 映され、
この 縦 長の 部 分はブ ラウザ
の幅 方 向 の サ イズや デス ク トッ プモ ニ ター
の解 像 度に よ っ て 可変 すること は ない。前
記の通 りheader、
aside、
article、fboter
、div
class＝
right （中 央 や や 右 寄 り縦長の部
分
以外 〉はモ バイル で は非
表示 となる。
＜図4＞ デス ク トップ用 （p
．
css） とモバイル用 （m，
css）i
騰
i
戴
i
寵
第17回 日 本 テ レ ワ
ー
ク 学 会 研 究 発 表 大 会 予 稿 集 論文部門一
一直
←
cの 一
凹
t・
■
」齟
」
・
．・
・
i一
欝
；
’
．1
：r，，∵忍
撫
塞
瀞 囮直
国
＜図5＞ デスク トップ （ブラウザの幅 が 広い場 合 と狭い場 合）と モバイルでの表 示の比 較3
．
3table
に よる画像 とテキス トの 配 置viewport を content
＝”
width≡600”
と し、
こ こ にwidth
＝550
（600
以 下の 数 値で）の tableを 配置す る。
幅 方 向に対し て 1！3 の サイ ズの 画 像 を 配 置 す る場 合には その 画 像 を width−
200 と指示するこ と で、
常に横 幅に対 し て lf3の サ イ ズ で 画像
が表 示 さ れる。
これは画 像の幅が
200pix
とい うことで はなく、
viewport が幅 方 向 を600pix
と仮 定 し た場 合の 相対 的 なサ イズ で あ り、
こ の相 対 関 係はデバ イス の種 類が変わっ ても一
定である。
従っ て横 幅に対し て1
！2
のサイ ズ が 必要であれ ば width−・
300 、1
／6
であ れ ば width＝
100、
とい うよ う に常にcontent ＝1 「width＝
との相 対 値で固 定でき る。
従 来の モ バ イル 用HTML
で は横方向の複 数の 画像の 配置、
横 方向で の テ キス ト と画 像の配 置を するこ と が非 常に難し かっ た。
ま たHTML5
によ る構 造 化に よっ て詳 細 な 画 像の配 置 を 指 定 する た め に は 座標の確 認 作 業を含めて大 き な 労 力 を 必 要 と され た。 ＜ 図7＞table部分 のデス ク トッ プ とモ バ イ ル3
．
4
ク リカッ ブル マ ップの 活 用ク リカ ッブルマ ップを利 用 するこ とで 1
枚
の 画 像の 任 意の 部分 に リン クの設定が で き、 リン クの た め に 画像
を細か く分
割 する 必 要 がなくなる。 特 にモ バ イル 用 の 限ら れ た 面 積の 中で の ク リ カ ッブル マ ッ プの 活 用 は有
効で あ る。
た だ しモ バ イル 用の
HTML
で はデス ク トップ 用の ク リカ ッ ブル が使用 で きない た め、
jquery
を 利用 して ク リ カ ッブル マ ップに 対応 す る 必 要 が ある。
jquery
に はjs
（JavaScript
）フ ァイル をダウ ン ロー
ド してサー
バー
内 に設 置 する方 法があ る が 、 本サン プル ではコー
ディ ン グ を簡 略 化 する た め にjquery
は 外部 リン ク と し た。HTML
で はviewport を content＝”
width・
・
600
「「とす る こ と で 設定し た座 標の 数値 が相対値 と し てデ バ イ ス の種 類に よ る 可変に影 響 され る こ となく 使 用 することが 可能になる
。
こ こで 入力 する座 標 値 も あ く まで600pix
を想 定し た相対値であ る。 ：。
r
：ニニ：．
．
鋼
細
蠶
．
．
i
．
1
■圓
覃
郵』甲
罨置
li二．
〈 図8＞ ク リ カッブルマ ップ部分 のデス ク トッ プとモ バイ ル s4155i［
…
亟 ］
cell［〕addlng＝
O
Ceiib”
paClng二
20
’
，
vidth＝
＝
550
a！lgn＝
cen ℃er＞〈tr＞＜td valign ＝top
＞5Ei
＜b＞
Sales
Manager 〈〆b
＞〈br’
＞57i
ThTs
year．
wlth the aim o‘recofd，
yo
し can alni the irdしstry．
S
℃af‘becomes
しnlted tn orderto
do
s（丁sJklsusuma in the same vectGr
．
＜br
＞ 〈br
＞第17回 日 本 テ レ ワ
ー
ク学 会 研 究 発 表 大 会 予 稿 集 論 文 部 門 〈図9＞jquery
呼び出し部 分とク リカッブル マ ップ部 分4
．
応 用 事 例4
．
1
製 造 業 会 社 案 内 埼玉県 富士 見市に工場 を設立 し、
汎 用モー
ター
や 発電 機の 修理 と 調整を行 う。 業 務 内 容が専門的 で あり テ キス トに よ る説明だけで は イ メー
ジ を 伝え るこ と が難しい た め に 動画を中心 に し たコ ン テン ツを 展開し た。 動 画 は ウェ ブ サー
バー
の デ ィス クス ペー
ス節
約 の た めYouTube
に ア ッ プし て リン ク し た。
二。
．
巳
「
∵瓢＿。
，
．
醤
隠 ｝罫
鴨
5噸
〈図 10＞ 会 社 案 内 ホー
ムペー
ジ の デスク トッ プとモ バイ ル こ こで はYQuTube
に リン クする際に は viewpQrt をcontent＝「
’
width＝
600
「’と 指 定 （図3
）し、
動 画サ イ ズを width ＝「’560
”と設定する こ とでモ バ イル 用 では画 面に対 し て 約93
％の幅で動 画が表示 さ れ る。
ま たス マー
トフォ ンを横
に傾け た 場合に は、
傾
け た 画 面の 幅に 対 して約93
％の 幅で動 画が表 示 さ れ る。 デス ク トソプ 用で は 画 面 中 央 （nav と article 部 分 ）に対し て約93
％の幅で動 画が表 示 さ れ る。
72 ＜lframe Wldth＝
’
560「
height＝
”
315．
1
731 src
＝
”
bttρs：〃w．
“Jw、
youtube．
corr〆embed ／6AypVD8T7as7rel＝
0．
1 74i framebo「de「昌
℃”
aliovvfullscreen》 ＜／lframe＞4
．
2
スポー
ツ 用 品ネッ トシ ョ ッ プさい た ま市に あ る野球 ユ ニ フォ
ー
ム専
門のネ
ッ トシ ョ ップ。一
昨 年 前か らモ バ イル の アクセス がデス ク トップ を 上 回 り、
モ バ イル か らの 注 文 も増
え て き た た め、
モ バイル フ ァー
ス トを意識 し た ホー
ムペー
ジの 製 作 依 頼があっ た ため、
今回の レ ス ポン シブ ウェ ブデ ザイン を採用 し た。 ネ ッ トシ ョ ップで ある た め、
モバ イル で の視 認 性の高 くするCSS
ファイルやブ ラウザと サー
バー
との問で情
報を や り と りす るCGI
フ ァイル を 用意 する 必要が あ り、
レ ス ポン シ ブウェ ブ化 する た め に は 基本 構成
が極めて シ ン プル にする 必要 が あっ た。
＜図 12＞ モバ イル用ペー
ジ の 注 文フ ォー
ム この ネッ トシ ョ ッ プで は2015
年 4 月現 在の ア クセ ス 数はモ バ イル 55 ％に 対 しデス ク トッ プ45
％ 程 度。
最 終 的に注 文したペー
ジ は 不明 （レ ス ポン シブで ある た め同 じフ ァ イル か ら 送信 さ れ るた め〉で ある。
た だ し消費 者か らの メー
ル に よ る質 問 や 過去の経 験から、
デス ク トップ か らの 注 文の ほ うが依然
と して多
い こ と も想像
され る。従っ てモ バイル フ ァ
ー
ス トで あっ て もデス ク トソプ用の ペー
ジも軽視
は で きない 。 ＜図 11＞YouTubeの動 画へ のリンク 部 分第17回日本テ レ ワ
ー
ク学 会 研 究 発 表 大 会 予稿 集 論 文 部 門 ＜ 図 13＞ デスク トッ プ用ペー
ジの注文フォー
ム本提
案
のデ ザイ ン で はデス ク トッ プ用 画 面の 中 央 部 分が、
モ バイル 用 と基 本 的に同 等であるた め、 ど ち ら か一
方の画 面を見て、
も う一
方の画 面 を 容 易に想 像で き る。これ は 消 費 者側 がモ バ イル 用ペ
ー
ジ を見な が ら （また は見 た記 憶で） 色々 と質 問し て き た 場合 に、
ネッ トシ ョ ップの担 当者がデス ク トッ プ 用の 画面を見なが ら、 その 内 容に対 し て即答
できる と い うメ リッ トがある。ま た HTML だ け で は な く
jquery
や 各OS
やブラ ウザ も頻 繁に ア ッ プデー
トされて い る。
従っ て一
度 完 成 し た ホー
ム ペー
ジ はそ れ らの ア ップ デー
トに全て対応 し てい く 必要が あ り、
その情
報に常
に敏 感でな け れ ば な ら ない。ま た ア ッ プ デ
ー
トへ の対応 が極
力 少 な くて済 む よ うなシ ン プル な 構 成の ホー
ム ペー
ジの デ ザ イン を 心 が け る よ う に す る 必要も あ る。 本 提案
で動 作 確認
した環境
Windows8 ．
1
Windows8 ．
1Windows8 ．
l
Windows8 ．
1
MacOS
10．
10．
3
MacOS 10．
10．
3
MacOS
10．
10．
3
MacOS
10．
10．
3
iOS
8．
3
Safari
8．
O
Andoroid
4．
3
webkitIntemet
Explorer11．
O
．
OFireFox
36
．
0
0pera
29．
O
Chrome
42．
O
Safari
8．
0．
6
FireFox
37．
0．
2
（）pera
27．
0
5
．
今 後の課
題5
．
1
モ バ イル の割 合の動 向 ス マー
トフ ォ ン の 国内での 出 荷 台 数は2014
年 か ら微 減 傾 向に あ る。し か し
2015
年5 ．
月 に ア メ リ カ と 日本を含
む世 界10
ヶ国で、
“
Google検索
はデス ク トップ よ りも モ バイル で行 わ れる よ うになっ た”
と。
今 後 デス ク トッ プ対モ バイル の 割 合はモ バ イ ル が優
勢
に なっ て い くこと は予 想 される が、
ス マー
トフ ォ ン の 出荷台数が頭打 ちで あ る以上 は、
今 の ま まの割 合で 当面 は推 移 する 可能性 も ある。
そ の動 向 次 第で はデス ク トップ とモ バ イル の ホー
ム ペー
ジの 役 割が それ ぞれ独立 し た もの と な り、
レス ポン シブウェ ブ とい う形態の ホー
ム ペー
ジの 必 要 性がな く なる 可能 性 も ある。
ま た 反 対 に リー
ズナ ブル でコ ス トパ フ ォー
マ ン ス の 高い レ ス ポ ン シ ブウェ ブ が 要 求 が増える 可能性 も ある。
い ずれに して も今後の動 向 を ウォ ッチ ン グし てい く 必 要があ る。
参考
文献
定 平 誠・
斎 藤 忍 ［共著 ］ （電子書 籍 ） 尚 美 学 園 大 学 定 平 研 究 室 ［制 作 協 力 ］ （2014 ） 「初めて の HTML5 ＆CSS3
魅せ る ！Web
デ ザイン」 オー
ム社 ［編 集 協 力 ］ 株式会 祉フ ァ ステ ッ プス ［制 作 ］参考
サ イ ト2014
年 第4
四半 期お よ び 2014 年 国内携
帯電話・
ス マー
トフォ ン市 場 実 績 値 を発 表 htt）i／
へN’
NN、、 idc’
a an co
