多摩美術大学エンタテイメントとデザインゼミ2 第9回

エンタテイメントとデザインゼミ第9回2013.11.12 13:00-16:10

徳久悟慶應義塾大学大学院メディアデザイン研究科[email protected]

©dangkang interdisciplinary design lab.

13年11月12日火曜日

11/05までの課題

• 修正案の提出• PDF

• コンセプト

• ストーリー

• コンテンツ ver.1.1 (after)

• 注意事項

• 11/05 13:00までに/webdoc/toppan/あなたのチーム名/ フォルダにアップ

• MLに提出完了のメールを送信

©dangkang interdisciplinary design lab. 213/11/12



• 印刷博物館よりコメント




• 演習形式• 11/12 13:00までにメールで徳久・石山さん宛に提出

• 個人でもグループでも可



アウトライン

• 第9回スマホサイト

• (講義) スマホサイトの特徴

• (演習) スマホサイトの実装



スマホサイトの特徴



はじめに

• シミュレータのインストール• iPhone

• /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications

• Setting-> general-> International-> Language->日本語



はじめに

• シミュレータのインストール• Android

• JDKのインストール

• http://www.oracle.com/technetwork/java/javase/downloads/index.html



http://www.oracle.com/technetwork/java/javase/downloads/index.html




はじめに


• JDKのインストール

• http://www.oracle.com/technetwork/java/javase/downloads/index.html







はじめに


• Android SDK のインストール

• http://developer.android.com/sdk/index.html



http://developer.android.com/sdk/index.html




はじめに


• Eclipse.appを起動

• Window->Android SDK Managerを起動



はじめに


• ADV(Android Virtual Device Manager)の起動



はじめに





はじめに

• シミュレータのインストール• Chrome add-on

• FireMobileSimulator • https://chrome.google.com/

webstore/detail/firemobilesimulator-for-g/mkihbloiacgiofaejgagokalpeflnmbe?hl=ja



https://addons.mozilla.jp/firefox/details/8519












はじめに

• シミュレータのインストール• Chrome add-on

• FireMobileSimulator





はじめに

• シミュレータのインストール• Firefox add-on

• FireMobileSimulator 1.2.3• https://addons.mozilla.jp/firefox/details/

8519









様々なスマホサイト

• PC向けとスマホ向けの比較

• ポータル





• ポータル





• SNS





• EC





• 情報サイト



PC，タブレット，スマホの違い


PC タブレットスマホ

画面サイズ大中小

タッチパネルなしありあり

通信なし 3G/4G 3G/4G

位置情報なし(wifi) GPS GPS


レスポンシブ



レスポンシブ

• PC，タブレット，スマホなどあらゆるデバイスに対する制作手法

• あらゆるデバイスに対して単一のWebページ（HTML）を使用

• スクリーンサイズ（画面幅）を基準に，CSSだけを切り替えてレイアウトを調整



レスポンシブ

• メリット• ワンソース管理

• 単一URL

• SEOに有効

• デメリット

• データ量の増大

• 構築コストの増大



• Webアプリの特徴• 開発が容易• 新しいユーザがアクセスしやすい• アプリケーションの公開が容易• 自動的なアップデート• 動的データへのアクセス• 既存のウェブコンテンツへのアクセス• オフラインでのサーバアクセス• 外部ウェブとのマッシュアップ• 他のユーザへのアクセス


Webアプリとネイティブアプリ


• Webアプリに適したプログラム• チャット• 情報管理(一般)

• 情報管理(変更が多いのもの)

• ゲーム(シンプル・マルチプレーヤー)

• 在庫一覧• スケジュール(複数人)

• スケジュール(サービス)





• ネイティブアプリの特徴• 高度な開発環境• 高級言語• より良いグラフィックスライブラリ• 毎回使うユーザに便利• 毎回ダウンロードが不要• ネイティブスピードで動作• より良いプライバシーの保護• 収益モデルが容易されている




• ネイティブアプリに適したプログラム• 会計• アドレス帳や連絡先• アニメーショングラフィックス• 情報管理(機密情報)

• ゲーム• 位置情報活用• 写真・画像



ワークフロー

1. 企画2. 調査

• 先行事例調査• フィールドワーク

• ステークホルダ• 想定ユーザ

3. コンセプト生成4. サイト設計

• 構造設計• ワイヤフレーム

• 画面設計• デザインカンプ


7. html/css8. JS実装9. リリース


ワイヤフレームツール

