2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のすべてのセッションのフォローアップ（スライドなど）を公開しました。
現在、各フォローアップ内のビデオにパスワードが設定されています。講演者からOKが出次第、パスワード設定をはずします。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、西畑 一馬さん、木村 哲朗さん（まぼろし）の『よくあるトラブルと解決方法・回避方法』セッションのスライドなどを公開します。
「スマートフォンサイト制作 よくあるトラブルと解決方法・回避方法」のセッションを担当した株式会社まぼろしの木村・西畑です。みなさま長時間の受講おつかれさまでした。
私たちのセッションはトラブルシューティングという対面した方でないと、なかなか理解するのが難しい内容でしたが多くの方から「楽しかった」と評価いただいてホッとしております。
40分という短い時間でしたので、紹介できたバグは一部でしかありません。スマートフォン対応には他にも数々の落とし穴が含まれております。
セッション中に紹介した現象と対策方法のコードなどを納めたサンプルファイルをご用意しました。以下URLからダウンロードしていただき、解凍のうえでご覧いただければと存じます。
https://www.dropbox.com/s/glnnzxsrgo18gmg/CSSNiteLP27-s7-kimura-nishihata.zip
なお、セッションで紹介しきれなかったバグなども含め、以下の記事でスマートフォンのバグリストを公開しておりますので、こちらも参考にしてください。
紹介しているバグは氷山の一角です。このリストは定期的に更新しておりますので、時々見にきてもらえるとさまざまなバグへの心構えができると思います。
また、アンケートで「よくトラブルになる端末」を知りたいとの質問をいただきました。
セッション内でも紹介しましたが、最近の端末では「GALAXY S III」が群を抜いて他の端末と異なるバグを抱えている端末です。すこし前の端末ですと「INFOBAR A01」、「IS03」などがトラブルに陥りやすい端末です。他にも挙動が他の端末と少し異なる端末は多数存在します。
これは、Android端末ではOSの差異だけではなく、メーカーや搭載されているチップの違い、デバイスのスペックなどさまざまな要因でバグが発生している為です。(詳しくは以下の記事を参考)
そのため、全てのバグを事前に理解して防ぐということは不可能ですが、未知のトラブルが発生した際は「がんばる」or「諦める」メソッドで対応しましょう。
「がんばる」or「諦める」の判定には、セッションでもお話しした「リフロー」が原因である可能性を考慮すると、より多角的な判断が可能になります。
今回のセッションを、皆様の今後のスマフォサイト制作にお役立ていただければ幸いです。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、小林 信次さん（まぼろし）＋矢野 りんさん（バイドゥ）の『スマホ制作サイトのディレクション術』セッションのスライドなどを公開します。
「スマホサイト制作のディレクション術」を担当した小林です。
伊原さんのフォローアップにあったように、ウェブサイト構築のプロジェクトでは「コレ！」という決まりがあるものではありません。
私がご紹介した良い感じにしておくというのも、従来のワークフローと理想のワークフローが混在している時期だからこそ受け入れられているもので、将来的には淘汰されていくかもしれません。
10個のセッションの中でさまざまな気づきを得られたかと思います。
皆さんの制作環境やクライアントとの関係に適した「良い感じの代替案」が増えれば幸いです。
## 以下、アンケートでいただいた質問への回答です。
## 以下、togetterからです。
”eBayの社長が、あるインタビューで、彼らのモバイルアプリから週8,000台の車が売れていると言っていたそうです” @rriverさんから
海外では車をモバイルから購入するのも一般的ということでしょう。
気軽に車の購入はスマホで検討しないですよね、と言ってしまいましたが、日本でもモバイルから車を購入する未来がくるのかもしれません。
ご指摘ありがとうございました。
"I never imagined the sea change in consumer behavior over the last three to four years. People are buying 8,000 cars a week on EBay’s mobile app. "
「スマホサイト制作のディレクション術」も担当した矢野です。
ご参加ありがとうございました！
セッション全体で「アジャイル」というキーワードが頻出していましたね。バイドゥでは、自社製品をアジャイル式のワークフローで開発しています。弊社のプロセスはリリースまでに１ヶ月の開発期間をもうけ、「要件定義」「開発」「テスト」の3セットを１週間単位で3回繰り返しています。ユーザーのニーズを取り入れようとおもうと、どうしても「やってみて、改良の余地があったら即微調整」が許される状況を作る必要があります。これがアジャイルというものの必然性だと私は考えています。
車をスマホで買うのか？という話題をセッション中に取り上げました。
今後Webサービスは「クロススクリーン」の時代になる、と考えられています。もし「購入」という行為が最終着地点と考えた場合、PCをその着地用ツールにするのか、スマホを着地ツールにするのかは、サービスを提供する側の設計によりますが、現時点でスマホはリソースを収集して、何かを検討するためのツールではないと言われています。よって「スペック」や「商品の特徴」のようなコンテンツは、PCのほうがユーザーにとってはより意味のある情報といえるかもしれません。しかし、そうした情報をよくよく吟味して、すでに意思を決定したユーザーがスマートフォンで購入ボタンを「ポチる」可能性はあります。
なので、スマホでものを買うか、買わないか、は、そこにいたるプロセスをどう具体的に想像し、設計したコンテンツなのか、によって、変わるものだというほうがもっと正確かもしれませんね。
短い時間でまとめきれないこともありましたが、どんどん変わる常識について、これからもみなさんと一緒に考えて行きたいとおもいます。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、伊原 力也さん（ビジネス アーキテクツ）の『ケーススタディ：NTTデータグループウェブサイトのマルチデバイス対応』セッションのスライドなどを公開します。
皆様おつかれさまでした。
セッション9「NTTデータグループウェブサイトのマルチデバイス対応」を担当したビジネス・アーキテクツの伊原力也です。
ウェブサイト構築のプロジェクトというのは「コレ！」という決まりは少なく、さまざまな状況に対して、いろんな「やり方の引き出し」を使って対応していくことが多いものです。今回の内容が、その引き出しの一つになれば幸いです。私も今よりさらにイイ感じにプロジェクトが進められるよう、頑張っていきたいと思います。
なお、アンケートで「お客様がそのやり方に対してどう思ったか？（わかってもらえたのか？）」というご質問がありました。これは「クライアントが『デザインカンプを「旗」にする、ツッコミメソッド、後半は実装ベース』という進め方について理解を示してくれたのか？」というご質問として、お答えします。
このプロジェクトでは、社内でのツッコミを通り抜けたデザインを「旗」として出したわけですが、そのときに同時に「デザインコンセプト」という資料を提出し、クライアントにプレゼンしています。
これは、
・プロジェクトの要件をこのデザインがどう満たすか
・デザインの方向性やキーワード
・そのデザインを実現する実装の方向性
などを取りまとめたものです。
つまり「社内からのツッコミ」だけでなく「クライアントからもらいそうなツッコミ」にもきちんと答えられるようにして、信頼して任せてもらえるように準備したわけです。直接プレゼンできる相手だけでなく、海外にも関係者がいたというのも「根拠」のドキュメンテーションが必要だった理由です。
この内容に対してクライアントの納得感があったので、後半を実装ベースに移行することができたと考えています。プロジェクトによって力の掛けどころはさまざまですが、参考になれば幸いです。
今回のセッションのテーマについてじっくり腰を据えて考えたい方向けに、2冊ほど書籍をご紹介します。どちらも、デザイナーやエンジニアはもちろん、前段をきちんと考える部分に重点を置いてることから、むしろディレクターやウェブマスターにおすすめしたい内容です。
タイトルだけ見るとスマートフォン向けのデザインTips本のように一瞬思えますが、実は、書籍の大半である8章中の4章までが「要件定義」「ヒアリング」「設計」「コンセプトメイキング」の話題に割かれています。言葉遣いが平易なため、ラクな気持ちで読めるところもポイントです。
『レスポンシブWebデザイン 制作の実践的ワークフローとテクニック』
書籍全体の半分以上を使って、「RWDそのもの」「RWDをとりまく状況」「RWDにどう対峙すればよいか」という点を解説しています。これほど懇切丁寧な解説がまとまっているものは、日本語ベースではちょっと他に見当たりません。
書籍と合わせて、以下のやりとりに目を通すのもおすすめです。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、徳田 和規さん（ピクセルグリッド）の『ケーススタディ：iOS版CodeGrid 設計の裏側』セッションのスライドなどを公開します。
iOS版CodeGrid設計の裏側を担当した徳田です。
当日はご静聴いただきありがとうございました。
■CodeGridについての捕捉
CodeGridについて、ご存知ない方が多数いらっしゃったようでCodeGridについての説明が少なかったとのご意見をいくつかいただきました。当サービスについては、オフィシャルサイトがありますのでこちらをご覧下さい。
サイトの補足を少ししておきます。
CodeGridはフロントエンドに関わる人々のためのガイドとあるようにフロントエンド（HTML、CSS、JavaScriptなどの技術や、それに関連した周辺技術）の最新動向や使い方などの記事を月4回木曜日にメールマガジンとして配信しています。
配信コンテンツ一覧はWebアプリのサイトで確認することができます。
https://app.codegrid.net
（購読されていない方は、記事の一覧と概要までをご確認いただけます。）
例えば、
* SassとCSS設計
* 現場で使えるGrunt入門
* Webアプリ構築のためのBackbone.js入門
* おすすめライブラリつまみ食い
など、さまざまな連載があります。また、読み物として弊社代表の「ピクセルグリッドの仕事術」という連載もあります。
それぞれの記事は、弊社（ピクセルグリッド）メンバーが制作時に身につけた知識を元に執筆しており、文章の編集はエンジニアではなく、専門の編集者が行っています。
■当日のセッションについての補足
当日のセッションでは、当アプリのiOS版開発に関する設計の裏側として、いくつかポイントになった点を紹介しました。
対象にしている端末は、iOS6以上のiPhone、iPadです。動作確認はiOS 5以上で行っていますが、快適に閲覧できるのはiOS 6以上です。
* iOS Safariのフルスクリーンモードの扱い
* ヘッダーナビゲーション
* 固定UIとスクロール
* シリーズやタグページ
* Table of Contents（目次）メニュー
* PC版とのサンプルの扱いの違い
* ソーシャルボタン
当日のセッションでも言われていましたが、スマートフォン向けにサイトを作る場合は、できることとできないことを把握することが大切です。
スマートフォン端末では、パフォーマンスもPCとは大きく異なり、動作が遅くなることが多いため、ひとつの機能の採用にも、それは本当に必要かどうか、PC以上に十分吟味する必要があるでしょう。
当セッションの内容は、基本iOS6以上（動作確認はiOS5以上）の端末向けと、かなり限られた環境下での話でしたので、限定的な話になってしまいましたが、どこか制作時のヒントになれるようなポイントがあれば幸いです。
当日は、長い時間おつかれさまでした。
これからもCodeGridをよろしくお願いいたします。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、森本 恭平さん（NTTレゾナント）の『スマホの検証が10倍はかどる！Remote TestKitの紹介』セッションのスライドなどを公開します。
皆様おつかれさまでした。
「Remote TestKit」を紹介いたしましたNTTレゾナントの森本恭平です。
元々は社内向けの検証ツールだったのが、いつの間にかこのような大きな舞台で紹介することができ、サービスの担当者としては非常に嬉しい限りです。
弊社のサービスを使ったとしてもAndroidの検証は非常に大変だと思います。
どこかで優先度を決めないといけないと思うのですが、大きく2つの観点から考えるのが良いと思います。
後は、画面解像度が少し違うシャープも少し検証すれば、よりバグの少ないページが作成できるのではないかなと思います。
もっとくわしく知りたいという方は弊社のサイトにて、情報をまとめておりますので一読いただければと思います。
ぜひRemote TestKitを使っていて改善点などがあれば、お気軽に@appkitboxまでご連絡ください。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、松田 直樹さん（まぼろし）の『スマートフォンサイトにおける画像の最適化と使いどころ』セッションのスライドなどを公開します。
ご参加いただきました皆様、大変ありがとうございました。「スマートフォンサイトにおける画像の最適化と使いどころ」セッションを担当しました、まぼろしの松田でございます。
SVG、Web Icon Fonts、Data URI Scheme など、今まではあまり使われてこなかったフォーマットや手法をご紹介いたしましたが、駆け足的な説明になってしまいそれぞれ詳細までお伝えすることができませんでした。真意としては、まずは画像を扱う上での選択肢が増えている、という現状をご理解いただきたかったという点です。
紹介したネタは特段新しいもの、未来の画像の扱い方、というわけではありません。すべて今日からでも使えるネタ、特にスマホにおいては実用的なものです。どのフォーマットや手法がベストなのか、というのはサイトデザインや性質にもよりますので、まずはこれらの選択肢を使ってみる、とりあえず試してみるということからチャレンジいただく機会になれば幸いです！
以下、アンケートでいただきました質問への回答です。
また、セッションにてご紹介した参考サイトとなります。
改して、みなさまありがとうございました！
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、たにぐち まことさん、田代 豊さん（anygraphica）の『スマートデバイス時代のWebサイト構築術 LIVE』セッションのスライドなどを公開します。
セッション 5「スマートデバイス時代のWebサイト構築術 LIVE」を担当させていただいた、anygraphica 田代とたにぐちです。
私たちからは、スマホサイト制作に活用できるツール類を、実際の作業フローに合わせてご紹介しました。説明が早口になってしまって申し訳ありませんでしたが、各ツールを使ってみていただき、便利なものは活用していただければ幸いです。
紹介したツール類です。
動作デモのムービー
http://www.youtube.com
また、アンケートの感想欄でいただいたご質問に回答いたします。
『スマートフォンデザインでラクするために』<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script>window.jQuery || document.write(" title="<script src="shared/js/jquery-1.7.1.min.js"><\/script>">Easy Switch Keyboard</script>window.jQuery || document.write('<\/script>')
Firefox OS・・・ まだ全然これからなんですね。気になったニュースは、今 Twitterで流していますので、よろしければフォローしてください。
https://twitter.com/seltzer
レスポンシブWebデザイン実践編 こもり まさあき from indd-jp on Vimeo.
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、こもり まさあきさんの『レスポンシブWebデザイン実践編』セッションのスライドなどを公開します。
CSS Nite LP, Disk 27に参加された皆様、10セッションの長丁場お疲れ様でした。
4番目のセッションを担当したこもりです。
今回は「レスポンシブWebデザイン実践編」ということで、実際の制作時の困った、レスポンシブだとこうなるから…という誤解をどうにか解けないかということで、設計時の考え方や全体的なワークフローには一切触れずに実装のみに話を絞りました。
「Content Choreography」の部分は、さまざまなデバイスで情報を適切に伝えるためにアクセシビリティのことも踏まえながら、コンテンツの順番や配置位置を設計段階で考えるといったことですが、現在のWeb制作ワークフローにおいては「企画、情報設計」「ヴィジュアルデザイン」「コードの実装」といったパートが分離していて、実装サイドが無理矢理どうにかしなければならない状況が多々あると考えています。
そういう無理な設計や注文を実装サイドでどうにかしたいときに、最悪「Flex Box Layout Module」を使うという方法もあるよ、ということで覚えておいていただければ。伊原さんのセッションであったようにスクリーンリーダーの利用の際に情報構造と表示内容に相違が出る、という問題はありますので、使いすぎというよりはむしろ使わないでも済むような方向で前段の設計をちゃんとしておいた方が良いでしょう。
レスポンシブに限った話ではないですが、セッション全体に流れていたように「無理をしない」というのが一番の解決策です。これまではデスクトップオンリーで済んだものが、端末毎の実装差異、バグを山ほどもった端末が今後次から次に発売されていくでしょう。
こもり自身、旧来の携帯電話向けのコンテンツ制作・運営などをやっていた経験もあり、端末がドンドン発売されるような状況での制作や運用対応の大変さは身をもって実感しています。参考までにお伝えしておくと、1日にFacebookにアクセスするデバイスは「7,000」種類といわれています。
これは世界レベルの話ですが、日本でも今後端末の発売は相次ぐでしょうし、機種変は進まないと思って良いのではないか？、さらにある日突然スマートフォン以外のデバイスが出てきて、携帯電話が突然消えてしまったような今の状況に近しいことになるかもしれません。
そういった部分はもちろん、サイトの性質、利用者のコンテキストを考慮しながら、どういった方法で実装するのが良いか、いま一度実装サイド以外のクライアントも含めたメンバーと考えていただれけばと思います。
以上、長くなりましたが、本セッションの一部でも皆様の今後の制作に役立てたら幸いです。
こもり
--
最後に「あのお化けアイコンは何だ？」という声をいただいてたのでご紹介まで。
Adobeの「Edge Inspect」と同様の機能をもったコンテンツの確認ツールです。これの特徴は「自分自身がローカルのProxyになってサーバを起動する」「特別なソフトや拡張機能、端末側のアプリのインストールが不要」「同一ネットワークにある端末から直接アクセスできる」「任意のディレクトリや外部のURLをホストすることができる」といったものです。もちろん、すべてが同期するので、面倒なフォームの入力もPC側からおこなうことができます。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、益子 貴寛さん（サイバーガーデン）の『スマートフォン向けサイト制作の基本』セッションのスライドなどを公開します。
セッション3「スマートフォン向けサイト制作の基本」を担当したサイバーガーデンの益子です。
今回のイベントでは、それほど触れられていなかったパターンとして、あえてユーザーの利用シーンを絞ったスマートフォンサイトを提供する、という方法もあります。
ほかのイベントで紹介したことがあるかもしれません。
みそかつの「矢場とん」です（スマートフォンでアクセスしてみてください）。
コンテンツをかなり絞っているのはもちろん、とにかく「いますぐ矢場とんに行きたい人に向けて」というのが如実に感じられます（裏側から見れば、コンバージョン最優先ということ）。
予算が少ない、期間が短いなど制約が多い場合だけでなく、このように「あえて」という判断があって然るべきですし、もしかしたら今後増えていくのでは、と思っています。
最後に、ひとりの聞き手としても、すごく勉強になったイベントでした。みなさんにも同じように感じていただけたなら幸いです。
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、矢野 りんさん（バイドゥ）の『モバイルデザインパターンの取り入れかた 』セッションのスライドなどを公開します。
モバイルデザインパターンの取り入れ方 を担当した矢野です。
ご参加ありがとうございました。
セッションでは、ユーザーは基本的に文字の入力を避けるというお話をしました。
アンケートで「どんなフォームデザインなら（入力の）ハードルが下がるか」という質問がございましたので解答します。
フォームの目的にもよりますが、大きくは
・入力項目がすくないこと
・フォーム要素のサイズが大きいこと
・長文の入力が必要ない構成にすること
・プルダウンのような入力サポートを取り入れること
・手続きを小分けにすること
です。
そのような体裁であっても、オンラインアンケートのような基本、ユーザーの好意で操作してもらうようなコンテンツは機能しにくいです。
ユーザーの嗜好を知る手段はアンケートにたよらず、特定のコンテンツに対する興味などをログで確認、分析して把握するほうがよいでしょう。
今回のセッションは来場者属性に基づいて入門寄りの内容に整えました。ちょっと食い足りないというご意見もありましたので、今後の理解を深めるための情報も共有いたします。
『モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド』丸善出版 価格：?2,940
少々アカデミックな内容ながら、普遍的なUIのセオリーを扱っている書籍です。モバイルを扱うとき、何に注意を払うべきか、これからどうなっていくのか、について書かれています。翻訳メンバーにはCSS Niteに登壇されたこともあるインフォメーションアーキテクチャのオーソリティ佐藤伸哉氏も加わっています。
『スマートフォンデザイン見本帳』MdN 価格：?2,625円
矢野の近著です。モバイルフロンティアが概念的な話だとすると、矢野の書籍はこうした概念にどのような服を着せればよいのかというスタイルの参考例を中心に解説しています。設計の話がメインになりがちなモバイルコンテンツデザインですが、やはり最後は視覚的な質がコンテンツの信頼感を左右するのはPCの時代と変わりません。カラーリングの美しさなどは常にデザイナーが責任を持つべき部分です。
モバイルインターフェースに関する考察は始まったばかりです。この先おこる変化を楽しみながら仕事をしましょう！
2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、神森 勉さん（KDDIウェブコミュニケーションズ）の『スマートフォン今昔物語』セッションのスライドなどを公開します。
長い時間のイベントでしたが、ご参加いただいたみなさま、大変お疲れ様でした。
セッション1「スマートフォン今昔物語」を担当した、KDDIウェブコミュニケーションズの神森です。
セッションでは、駆け足でスマートフォンの今までの流れをご紹介しました。
普段なにげなく使っているスマートフォンですが、Android端末に関しては、最新のOSと提供される端末では約半年ほどのずれがあります。細かなバージョンアップでより使いやすいOSになってきているものの、現在の国内に限っては、新しいOSを搭載した端末を手にする機会のずれは、常に意識しておくことで、実装時に起こる思わぬトラブルは多少なりとも回避できると思います。
また、画面サイズに至っては、今年は4.7?5インチサイズが主流となり、フルHD解像度の端末がどんどん増えてくるでしょう。それに伴い、コンテンツリッチなサイトがどんどん増えてくるとは思います。LTEにより、通信環境の高速化が進んできますが、まだしばらくは一世代前の3G環境との併用になるでしょう。LTEカバーエリアではLTEで、それ以外は3Gで接続するので、LTEの高速通信を見越した大きな画像などをやたらと貼り付けるのは、3G環境で接続した際には非常にストレスになります。また、携帯各事業者のLTE向け料金プランに関しては、どの事業者も7GBの通信制限を設けています。これは、一ヶ月の中で、7GBを超える通信を行うと、通信制限がかかってしまうというものです。大量のデータを受信すればするほど、通信量は増え、上限に達してしまう可能性は否定できません。
そうした理由から、画像の最適化やサイトの最適化はこれまで同様行っていくことが大切だと思います。
作る立場では非常に悩ましいスマートフォンサイトですが、スマートフォンを使うという立場になると、非常に楽しいガジェットです。是非、楽しいスマートフォンライフを送っていただければと思います。
ありがとうございました！
最後に、今回のセッションで参考にさせていただいたサイトなどをいくつかご紹介いたします。
