レスポンシブウェブの 新 しいデザインの 提 案 Proposal of a new design for Responsive web 尚 美 学 園 大 学 斎 藤 忍 Shobi University Shinobu SAITO 要 旨 :スマートフォン(モバイル) 用 とパソコン(デスクトップ) 用 の 両 方 に 最 適 化 された 一 つの HTML ファイルにより 各 ページが 構 成 されたレスポンシブウェブが 多 くのホームページに 使 われ 始 めている しかし 現 状 のレスポンシブウェブには 1 構 成 が 複 雑 ( 個 人 で 制 作 するためには 高 度 な 専 門 知 識 が 必 要 となり アウトソーシングするためには 高 額 な 制 作 費 が 必 要 ) 2モバイル 用 での 視 読 性 が 劣 る 3モバ イルとデスクトップでの 共 有 化 が 不 完 全 等 の 問 題 があり 個 人 事 業 主 のテレワーカーにとって ホーム ページ は 仕 事 の 受 発 注 やスキルを 告 知 する 上 で 重 要 なツールであるにもかかわらずスマートフォン 用 ホ ームページそのものが 普 及 はしていない これらの 問 題 の 解 決 を 目 指 したレスポンシブウェブの 新 しいデザインを 提 案 する Abstract: Responsive Web has begun to be used in a number of homepage that each page has been constructed by both optimized one HTML file in for the desktop and mobile. But in Responsive web of status quo, 1 configuration complexity (requires highly specialized knowledge in order to produce an individual, requires expensive production costs in order to outsourcing), 2 vision readability for mobile is inferior, 3 sharing of mobile and desktop are incomplete, etc. of the problem, "Homepage" for teleworkers of a sole proprietorship is not popular to be an important tool despite Homepage itself for the smart phone in order to notice the ordering and skills of work. this paper proposes a new design of Responsive web that aims to solve above problems. キーワード:レスポンシブウェブ ホームページ HTML モバイル Keyword: Responsive web, website, HTML, mobile 1. スマートフォン 用 ホームページの 実 情 2013 年 後 半 から 国 内 の 多 くのホームページで のアクセスログのモバイル 用 がデスクトップ 用 を 上 回 ったと 言 われている しかし 多 くのホーム ページは 未 だにモバイル 用 に 対 応 していない 2014 年 11 月 よりモバイルでの Google の 検 索 結 果 ではモバイルに 対 応 しているホームページに は スマホ 対 応 の 文 字 が 表 示 されるようになっ た テレワーク というキーワードでモバイルで の Google の 検 索 をすると 上 位 100 件 のうち ス マホ 対 応 は 38 件 (2015 年 2 月 21 日 現 在 )で その 大 半 が 大 手 企 業 中 央 省 庁 新 聞 社 Facebook などで 中 小 企 業 や 個 人 事 業 主 のホームページは 含 まれていなかった スマートフォン 用 ホームページへの 対 応 の 遅 れは 業 態 業 種 を 問 わず 中 小 企 業 や 個 人 事 業 主 に 共 通 している 問 題 であり 上 記 1 3がその 大 き な 要 因 であることが 推 測 できる 2. 現 在 のレスポンシブウェブの 問 題 点 2.1 構 成 が 複 雑 HTML はハイパーテキストを 利 用 した 相 互 間 文 書 参 照 のフレームワークであり プレーンテキス トの 文 書 を 要 素 で 括 って 意 味 付 けすることで 文 書 の 特 定 要 素 に URI ( Uniform Resource Identifier)を 用 い た 他 文 書 へ の リ ン ク を 記 載 し ておけばユーザエージェントはそれを 解 釈 して 指 定 された 他 文 書 を 表 示 させることが 可 能 とな るものである プログラム 言 語 の 中 でも 比 較 的 難 易 度 が 低 く HTML1.0(1990 年 代 初 期 )では HTML を 活 用 することで 一 般 の 人 が 気 軽 に 実 用 的 なホ ームページを 制 作 することができた しかし HTML5.0 となりレスポンシブウェブが 登 場 すると HTML のコーディングは 難 解 な css や JavaScript PHP などとの 連 携 により 高 度 で 複 雑 になり ホームページの 制 作 には 専 門 的 な 知 識 と スキルが 必 要 とされるようになり 一 般 の 人 が 気 軽 に 作 ることはできなくなってきている
また 近 年 では HTML を 直 接 入 力 してホームペ ージを 作 る 人 は 少 なくなり CMS ( content management system)やウェブ 上 でのホームペー ジ 作 成 サービスを 利 用 する 場 合 が 一 般 的 になっ ている CMS によるレスポンシブウェブでは <head>から</head>までの 間 が 100 行 を 超 えるも のも 一 般 的 になっている 2.2 モバイル 用 での 視 読 性 が 劣 る レスポンシブウェブの 多 くはデスクトップ 用 のページを 制 作 した 後 にモバイル 用 に 変 換 する ため コンテンツはデスクトップ 用 をそのまま 表 示 している 画 面 サイズを 紙 に 例 えるとデスクト ップ 用 が A4 サイズ 相 当 で モバイル 用 は 名 刺 サ イズ 相 当 ということになる モバイル 用 でも 画 面 をスクロールしていくことで A4 サイズ 相 当 のテ キストを 表 示 することが 可 能 であるが 同 じ 文 字 数 のテキストをモバイル 用 でスクロールしなが ら 読 むことは 視 覚 的 にも 精 神 的 にもストレスを 感 じ 視 読 性 に 劣 るということになる A4 サイズに 書 かれたテキストを 名 刺 サイズに 納 めるためには テキストを 短 くするための 推 敲 省 略 された 単 語 の 多 用 命 令 形 の 多 用 など によりテキストの 簡 略 化 を 行 う 必 要 がある 逆 に モバイル 用 に 簡 略 化 されたテキストをそのまま デスクトップ 用 で 表 示 したとしても 問 題 がない 場 合 がほとんどである 従 って 最 初 にモバイル 用 のテキストを 作 って からデスクトップ 用 に 展 開 することが 望 ましい が 現 状 のレスポンシブウェブの 多 くは その 作 成 作 業 をデスクトップ 上 で 行 うために 自 然 とデ スクトップを 優 先 した 構 成 になっている 2.3 モバイルとデスクトップでの 共 有 化 現 在 のレスポンシブウェブの 多 くはモバイル とデスクトップでの 共 有 化 についてはまだ 不 完 全 であるといって 良 い レスポンシブウェブの 多 くは 横 長 のデスクト ップ 用 画 面 を 縦 長 のモバイル 用 画 面 に 強 制 的 に 表 示 させている またデスクトップ 用 画 面 ではブ ラウザの 横 幅 の 可 変 に 応 じてボタンの 位 置 をオ ーバーフローさせて 配 置 を 変 化 させて 画 面 を 有 効 に 使 っているものもある 利 用 者 側 からはデスクトップ 用 とモバイル 用 が 同 じページを 共 有 していることが 理 解 されず 利 用 者 がそれぞれ 異 なったデバイス(デスクトッ プ 用 とモバイル 用 )や 異 なった 環 境 異 なった 設 定 で 見 ていた 場 合 にコミュニケーションに 不 具 合 を 生 じる( 例 えば 2 段 目 の 一 番 右 のボタンは 状 況 によって 異 なる)こともある また 電 話 でのコミュニケーションの 場 合 通 話 中 にモバイル 用 のページを 確 認 することができ ないため デスクトップ 用 を 見 ながらの 会 話 では 通 話 内 容 が 噛 み 合 わない 場 合 もある < 図 1> デスクトップとモバイルの 400 字 の 見 え 方 < 図 2> 今 までのレスポンシブウェブでは 同 じページであってもデバイスや 設 定 によってボタンの 位 置 が 異 なる
3 本提案の具体的内容 3.1 徹底したシンプルなコーディング viewport は content="width=device-width とはせ ず content="width=600"と幅にピクセルの数値を 入れて固定(ピクセル数の 600 は任意であるが 以下 600 で統一して説明する) 以降の img や table など全て width=600 とすることで解像度の数値の 変化によるモバイルでの見え方を一定にする ま たモバイルの機種によってコーディングの表示 結果が若干異なるため nitial-scal と user-scalable は敢えて入れない 入れない場合の初期値は nitial-scale =1.0, 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 行 以内におさめている ファイル一式 http://con-sma.com/h/mss/smpl.zip 図 3 HTML ファイルの viewport と css の呼び出し部分 この量であれば決められた時間内にコーディング を 1 行ずつ解説しながら初心者 大学生などにも に指導し 実際にサンプルホームページを制作する ことも可能である 3.2 デバイスの違いによる差異を最小限とした 次項 図 5 でデスクトップの中央やや右寄り 縦長の部分 nav と article がそのままモバイル で反映され この縦長の部分はブラウザの幅方向 のサイズやデスクトップモニターの解像度によ って可変することはない 前記の通り header aside article footer div class=right 中央やや右寄り縦 長の部分以外 はモバイルでは非表示となる 図 4 デスクトップ用 p.css とモバイル用 m.css
図 5 デスクトップ ブラウザの幅が広い場合と狭い場合 と モバイルでの表示の比較 3.3 table による画像とテキストの配置 viewport を content="width=600"とし ここに width=550 600 以下の数値で の table を配置す る 幅方向に対して 1/3 のサイズの画像を配置す る場合にはその画像を width=200 と指示すること で 常に横幅に対して 1/3 のサイズで画像が表示 される これは画像の幅が 200pix ということではなく viewport が幅方向を 600pix と仮定した場合の相対 的なサイズであり この相対関係はデバイスの種 類が変わっても一定である 従って横幅に対して 1/2 のサイズが必要であれ ば width=300 1/6 であれば width=100 というよ うに常に content="width=との相対値で固定できる 従来のモバイル用 HTML では横方向の複数の 画像の配置 横方向でのテキストと画像の配置を することが非常に難しかった また HTML5 によ る構造化によって詳細な画像の配置を指定する ためには座標の確認作業を含めて大きな労力を 必要とされた 図 7 table 部分のデスクトップとモバイル 3.4 クリカッブルマップの活用 クリカッブルマップを利用することで 1 枚の画 像の任意の部分にリンクの設定ができ リンクの ために画像を細かく分割する必要がなくなる 特にモバイル用の限られた面積の中でのクリ カッブルマップの活用は有効である ただしモバイル用の HTML ではデスクトップ 用のクリカッブルが使用できないため jquery を 利用してクリカッブルマップに対応する必要が ある jquery には js JavaScript ファイルをダウ ンロードしてサーバー内に設置する方法がある が 本サンプルではコーディングを簡略化するた めに jquery は外部リンクとした HTML では viewport を content="width=600"とす ることで設定した座標の数値が相対値としてデ バイスの種類による可変に影響されることなく 使用することが可能になる ここで入力する座標 値もあくまで 600pix を想定した相対値である 図 8 クリカッブルマップ部分のデスクトップとモバイル 図 6 HTML ファイルの table 部分
< 図 11>YouTube の 動 画 へのリンク 部 分 < 図 9>jquery 呼 び 出 し 部 分 とクリカッブルマップ 部 分 4. 応 用 事 例 4.1 製 造 業 会 社 案 内 埼 玉 県 富 士 見 市 に 工 場 を 設 立 し 汎 用 モーター や 発 電 機 の 修 理 と 調 整 を 行 う 業 務 内 容 が 専 門 的 でありテキストによる 説 明 だけではイメージを 伝 えることが 難 しいために 動 画 を 中 心 にしたコ ンテンツを 展 開 した 動 画 はウェブサーバーのデ ィスクスペース 節 約 のため YouTube にアップし てリンクした 4.2 スポーツ 用 品 ネットショップ さいたま 市 にある 野 球 ユニフォーム 専 門 のネ ットショップ 一 昨 年 前 からモバイルのアクセス がデスクトップを 上 回 り モバイルからの 注 文 も 増 えてきたため モバイルファーストを 意 識 した ホームページの 製 作 依 頼 があったため 今 回 のレ スポンシブウェブデザインを 採 用 した ネットショップであるため モバイルでの 視 認 性 の 高 くする CSS ファイルやブラウザとサーバ ーとの 間 で 情 報 をやりとりする CGI ファイルを 用 意 する 必 要 があり レスポンシブウェブ 化 する ためには 基 本 構 成 が 極 めてシンプルにする 必 要 があった < 図 10> 会 社 案 内 ホームページのデスクトップとモバイル ここでは YouTube にリンクする 際 には viewport を content="width=600"と 指 定 ( 図 3)し 動 画 サ イズを width="560"と 設 定 することでモバイル 用 では 画 面 に 対 して 約 93%の 幅 で 動 画 が 表 示 され る またスマートフォンを 横 に 傾 けた 場 合 には 傾 けた 画 面 の 幅 に 対 して 約 93%の 幅 で 動 画 が 表 示 される デスクトップ 用 では 画 面 中 央 (nav と article 部 分 )に 対 して 約 93%の 幅 で 動 画 が 表 示 さ れる < 図 12>モバイル 用 ページの 注 文 フォーム このネットショップでは 2015 年 4 月 現 在 のア クセス 数 はモバイル 55%に 対 しデスクトップ 45% 程 度 最 終 的 に 注 文 したページは 不 明 (レス ポンシブであるため 同 じファイルから 送 信 され るため)である ただし 消 費 者 からのメールによ る 質 問 や 過 去 の 経 験 から デスクトップからの 注 文 のほうが 依 然 として 多 いことも 想 像 される 従 ってモバイルファーストであってもデスク トップ 用 のページも 軽 視 はできない
タグや video や audio のファイル 形 式 のブラウザ 毎 の 対 応 などは 頻 繁 に 更 新 されている また HTML だけではなく jquery や 各 OS やブラ ウザも 頻 繁 にアップデートされている 従 って 一 度 完 成 したホームページはそれらのアップデー トに 全 て 対 応 していく 必 要 があり その 情 報 に 常 に 敏 感 でなければならない またアップデートへの 対 応 が 極 力 少 なくて 済 むようなシンプルな 構 成 のホームページのデザ インを 心 がけるようにする 必 要 もある < 図 13>デスクトップ 用 ページの 注 文 フォーム 本 提 案 のデザインではデスクトップ 用 画 面 の 中 央 部 分 が モバイル 用 と 基 本 的 に 同 等 であるた め どちらか 一 方 の 画 面 を 見 て もう 一 方 の 画 面 を 容 易 に 想 像 できる これは 消 費 者 側 がモバイル 用 ページを 見 なが ら(または 見 た 記 憶 で) 色 々と 質 問 してきた 場 合 に ネットショップの 担 当 者 がデスクトップ 用 の 画 面 を 見 ながら その 内 容 に 対 して 即 答 できると いうメリットがある 本 提 案 で 動 作 確 認 した 環 境 Windows8.1 Internet Explorer11.0 Windows8.1 Google Chrome 42.0 Windows8.1 FireFox 36.0 Windows8.1 Opera 29.0 MacOS 10.10.3 Google Chrome 42.0 MacOS 10.10.3 Safari 8.0.6 MacOS 10.10.3 FireFox 37.0.2 MacOS 10.10.3 Opera 27.0 ios 8.3 Safari 8.0 Andoroid 4.3 webkit 5. 今 後 の 課 題 5.1 モバイルの 割 合 の 動 向 スマートフォンの 国 内 での 出 荷 台 数 は 2014 年 から 微 減 傾 向 にある しかし 2015 年 5 月 にアメリカと 日 本 を 含 む 世 界 10 ヶ 国 で Google 検 索 はデスクトップよりも モバイルで 行 われるようになった と Google が 発 表 した 今 後 デスクトップ 対 モバイルの 割 合 はモバイ ルが 優 勢 になっていくことは 予 想 されるが スマ ートフォンの 出 荷 台 数 が 頭 打 ちである 以 上 は 今 のままの 割 合 で 当 面 は 推 移 する 可 能 性 もある その 動 向 次 第 ではデスクトップとモバイルの ホームページの 役 割 がそれぞれ 独 立 したものと なり レスポンシブウェブという 形 態 のホームペー ジの 必 要 性 がなくなる 可 能 性 もある また 反 対 にリーズナブルでコストパフォーマンス の 高 いレスポンシブウェブが 要 求 が 増 える 可 能 性 も ある いずれにしても 今 後 の 動 向 をウォッチングし ていく 必 要 がある 参 考 文 献 定 平 誠 斎 藤 忍 [ 共 著 ]( 電 子 書 籍 ) 尚 美 学 園 大 学 定 平 研 究 室 [ 制 作 協 力 ](2014) 初 めての HTML5&CSS3 魅 せる!Web デザイン オーム 社 [ 編 集 協 力 ] 株 式 会 社 ファステップス[ 制 作 ] 参 考 サイト 2014 年 第 4 四 半 期 および 2014 年 国 内 携 帯 電 話 スマートフォン 市 場 実 績 値 を 発 表 http://www.idcjapan.co.jp/press/current/20150312ap r.html Google ついにモバイル 検 索 数 がデスクトップを 超 えたと 発 表 http://seo-scene.com/mobile-query-overtakes-desktop 5.2 HTML の 変 化 HTML5 になり HTML4 で 使 われていたいくつか のタグが 廃 止 になり 新 たに 推 奨 されるタグが 追 加 された またブラウザ 毎 のベンダープレフィックス