• moqups• https://moqups.com/#!/



https://moqups.com/#!/

https://moqups.com/#!/

ワイヤフレームツール

• Cacoo• https://cacoo.com/lang/ja/



https://cacoo.com/lang/ja/

https://cacoo.com/lang/ja/

設計の工夫

• ゴール設計• 電話による問い合わせ

• 地図による店舗への誘導

• クーポンの提供による店舗への誘導

• TwitterでのURLの拡散

• メーラでのURLの共有

• ブックマーク・ホームへの追加



設計の工夫

• 折りたたみ



設計の工夫

• タブの活用



設計の工夫

• タップしやすいボタン



設計の工夫

• リスト構造



設計の工夫

• アイコン



設計の工夫

• 文字サイズ



振り分け

• リダイレクトあり• .htaccess• php• js

• リダイレクトなし• css



スマホサイトの実装



HTML5

• 新しい要素の追加• 高機能な要素の追加

• canvas• video• audio

• イベントの追加• drag&drop• ファイル操作

• 参考 • http://www.webzoit.net/hp/it/internet/

homepage/html/html5/elements/attributes/event_handler/



http://www.webzoit.net/hp/it/internet/homepage/html/html5/elements/attributes/event_handler/






CSS3

• セレクタの追加• div[id^=”column”]• div p:last-child

• 表現力の向上• 要素の角丸処理

• 背景のグラデーション処理

• ドロップシャドウ，エンボス処理



スマホサイトの実装

1. マークアップ2. CSSの調整3. 使いやすさの向上



1. マークアップ

• index.htmlをオープン

• <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">




• index.htmlをオープン

• <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">




• リセットCSSの組み込み

• HTML5 Doctor• html5reset.css• https://code.google.com/p/

html5resetcss/downloads/list• <link rel="stylesheet" href="css/

reset.css">



https://code.google.com/p/html5resetcss/downloads/list





• html5のマークアップ

• header• footer• nav• article• section• aside



2. CSSの調整

• 基本のスタイルを整えるbody { font:14px/1.231 "ヒラギノ角ゴ Pro W3";}

#wrap { padding: 10px;}section, nav { margin-bottom: 1em;}

p { margin-bottom: 1em;}

