2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、秋葉 ちひろさん（ツクロア）、堀内 敬子さん（Flask）の『UI設計に役立つ！ 意外と知らないiOS/Androidの流儀』セッションのスライドなどをシェアします。
iOSの解説を担当しました堀内です。
長時間お付き合いいただき、ありがとうございました。
iOS/AndroidのUIを知るという、少し異色なセッションでしたが、モバイルで使いやすいUIを作るための基礎知識やヒントとしてご活用いただければ幸いです。
スライド中の参考資料にも書きましたが、WWDC 2014のセッションビデオは、デベロッパ以外にも公開されています。技術の話だけでなく、使いやすいUIを作るのに役立つ内容、Apple流のプロトタイピングの方法なども取り上げられていますし、新しいiOS/OS Xの世界がかいま見れて面白いです。英語ではありますが、聞き取りやすい英語で話してくれているので、比較的理解しやすいと思います。
セッション後の質問の「Androidのうらやましい点」についてですが、あらためて考えてみまして大きく以下の2点がありました。
1. ホーム画面
Androidではホーム画面をカスタマイズできるのがすばらしいと思います。iOSはほぼ何もできません。iOS 8から通知センターにウィジェットを置けるようにはなるものの、それでもAndroidほど自由さはありません。
2. Android Wear
Android WearとはウェアラブルデバイスのためのAndroid OSです。腕時計型のデバイスは早く使ってみたいです。
秋葉ちひろ：Androidの解説を担当しました秋葉です。
80分という長時間、アプリのデザインに馴染みのない方には少し長く感じられたかもしれませんが、最後までお聞きいただきありがとうございました。
懇親会では、アプリのUIがこーんなにもWebとは違って、しかもiOSとAndroidでそれぞれ違うなんて、全部やるのは大変ですねということが話題にあがりました。
ですが、今後は他にもいろいろなインターフェイスをもつデバイスが増えてくるはず、キャッチアップしておいて損はないと考えています。
公開したスライドにも各ガイドラインの情報はかなり詰まっていますが、それだけでもの足りない方は、ぜひガイドラインそのものを読んでみてください。
Web制作にも役に立つものも多いはずです。
セッション中に触れられなかったものの参考サイトを挙げておきます。
たにぐちさんの基調講演でも、Androidが伸びてくるだろうとお話がありましたが、どちらが優れているということは特になくて、それぞれ良い点とイマイチな点を持ち合わせていると思います。
安いSIMも出てきていますし、Androidをさわったことがない方も、1台SIMフリー版を買って持っておくといいと思います。仕事柄、両者を「使って」おくことは非常に重要です。
今回の少しマニアックなセッションが、少しでも今後の制作に役立ちそうと思っていただけましたら幸いです。ありがとうございました。
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）の『トラブルシューティング 2014』セッションのスライドなどをシェアします。
「トラブルシューティング2014」のセッションを担当した西畑と木村です。
漫談形式を多くの方にご好評いただいたようでありがとうございます。
いくつかの質問をいただきましたので、ブログで解答を行なっております
マルチデバイス対応では日々新しい端末やOSが登場しており、これまで当然のように利用できたことが利用できなくなることがあります。日々、情報をウォッチしておく必要があります。
これからも一緒に終わらない戦いに挑んでいきましょう！
最後になりましたが、参加された皆様、長時間おつかれさまでした&ありがとうございました。
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、北岡 恵子さん（NTTレゾナント）の『スマホの検証が10倍はかどる！Remote TestKitの紹介』セッションのスライドなどをシェアします。
Remote TestKitは、スマホに関わる皆様のお仕事を少しでもラクにできれば、というサービスです。今回ご紹介しきれなかった機能もたくさんありますので、是非実際にご利用してみてください。
http://appkitbox.com/testkit/
Q1. 誰かが端末を使っている間は、ほかの人はその端末を利用できないのか？
A1. 実機を利用しているため、誰かが利用している間はその端末を利用することはできません。ですが、一度のレンタルが30分単位ということもあり、端末の取り合いになるような事例はあまりありません。
Q2. セキュリティが心配なのですが…
A2. ご利用が終了すると、端末は自動で初期化されます。アプリケーションや入力したパスワードを入れたままにしておいても、次に使う方には初期化された状態でお渡しとなりますので、問題ありません。安心してご利用ください。
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、宮崎 洋史さん（環）のPRセッションのスライドなどをシェアします。
ユーザーにとって最高の体験を提供するにはデバイスや店舗は「異なった役割を担うべき」というのがメイシーズの考え。サイト制作の上流工程に携わるチャンスが巡ってきたときに参考にしていただけると幸いです。
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、たにぐち まことさん（エイチツーオー・スペース）の『スマートデバイス時代のJavaScript』セッションのスライドなどをシェアします。
このセッションでは、ディレクターやデザイナー、マークアップエンジニアといった「非プログラマー」の方でも、押さえておきたい JavaScriptのトピックスとして、紹介しました。
踏み込んだ内容までは盛り込まなかったため、物足りなく感じてしまったかも知れませんが、これを機会に興味を持って頂いたらまずは、AngularJSあたりから触ってみて、Hogan.jsを実践で利用してビューの概念などに慣れていくと良いでしょう。
また同時に、スマホ案件で jQueryを使うほどではないDOM操作の場合（要素を表示・非表示の制御など）には、Zepto.jsの利用も思い出して頂ければ幸いです。
参考リンクです。
頂いた質問です
こちらにありました（まぼろし 西畑さんありがとうございます）
https://twitter.com/kazumanishihata/status/477712418244919296
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、松田 直樹さん（まぼろし）の『マルチデバイス対応な実案件で使う、Bootstrap のすゝめ』セッションのスライドなどをシェアします。
Bootstrap をはじめとした CSS フレームワークをプロジェクト内でどう活用するか、というテーマでお話させていただきました。アンケートにて「使ってみたくなった」という反応も多くいただきまして大変うれしく思っております。
コンポーネントデザイン・設計ルールとしての重要性をお伝えしましたが、実装におけるCSS フレームワークのメリットとしてはやはり「楽できる」という点です。実装を楽にすることで、サイトの「設計」フェーズにより時間をかけることができるようになります。
設計重視という傾向は、「Content is King」とも言われるように「サイトの本来の目的はコンテンツを伝える」ことを重視することに他なりません。Webデザインという範囲が、「広義のデザイン」を指すようなデザインの原点に還る傾向になってきているわけですね。
この観点から、フレームワークを用いればプロジェクトチームの全員が効率よく「設計」に寄与できる素地ができるのでは、と感じています。ぜひチーム内で Boostrap のスキルを共有してみてください。
「勉強する」という意気込みより、「楽したい！」という動機の方が素早く仲良くなれるかと思います。
ありがとうございました！
以下、アンケートにていただいたご質問への回答です。
たしかに、他のフレームワークに Bootstrap などの CSS フレームワークが包含されているケースではこのような疑問は湧きますね。「bootstrap.scss」「_variables.scss」、この2ファイルを自前の作業領域で使うように環境を作ればカスタマイズは問題ないかと考えています。
SVGが大好き、ということもあるのですが、やはり複数のアートボードを一度に俯瞰できる点がいいですね。特に RWD のカンプを作る際には重宝します。
これと言って偏りはないのですが、nav コンポーネントなどは使うと楽でしょうね。スマホ表示時には勝手に折りたたんでくれますので。
内外部スタッフが混在している場合など、自社内でフローが完結しないケースでの方がフレームワークを使う意義があると考えています。やはり「ルール」が事前にあることは意思疎通の改善にも繋がります。
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、小川 裕之さん（ツクリベ）の『レスポンシブWebデザインのワークフロー』セッションのスライドなどをシェアします。
実例を交えてRWDをウォーターフォールのワークフローで進めるリスクと、それを改善したプロトタイプを中心としたワークフローの話をしました。
失敗例のように同じようなトラブルにあったという話は周りでもよく聞きます。これからレスポンシブWebデザインを始める方や、既に経験はあるけれど進め方に不安がある方は参考にしていただければ幸いです。また特に問題なく進められているという方も、その進め方にリスクが潜んでないか、これを機に見つめ直してみてください。
セッションの中でも話しましたが、ワークフローを変えるというのは簡単なことではありません。環境や立場上、変えたいと思っても難しいという話はよく耳にします。私もそういう時はあるのですが、その中でも他の立場の人に早めに情報を共有してもらうようにしております。それだけでもリスクに気がつく早さが変わってきます。
成功例のようなワークフローが浸透するにはまだ時間がかかるかも知れませんが、まずは取り入れられるところから実践してみてください。
ありがとうございました。
以下、アンケートでいただいたご質問に回答致します。
大枠の構成が異なるページの数だけ作ります。従って、トップと下層のベースとなるフォーマットのみが多いです。その他、他と異なる構成のページ、または機能の実装を確認してもらいたいページがあれば作成します。
事例では、トップと2種の下層ページフォーマット、lightboxを使用したギャラリーページのプロトタイプを作成しました。
カンプを作るのはプロトタイプの後です。失敗例でも取り上げましたが、先にカンプを作ってしまうと実装で苦労する可能性があります。また、カンプを作るケースで進めるときは基本全ページ作ります。
下記スライドの14Pにメリット・デメリットをまとめてますので参考にしてください。また、どうしてもモバイルとPCで構成や内容を大きく変えたい場合、想定されるユーザーの利用シーンが限定的である場合などは、RWDでは無理な設計になりがちなので専用サイトを作るなど提案をしております。
レスポンシブWebデザインの基礎
今回の実例ではオリジナルのグリッドシステムをベースに作成しました。ただ、最近の案件ではCSSフレームワークを使用して作成してます。
CSSフレームワークの活用については松田さんの資料を参考にしていただければと思います。またディレクターであれば、同様に松田さんが取り上げてましたWebflow、Adobe Edge Reflowなどのツールの使用を提案致します。
Webflow
Edge Reflow CC
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、たにぐち まことさん（エイチツーオー・スペース）の『基調講演：スマホサイトの今、スマートデバイスのこれから』セッションのスライドなどをシェアします。
基調講演「スマホサイトの今、スマートデバイスのこれから」と、「スマートデバイス時代のJavaScript」を担当した、たにぐちまことです。
私の2つのセッションは、つながったストーリーとして構成しました。
昨今のスマートフォンの進化を見ていくと「脱Web」という動きが活発です。すでに例えばスマホで飲食店を探すときなどに、「お店のサイトを探す」のではなくて Google Mapsで検索をしたり、ニュース記事などを読むときも「Gunosy」などの専用アプリに流れてくる記事だけを読むという機会が増えているのではないでしょうか。
この流れは、ウェアラブルデバイスの台頭でますます加速するだろうと私は考えています。
つまり、HTML/CSSの需要が今に比べると、減ってしまう可能性を考えなければなりません。
その時、次に学習すべきは JavaScriptだと考えます。スマホ・ウェアラブルデバイス向けのアプリケーション開発や、マルチデバイスに対応したSPA（Single Page Application）の開発など、プログラマーと協業する機会がますます増えていくことになります。デザイナー・マークアップエンジニアに限らず、この機会にぜひ JavaScriptに興味を持って頂ければ幸いです。
セッション中に紹介したツールです。インストール方法などをブログに書きました。
アンケート及びセッション中に頂いたご質問です。
専用のソフトではありませんが、Windows/Mac/Linuxのマルチプラットフォーム向けに「Charles」というソフトウェアが提供されています。
まぼろしの西畑さんのエントリーなどが参考になります。（解説はMacですが、Windows版でも同様のことができるようです）
今回のスライドでは、以下のフォントを利用しました。
いずれも、モリサワパスポートに収録されています。
ある特定のアルゴリズムの影響を受けてその問題点を改善した場合、検索結果に反映されるにはアルゴリズムかデータまたはその両方の更新が必要。しかし実際にはさまざまアルゴリズムが関わっているため、そのアルゴリズム以外のところで検索結果の変化が見られることもある。
- 問題点修正の効果が出るにはアルゴリズム更新が必要、でも意識すべきはサイトを全体的にすばらしくすること -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki
