この 講 座 で 学 ぶこと PC 向 けサイトも 含 む スマートフォン /タブレット 向 けサイト 制 作 フローの 基 礎 知 識 2

スマ トフォンサイト制作基礎

04. スマートフォン／タブレット向け

サイト制作

ク

スマートフォンサイト制作基礎

この講座で学ぶこと

この講座で学ぶこと



PC向けサイトも含む、スマートフォン

／タブレット向けサイト制作フローの

／タ

ット向

イト制作

基礎知識

サイト制作のワ クフロ

サイト制作のワークフロー

ブ



スマートフォン／タブレットがターゲッ

トに含まれていても、基本的にはPC向け

ト 含

、 本的

向

サイトの制作フローと同じ

デザ

デザ

デ

デ

企画

企画

サイト

構成図

サイト

構成図

ワイヤー

フレーム

ワイヤー

フレーム

デザイン

ラフ

デザイン

ラフ

コーディン

グ・テスト

コーディン

グ・テスト

公開・運用

公開・運用

企画

企画



サイトを制作する目的とターゲットを

明確にし、各デバイスのユーザに対し

明確

、各デ イス

対

て提供したいコンテンツ／各デバイス

のユーザのニーズは何かを考える

のユ ザのニ ズは何かを考える

店舗情報

ニュース

ショッピング

機能

ブランド

イメ ジの訴求



またターゲットブラウザなど その他

機能

イメージの訴求



またターゲットブラウザなど、その他

のPC向けサイトにおいても基本的に必

企画

企画

デ



ターゲットにタッチデバイス（スマー

トフォン／タブレット）が含まれる場

ト ォ ／タ

ット） 含

る場

合には、各デバイスごとの違いを認識

した上で 提供コンテンツの⾒せ⽅や

した上で、提供コンテンツの⾒せ⽅や

機能について検討する

企画内容の検討時にデバイス間の違いを

企画内容の検討時にデバイス間の違いを

認識しておくべき項目

① 画面の大きさ

② ⼊⼒デバイス

② ⼊⼒デバイス

デバイス間の違いを認識すべき項目

デバイス間の違いを認識すべき項目



画面の大きさの違いによる影響を認識

する

る



PC／タブレット／スマートフォンではそ

れぞれ画面のサイズが異なるため テキス

れぞれ画面のサイズが異なるため、テキス

トや画像の認識のしやすさや機能の使い勝

手に違いがでる

手に違いがでる

特にスマートフォンの場合は画面は小さいため

レイアウトや機能が複雑だと使い勝手が著しく

悪くなる

デバイス間の違いを認識すべき項目

デバイス間の違いを認識すべき項目

デ



⼊⼒デバイスの違いによる影響を認識

する

る



タッチデバイスでは指による操作となるた

め どうしても操作ボタンやリンクを大き

め、どうしても操作ボタンやリンクを大き

くせざるをえない

結果として、特にスマートフォン向けサイトで

は、あまりたくさんの操作ボタンやリンクをひ

とつの画面内に収めることが難しくなり サイ

とつの画面内に収めることが難しくなり、サイ

トに複雑な機能を持たせにくくなる

デバイス間の違いを認識すべき項目

デバイス間の違いを認識すべき項目

デ



⼊⼒デバイスの違いによる影響を認識

する

る

（続き）

（続 ）



タッチデバイスにおいてはフォームの操作

がやりにくい

がやりにくい

ユーザが⼊⼒したがらない → 離脱につながり

ユ ザが⼊⼒したがらない 離脱につながり

やすい

サイトのモバイル対応

サイトのモバイル対応

デ



企画においては、各デバイスごとの違い

を認識した上でどのようにサイトをモバ

認識

イト

イル対応するかも検討する

モバイル対応の⽅法

① RWD (Responsive Web Design)

モバイル対応の⽅法

①

(

p

g )

② RESS (Responsive Design +

Server Side Components)

Server Side Components)

サイト構成図

サイト構成図



モバイル対応の⽅法によってサイ

ト構成図の作成⽅法が変わる

ト構成図の作成⽅法が変わる

RWD

サイト構成図は全ウィンドウサイズで共通

RESS

サイト構成図は全デバイス向けでほぼ共通

モバイル専用サイト

対応デバイスごとに分けて作成

ワイヤ フレ ム

ワイヤーフレーム



モバイル対応の⽅法によってワイ

ヤーフレームの作成⽅法が変わる

ヤ フレ ムの作成⽅法が変わる

RWD

決められたウィンドウサイズごとに分け

て作成

