CSS Nite公式サイト

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、鈴木 裕也さん（ギャプライズ）の『ヒートマップ解析ツール活用の勘どころ』セッションのスライドなどをシェアします。

メッセージ

このたびは貴重な発表の機会をいただきありがとうございました。あまりうまく話せなかったのですが、ヒートマップ解析の価値が少しでもお伝えできたなら幸いです。

最後にもお話ししましたが、ヒートマップ解析はやはり一度やってみないと分からないと思います。より具体的な活用方法についても今後ブログで発信していきますので、騙されたと思って一度無料版を入れてみていただければ幸いです。

クリックテールは、今回ご紹介した使い方のほかにも「マウスの軌跡を録画できる機能」など、ページ内改善に役立つ数多くの機能を備えております。詳細はクリックテールサービスサイト、または弊社ブログにて解説させていただいておりますので、ぜひご覧ください。

クリックテールサービスサイト
http://www.ctale.jp/

ヒートマップ解析でサイトのCVRを倍増させる７つの方法 | LPO研究所
http://lpo.gaprise.com/blog/heatmap-analysis-1769/

また「ウェブ解析士認定資格」については時間の都合であまり詳しくお話できなかったのですが、初級では、Webマーケティング周りの必要な知識が網羅的に身 につけることができます。新卒の方、あるいは独学でいままでやってきたけれど一回ちゃんと勉強したい人などに特におすすめの資格ですので、この機会にぜひ ご検討ください。

ウェブ解析士認定講座
http://www.web-mining.jp/

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、深津 貴之（ギルド）の『問題解決のためのプロトタイピング』セッションのスライドなどをシェアします。

• スライド（PDF、119ページ、3.2MB）
• 音声

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、土屋 尚史さん（グッドパッチ）の『ディレクター･デザイナーのためのプロトタイプ制作とシナリオ作り』セッションのスライドなどをシェアします。

• スライド（PDF、65ページ、5.6MB）
• 音声

メッセージ

はじめてのCSS Niteでの講演でとても緊張しましたが、なんとか終われてホッとしています。。

著名な登壇者の方々のお話を聞けて僕自身も非常勉強になりました。 今回のアンケートを見てエンジニアとのコミュニケーションの部分に共感されている方が多かったと思います。 やはり、デザイナーサイドもエンジニアサイドもお互いの領域をもっと理解していくとより良いサービスが作れるようになると思います。

グッドパッチの作っているProttはそんなデザイナーとエンジニアのコミュニケーションの溝を 埋めれるサービスになるように育てていきたいと思っていますのでぜひ長い目で応援頂けると有難いです！

講演で紹介したURLです

Invision
http://www.invisionapp.com/
Prott
https://prottapp.com/
Framer.js
http://www.framerjs.com/
Hype
http://tumult.com/hype/
Origami
http://facebook.github.io/origami/
Capptivate.co
http://capptivate.co/
User Onboarding
http://www.useronboard.com/
UXArchive
http://uxarchive.com/tasks/onboarding
Square Cash
https://square.com/cash

Flinto、POPは省略

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、新免 孝紀さん（ChatWork）の『実例に学ぶ、“失敗しない”UIデザインのコツ』セッションのスライドなどをシェアします。

• スライド（PDF、75ページ、14MB）
• 音声

メッセージ

先日は長時間のセミナーおつかれまでした。
UIデザインで失敗しないためには、どういったところに気をつければいいのか具体的にイメージできるか と思い、実際のプロジェクトでの失敗事例を元にお話させていただきました。提供するサービスのコア・コンセプトは何かということをメンバー間で共有し、そ こからUIデザインを考えることで大きな失敗を防ぐことができると思います。今回事例をお話したことで、UIデザインを行う際の参考になれば幸いです。

今後もより良いサービスを提供できように、みなさんと一緒にUI/UXについて取り組んでいければと思います。
ありがとうございました。

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、坂本 貴史さん（ネットイヤー）の『ブリッジビルダー（Bridge Builder）』セッションのスライドなどをシェアします。

