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

見えない行動の先へのデザイン

講師	秋葉秀樹
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

動画

講師よりメッセージ

CSS Nite in Okayama, vol.4に参加されたみなさん、どうもお疲れさまでした。
当日トップバッターでお話しました秋葉です。

セッションの中でもお話した通りですが、用途が多様化しているWebデザインはユーザーに長く使ってもらえる方法を試行錯誤しなければならないことがあります。その試行錯誤の一つで「つくり過ぎずちょっとだけ試す」というスタイルとしてWebベースのプロトタイプで行うための方法を紹介しました。一見「めんどくさそうだな」と思われるかもしれませんが、慣れて自分のスタイルにすることでデザインに根拠を生み出すきっかけになります。このお話がみなさんのWeb制作のこの先において役に立ったらとても光栄です。

◎- 秋葉秀樹の人に伝えるデザイン - MdN Design Interactive
現在連載している記事の3回目が本日公開になりました、CSS Nite in Okayamaのセッション内容も紹介しました。
http://www.mdn.co.jp/di/articles/3067/?page=4
コーディングスキルも最新のWeb技術も勉強は大事ですが、今もっと大事なこととしてデザイン力をつけるトレーニングをすることだと思っています。
そういった「コンピュータに向かわないデザインに対する考え方」をテーマに書いています。よかったらご一読ください。

◎セッション中のLeap Motionデモ
一晩でつくったデモなのでこれだけでは大したものではないですが、Leap Motionをお持ちの方は試してみてください。
（Google Chromeのみカメラ使用の許可が求められます、「許可」ボタンを押して試せます） http://tuqulore.com/demo/leap/swipe_item/
※あまり早い手の動きは認識されないようにしています、ゆっくりと手や指を振ってください。

◎セッションでできなかった音声認識デモ
NUI（Natural User Interface）の一つと言われている音声認識、これはGoogleが独自に開発しているもので、W3C推奨ではないので仕様が変わったりする可能性がありますが、HTMLベースでできるものの可能性が広がりますね。
（こちらも最新版Google Chromeのみマイク使用の許可が求められます、「許可」ボタンを押して試せます、ネット回線が必要）
http://tuqulore.com/demo/web_speech/
※若干認識が甘いと思いますが…

Leap Motionのデモの後に「飽きる」と言われてしまいました（泣）。
しかーし！！すいません。。。私の伝え方が悪かったのかもしれませんので補足します。私が伝えたかったことはLeap Motionではなく、このように次世代のインターフェースを「とりあえず試してみよう」と割と気軽に挑戦できることが可能になりつつある時代だってことです。
そしてこれらのデザインはもちろんHTML+CSSでOKだということです。
これまではサイネージだけで多くの予算が必要だったものも、アイデア次第では割と安価な予算でプロモーションが実現できる可能性に着目しようぜ！ということです。
（大型タッチパネルディスプレイは高額だけどNUIだったら大型テレビとPCだけでいいかもしれない、とか。。。もちろん場合によりけりですが…）

あと、弊社のサイトをiPhoneで見ると、ヘッダの下に指で引っぱり出すプルプルするUIが見れると思います。
http://tuqulore.com/

こちらはソースコード、鷹野さんが名付けたババロアです。
https://github.com/Hidetaro7/Bavalore

また岡山にはちょくちょく来ますので、今後もよろしくお願いします！！

2013年はWeb制作の曲がり角

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

動画

講師よりメッセージ

鷹野です。
ご参加いただいたみなさん、ありがとうございました。

以下へフォローアップ情報を掲載していますので、ご参照ください。
http://cssnite.jp/okayama/vol04/followup/index.html

また、お会いできる日を楽しみにしています。

実制作で知っておくべき手法やツール

講師	久保木博
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

動画

講師よりメッセージ

参加されました皆さま、ありがとうございました！
「実制作で知っておくべき手法やツール」で登壇しました、久保木です。

今回は内容をかなり詰め込み、制作をされている方を中心としたツールの紹介をしました。
選択肢が多いと選ぶためのコストはかかりますが、使いこなすまでにならないまでも、それで何ができるかを知っておくことは、損ではありません。
また、新しいツールや手法などを使うのは楽しいものです。しかし使うことを目的とせず、なにを使って、どのように効率化し、どれぐらいの時間を生み出せるかを、ぜひ考えてみてください。

早足で進めたため紹介に留まるものが多く、私のおすすめを教えてほしいとのアンケート回答を頂戴しましたので、今回のスライドから私の使用頻度が高いものを紹介します。

ーーーーーーーーーー

■Fireworks / Sketch.app（グラフィックツール）
http://www.bohemiancoding.com/sketch/

カンプを完全につくるということが少なく、どちらともパーツ作りが中心です。

Fireworksは皆さんご存知だと思いますので省略します。Sketch.appは比較的新しいアプリということもあり、動作も軽快でハンドリングがとても良いアプリです。簡易的なマルチページや、スライスなどにも対応しており、スライスのドラッグ&ドロップでの書き出し、スライス内の書き出しに必要なオブジェクトのみを選択して書き出せるなど、気の利いた機能があります。ただし、日本語の扱いは考慮されていない、普及率が低いため編集可能なデータの受け渡しが必要な場合のデータの互換性に問題があるなど、デメリットは小さくありません（業務ではOSがWindowsのため、もっぱらプライベートワークで使用しています）。

