Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
One Source Multi Use ワンソースマルチユース                           GUIDELINE                                       ガイドライン2011.10.1...
更新履歴      日付              バージョン            更新内容         変更者2011/09/01   ver1.0           新規作成                 丸居久仁男2011/10...
目次INDEX00      INTRODUCTION        はじめに                         401      MERIT AND DEMERIT        メリットとデメリット        メリットと ...
はじめに00               INTRODUCTION              はじめに                 Useとは                                       html文書などをm...
メリットとデメリット01              MERIT AND DEMERIT              メリットと              メリットとデメリット                                    ...
CSSによる読み分け実装02                  CSS SWITCH IMPLEMENTATION                  CSSによる読                  CSSによる読み分け実装          ...
CSSによる読み分け実装link要素 media要素link要素 media要素Media属性Media属性                                                TIPS    制作に役立つヒントCSS...
CSSによる読み分け実装link要素 media要素link要素 media要素                                                                                  ...
CSSによる読み分け実装スマートフォン/タブレットのスマートフォン/タブレットの画面解像度windowサイズ比較表 ※windowサイズとはブラウザから情報バーを除いたサイズ windowサイ                          ...
CSSによる読み分け実装            userAgent振 JavaScript userAgent振り分け出力navigator.userAgent振navigator.userAgent振り分け/document.write出力 ...
CSSによる読み分け実装     HTTP_USER_AGENT振 PHP HTTP_USER_AGENT振り分け出力$_SERVIER[‘HTTP_USER_AGENT’$_SERVIER[‘HTTP_USER_AGENT’]振り分け/pri...
レイアウトの考え方03        LAYOUT        レイアウトの        レイアウトの考え方情報ブロックの情報ブロックの整理  ブロック                                            ...
レイアウトの考え方情報ブロックの情報ブロックの整理  ブロック                                        【ブロックの配列例2】情報ブロックについては、大まかな並べ替えも可能です。また、Bのようにデバイスによ...
プロジェクト進行フロー04          PROJECT FLOW          プロジェクト進行フロー          プロジェクト進行フロー                進行プロジェクトのプロジェクトの進行One Source ...
プロジェクト進行フロープロジェクトのプロジェクトの進行One Source Multi Useのプロジェクトを進行する場合、統一した情報設計のために、全体的な要件定義が必要となります。この要件定義のメインとなるテーマはデバイスをまたいだ情報設計...
デザイン移行バリエーション05          DESIGN VARIATIONS          デザイン移行バリエーション          デザイン移行バリエーション              移行                  ...
デザイン移行バリエーション  幅詰、縮小、① 幅詰、縮小、リサイズデザインを大きく変更せずサイズをスマートフォンサイズに最適化         PCサイト                                    移行       ...
デザイン移行バリエーション  縦積み② 縦積み横構造を縦構造に変換する         PCサイト        スマートフォンサイト                 移行                                    ...
デザイン移行バリエーション  inline-block積③ inline-block積み横構造を横“成り行き”構造に置き換える               PCサイト                                    移行 ...
デザイン移行バリエーション④ センタリング縦積みに付随してサムネイル画像などはセンターレイアウトする           PCサイト                     スマートフォンサイト                         ...
デザイン移行バリエーション⑤クリッカブルオブジェクト化 クリッカブルオブジェクト化スマートフォン独自の操作性や“スマートフォンらしさ”を加味し機能をリデザインする。ブロックのクリッカブル化もその一つ。         PCサイト        ...
デザイン移行バリエーション  スマートフォンアイコン化⑥ スマートフォンアイコン化iOSなどのアイコンデザインにより操作感とスマートフォンらしさの演出を踏襲する         PCサイト                            ...
デザイン移行バリエーション⑦ 分解table要素の表組みは、分解することで視認性が向上する場合がある         PCサイト                                    移行                    ...
デザイン移行バリエーション⑧ 格納非表示化により初期表示の省スペース化を図る         PCサイト               スマートフォンサイト                        移行                   ...
デザイン移行バリエーション⑨ 省略 導線を損なわない範囲であれば、思い切ってリンク機能を省略することで、ナビゲーション が整理される場合もある         PCサイト                                     ...
デザイン移行バリエーション  Flash代替化⑩ Flash代替化iOSで表示できない(201106現在)Flashオブジェクトを代替画像化                                                    ...
移行困難なデザインパターン06        DIFFICULT DESIGN PATTERN        移行困難な        移行困難なデザインパターン                                         ...
移行困難なデザインパターン①ソース記述順を大きく逸脱するレイアウト ソース記述順を きく逸脱するレイアウト    記述順    逸脱する以下のPCレイアウトからスマートフォンCのレイアウト移行はお勧めしません。         PCサイト   ...
移行困難なデザインパターン  inline-block成    みで縦積                     縦積み② inline-block成り行き積みで縦積み以下のPCレイアウトからスマートフォンBのレイアウト移行は対応できません  ...
Upcoming SlideShare
Loading in …5
×

ワンソースマルチユース

14,289 views

Published on

HTMLのワンソースマルチユースの概論をまとめた資料

  • Be the first to comment

ワンソースマルチユース

  1. 1. One Source Multi Use ワンソースマルチユース GUIDELINE ガイドライン2011.10.13 マルチデバイスLab. COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  2. 2. 更新履歴 日付 バージョン 更新内容 変更者2011/09/01 ver1.0 新規作成 丸居久仁男2011/10/13 ver1.1 P10,P11 iOS5対応UA反映 丸居久仁男 2 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  3. 3. 目次INDEX00 INTRODUCTION はじめに 401 MERIT AND DEMERIT メリットとデメリット メリットと 502 CSS SWITCH IMPLEMENTATION CSSによる読 CSSによる読み分け実装 による 603 LAYOUT レイアウトの レイアウトの考え方 1204 PROJECT FLOW プロジェクト進行 プロジェクト進行フロー 進行フロー 1405 DESIGN VARIATIONS デザイン移行バリエーション デザイン移行バリエーション 移行 1606 DIFFICULT DESIGN PATTERN 移行困難な 移行困難なデザインパターン 27 3 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  4. 4. はじめに00 INTRODUCTION はじめに Useとは html文書などをmedia queriesを用いてCSSを振り分けることができる。One Source Multi UseとはOne Source Multi Useとは、1つのドキュメントを、仕様や画面サイズの異なる複数のデバイスに対して最適化して表示させるための考え方です。広義としては、HTMLファイルのデバイスごとの振分対応やCMSなども概念としては含むことができます。複数デバイスに対応する方法は、フィーチャーフォンの世界では既に行われていますが、ここ最近定義されてきているOne Source Multi Useの考え方では、主にCSS3のmediaqueriesを使用したCSSの振分対応のことをさしていることが多く、画面サイズ(解像度・ウィンドウサイズ)を元にどのようにレイアウト別のCSSを出し分けるかがテーマになっています。IMJGが提唱するOneIMJGが提唱するOne Source Multi Useの定義 する UseのIMJGが考えるOne Source Multi Useの定義は、Webブラウザ上で閲覧できるHTMLデータを2種類以上のデバイス(モバイルキャリア)で、最適に閲覧することが出来るように効率化した設計思想のことです。「One Source Multi Useとは」でも触れていますが、方法は複数考えられ、media queriesの使用によるデバイスごとの表示分け、UA取得によるデバイスの切り分けなど、幾つかの選択肢があります。One Source Multi Useは設計の思想になりますので、実現するための方法を以後のページで解説していくことにしましょう。 4 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  5. 5. メリットとデメリット01 MERIT AND DEMERIT メリットと メリットとデメリット TIPS まとめ Useの One Source Multi Useのメリット ■メリット ・制作リソースを抑えられる ・各デバイスへの準個別対応(完全対応ではない)One Source Multi Use思想で構築をするメリットは、元となるHTMLソースのパターンを少な ・デバイス別ターゲットユーザーへの対応くして、複数のデバイス(モバイルキャリア)へ展開させることができるため、デバイス別に ・初期投資以後のランニングコストを抑えることができる ・media queries ではJavaScriptに依存しない振分けが可能膨らみがちな制作リソースを抑えることができます。それにより、(デバイスの)ある程度の将来性を見据えて対応するため、準個別対応をすることが可能となります。また、初期投 ■デメリット資のみで、デバイスごとに微妙に違うターゲットユーザーを広くカバーすることが可能となり ・高いスキルを必要とするため制作者が限られる ・設計思想を理解してもらう時間を要するます。さらに、デバイス別に運用することなく、元となるHTMLソースを編集するだけで対応 ・スロースタート+初期投資へのコスト高できるため、ランニングコストを抑えることができます。 ・運用者にも深い構造理解が必要 ・media queriesの画面サイズによる振分けが破綻する可能性も・・・?media queriesの使用に限ればJavaScriptに依存することなく、切分け、振分けが可能なのでJavaScriptがoffの際の挙動を気にしなくてもよくなります。 Useの One Source Multi UseのデメリットOne Source Multi Use思想で構築をするデメリットは、初期設計に多く時間を割かなければならない点です。初期設計にはデバイス別に高度で幅広い知識が必要となるため、設計者には高いスキルが要求されてしまいます。さらには、顧客を含めたプロジェクトに関わる全てのメンバーが設計思想への理解が必要となるため、定義を固める時間を要します。そのため、初期投資部分は他のプロジェクトよりも初動を慎重に進めることとなり、スロースタート+初期投資増となる可能性が高くなります。また、運用時に入ってからは、部分的なリニューアルやデバイス別のカスタマイズなどが発生した場合、設計思想を理解した上での対応を求められてしまい、手軽とはいえない作業になってしまう可能性もあります。media queriesの使用に関しては、画面サイズを判別してCSSを出し分けるため、新デバイスなど、対応するデバイスが増えるたびに画面サイズを考慮しなくてはいけない上、幾つかの条件上ではmedia queriesだけでデバイス別にCSSを出し分けることが難しい状況になりつつあります。 5 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  6. 6. CSSによる読み分け実装02 CSS SWITCH IMPLEMENTATION CSSによる読 CSSによる読み分け実装 による UseのOne Source Multi Useのメリット 【CSSの読み分けパターン】One Source Multi Useを実践するためにCSSを読み分けする必要がありますが、実装するためには主に以下にあげる3つのパターンが考えられます。デバイスや環境、コンテンツの特性を意識しながら、どの方法で実装するべきかを検討しましょう。CSSの読み分けの種類CSSの けの種類 読み分けの種類 Media Queries式 link要素 media要素 media属性・media属性機能拡張Media Queriesによる読 CSS3 JS PHP み分け メリット=JavaScriptに依存しない/デメリット=画面サイ ズがバッティングする可能性有 JavaScript式 JavaScript userAgent振 navigator.userAgent振り分け/document.write出力 り分け出力 メリット=UAを判別して振り分けるため厳密/デメリット =JavaScript環境に依存する PHP式 PHP HTTP_USER_AGENT $_SERVIER[‘HTTP_USER_AGENT’]振り分け/printなど 振り分け出力 出力 CSS3のMedia Queries、JavaScript、PHPのいずれかを用いて、適切な メリット=JavaScriptに依存せずUAで振分できる/デメリ CSSを出し分けること出来る。 ット=UA偽装された場合に判定できない どの出し分け方式を用いるかはサイトの方針や環境によるところがある。 ※デメリットはJavaScript振り分けでも同様 6 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  7. 7. CSSによる読み分け実装link要素 media要素link要素 media要素Media属性Media属性 TIPS 制作に役立つヒントCSSの読み分けを考える際の基本として、メディアタイプによる読み分けがあります。 左図のほかにも、projection(プロジェクタ)、braille(点字ブラウザ)、「メディアタイプ」とは、ウェブページの出力先媒体(=メディア)を、いくつかの種類に分類し、 embossed(点字プリンタ)、speech(音声ブラウザ)などが定義されていスタイルシートを変更する機能のことで、W3Cが定めたWeb標準の仕様のことです。 る。 メディアタイプ名 特徴 screen 非ページ型のコンピュータ・スクリーンで表。 携帯デバイス(小画面、モノクロ、ビットマップ画像、帯域 handheld 幅に制限がある)で表示。 テレビ型デバイス(解像度、色数が低く、スクロール能力 TV に制限がある)で表示。 print ページ形式の不透明な物質及び、印刷プレビュー・モー ドで見る文書を表示。 7 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  8. 8. CSSによる読み分け実装link要素 media要素link要素 media要素 メディア特性 判別基準 width ウィンドウサイズの幅media属性機能拡張media queriesのmedia属性機能拡張media queriesの指定方法 属性機能拡張 min-width 最小のウィンドウ幅CSS3による読み分け方法として、Media Queriesによる読み分けがあります。 max-width 最大のウィンドウ幅media queriesとは、画面サイズやデバイス幅、高さなどを基準に任意のCSSを読み分けで height ウィンドウの高さきるCSS3の機能です。PC、タブレット、スマートフォン端末を1つのHTMLソースでCSSを min-height 最小のウィンドウの高さ読み分ける際に有効ですが、サイズ選定を慎重にする必要があります。 max-height 最大のウィンドウの高さ device-width 画面解像度の幅media queriesによる読み分け例 queriesによる による読 min-device-width 最小の画面解像度の幅 max-device-width 最大の画面解像度の幅media属性機能拡張media queriesのmedia属性機能拡張media queriesの指定方法 属性機能拡張 device-height 画面解像度の高さ min-device-height 再送の画面解像度の高さ【読み分けをタブレット、スマートフォンにて実施した場合】 max-device-height 最大の画面解像度の高さ ・スマートフォン向け設定 論理演算子 用途 <link rel="stylesheet" type="text/css" href="./css/b.css" media="screen"> and AND:かつ(区切りとして使用) , OR:または(区切りとして使用) スマートフォン向けにはmedia queriesではない通常link要素を読み込ませます。 not NOT:~でない(前につけて使用) ・タブレット向け設定 only 特定のCSSのみ(前につけて使用) <link rel=“stylesheet” type=“text/css” media=“screen and (min-device-width:768px) and (orientation:portrait)” href="../css/tablet.css"> <link rel="stylesheet" type="text/css" media="screen and (min-device-width:1024px) and Orientation 用途 (orientation:landscape)" href="../css/tablet.css"> portrait 縦長端末 Landscape 横長端末 スマートフォン向け設定を記述した後、上記のように「デバイスの横幅が768px且 つ縦長端末」もしくは「横幅1024px且つ横長端末」という設定を加えます。これに より、768px縦長もしくは1024px横長以上の端末で閲覧した場合のみ、タブレット 向けのCSSが表示されるようになっています。 8 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  9. 9. CSSによる読み分け実装スマートフォン/タブレットのスマートフォン/タブレットの画面解像度windowサイズ比較表 ※windowサイズとはブラウザから情報バーを除いたサイズ windowサイ 768×102 ズ 320×480 320×533 320×569 360×640 400×683 800×480 954×474 1280×768 800×1280 4 (横×縦) 768×102 解像度 320×480 480×800 480×854 540×960 600×1024 800×480 960×480 1280×768 800×1280 4 ●GALAXY ●DELL ●LYNX 3D ●Xperia ●Optimus Pad L- MOTOROLA ●iPhone 3GS(3G) ●INFOBAR(A01) Tab Streak ●IS01 ●iPad (SH-03C) (SO-01B) 06C XOOM(Tbi11M) (SC-01C) (001DL) ●iPhone 4 ●GALAXY S AQUOS PHONE SH- LYNX SH- ※解像度は例外で ●REGZA Phone T-01C ●iPad2 (SC-02B) 12C 10B 640×960 ●Optimus chat ●HTC Desire HD REGZA Phone IS04 AQUOS PHONE 006SH (L-04C) (001HT) ●Libero AQUOS PHONE ●IS03 REGZA Phone IS11T (003Z) IS11SH HTC Aria ●GALAXY S II ●MEDIAS AQUOS PHONE (S31HT) (SC-02C) (N-04C) IS12SH Pocket WiFi S II GzOne MEDIAS WP AQUOS PHONE f (S41HW) (IS11CA) (N-06C) (SH-13C) HTC Desire Xperia arc (X06HTII) (SO-01C) htc EVO WiMAX Xperia acro (ISW11HT) (SO-02C) SIRIUS α ●Xperia acro (IS06) (IS11S) Optimus bright IS05 (L-07C) Optimus bright INFOBAR A01 (L-07C) AQUOS PHONE THE F-12C HYBRID (007SH) GALAPAGOS Sweety 003SH (003P) GALAPAGOS P-07C 005SH S42HW ※端末やブラウザの仕様変化により最適な実装方法の見直しが適宜必要です。 9 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  10. 10. CSSによる読み分け実装 userAgent振 JavaScript userAgent振り分け出力navigator.userAgent振navigator.userAgent振り分け/document.write出力 document.write出力 TIPS まとめJavaScriptによる読み分け方法として、User Agentを元にブラウザを判別してCSSを振り分 ■メリットけるやり方があります。 端末とOSを明確に振分け、確実な処理を付与できるUser Agentの情報としてOS名を返したり、ブラウザ名を返したりするため、判別できる種類 ■デメリットも大雑把なものから、フィーチャーフォンのように機種名別に振り分けることも可能です。 javascriptオフ時非対応でユーザーの利用設定に依存する※ただし、Java Scriptが動作する環境下に限ります。 userAgent文字列依存であり、予想外の仕様変更に対して運用が発 生する【Java Scriptによる振り分け記載例】 var nUa=navigator.userAgent; var nUalPh=nUa.indexOf(‘iPhone; CPU iPhone ’)!;//iPhone var nUalPh=nUa.indexOf(‘iPhone; U; CPU iPhone’)!;//iPhone var nUalPa=nUa.indexOf(‘iPad; CPU OS’)!;//iPad var nUalPa=nUa.indexOf(‘iPad; U; CPU OS’)!;//iPad var nUalPo=nUa.indexOf(‘iPod; CPU iPhone’)!;//iPod var nUalPo=nUa.indexOf(‘iPod; U; CPU iPhone’)!;//iPod var nUaAnd=nUa.indexOf(‘Linux; U; CPU Android’)!;//Android if(nualPh||nUalPa||nualPo||nUaAnd||nUaBlb||nUaWmb){ document.write(‘<meta name=“format-detection” content=“telephone=no”>¥n’); document.write(‘<meta name=“viewport” content=“initial-scale=1.0,maximum- scale=1.0,user-scalable=yes”>¥n’); document.write(‘<link rel=“stylesheet” type=“text/css” href=“[スマートフォンレイア ウトCSS]” media=“screen”>¥n); } else{ document.write(‘<link rel=“stylesheet” type=“text/css” href=“[PCレイアウトCSS]” media=“all”>¥n); } 10 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  11. 11. CSSによる読み分け実装 HTTP_USER_AGENT振 PHP HTTP_USER_AGENT振り分け出力$_SERVIER[‘HTTP_USER_AGENT’$_SERVIER[‘HTTP_USER_AGENT’]振り分け/printなど出力 printなど出力 など TIPS まとめPHPによる読み分け方法は、基本的にはJava Scriptと同様の動作をすることとなります。 ■メリットただし、Java ScriptのようにON/OFFがあるわけではないので、サーバー環境さえ整ってい サーバサイド処理でクライアントに負荷がかからない 端末とOSを明確に振分け確実な処理を付与できるれば安定した動作が期待できます。フィーチャーフォンでのキャリア/機種世代別の振り分けは主にこちらの方法がとられてい ■デメリットます。 サーバサイド要件のため、サーバ仕様に依存し、知識とサーバ管理 権限を要する。 HTTP_USER_AGENT文字列依存であり、予想外の仕様変更に対して 運用が発生する【PHPによる振り分け記載例】 $nUa=$_SERVER[‘HTTP_USER_AGENT’]; if(ereg(‘iPhone; CPU iPhone ’,$nUa)||ereg(‘iPhone; U; CPU iPhone ’,$nUa)|| ereg(‘iPad; CPU OS ‘,$nUa)|| ereg(‘iPad; U; CPU OS ‘,$nUa)||ereg(iPod; CPU iPhone ‘,$nUa)ereg(iPod; U; CPU iPhone ‘,$nUa)||ereg(Linux; U; Android ‘,$nUa)){ print<<<EOD <meta name=“format-detection” content=“telephone=no”> <meta name=“viewport” content=“initial-scale=1.0,maximum-scale=1.0,user-scalabe=yes”> <link rel=“stylesheet” type=“text/css” href”[スマートフォンレイアウトCSS]” media=“screen”>¥n EOD; } else( print<<<EOD <link rel=“stylesheet” type=“text/css” href”[PCレイアウトCSS]” media=“all”>¥n EOD; } 11 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  12. 12. レイアウトの考え方03 LAYOUT レイアウトの レイアウトの考え方情報ブロックの情報ブロックの整理 ブロック 【ブロックの配列例1】・One Source Multi Useを実施にあたり、情報をどのように整理するかが重要となります。 A情報があつまったら、情報を整理して各デバイスに適した配置を考えることが必要です。右図では、画面サイズの大きいデバイスと小さいデバイスでのコンテンツレイアウトの出し C E分けのイメージ図になります。大きいデバイスで並べているレイアウトを小さい端末では上からプライオリティ順に配列しています。 B D F A B C D E F PCサイトからスマートフォンなどの端末に最適化する際の配置として は、上から下への情報ブロックを崩さぬように配置することが理想形 です。 12 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  13. 13. レイアウトの考え方情報ブロックの情報ブロックの整理 ブロック 【ブロックの配列例2】情報ブロックについては、大まかな並べ替えも可能です。また、Bのようにデバイスにより表 A示・非表示を切り替えるレイアウトも可能です。ただし、並べ替えについてはデバイスごとの設計に注意する必要があります。表示・非表示では、CSSでの切替になるため、HTML容量は大きいままになります。 C E情報ブロックの並べ替えはあまりにも極端なものだったりブロック単位では無い場合は、レ Bイアウトが不可能な場合もあります。右図例でも示しているように、Bのコンテンツは画面の小さいデバイスでは非表示にして、大きいデバイスでは表示させるということも可能です。 D F A D B C E F コンテンツの並べ替えについては、慎重に設計しなければなりません。 表示・非表示については、HTML容量に注意しましょう。 13 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  14. 14. プロジェクト進行フロー04 PROJECT FLOW プロジェクト進行フロー プロジェクト進行フロー 進行プロジェクトのプロジェクトの進行One Source Multi Useのプロジェクトを進行する場合、デバイス別に進めていたプロジェクト進行フローでは、情報・デザインの統一と相互に補完しあえる構成を作成できなければ、プロジェクトが崩壊してしまう可能性があります。 通常のプロジェクトでの進行例 PCサイト 要件定義 画面構成 デザイン マークアップ SP/FPサイト 要件定義 デバック 画面構成 納品 デザイン マークアップ デバック 納品 ディレクタ 主な稼動職能 デザイナ マークアップ デバッガー 14 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  15. 15. プロジェクト進行フロープロジェクトのプロジェクトの進行One Source Multi Useのプロジェクトを進行する場合、統一した情報設計のために、全体的な要件定義が必要となります。この要件定義のメインとなるテーマはデバイスをまたいだ情報設計を意図しており、ディレクタはもちろんのこと、デザイナやマークアップエンジニアも積極的にプロジェクトに関わるように意識することが大切になってきます。要件定義後は、ディレクタが音頭となり、各職種メンバーの作業で設計思想が反映されているかを随時チェックしながら進めていく必要があります。各メンバーは自作業だけではなく、プロジェクトを俯瞰しながら進行していくことが求められます。 One Source Multi Useプロジェクトでの進行例 PCサイト 画面構成 デザイン マークアップ デバック 納品 要件定義 (情報設計) SP/FPサイト 画面構成 デザイン マークアップ デバック 納品 ディレクタ 主な稼動職能 デザイナ マークアップ デバッガー 15 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  16. 16. デザイン移行バリエーション05 DESIGN VARIATIONS デザイン移行バリエーション デザイン移行バリエーション 移行 TIPS デザイン移行バリエーション一覧PCからスマートフォンへのデザイン移行バリエーションPCからスマートフォンへのデザイン移行バリエーション からスマートフォンへのデザイン移行 ① 幅詰、縮小、リサイズ ② 縦積み ③ inline-block積みPCのデザインを基軸にスマートフォンサイトへのリデザインする場合、いくつかの移行パ ④ センタリングターンがあります。 ⑤ クリッカブルオブジェクト化 ⑥ スマートフォンアイコン化One Source Multi Useを用いる案件に限らずにデザイン移行する場合の参考事例をご紹介 ⑦ 分解して行きます。 ⑧ 格納 ⑨ 省略 ⑩ Flash代替化 PCサイトデザインからスマートフォンサイトへのデザイン移行をする際 には、主に左記の要素に対しての最適化をすることで対応することが できます。 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  17. 17. デザイン移行バリエーション 幅詰、縮小、① 幅詰、縮小、リサイズデザインを大きく変更せずサイズをスマートフォンサイズに最適化 PCサイト 移行 スマートフォンサイト 17 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  18. 18. デザイン移行バリエーション 縦積み② 縦積み横構造を縦構造に変換する PCサイト スマートフォンサイト 移行 18 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  19. 19. デザイン移行バリエーション inline-block積③ inline-block積み横構造を横“成り行き”構造に置き換える PCサイト 移行 スマートフォンサイト 19 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  20. 20. デザイン移行バリエーション④ センタリング縦積みに付随してサムネイル画像などはセンターレイアウトする PCサイト スマートフォンサイト 移行 20 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  21. 21. デザイン移行バリエーション⑤クリッカブルオブジェクト化 クリッカブルオブジェクト化スマートフォン独自の操作性や“スマートフォンらしさ”を加味し機能をリデザインする。ブロックのクリッカブル化もその一つ。 PCサイト スマートフォンサイト 移行 PCではテキストリンクの場合も... エリア全体をクリック可能にする 21 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  22. 22. デザイン移行バリエーション スマートフォンアイコン化⑥ スマートフォンアイコン化iOSなどのアイコンデザインにより操作感とスマートフォンらしさの演出を踏襲する PCサイト スマートフォンサイト 移行 22 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  23. 23. デザイン移行バリエーション⑦ 分解table要素の表組みは、分解することで視認性が向上する場合がある PCサイト 移行 スマートフォンサイト 23 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  24. 24. デザイン移行バリエーション⑧ 格納非表示化により初期表示の省スペース化を図る PCサイト スマートフォンサイト 移行 開閉式に 24 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  25. 25. デザイン移行バリエーション⑨ 省略 導線を損なわない範囲であれば、思い切ってリンク機能を省略することで、ナビゲーション が整理される場合もある PCサイト 移行 スマートフォンサイト 省略 25 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  26. 26. デザイン移行バリエーション Flash代替化⑩ Flash代替化iOSで表示できない(201106現在)Flashオブジェクトを代替画像化 26 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  27. 27. 移行困難なデザインパターン06 DIFFICULT DESIGN PATTERN 移行困難な 移行困難なデザインパターン TIPS まとめデザイン移行のデザイン移行の条件 移行 ① ソース記述順を大きく逸脱するレイアウト ・・・ × ※ある程度であればpositionで位置換えすることは可能PCサイトデザインからスマートフォンサイトをリデザインする際に、まれに実装が困難な ② inline-block成り行き積みで縦積み ・・・ ×ケースもあります。実装困難なデザインについてのポイントは以下のようなものがあります。 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  28. 28. 移行困難なデザインパターン①ソース記述順を大きく逸脱するレイアウト ソース記述順を きく逸脱するレイアウト 記述順 逸脱する以下のPCレイアウトからスマートフォンCのレイアウト移行はお勧めしません。 PCサイト C A D B スマートフォンサイト A B C A A D B C C C B B D D A 28 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.
  29. 29. 移行困難なデザインパターン inline-block成 みで縦積 縦積み② inline-block成り行き積みで縦積み以下のPCレイアウトからスマートフォンBのレイアウト移行は対応できません PCサイト テキストリンクA テキストリンクB テキストリンクC テキストリンクD テキストリンクE テキストリンクF スマートフォンサイト A B テキストリンクA テキストリンクB テキストリンクC テキストリンクA テキストリンクC テキストリンクE テキストリンクD テキストリンクE テキストリンクF テキストリンクG テキストリンクB テキストリンクD 29 COPYRIGHT© IMJ CORPORATION.ALL RIGHTS RESERVED.

×