• スライド（SlideShare）
• 音声

メッセージ

UIとUXがテーマということで、マーケティングエージェンシーの立場と、IA（情報アーキテクチャ）からの視点で構成してみました。一番はじめに話すと いうこともあり「Bridge Builder」としてUIとUXをつなぐことや、結局「あなたは何をつくるのですか?」というメッセージが一番伝えたかったことです。今後の業務の中 で、異なる視点やつなぐ役割、結局自分は何をするのかについて思い返していただければ幸いです。

CSS Niteは、2009年に開催されたCSS Nite LP7「IAスペシャル」に登壇して以来でしたが、楽しむことができました。ありがとうございました。

講演ログのツイートや参照サイト、ワイヤーフレームTシャツや書籍についてはStorifyで整理していますので、こちらをご覧ください。

• CSS Nite LP33 UI/UX session #1 Bridge Builder
  

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、秋葉ちひろさん（ツクロア）の『人間だからこそできる、気配りデザイン?ユーザーの負担を最小限にするインターフェイスとは?』セッションのスライドなどをシェアします。

• スライド（PDF、100ページ、13.7MB）
• 音声

メッセージ

アプリの設計について、UI/UXデザイナーだけが考えるだけでよい、という時代はもう過ぎたと考えています。
制作に関わるすべてのデザイナーやエンジニアが小さな気配りを意識し、少しずつでも改善の声を発することで、サービスとして素晴らしい体験を提供できる可能性があります。
身の回りのいろいろなことをしっかりと観察し、理由を考え、そして自分のプロジェクトに最適な体験を提供できるきっかけになればと思います！
ありがとうございました！

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、上野 学さん（ソシオメディア）の『アプリケーションのイディオムデザイン』セッションのスライドなどをシェアします。

• スライド（PDF、72ページ、11.5MB）
• 音声

メッセージ

UXデザインの基本は、分析とデザインを反復的に行うことです。デザインには決まった答がなく、常に試行錯誤が必要だということです。

反復的デザインは、各フェーズ単位、プロジェクト単位、そしてより大きな事業やブランドといった単位でフラクタルに試みることが求められています。例えば、ウォーターフォールのプロセスにおいては、あらかじめ数回のプロトタイプ評価をスケジュールに組み込むとよいでしょう。アジャイルのプロセスにおいては、分析とデザインの反復はサービスのライフサイクルを通じて半永久的に継続することになるでしょう。

UXを向上させる活動とは、そういった考え方を組織や社会に広めることです。そのために皆さんは、個々の手法を実践しながら、この考え方をチームやクライアントに伝達していくことが大切だと思います。

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、池田 拓司さん（クックパッド）の『UIデザインのパターン化と効果的な実践方法』セッションのスライドなどをシェアします。

• スライド（PDF、95ページ、22MB）
• 音声

メッセージ##フォローアップ

今回話させて頂いた、UIデザインのパターン化はUIデザインをする上での１つの切り口であり、ユーザーに自然に分かりやすく伝わりやすいデザインをするためのベーススキルです。さらに、感動して、愛着もって使ってもらうサービスを作るには、サービスの特徴やサービス提供者の得意な部分を活かして磨きをかけなければいけないと思います。

これからも今よりもっと楽しい生活をおくれるよう、一緒に良きサービス作り・良きデザインに取り組んでいきましょう！
ありがとうございました。

・パターンを紹介するサイト
http://www.mobilemozaic.com/
http://androidniceties.tumblr.com/
・Androidオフィシャルのアイコンデータダウンロードページ
https://developer.android.com/design/downloads/index.html
・アイコンの起源を紹介するサイト
https://readymag.com/shuffle/ui-symbols/
・クックパッドのCSS Frameworkの発表
http://cssnite.jp/archives/post_2503.html
・iOS7の標準UIコンポーネントデータ
http://www.behance.net/gallery/Download-iOS7-UI-Kit-PSD/9301119
・プロトタイプ作成サービス Flinto
https://www.flinto.com/