■Sass（CPP）
http://sass-lang.com/

CPPを使い始めた頃は、SassとLESSの2択だったため、機能の多いSassを使っています（SCSS記述です）。ただ、機能が多い方が良いわけでなく、逆に機能の少ない方が覚えることも少ないというメリットがあります。また、CPPの基本ともいえるセレクタの入れ子や変数については、いずれのCPPでも使うことができます。

■Foundation（CSSフレームワーク）
http://foundation.zurb.com/

Foundationをそのまま納品するといったことはしておらず、ワイヤーフレーム作成での使用が中心です。どのフレームワークも基本的な使い方が似ていますので、1つ使うことができれば、他のフレームワークを使う場合の学習コストは低くなるでしょう。今回は、ver. 4を紹介していますが、メディアクエリの関係でIE8がモバイル向けレイアウトになり、UIパーツの一部もサポートされていないため、IE8できちんと動作させるのであればVer. 3を使ってください。

http://foundation.zurb.com/old-docs/f3/

打ち合わせなどでどうやって確認しているのか？については、PCで確認できるのが一番ですが、スクリーンショットを撮ってPDF化する、プリントするなどの方法があります。

また紹介した、TopcoatはAdobeが開発していることもあり、テンプレートのPSDファイルが配布されています。

■Bourbon（Sassライブラリ）
http://bourbon.io/

フレームワークとして完成されたCompassがあるのですが、軽量でよく使うものだけをライブラリとしてまとめられているので、Bourbonをメインで使っています。

■Sublime Text 2（エディタ）
http://www.sublimetext.com/

エディタはこれがメインです。初期状態では少し機能の多いエディタですが、Package Controlというパッケージの管理を楽にするパッケージを入れることで、飛躍的に便利なエディタに変わります。HTMLやCSSを始めとした入力補完や、CPPの自動コンパイルなどのパッケージを入れて使っています。

■MIXTURE（CPPコンパイルGUIツール）
http://mixture.io/

CPPのGUIツールとして紹介いたしましたが、実はもう一つ上のレベルで、CSSフレームワークを組み込んだテンプレートから、プロトタイピングを素早く行えるツールです。MIXTUREは有料で価格設定がやや高めのため、フリーのGUIツールを使うのであれば、
日本語化されているKoala（http://koala-app.com/）
または機能の充実したPrepros（http://alphapixels.com/prepros/）
になります。

ーーーーーーーーーー

気になるものがあれば、ぜひ明日からでも試してみてください！

Twitter: https://twitter.com/littlebusters
Facebook: http://fb.com/hiroshi.kuboki
Web Site: http://creative-tweet.net/

Web制作を取り巻く変化と地方における業務の実際

講師	山田恵理子
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

動画

講師よりメッセージ

「Web制作を取り巻く変化と地方における業務の実際」についてお話させていただきました、株式会社ゴーフィールドの山田です。
お越しいただいた皆さま、ありがとうございました！

技術的な内容こそ少なかったのですが、地方の一制作会社の「リアル」をお届けできればと思い、お話しいたしました。

勉強会でも、サイト上でも、日々新しい情報が流れていて、また、ワークフローや考え方も変わってきています。もちろん、「自分たちもこうしたいな、こうあるべきだ」という理想は持っておく方がいいのですが、じゃあ現実はどうなの？というところで、制作者やクライアントの両面で様々な課題が出てきます。

あるべき姿の理想を持った上で、現実の状況を見ながら少しずつ理想に近づけていけたら、と考えて日々弊社でも改善を続けています。
何か一つでも、参考になるところがあれば幸いです！

いくつかご質問をいただきましたので、回答いたします。

■月一回のクライアント訪問の体制について

ゴーフィールドは営業と制作が明確に分かれており、基本的には営業がクライアントのところに伺います。元制作をしていた営業、という者はいますが、往訪する件数が多いので制作はせずに営業のみ行っています。例外的に、CMSに関する依頼や相談が多いクライアントや制作メンバーが行った方がいいだろうな、というクライアントに対しては制作のメンバーが訪問していますが、件数は少ないですね。職種のシングルタスクを図って、なるべく時間的なロスが出ないようにしています。

■チーム内の情報共有やガイドラインの作り方・共有方法について

以前はメールやファイルサーバに保管など行っていたのですが、現在は主に以下のツールを使って共有しています。

・Backlog
http://www.backlog.jp/

・サイボウズLive
https://cybozulive.com/

両方とも作業環境や場所を選ばずアクセスでき、またメンバーが変わった場合、途中から参加する場合でも情報が残っているので便利です。

ガイドライン自体を作る場合は、制作チームの週一のミーティングで誰が、いつまでに作るかというのを決めて作成し、次のミーティングで他のメンバーに周知する、というようなことを行っています。作るときも共有するときも、制作業務自体を圧迫せず、だれでも気軽に見れて共有できるということを念頭においています。

