オープニング

CSS Nite in Okayama, vol.5 音声・スライド・メッセージ・動画

マルチデバイス対応を視野に入れたWeb制作環境の進化

講師	鷹野雅弘
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

講師よりメッセージ

ご参加ありがとうございました。
有意義なセッションが続き、私自身、非常に楽しんだ1日でした。

CSS Niteは全国で展開しているのですが、その中でも岡山は運営のレベルが非常に高いんです。
やはり1年に1回くらいだと、いろいろ忘れてしまうんですが、岡山の場合、通年で「オカウェブ（岡山WEBクリエイターズ）」を開催されているのが理由だと思います。

なかなかおもしろいトピックが並んでいますので、興味のある分野はもちろんですが、そうでないものほど、参加されてみられることをオススメします。

さて、今回は（も）、翌日、岡山市内をご案内いただきました。
念願の「おまち堂」のかき氷がサイコーでした!!
https://www.facebook.com/swwwitch/media_set?set=a.10204277842679450.1073741884.1029907137&type=3

動画

マルチデバイスサイト制作に役立つツールコレクション

講師	山川祐一郎
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

講師よりメッセージ

セッション2、マルチデバイスサイト制作に役立つツールコレクションを担当した山川です。
デザイナー向け・マークアップ担当者向けの今年度注目のツールを簡単に紹介しました。

今回頂いたご感想の中で、
「Windows環境の場合のアプリも紹介してほしかった」という声を多く頂きました。

Sketch3と同等の機能をもったアプリケーションはWindowsでは残念ながら現時点ではありませんが、Fireworks代替アプリケーションとしてのドローイングツールとして、GIMPやinkscapeなどのオープンソースのソフトウェアも話題になっています。

▼GIMP、inkspace （Win/Mac/Linux対応）
http://www.gimp.org/
http://www.inkscape.org/ja/

また、Windows、Mac、Linuxに加え、ブラウザでも動作するドローイングツール「Gravit」も出てきています。現在はベータ版で機能制限もありますが、こちらも今後話題になってくるツールといえるでしょう。

▼Gravit （Win/Mac/Linux/Chrome/Browser）
http://gravit.io/

私はメインの制作環境はここ10年程Windowsのみで、Webサイト制作ではIllustrator、Fireworksをよく使っているのですが、マルチデバイス対応が必須となっている最近では、Sketch3が動作するMacへの制作環境の移行を本気で考えています。

UIテンプレートが一通りそろっていたり、色々なデバイスの解像度に合わせたアートボードを作成できたりと、これからのマルチデバイス対応サイトをデザインするにあたって便利な機能が多いSketch3は、それだけ魅力的なツールといえます。

（※そのほかのツールについては、iOSアプリであるRollpaper、Mac用のCodaを除いて、Windows環境でもご利用頂けますのでぜひお試しください。）

また、マークアップ担当者向けとして紹介しました「gulp」というタスクランナー。
タスクランナーは、マルチデバイス対応のWebサイトをマークアップしたことがある人であればきっと面倒に思える作業を自動化してくれます。

Googleが提供している「Web Starter Kit」は、Gulpの機能を手軽に実感できる、入門に最適なツールです。インストールはコンソール（黒い画面）を使ってコマンドを入力する必要がありますが、参考サイト等をご覧いただき、ぜひチャレンジしてみてください。
レンタルサーバーのCPI（KDDI Webコミュニケーションズ）の、CPIスタッフブログにて、とてもわかりやすい手順でインストールを解説されています。

▼Google：マルチプラットフォームテンプレのWeb Starter Kitを触ってみた
http://shared-blog.kddi-web.com/activity/231

またWindowsをお使いの方に、ruby、node.jsやnpmといった、Gulpを導入するために必要なパッケージのインストール方法の参考サイトを補足として紹介いたします。

▼windows環境にnode.js、npmをインストールするための参考サイト
http://bit.ly/1uPN695
http://bit.ly/10E1BjH

Web Starter Kit で動作するgulpの機能として、「クロスデバイス同期」のデモを行いましたが、セッション構成とデモのお時間の関係で、ブラウザ（Chrome）とiOSシミュレータの操作の同期のみの紹介となりました。

実際は、同一ネットワーク上であれば、iOS/Android実機でも、Androidシミュレータでも表示・操作を同期させることも可能です。
ですので、iOSだけではなく、様々なデバイスで表示テストを同時に行えます。
（ただし、ローカルサーバーの設定はある程度必要になります）

今回はお時間の関係で、お伝えしきれなかった事も多かったですが、セッションを通じて「こんな事も出来るんだ」と感じて頂けたら本望です。

ありがとうございました。

----
＜今回のセッションで紹介したツール・サービス＞

▼ドローイングツール：Sketch 3 (Mac)
http://goo.gl/cPafWb

▼Sketch3用テンプレート・プラグイン
http://goo.gl/wjs1Zg（UIテンプレート）
http://goo.gl/1yzIES（Content-Generatorプラグイン）
http://goo.gl/ybYG8X（上記の日本語対応版：p15.jp）
http://goo.gl/1yyY8s（Installed Sketch Plugins：こもりまさあきさん）

▼Sketch3習得の参考サイト・書籍
http://goo.gl/V7bCi6（creative tweet.：KUBOKI Hiroshiさん）
http://goo.gl/pIbXE8（Sketch 3 Book for… MASAAKI KOMORI 著）
http://goo.gl/BWykfV（Sketchの基本。 KUBOKI Hiroshi 著）