/* clearfix */.clearfix:after { content: "."; /* 新しい要素を作る */ display: block; /* ブロックレベル要素に */ clear: both; height: 0; visibility: hidden;}header { background-color: #39B3EE; text-align:center;}



2. CSSの調整

• コーナーを角丸にaside { background-color: #ebebeb; border-radius: 8px; -webkit-border-radius: 8px; padding: 10px;}aside p:last-child { margin-bottom: 0;}



2. CSSの調整

• タイトルにドロップシャドウh2 { font-size: 121%; text-shadow: 1px 1px 2px #ccc; color: #007FCD; margin-bottom: 10px;}



2. CSSの調整

• ボタンをグラデーションで装飾するnav { border-radius: 8px; -webkit-border-radius: 8px; background-color: #9cc900; background: -webkit-gradient(linear, left top, left bottom, from(#72D1F7), to(#39B3EE)); font-size: 105%; width: 300px; margin-bottom: 15px;}

nav a { color: #fff; text-decoration: none;}

nav li { text-align: center; float: left; font-weight: bold; border-left: 1px solid #fff; text-shadow: -1px -1px 0 rgba(150, 150, 150, 0.3);}

nav li:first-child { border: none;}



2. CSSの調整

• 残りのボタンの装飾装#btnTop { border-radius: 5px; background-color: #cbcccf; background: -webkit-gradient(linear, left top, left bottom, from(#cbcccf), to(#acaeb0)); width: 7em; font-size: 85%; text-align: center; float: right; margin-right: 10px;}#btnTop a { text-shadow: 1px 1px 0 #ddd; display: block; padding: 5px 0; color: #444444; text-decoration: none;}



2. CSSの調整

• 横画面に対応h2 { font-size: 121%; text-shadow: 1px 1px 2px #ccc; color: #007FCD; margin-bottom: 10px; text-align: center;}

/* 既存のnavに追加しましょう */nav { margin: 0 auto;}

footer { background-color: #3CB1EB; height:25px;}

footer p { clear: both; padding: 0;}footer img { vertical-align: top;}footer p:last-child { margin: 0;



2. CSSの調整

• 横画面に対応h2 { font-size: 121%; text-shadow: 1px 1px 2px #ccc; color: #007FCD; margin-bottom: 10px; text-align: center;}

nav { margin: 0 auto;}

footer { background-color: #3CB1EB; height:25px;}

footer p { clear: both; padding: 0;}footer img { vertical-align: top;}footer p:last-child { margin: 0;}



3. 使いやすさの向上

• ページ内リンク<nav> <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul></nav>

<h3 id="access">アクセス</h3>

<h3 id="tel">お電話でのお問い合わせ</h3>

<h3 id="mail">メールでのお問い合わせ</h3>




• ページ内リンク<nav> <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul></nav>

<h3 id="access">アクセス</h3>

<h3 id="tel">お電話でのお問い合わせ</h3>

<h3 id="mail">メールでのお問い合わせ</h3>




• リンクを使いやすくnav li a { display: block; width: 99px; padding: 8px 0;}




• 電話番号にリンクを設定する<meta name="format-detection" content="telephone=no">

<h3 id="tel">お電話でのお問い合わせ</h3> <p><a href="tel:042-679-5615">042-679-5615</a><代表></p>




• 地図リンクを作る <h3 id="access">アクセス</h3> <p>〒192-0394 東京都八王子市鑓水2-1723　<br /><a href="http://goo.gl/maps/yvjve">地図を見る</a></p>



http://goo.gl/maps/yvjve



• 地図リンクを作る <h3 id="access">アクセス</h3> <p>〒192-0394 東京都八王子市鑓水2-1723　<br /><a href="http://goo.gl/maps/yvjve">地図を見る</a></p>






• メールを送信する<h3 id="mail">メールでのお問い合わせ</h3> <p><a href="mailto:[email protected]?subject=%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b">[email protected]</a></p>

URLエンコードhttp://www.tagindex.com/tool/url.html



mailto:[email protected]?subject=%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b








mailto:[email protected]


http://www.tagindex.com/tool/url.html



• メールを送信する<h3 id="mail">メールでのお問い合わせ</h3> <p><a href="mailto:[email protected]?subject=%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b">[email protected]</a></p>

URLエンコードhttp://www.tagindex.com/tool/url.html















質疑応答



Contact


• Web• http://www.dangkang.com

• Mail• [email protected]

• Social• twitter https://twitter.com/dangkang• facebook http://www.facebook.com/dangkang• Linkedin http://www.linkedin.com/in/dangkang• flickr http://www.flickr.com/photos/dangkang/• Pinterest http://pinterest.com/dangkang/


http://www.dangkang.com

http://www.dangkang.com



https://twitter.com/dangkang

https://twitter.com/dangkang

http://www.facebook.com/dangkang

http://www.facebook.com/dangkang

http://www.linkedin.com/in/dangkang

http://www.linkedin.com/in/dangkang

http://www.flickr.com/photos/dangkang/

http://www.flickr.com/photos/dangkang/

http://pinterest.com/dangkang/

http://pinterest.com/dangkang/

バックアップ



課題の確認

• ゴール• 「国立東京博物館」を取材し，コンセプト(誰に対するどのような価値をどのように提供するか)を決め，「モバイルサイト」「携行用パンフレット」を実装する．



スケジュール

• 第9回(11/12) スマホサイトに関する講義

• (講義) スマホサイト特徴

• (演習) スマホサイト実装

• 第10回(11/19) フィールドワーク計画

• (プレゼン) インタビューリスト，観察対象

• ユーザスタディ見本

• (講義)

• ソーシャルマーケティング

• グロースハッキング©dangkang interdisciplinary design lab. 8013/11/12


スケジュール

• 第11回(11/26) 現地調査

• 東京博物館訪問(14:30-)

• 第12回(12/12) 調査結果およびコンセプト発表

• (プレゼン)

• フィールドワーク結果

• サイトコンセプト(ユーザ，価値)

• 類似サービスの調査

• ペーパープロトタイプ

• フィールドワーク2nd (ユーザ)©dangkang interdisciplinary design lab. 8113/11/12


スケジュール

• 第13回(12/17) 後期プレ最終

• (プレゼン)

• コンテンツ ver.0.9

• ユーザスタディ計画

• 第14回(1/7) 後期最終プレゼン

• (プレゼン)

• ユーザスタディ結果




スケジュール

• 第15回(1/9-10) 後期最終講評会

• (プレゼン)




多摩美術大学 エンタテイメントとデザインゼミ2 第9回

Design

多摩美術大学エンタテイメントとデザインゼミ2 第9回