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

スマートフォンサイト 制 作 基 礎 04. スマートフォン/タブレット 向 け サイト 制 作 のワークフロー

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

サイト制作のワ クフロ サイト制作のワークフロー スマートフォン タブレットがターゲッ ブ ト 含 トに含まれていても 基本的にはPC向け 本的 向 サイトの制作フローと同じ 企画 サイト ワイヤー デザ デザイン コーディン デ 構成図 フレーム ラフ グ テスト Copyright 2011 ZDRIVE, K.K. All rights reserved. 公開 運用 3

企 画 サイトを 制 作 する 目 的 とターゲットを 明 確 にし 各 デバイスのユーザに 対 し て 提 供 したいコンテンツ/ 各 デバイス のユーザのニーズは 何 かを 考 える 店 舗 情 報 ニュース ショッピング 機 能 ブランド イメージの 訴 求 またターゲットブラウザなど その 他 のPC 向 けサイトにおいても 基 本 的 に 必 要 な 項 目 についても 検 討 する 4

企 画 ターゲットにタッチデバイス(スマー デ トフォン/タブレット)が 含 まれる 場 合 には 各 デバイスごとの 違 いを 認 識 した 上 で 提 供 コンテンツの せ や 機 能 について 検 討 する 企 画 内 容 の 検 討 時 にデバイス 間 の 違 いを 認 識 しておくべき 項 目 1 画 面 の 大 きさ 2 デバイス 5

デバイス 間 の 違 いを 認 識 すべき 項 目 画 面 の 大 きさの 違 いによる 影 響 を 認 識 する PC/タブレット/スマートフォンではそ れぞれ 画 面 のサイズが 異 なるため テキス トや 画 像 の 認 識 のしやすさや 機 能 の 使 い 勝 手 に 違 いがでる 特 にスマートフォンの 場 合 は 画 面 は 小 さいため レイアウトや 機 能 が 複 雑 だと 使 い 勝 手 が 著 しく 悪 くなる 6

デバイス 間 の 違 いを 認 識 すべき 項 目 デバイスの デ 違 いによる 影 響 を 認 識 する タッチデバイスでは 指 による 操 作 となるた め どうしても 操 作 ボタンやリンクを 大 き くせざるをえない 結 果 として 特 にスマートフォン 向 けサイトで は あまりたくさんの 操 作 ボタンやリンクをひ とつの 画 面 内 に 収 めることが 難 しくなり サイ トに 複 雑 な 機 能 を 持 たせにくくなる 7

デバイス 間 の 違 いを 認 識 すべき 項 目 デバイスの デ 違 いによる 影 響 を 認 識 する( 続 き) タッチデバイスにおいてはフォームの 操 作 がやりにくい ユーザが したがらない 離 脱 につながり やすい 8

サイトのモバイル 対 応 企 画 においては 各 デバイスごとの 違 い を 認 識 した 上 でどのようにサイトをモバ イル 対 応 するかも 検 討 する モバイル 対 応 の 法 1 RWD (Responsive Web Design) g ) 2 RESS (Responsive Design + Server Side Components) 3 モバイル 専 用 サイト 9

サイト 構 成 図 モバイル 対 応 の 法 によってサイ ト 構 成 図 の 作 成 法 が 変 わる RWD RESS モバイル 専 用 サイト サイト 構 成 図 は 全 ウィンドウサイズで 共 通 サイト 構 成 図 は 全 デバイス 向 けでほぼ 共 通 対 応 デバイスごとに 分 けて 作 成 10

ワイヤーフレーム モバイル 対 応 の 法 によってワイ ヤーフレームの 作 成 法 が 変 わる RWD RESS モバイル 専 用 サイト 決 められたウィンドウサイズごとに 分 け て 作 成 対 応 デバイスごとに 分 けて 作 成 対 応 デバイスごとに 分 けて 作 成 11