■おまけ

セッション中にお話に出ました、紫外線対策帽子「フリルネック」です。すみません、現在ラインナップが少ないのですが、また入荷いたしますので是非ご覧ください！
http://e4.gofield.com/shop/products/category/25

---

Facebook https://www.facebook.com/eriko.ymd
twitter https://twitter.com/eriko

Webデザインは、いったい、何を解決できるのか？！

講師	中川直樹
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

動画

講師よりメッセージ

ご来場いただいたみなさま、ありがとうございました。
当初、台風の影響から、開催がどうなるのかと、ドキドキしておりましたが、無事に開催でき良かったです。

Webに従事する人たち誰もがクリエーターであり、僕たちの仕事は、ヒトの行動、社会を変えることに通じています。
「デザイナー」より「デザイニスト」、デザイン思考を大切に、我々の未来を切りひらいていきましょう！

フラットデザインについて「iOS 7」を題材に良い記事がありましたので、掲載します。

【「iOS 7」論争とデザインの本質：ジョン・マエダ】
http://wired.jp/2013/06/17/why-jony-ives-and-apple-ios7-are-holding-back-the-future-of-design/

そして、時間の都合上、お見せできなかったキネクト利用の実例の記事（ムービー付）です。

【Opect オペクト】
http://www.nichiigakkan.co.jp/service/medical/category/hospital/opect.html

【三井ホームの住宅設備】
http://response.jp/article/2012/09/10/181127.html

【Kinect Fitting Room】
http://www.fashionsnap.com/news/2011-05-19/ar-topshop/

話の中にも盛り込ませていただきましたが、岡山には、素晴らしいユーザー体験ができる場所があります。

▶ ぼっけゑラーメン　- 岡山
http://tabelog.com/okayama/A3301/A330101/33000119/

コト売り、体験という意味で、鶏ガラ豚骨ベースのスープ、佇まい以上に、店主の湯きり、器へのスープベース、盛りと、愛されるべくしてラーメン屋になったであろう、何言ってるか分からない早口の口上。このお店にいって、笑顔にならず帰るヒトは、恐らく一人もいないと思います。

「キムチいれるらーめん※☆○＄～」
「唐辛子とニンニクよろく○♪＆〜」
「キムチいれってて〜○＆おいしいよ〜」
「ありがと※☆した〜＄！♪＆」

店主は、唯一無二のユーザー・インターフェースであり、
そこで食べるラーメン体験はラーメン＆キムチ、店主、客、三位一体、
日本最高峰のユーザー・エクスペリエンスです。

最高峰のユーザー体験は岡山にあり。
名付けて「ぼっけゑ・エクスペリエンス」（BX）

岡山を中心とした人々のWeb利用の特性をさぐり、ユーザー視点でのWeb利用特性を総称して「ぼっけゑ・エクスペリエンス」という言葉が一人歩きしたらいいな。と、真剣に思っております。

また、お会い出来る日を楽しみにしております！！

制作を『超ラク』にするプロダクトのご紹介

講師	阿部正幸
音声	MP3ファイルをダウンロード
スライド	PDFファイルをダウンロード

講師よりメッセージ

CSS Nite@OKAYAMAに参加されました皆様ありがとうございました。

協賛企業として参加させていただきましたKDDIウェブコミュニケーションズの阿部と申します。ぼっけゑラーメンが既に恋しく、早く岡山に行きたいなと思っています（笑）

さて、当日はつたないプレゼンにも関わらずご清聴いただきありがとうございました。当日のプレゼンでは時間の都合で自社の説明をあまりできませんでしたので、こちらで少し説明させてください。

ツールを使ってWeb制作を行うのが当たり前の時代になってきました。
一つでも多くのツールを知っている方が提案の幅、さらには作業工数を短縮することもできます。

今回、私はバックアップにフォーカスし話をさせていただきました。
その中ではDropboxを使ったり、弊社のサーバーツールを使ったりし処理を行うことで作業効率が良くなり、データ耐性も上がるというお話をしました。
昨今、WordPressのサイト改ざんについて何かと話題になっていますが、Dropboxまたは、弊社のサーバーツールを使うことでスグに前日の状態に戻すことが可能です。
是非一度自動バックアップ機能を体験いただければと思います。

プレゼンの中で少し紹介させていただいた共用サーバーACE01は、ディスク・データベース・マルチドメインなどのサーバーリソースを無制限に使用できます。
さらに標準で搭載されている「SmartRelease」機能は、自動バックアップやテストサイト標準装備などで『超ラク』をコンセプトに開発されたもので、Web制作者を強力にバックアップいたします。10日間無料お試しもありますので、ぜひ一度お試しください。

＜Shared Plan ACE01＞ https://www.cpi.ad.jp/shared/ ※共用型レンタルサーバー

＜制作者をラクにするSmartRelease＞
https://www.cpi.ad.jp/shared/smartrelease/
※SmartReleaseはShared Plan ACE01に標準装備されているサーバーツールです。

＜CPIスタッフブログ＞
http://shared-blog.kddi-web.com/top
※WordPressの構築や、Dropboxへの自動転送方法などのTipsを掲載しています。