RESS

対応デバイスごとに分けて作成

モバイル専用サイト

対応デバイスごとに分けて作成

モバイル専用サイト

対応デバイスごとに分けて作成

タッチデバイスのリンク

タッチデバイスのリンク



ワイヤーフレームを作成する上では

タッチデバイスにおけるリンク部分の

タッチデ イス

る

ク部分

タップのしやすさについて意識する



指による操作となるため PCと比べて細



指による操作となるため、PCと比べて細

かい部分の操作がしにくい

① ボタンのサイズは 44px × 44px 以上とする（周

囲にボタンが配置されていない場合は 30px ×

30px 程度も可）

p 程度も可）

② デザイン面での制約がなければテキストのみのリ

タッチデバイスのフォ ム

タッチデバイスのフォーム



ワイヤーフレームを作成する上では

タッチデバイスにおけるフォームの扱

タッチデ イス

る ォ

扱

いやすさについても意識する



指による操作となるため PCと比べて細



指による操作となるため、PCと比べて細

かい部分の操作がしにくい



スマ トフォンの画面は小さいため⼊⼒し



スマートフォンの画面は小さいため⼊⼒し

た内容を確認しにくい

① 基本的には縦に並べて⾒やすくする

② PCサイトよりも項目を削ることができないか検討

デザインラフ

デザインラフ

デ



モバイル対応の⽅法によってデザイ

ンラフの作成⽅法が変わる

ンラフの作成⽅法が変わる

RWD

1) Designing in the Browser で対応

2) 決められたウィンドウサイズごとに分

2) 決められたウィンドウサイズごとに分

けて作成

RESS

1) Designing in the Browser で対応

2) 対応デバイスごとに分けて作成

2) 対応デバイスごとに分けて作成

モバイル専用サイト

対応デバイスごとに分けて作成

（タッチデバイス向けサイトについては

Designing in the Browser で対応するこ

ともある）

Designing in the Browser

Designing in the Browser

ブ



ワイヤーフレームをベースにしてブラ

ウザ上でデザインする

ウ

デ イ

る



HTML／CSS／JavaScript でプロトタイプ

（実際に動作するテストサイト）を作成

（実際に動作するテストサイト）を作成



デザインラフが無い分、作り変えなければ

ならない部分も多い

ならない部分も多い



写真素材の加工やイラストレーションの作

成などはPh t h などを使 て対応する

成などはPhotoshopなどを使って対応する

タッチデバイス向けのフロントエンドのコーディン

Designing in the Browser

Designing in the Browser

デ



デザインラフを作成しない理由は以下

の通り:

通り

① スマートフォンやタブレットのブラウザはテキストの表

示がきれ

示がきれい

② スマートフォンやタブレットのブラウザはグラデーショ

ンやシャドウなどの基本的な装飾ができるCSS3に対応

ンやシャドウなどの基本的な装飾ができるCSS3に対応

している

Designing in the Browser

Designing in the Browser

デ



デザインラフを作成しない理由は以下

の通り:

通り

③ タッチデバイス向けサイトでは画像を含む各要素の幅

をスクリーンサイズに応じて変更する（%指定する）

をスクリーンサイズに応じて変更する（%指定する）

ことが多い

Photoshop などで作成したデザインラフはピクセル固定だが、

実際のサイトではデバイスのスクリ ンサイズに応じてコンテ

実際のサイトではデバイスのスクリーンサイズに応じてコンテ

ンツ幅が変わり、デザインラフと同じ仕上がりにはならない

コ ディング

コーディング



モバイル対応の⽅法によってコー

ディングのやりかたが変わる

ディングのやりかたが変わる

RWD

メディアクエリで対応

ポ ネ ト化（部品化）

対応デ

RESS

コンポーネント化（部品化）して対応デ

バイスごとに分けて作成

モバイル専用サイト

対応デバイスごとに分けて作成

（タッチデバイス向けサイトのみをメ

ディアクエリで対応することもある）

メディアクエリ

メディアクエリ

デ



デバイスの幅や高さなどの対象のメ

ディア属性を細かく指定してCSSを適

ディア属性 細 く指定

適

用できる技術（CSS3で策定）

float: left

float: right

float: left

例）

ウィンドウの幅が 900px 以上の

ときは float を使用する

float: right

例）

ウィンドウの幅が 900px 未満の

ウィンドウの幅が 900px 未満の

テスト

テスト



シミュレータでは限界があるため、

公開前には実機でターゲットブラウザ

公開前

実機 タ

ット ラウ

を使ってテストする