2014年9月20日（土）、ベルサール神田 イベントホールでCSS Nite LP36 powered by In-house SEO Meetup「ビジネスに活用できる2014年SEOトレンド」を開催します。

Web担当者Forum、In-house SEO Meetupとのコラボイベントで、今回が3回目です。

今回は、「ビジネスに活用できる2014年SEOトレンド」をテーマに開催予定です。

「SEO＝キーワード＋タグ＋テキスト＋リンク」で集客のためという段階を越えて、事業成果に結びつけるために行うべきことを、最近のトレンドと合わせて把握できるようになる。現時点では「SEO担当」の人が「オンライン事業の中核」にステップアップするために把握しておくべき全体像をつかめるようになる。

次の6セッションを予定します。

• 滝日 伴則（アイオイクス）／基調講演（2014年のSEOトレンド）
• 松尾 茂起（ウェブライダー）／コンテンツSEO
• 床尾 一法／コンテンツマーケティングの評価
• 滝井 秀典（キーワードマーケティング）／コンバージョン
• 鈴木 謙一（海外SEO情報ブログ）／構造化データの活用、事例
• 山田 明裕（セルフデザイン・ホールディングス）／上位表示のためのコンテン

今回のLP36に限り、次の理由から参加費などを変更しています。

• 例年より長めです。2日間の開催を検討しましたが、1日に押し込むことにしました。
• これまで、机ごとに3人がけでしたが、長時間のため、2人がけにします。
• 長時間のセミナーのため、お弁当とコーヒーをご用意します。

2014年6月20日、デジタルハリウッド福岡校 セミナールームでCSS Nite in FUKUOKA, Vol.5を開催し、50名強の方にご参加いただきました。

当日は福岡放送の取材も入りました。

ツイートは下記にまとめました。

• CSS Nite in FUKUOKA, Vol.5 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

• CSS nite Fukuoka vol.5行ってきました。Illustratorの使いどころとは？？ | web design cafe
• CSS Nite in FUKUOKA, Vol.5に参加しました！ | えつごと

こちらは、出演者のブログ。

• CSS Nite in FUKUOKA, Vol.5 で登壇しました ? Volverebit｜福岡のイラスト制作

スライド

ハラダさんのセッションのスライドは、SlideShareで公開されています。

カネウチカズコさんのセッションのスライドは、SlideShareで公開されています。

懇親会にて、CSS Nite in FUKUOKAを地元の有志によって、定期開催していこうという話が出ていますので、ぜひ、ご協力いただければ幸いです。

2014年7月17日（木）19:30-21:00、KDDIウェブコミュニケーションズ セミナールームでCPI x CSS Nite x 優クリエイト「After Dark」（12）を開催します。

FONTPLUS｜フォントプラス、モリサワという代表的な日本語Webフォントのベンダーを含め、3組のスピーカーを迎え、Web Fontsにフォーカスします。

2014年6月18日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（11） のフォローアップとして、こもり まさあきさんの『Framerで動くモックアップを簡単作成』セッションのスライドなどをシェアします。

補足、メッセージ

今回Framerを紹介したのは、主にヴィジュアル面を制作されるデザイナーさんでもほんの少しコードを書いてもらうと意図した動きを実装したモックアップを作って、クライアントや次のステップの担当者に自分の意図するものを伝えやすいかな？というところにあります。

他のモックアップツールは、「画面全体を登録して、その中でボタンの位置を指定して次の画面に遷移させる」といった使い方も多く、実際には「画面内の一部だけが変わるんだけど…」とか「パッと変わるんではなく、ほわっと出てくる感じで変わるんだよね」みたいなことは多々あるんじゃないかと思うのです。そういったときに、このFramerであれば、画面内の一部を別に書き出すことで個別の指定が可能になります。