▼Adobe Creative Cloud (Win/Mac)
http://goo.gl/FW8iSP

▼Rollpaper (iOS)
http://goo.gl/cDtL2

▼Responsive Web Design JP
http://goo.gl/8no7a

▼Stylify Me - Online Style Guide Generator
http://goo.gl/fm1Qf

▼Web Fundamentals - Google Developers
http://goo.gl/LEubGh
http://goo.gl/FQOs8f（Web Starter Kit）

▼Sublime Text (Win/Mac/Linux)
http://goo.gl/Frc2
http://goo.gl/BeyWd（Sublime Text 3 - Download）
http://goo.gl/p3fcYO（Web制作者のためのSublime Textの教科書）

動画

ユーザーとのコミュニケーションから考えるマルチデバイス

講師	秋葉ちひろ
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード
ワーク用シート	ワーク用シートをダウンロード

講師よりメッセージ

セッション3：「ユーザーとのコミュニケーションから考えるマルチデバイス」をお話させていただいた秋葉ちひろです。

状況を考えるということがとても重要である反面、すべてのユーザーにあてはまるものを…と考えると急にむずかしくなるのも、この分野の悩ましいところです。セッション内ではそこまでは言及していませんでした。

Webサイトの場合、その良し悪しを決めるのはあくまでもユーザーです。
まずはクライアントに満足してもらえることが第一関門ですが、そのあとの判断はユーザーです。
そうなってくると、ただ「作って納品して終わり」というワークフローでは立ち行かなくなり、その後も運用をしながらアクセス解析をしていくというフローが必要になってきます。
解析をしてはじめてユーザーの動向がわかるからです。

実は、新規で制作するときは、仮説ばかりなことが多いです（その仮説をいかに現実に近づけるか、という努力は必要ですが…）。
どうしてもユーザーの心を鷲掴みにしたい！というクライアントに対しては、最初の制作費用を少し抑えていったん完成させ、運用しながら微修正を加えていくことで、Webサイトからのコンバージョンを上げていく、という方法をとるときもあります。

昨今のWeb制作事情をみると、モニターに向かって画面を作ることに徹しているだけでは、なかなか100％良いといえるサイトにするのはむずかしいといえるでしょう。
少し引いた目でサイトを眺めると、また違った側面が見えてくるはずです。普段の制作現場に、少しでも新しい風がふけばこれ幸いです。

こういった内容をもう少し掘り下げて考えたい方は、ぜひ拙著「Webデザイン・コミュニケーションの教科書」を手にとっていただけたらと思います。
http://www.amazon.co.jp/dp/4797376228/
（シンフォニーホールの丸善と、クレドの紀伊國屋にはポップを置かせていただきました！）

今回、地元岡山にてこのような機会をいただき、ありがとうございました。
また遊びに来ます。

動画

マルチデバイスサイト制作のディレクション術

講師	小林信次
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

講師よりメッセージ

セッション4、マルチデバイスサイト制作のディレクション術を担当した小林です。

東京、札幌でも似た内容のお話しをしているのですが、岡山が一番笑っていただけてとても嬉しかったです。ありがとうございました。

守秘義務の関係でフォローアップのスライドから具体的なサイトは削除しているものがあります。

動画

今日から使える、写真撮影＆ディレクション簡単マル秘テクニック

講師	鍋坂樹伸
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

講師よりメッセージ

ライトニングトーク、
「今日から使える、写真撮影＆ディレクション簡単マル秘テクニック」
ダイジェスト版を担当した鍋坂樹伸です。

セッションを通じお伝えしたかったことは、写真撮影だけに限らず複数人で作業をする場合、仕上がりをイメージし協力することが一番大切だということでした。
陸上競技のリレーで言う、バトンパスが最終的に勝敗を分けるのに似ています。

今回の CSS Nite in Okayama の本題「マルチデバイス対応」について、写真撮影の視点から2点補足説明します。

1.最近のカメラのスペックについて

カメラの記録性能をわざと下げるということをしないかぎり、解像度が足りず荒れてしまうということはありません。
夕方の室内でISO感度を上げ撮影するなど、よほどの悪い環境で撮影しないかぎり、カメラが少し古いからといって不安になることはありません。
制作時にリサイズすることを前提に、撮影時はフルスペックで撮影すると画質的にはとても安心です。

2.商品レイアウトについて

多岐にわたる閲覧環境、スマホのような小さなデバイスで見ることを想定し、

1.シンプルな背景で撮影する
2.被写体の肝心な部分をアップで撮影し掲載する

などを心がけると利用者にはとても親切です。
アパレル、美容関連、洋菓子、ブライダル業界などの少しとんがった業界のイメージ撮影で、「シンプルにしなければと」遠慮する必要はありません。
目的にあった撮影を心がけましょう。

以前に女性のWebデザイナーから次のような相談をうけました。
「年上の男性カメラマンに対して、遠慮してしまうということがある」ということです。
前向きな意見交換なら、撮影前の打ち合わせ時、撮影当日に積極的にすべきだと思います。
むしろ言葉足らずでカット数が足りない、思った画に仕上がらなかった、などの理由で後日再撮影するほうがたいへんです。

今回のライトニングトークで紹介できなかった、写真撮影とフォトディレクションについては書籍に事例付で載せています。
『Web制作と運営のための写真撮影&ディレクション教本～段取りから準備、撮影テクニック、実践ポイントまで～』（マイナビ）を手にとっていただけると幸いです。

ありがとうございました。