11 years 2ヶ月 ago
CSS Nite実行委員会
11 years 2ヶ月 ago
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年12月13日（土）、ベルサール神田 イベントホールでCSS Nite LP38 「Webデザイン行く年来る年（Shift8）」を開催します。
毎年年末に開催している「Shift」シリーズの第8弾として、マークアップ、アクセシビリティ、ツール、デザイントレンド、スマートデバイスなどの分野ごとに、2014年のWeb制作シーンを振り返る、というものです。
受付を開始して2週間で、すでに250名を越えるお申し込みをいただいています。「まだ、9月なのに年末？」という感じもしますが、9月末までの超早割（2000円OFF）をご利用ください。
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年7月17日、KDDIウェブコミュニケーションズ セミナールームで開催したCPI x CSS Nite x 優クリエイト「After Dark」（14） 「“クラウドソーシング”という働き方」のフォローアップとして、 鈴木 侑さん（おにぎりたまごうぃんなー）のフォローアップを公開します。
メッセージ
やりたい仕事への理想や、他のデザイナーとの差別化をはっきり持つことで、クラウドソーシングで他のワーカーと比べられた時に仕事を取りやすくなることができます。クラウドソーシングで働くときだけでなく、組織に所属して働いていても、フリーランスとして働いていても、自分の強みや、ロードマップを意識することは重要です。このセッションでお話させていただいたメソッドが、自分のことや将来のことを考える切っ掛けになれば幸いです。
CSS Nite実行委員会
11 years 3ヶ月 ago
CSS Nite実行委員会
11 years 3ヶ月 ago
CSS Nite実行委員会
11 years 3ヶ月 ago
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年9月18日（木）、KDDIウェブコミュニケーションズ セミナールームでCPI x CSS Nite x 優クリエイト「After Dark」（14） を開催し、60名弱の方にご参加いただきました。
今回は、「“クラウドソーシング”という働き方」と題し、実際にクラウドソーシングのサービスを通して、キャリアを構築されているお二人にお話を伺いました。
加藤 若菜さん（ミストラルデザイン）の『クラウドソーシングだけで独立した私の活用術』セッションのスライドは、SlideShareで公開されています。
CSS Nite実行委員会
11 years 3ヶ月 ago
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です。腕時計型のデバイスは早く使ってみたいです。
いただいた質問への回答
- 【質問】WebViewばっかりのアプリだとiOSの審査でリジェクトされると聞いたのですが、ハイブリッドだとどうなんでしょうね？
- WebViewばかりであるのが問題というより、Webサイトをそのままクリッピングしたものであったり、アプリならではの機能がない場合などに、アプリである必要性がないと判断され、リジェクトされることがあります。 App Store Review Guidelinesの12.3と2.12が関連項目です。
秋葉ちひろ：
Androidの解説を担当しました秋葉です。
80分という長時間、アプリのデザインに馴染みのない方には少し長く感じられたかもしれませんが、最後までお聞きいただきありがとうございました。
懇親会では、アプリのUIがこーんなにもWebとは違って、しかもiOSとAndroidでそれぞれ違うなんて、全部やるのは大変ですねということが話題にあがりました。
ですが、今後は他にもいろいろなインターフェイスをもつデバイスが増えてくるはず、キャッチアップしておいて損はないと考えています。
公開したスライドにも各ガイドラインの情報はかなり詰まっていますが、それだけでもの足りない方は、ぜひガイドラインそのものを読んでみてください。
Web制作にも役に立つものも多いはずです。
セッション中に触れられなかったものの参考サイトを挙げておきます。
たにぐちさんの基調講演でも、Androidが伸びてくるだろうとお話がありましたが、どちらが優れているということは特になくて、それぞれ良い点とイマイチな点を持ち合わせていると思います。
安いSIMも出てきていますし、Androidをさわったことがない方も、1台SIMフリー版を買って持っておくといいと思います。仕事柄、両者を「使って」おくことは非常に重要です。
今回の少しマニアックなセッションが、少しでも今後の制作に役立ちそうと思っていただけましたら幸いです。ありがとうございました。
CSS Nite実行委員会
11 years 3ヶ月 ago
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）の『トラブルシューティング 2014』セッションのスライドなどをシェアします。
フォローアップ
「トラブルシューティング2014」のセッションを担当した西畑と木村です。
漫談形式を多くの方にご好評いただいたようでありがとうございます。
いくつかの質問をいただきましたので、ブログで解答を行なっております
マルチデバイス対応では日々新しい端末やOSが登場しており、これまで当然のように利用できたことが利用できなくなることがあります。日々、情報をウォッチしておく必要があります。
これからも一緒に終わらない戦いに挑んでいきましょう！
最後になりましたが、参加された皆様、長時間おつかれさまでした&ありがとうございました。
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、北岡 恵子さん（NTTレゾナント）の『スマホの検証が10倍はかどる！Remote TestKitの紹介』セッションのスライドなどをシェアします。
フォローアップ
Remote TestKitは、スマホに関わる皆様のお仕事を少しでもラクにできれば、というサービスです。今回ご紹介しきれなかった機能もたくさんありますので、是非実際にご利用してみてください。
http://appkitbox.com/testkit/
会場やアンケートで頂いたご質問
Q1. 誰かが端末を使っている間は、ほかの人はその端末を利用できないのか？
A1. 実機を利用しているため、誰かが利用している間はその端末を利用することはできません。ですが、一度のレンタルが30分単位ということもあり、端末の取り合いになるような事例はあまりありません。
Q2. セキュリティが心配なのですが…
A2. ご利用が終了すると、端末は自動で初期化されます。アプリケーションや入力したパスワードを入れたままにしておいても、次に使う方には初期化された状態でお渡しとなりますので、問題ありません。安心してご利用ください。
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、宮崎 洋史さん（環）のPRセッションのスライドなどをシェアします。
フォローアップ
ユーザーにとって最高の体験を提供するにはデバイスや店舗は「異なった役割を担うべき」というのがメイシーズの考え。サイト制作の上流工程に携わるチャンスが巡ってきたときに参考にしていただけると幸いです。
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、たにぐち まことさん（エイチツーオー・スペース）の『スマートデバイス時代のJavaScript』セッションのスライドなどをシェアします。
フォローアップ
このセッションでは、ディレクターやデザイナー、マークアップエンジニアといった「非プログラマー」の方でも、押さえておきたい JavaScriptのトピックスとして、紹介しました。
踏み込んだ内容までは盛り込まなかったため、物足りなく感じてしまったかも知れませんが、これを機会に興味を持って頂いたらまずは、AngularJSあたりから触ってみて、Hogan.jsを実践で利用してビューの概念などに慣れていくと良いでしょう。
また同時に、スマホ案件で jQueryを使うほどではないDOM操作の場合（要素を表示・非表示の制御など）には、Zepto.jsの利用も思い出して頂ければ幸いです。
参考リンクです。
頂いた質問です
jQueryと Zepto.jsの比較表はありますか？
こちらにありました（まぼろし 西畑さんありがとうございます）
https://twitter.com/kazumanishihata/status/477712418244919296
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、松田 直樹さん（まぼろし）の『マルチデバイス対応な実案件で使う、Bootstrap のすゝめ』セッションのスライドなどをシェアします。
フォローアップ
Bootstrap をはじめとした CSS フレームワークをプロジェクト内でどう活用するか、というテーマでお話させていただきました。アンケートにて「使ってみたくなった」という反応も多くいただきまして大変うれしく思っております。
コンポーネントデザイン・設計ルールとしての重要性をお伝えしましたが、実装におけるCSS フレームワークのメリットとしてはやはり「楽できる」という点です。実装を楽にすることで、サイトの「設計」フェーズにより時間をかけることができるようになります。
設計重視という傾向は、「Content is King」とも言われるように「サイトの本来の目的はコンテンツを伝える」ことを重視することに他なりません。Webデザインという範囲が、「広義のデザイン」を指すようなデザインの原点に還る傾向になってきているわけですね。
この観点から、フレームワークを用いればプロジェクトチームの全員が効率よく「設計」に寄与できる素地ができるのでは、と感じています。ぜひチーム内で Boostrap のスキルを共有してみてください。
「勉強する」という意気込みより、「楽したい！」という動機の方が素早く仲良くなれるかと思います。
ありがとうございました！
以下、アンケートにていただいたご質問への回答です。
Rails + Bootstrap では、使わないコンポーネントをコメントアウトできない？
たしかに、他のフレームワークに Bootstrap などの CSS フレームワークが包含されているケースではこのような疑問は湧きますね。「bootstrap.scss」「_variables.scss」、この2ファイルを自前の作業領域で使うように環境を作ればカスタマイズは問題ないかと考えています。
なぜ WebデザインをIllustratorでされているのか？
SVGが大好き、ということもあるのですが、やはり複数のアートボードを一度に俯瞰できる点がいいですね。特に RWD のカンプを作る際には重宝します。
よく使うコンポーネントは？
これと言って偏りはないのですが、nav コンポーネントなどは使うと楽でしょうね。スマホ表示時には勝手に折りたたんでくれますので。
自社内のみでフローが完結しない場合の利用方法論は？
内外部スタッフが混在している場合など、自社内でフローが完結しないケースでの方がフレームワークを使う意義があると考えています。やはり「ルール」が事前にあることは意思疎通の改善にも繋がります。
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、小川 裕之さん（ツクリベ）の『レスポンシブWebデザインのワークフロー』セッションのスライドなどをシェアします。
フォローアップ
実例を交えてRWDをウォーターフォールのワークフローで進めるリスクと、それを改善したプロトタイプを中心としたワークフローの話をしました。
失敗例のように同じようなトラブルにあったという話は周りでもよく聞きます。これからレスポンシブWebデザインを始める方や、既に経験はあるけれど進め方に不安がある方は参考にしていただければ幸いです。また特に問題なく進められているという方も、その進め方にリスクが潜んでないか、これを機に見つめ直してみてください。
セッションの中でも話しましたが、ワークフローを変えるというのは簡単なことではありません。環境や立場上、変えたいと思っても難しいという話はよく耳にします。私もそういう時はあるのですが、その中でも他の立場の人に早めに情報を共有してもらうようにしております。それだけでもリスクに気がつく早さが変わってきます。
成功例のようなワークフローが浸透するにはまだ時間がかかるかも知れませんが、まずは取り入れられるところから実践してみてください。
ありがとうございました。
以下、アンケートでいただいたご質問に回答致します。
プロトタイプは全ページ作るのか？
大枠の構成が異なるページの数だけ作ります。従って、トップと下層のベースとなるフォーマットのみが多いです。その他、他と異なる構成のページ、または機能の実装を確認してもらいたいページがあれば作成します。
事例では、トップと2種の下層ページフォーマット、lightboxを使用したギャラリーページのプロトタイプを作成しました。
カンプを作るときはどのプロトタイプの後か？また全ページ作るのか？
カンプを作るのはプロトタイプの後です。失敗例でも取り上げましたが、先にカンプを作ってしまうと実装で苦労する可能性があります。また、カンプを作るケースで進めるときは基本全ページ作ります。
RWDのメリット・デメリットとクライアントへの説明
下記スライドの14Pにメリット・デメリットをまとめてますので参考にしてください。また、どうしてもモバイルとPCで構成や内容を大きく変えたい場合、想定されるユーザーの利用シーンが限定的である場合などは、RWDでは無理な設計になりがちなので専用サイトを作るなど提案をしております。
レスポンシブWebデザインの基礎
プロトタイプ作成に使ってるツールは？
今回の実例ではオリジナルのグリッドシステムをベースに作成しました。ただ、最近の案件ではCSSフレームワークを使用して作成してます。
CSSフレームワークの活用については松田さんの資料を参考にしていただければと思います。またディレクターであれば、同様に松田さんが取り上げてましたWebflow、Adobe Edge Reflowなどのツールの使用を提案致します。
Webflow
Edge Reflow CC
CSS Nite実行委員会
11 years 3ヶ月 ago
2014年6月14日（土）ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 35「マルチデバイス対応 2014」のフォローアップとして、たにぐち まことさん（エイチツーオー・スペース）の『基調講演：スマホサイトの今、スマートデバイスのこれから』セッションのスライドなどをシェアします。
フォローアップ
基調講演「スマホサイトの今、スマートデバイスのこれから」と、「スマートデバイス時代のJavaScript」を担当した、たにぐちまことです。
私の2つのセッションは、つながったストーリーとして構成しました。
昨今のスマートフォンの進化を見ていくと「脱Web」という動きが活発です。すでに例えばスマホで飲食店を探すときなどに、「お店のサイトを探す」のではなくて Google Mapsで検索をしたり、ニュース記事などを読むときも「Gunosy」などの専用アプリに流れてくる記事だけを読むという機会が増えているのではないでしょうか。
この流れは、ウェアラブルデバイスの台頭でますます加速するだろうと私は考えています。
つまり、HTML/CSSの需要が今に比べると、減ってしまう可能性を考えなければなりません。
その時、次に学習すべきは JavaScriptだと考えます。スマホ・ウェアラブルデバイス向けのアプリケーション開発や、マルチデバイスに対応したSPA（Single Page Application）の開発など、プログラマーと協業する機会がますます増えていくことになります。デザイナー・マークアップエンジニアに限らず、この機会にぜひ JavaScriptに興味を持って頂ければ幸いです。
セッション中に紹介したツールです。インストール方法などをブログに書きました。
アンケート及びセッション中に頂いたご質問です。
Windows用の回線速度シミュレーションソフトは？
専用のソフトではありませんが、Windows/Mac/Linuxのマルチプラットフォーム向けに「Charles」というソフトウェアが提供されています。
まぼろしの西畑さんのエントリーなどが参考になります。（解説はMacですが、Windows版でも同様のことができるようです）
基調講演のスライドで利用したフォントは何ですか？
今回のスライドでは、以下のフォントを利用しました。
- はるひ学園
- こぶりなゴシック
- Helvetica Neue
いずれも、モリサワパスポートに収録されています。
CSS Nite実行委員会
11 years 4ヶ月 ago
CSS Nite実行委員会
11 years 4ヶ月 ago
2013年度の開催時は募集開始後30分で満席、参加者の満足度96％という大人気セミナー「ランディングページの作り方完全公開セミナー」が東京と福岡で開催されます。講師は「LPO研究所」の鎌田さん。
CSS Nite参加者向けに、5,000円の割引を設定いただきましたので、ご興味ある方は、ぜひご利用ください。
CSS Nite実行委員会
11 years 4ヶ月 ago
2014年8月21日(木)、KDDIウェブコミュニケーションズ セミナールームでCPI x CSS Nite x 優クリエイト「After Dark」（13）を開催し、61名の方にご参加いただきました。
今回は、名村 晋治さん（サービシンク）を迎え、「ディレクターとして意識スべき、
“誰がどうみてもそうとしか受け取れない文書”術」をテーマに開催。
なお、今回は、スライドやビデオなどの公開はありません。
関係者のブログ
参考書籍
CSS Nite実行委員会
「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント。都内のほか、大阪、名古屋、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都でも開催。 Movable Type Pro 4.23-ja
CSS Nite公式サイト フィード を購読 