普段コードを書く機会のない方にはちょっと難しいかな？とも思ってはいたのですが、アンケートの結果を見ても「JavaScript難しそう」という声が多かったように思います。でも、安心してください。当日はひょうひょうと書いてたように見えるこもりも、実際にはそんなにJavaScriptには詳しくもないので。

JavaScriptを書くと言っても、ああいった画面遷移などは割と決まった動きになることも多くFramerを使えば高度な記述は求められません。「画像をどこの位置に表示するか」「クリックしたときに動かすのか」「ドラッグが止まったら動かすのか」「他のアニメーションが終わったら次のアニメーションを実行するのか」みたいなことなら、あらかじめ用意された変数やファンクション（機能）を書くだけです。ちょっとJavaScriptをたしなんでる方はお気付きのように、jQueryのプラグインの実行オプションを書くのに非常に似ているかと思います。

最後の質問でもあったように、これを実際のサイトで利用できるかというとそのままでは使うことはできないでしょう（使えなくはないですが）。それをベースに専門のエンジニアに作ってもらう、最終的なコードが流用可能な製品品質のものを作りたければ最初から別のものを使うといったことになります。Framerは現時点ではあくまでもWebサイトやWebアプリ、スマートデバイス向けのアプリのデザインカンプをもとにしてプロトタイピングをするものだと考えていただいた方が良いかと思います。

今回セッション中で紹介したファイル、デモファイルなどは下記にまとめておきました。GitHubにあげてますので、右下にある「Download ZIP」のボタンでダウンロードしてください。中にいろいろファイルが入ってますが、app.jsが実際の指定ファイルでコメントをいれてあります。.sketchは元ファイルになります。レイヤーの作り方などのご参考までに。

https://github.com/gaspanik/cssnite-ad11-follow

CSSNiteAfiterDark-11-komori from CSS Nite on Vimeo.

2014年6月18日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（11） のフォローアップとして、 イシジマ ミキさん（ザ・マーズナレッジ）の『ワイヤーフレーム・プロトタイプ制作に使うSketch』セッションのスライドなどをシェアします。

• スライド

補足など

皆さん、ご参加ありがとうございました。

わたしも簡単なワイヤーフレームの設計で最適なツールに悩まされてきたことがあり、いろいろ試していました。AIやFW、Cacoo、OmniGraffleなど。

それらの中で一番シンプルに感じたのがSketchです。基本的な操作概略を見ることで、実際の制作のイメージが想像できたのなら幸いです。ぜひゆとりのあるプロジェクトやプライベートワークなどで試してみる機会を作ってみてください。

いただいた質問にお答えさせていただきますね。

Q1.スライスを切るのにはどうしたら？

A1.スライスツールを使うことで任意のサイズにすることが可能です。また、デモで行ったように右側のパネル、一番下に表示される「Make exportable」をクリックしたのち、「Export」ラベルの右側に表示されるスライスアイコンをクリックすることでも作成することが可能です。

Q2. ビットマップを貼っての@2x書き出しはできるのか？

A2. 可能ですが荒れちゃいますので、ビットマップベースのものは倍のサイズで作ってから縮小する方法をとるのが望ましいです。

*Q3. モックアップ以上のデザインは厳しい？ * A3. パスツールの動作がAIと異るものなので、ロゴや書体を作るために複雑なパスを切ろうとすると慣れが必要になってきます。しかしそれは「デザインが厳しい」というコトではありません。

こちらを見ていただくとさまざまなアプリやインターフェイスが作られていることが分かります。

ダウンロードしてSketchで開いてみることでどのような表現をしているのかが学べますのでいろいろ見てみることをおすすめします。

Q4. 角丸長方形のリサイズはアールが崩れませんか？

A4. 角丸長方形、長方形に角丸設定をして変倍してもアールがおかしくなることはありません。またSketchには9スライス機能もありますよ。

CSSNiteAfiterDark-11-ishijima from CSS Nite on Vimeo.

補足など（こもりまさあきさんから）