タッチデバイスのリンク ワイヤーフレームを 作 成 する 上 では タッチデバイスにおけるリンク 部 分 の タップのしやすさについて 意 識 する 指 による 操 作 となるため PCと 比 べて 細 かい 部 分 の 操 作 がしにくい 1 ボタンのサイズは 44px 44px 以 上 とする( 周 囲 にボタンが 配 置 されていない 場 合 は 30px 30px 程 度 も 可 ) 2 デザイン 面 での 制 約 がなければテキストのみのリ ンクは 避 け リンクエリアを 枠 で 囲 うなどの 装 飾 をしてタップできる 範 囲 を 明 示 する 12

タッチデバイスのフォーム ワイヤーフレームを 作 成 する 上 では タッチデバイスにおけるフォームの 扱 いやすさについても 意 識 する 指 による 操 作 となるため PCと 比 べて 細 かい 部 分 の 操 作 がしにくい スマートフォンの 画 面 は 小 さいため し た 内 容 を 確 認 しにくい 1 基 本 的 には 縦 に 並 べて やすくする 2 PCサイトよりも 項 目 を 削 ることができないか 検 討 する 13

デザインラフ モバイル 対 応 の 法 によってデザイ ンラフの 作 成 法 が 変 わる RWD RESS モバイル 専 用 サイト 1) Designing in the Browser で 対 応 2) 決 められたウィンドウサイズごとに 分 けて 作 成 1) Designing in the Browser で 対 応 2) 対 応 デバイスごとに 分 けて 作 成 対 応 デバイスごとに 分 けて 作 成 (タッチデバイス 向 けサイトについては Designing in the Browser で 対 応 するこ ともある) 14

Designing in the Browser ワイヤーフレームをベースにしてブラブ ウザ 上 でデザインする HTML/CSS/JavaScript でプロトタイプ ( 実 際 に 動 作 するテストサイト)を 作 成 デザインラフが 無 い 分 作 り 変 えなければ ならない 部 分 も 多 い ならない 部 分 も 多 い 写 真 素 材 の 加 工 やイラストレーションの 作 成 などはPhotoshopなどを h などを 使 って 対 応 する タッチデバイス 向 けのフロントエンドのコーディン グスキルとデザインスキルが 要 求 される 15

Designing in the Browser デザインラフを デ 作 成 しない 理 由 は 以 下 の 通 り: 1 スマートフォンやタブレットのブラウザはテキストの 表 示 がきれい 2 スマートフォンやタブレットのブラウザはグラデーショ ンやシャドウなどの 基 本 的 な 装 飾 ができるCSS3に 対 応 している 最 終 的 にスライスして 切 り 出 す 部 分 が 少 ない 16

Designing in the Browser デザインラフを デ 作 成 しない 理 由 は 以 下 の 通 り: 3 タッチデバイス 向 けサイトでは 画 像 を 含 む 各 要 素 の 幅 をスクリーンサイズに 応 じて 変 更 する(% 指 定 する) ことが 多 い Photoshop などで 作 成 したデザインラフはピクセル 固 定 だが 実 際 のサイトではデバイスのスクリーンサイズに 応 じてコンテ ンツ 幅 が 変 わり デザインラフと 同 じ 仕 上 がりにはならない 17

コーディング モバイル 対 応 の 法 によってコー ディングのやりかたが 変 わる RWD RESS モバイル 専 用 サイト メディアクエリで 対 応 コンポーネント 化 ( 部 品 化 )して 対 応 デ バイスごとに 分 けて 作 成 対 応 デバイスごとに 分 けて 作 成 (タッチデバイス 向 けサイトのみをメ ディアクエリで 対 応 することもある) 18

メディアクエリ デバイスの デ 幅 や 高 さなどの 対 象 のメ ディア 属 性 を 細 かく 指 定 してCSSを 適 用 できる 技 術 (CSS3で 策 定 ) float: left float: left float: right float: right 例 ) ウィンドウの 幅 が 900px 未 満 の ときは float を 使 用 しない 例 ) ウィンドウの 幅 が 900px 以 上 の ときは float を 使 用 する 19

テスト シミュレータでは 限 界 があるため 公 開 前 には 実 機 でターゲットブラウザ を 使 ってテストする 20