あとSketchの件で。以下が、こもりがインストールしているプラグインになります。イシジマさんの解説にあったようにダウンロードして、プラグインフォルダにいれてもらえば使えるようになります。Sketch単体はさほど覚えることのないシンプルなアプリケーションなんですよね。なので、その足らない部分を補うのがプラグインだと思っていただければ良いかと。

• こもりが入れてるプラグインリスト - http://www.mkdown.com/ccfa37b1bf412aca28c8

電子書籍「Sketch 3 Book for Beginner（http://theneutrals.io/s3bp/）」でもいくつか紹介していますが、実際にSketchや公開されているプラグインを使いこなしたり、他のアプリケーションと連携させるとこんなこともできるようになるよ、というデモは以下をご覧ください。

• Sketch w/ sketch-measure - http://quick.as/a0vsqoe
• rename & export subfolder - http://quick.as/pr6cvvx
• Sketch artboard to CloudApp - http://quick.as/noju9rn
• demo workflow w/ sketch - http://quick.as/yeacmkj
• Duplicate artboards - http://quick.as/10asgz0
• LINE Stamp Exporter - http://quick.as/yras2dz
• export assets - http://quick.as/gplcoyw

イジジマさんが最後に行ったデモはこんな感じですね。

• Hi-FI WF w/ Sketch 3 on Vimeo - https://vimeo.com/95168228
• Tuts+ Ps tutorial w/ Sketch 3 on Vimeo - https://vimeo.com/95837178

2014年5月15日 、KDDIウェブコミュニケーションズセミナールーム（麹町）でCPI x CSS Nite x 優クリエイト 「After Dark」（11）『プロトタイプ/モックアップ』 を開催しました。

「After Dark」シリーズは、翌週にはスライドなどを公開予定です。

次のブログで取り上げていただきました。ありがとうございます。

• 「プロトタイプ制作に使うSketch/Framerで動くモックアップ」cssniteセミナーレポート | SINAPlog

こもりさんのセッションのスライド：

こもりさんのSketch本

こもりさんがSketchに関する電子書籍をリリースされています。

• Sketch 3 Book Preview

2014年6月14日（土）、ベルサール九段でCSS Nite LP35「マルチデバイス対応 2014」を開催し、200名ほどの方にご参加いただきました。

ツイートは下記にまとめました。

• CSS Nite LP, Disk 35「マルチデバイス対応 2014」 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

• CSS Nite LP35「マルチデバイス対応 2014」に行ってきた?World of granshe.
• CSS Nite LP35：マルチデバイス対応 | littlepad blog
• CSS Nite LP35に参加しました | セミナー | おにぎりっぽいブログLv2

こちらは出演者のブログ：

• CSS Nite LP35「マルチデバイス対応 2014」終了しました。 - to-R
• ネットワーク速度のシミュレーションソフト『Network Link Conditioner』

（撮影：飯田昌之）

前川さんの電子書籍『レスポンシブWebデザイン入門 ～モバイルファーストの考え方からのアプローチ』が発売されました。

本書は，いまやWeb制作において1つの手法として定着した「レスポンシブWebデザイン（Responsive Web Design）」（以下，RWD）の入門書です。この春にWeb制作の業界に新しく入った人や，これからRWDでの制作を行っていこうと考える人を対象にしています。

Gihyo Digital Publishing（EPUB版）、Amazon（Kindle版）を購入可能です。

• サポートページ
• RWDを基礎から学べる電子書籍『レスポンシブWebデザイン入門～モバイルファーストの考え方からのアプローチ』，発売：ニュースリリース｜gihyo.jp … 技術評論社
• Facebookページ：レスポンシブWebデザイン入門

2014年5月15日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（10）『マークアップ事情』 のフォローアップとして、小山田 晃浩さん（ピクセルグリッド ）の『IE6がなくなった今だからできる、IE8ベースの新CSSテクニック』セッションのスライドなどをシェアします。

• スライド（PDF、20MB）
• デモデータ「download ZIP」ボタンから取得可能

メッセージ、補足など

「IE8ベースの新CSSテクニック」をお話させていただいた小山田です。平日にもかかわらず、ご参加いただきありがとうございました。

"CSS2.1"による新たなレイアウトテクニック、いかがでしたでしょうか。アンケートを拝見しまして、明日から使いたいといったご意見を多数いただき、私自身も、お話できてよかったと感じました。今回紹介した内容はすべて私自身が実際の仕事でお試し済みで、IE8以上で利用可能です。今日からみなさんのお仕事で役立つテクニックです。是非皆さんのお仕事でも使ってみてください。

最後に、アンケート内でご質問いただいた内容にここでお答えいたします。

display:tableを使う上でのデメリットはありますか？

デメリットを挙げるとすると、

• display:tableにはpaddingが適用できません。(marginはOK)
• display:table-cellにはmarginが適用できません
• display:table-***-groupではpaddingもmarginも適用できません。

ですので必要に応じて、display:table-cellやdisplay:table-*-groupの直下にinnerとなるdivをひとつ設け、そこで余白を適用という流れになります。

例 ```

```

flexboxが気になりました。

flexboxはCSS3で登場した、新たなレイアウトのためのスタイルです。 display:table; よりもずっと便利です。 しかし、今現在、モバイル端末に限ったとしてもiOSとAndroidの対応はバージョンによってだいぶ差があり、また、当然ながらIE8では利用できません。 今の段階では、display:table; をおすすめします。なぜなら、既に仕様として揺るがないCSS2.1だからです！

最後に、スライド内でご紹介した、弊社の情報サイト、コードグリッドをご紹介させてください。

CSSやJSなど、Webのテクニックについて、毎週3つずつ記事を配信しています。 一部、一般公開のページもあり、ログインすると全ての記事を読めるようになります。(初めの1ヶ月は無料) 今回ご紹介したdisplay: table; をもう少し深く掘り下げた記事もありますのでよろしければ復習にお使いください。

ビデオ

ad10-yomotsu from CSS Nite on Vimeo.

2014年5月15日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（10）『マークアップ事情』 のフォローアップとして、 河村 奨さん（リブライズ、下北沢オープンソースCafe）の『シンボルフォント 〜 それは新しい画像形式』セッションのスライドなどをシェアします。

メッセージ、補足など

初めてのCSS Nite参加でしたが、セミナー後「自分でも作ってみたい」と多くの方に言っていただけて嬉しいです。Illustrator + IcoMoonの組み合わせだと、特に難しい手順はないので、ぜひこの週末あたり自作のアイコンフォントを試してみてください! プレゼン中に使った、「シンボルフォントの作成チュートリアル」にも細かい手順を書いていますので参考にどうぞ。 gulpに挑戦してみようという方は、スライドの最後で紹介した「Symbols for Sketch」もぜひ。

• スライド :
• デモ動画(1)
• デモ動画(2)
• シンボルフォントの作成チュートリアル
• Symbols for Sketch

多色刷りフォントについて、質問や感想を多く頂きました。 StackiconsのURLを貼っておきますね。

• 多色刷りフォント「Stackicons」

ビデオ

AD10-kawamura from CSS Nite on Vimeo.

2014年5月15日 、KDDIウェブコミュニケーションズセミナールーム（麹町）でCPI x CSS Nite x 優クリエイト 「After Dark」（10）『マークアップ事情』 を開催しました。

「After Dark」シリーズは、翌週にはスライドなどを公開予定です。

河村さんのスライドは、SlideShareにて公開されています。

次のブログで取り上げていただきました。ありがとうございます。

• ライバルのイベントを観察? CSS Nite After Dark?

2014年5月16日、Stocker.jp / Space（渋谷）でCSS Nite back2basic 2014「HTML5文法を徹底的に身につける」を開催しました。

講師は益子 貴寛さん（サイバーガーデン）。