CSS Nite公式サイト

2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『実例に学ぶ！コーディングから参加するUI設計』（長谷川 広武さん／24-7）セッションのスライドと音声をシェアします。

• スライド（PDF、103ページ、4.1MB）
• 音声（MP3、33:04、31.8MB）

当日はご清聴いただきまして、誠にありがとうございました。今回は失敗談を中心にUI実装時に気を付けることや、ちょっとした工夫の例をご紹介しました。ご意見の中でご指摘もあったのですが、本来であれば、デザインの段階から実装方法やその仕様を（どのタイミングで動作し、どの様な動きをするのか）決めておく必要があります。早期の段階で決めておくことで、その実装についてを、自作するのか、何かプラグインを使うのか、どのような動作をするのか、バグはでないのか・・・などの確認をする時間をとることができます。

「使い易くするために考えることは当たり前のこと《と、すでに様々な工夫もされている方もいるようですが、「ユーザー視点にたって考えずに実装していた《というデザイナー・コーダーもまだまだいるようです。自分もJavaScriptを取り入れる前までは同じで、実装段階に「できる・できない《ばかりでしか考えておりませんでした。しかし、大切なのは、以下にサイトを使うユーザーの立場で考えられるかです。「ちょっとした優しさ・配慮《に心掛けてユーザーにとって使いやすいサイトにできるようにしていきましょう。

タブコンテンツ下にボタンをつけた工夫をご紹介しましたが、その工夫により、コンテンツ下のボタンをどれだけの人がクリックして利用するようになったのかという質問があがっておりました。しかし、残念ながら私の方で実数ご用意できておりません。この件につきましては、必ず入れておいた方がいいということではなく、「縦長になった時にできるちょっとした工夫の一つ《というくらいで今は留めておいていください。

今回お見せした工夫例で、デモをお見せできなかったものがいくつかありました。それらの「実装方法を知りたい！《というご意見もいただきましたので、後々、私のブログにて取り上げていこうと思います。

参照リンク

• その場編集（edit in places）技術評論社の連載にて実装方法をご紹介しております。
• 透明度を利用したロールオーバー
• DOMの読み込みが完了する前にCSSを適用する方法

2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『Coding with jQuery』（徳田 和規さん／マインドフリー）セッションのスライドと音声をシェアします。

• スライド（PDF、223ページ、37.7MB）
• 音声（MP3、37:29、36.0MB）

基礎からちょっと難しい内容までを駆け足でお話したので特にソースコード解説部分で、理解できなかった方もいると思いますがセッションを聞いて、少しでも「jQueryに触れてみよう《「自分で何かつくってみよう《と思っていただけたのなら、幸いです。

で、ぜひ、思った止まりじゃなくて、実際に何か書いてみてください。

初めて触る人は今回紹介した「$('div').slideDown();《1行でもいいと思うんです。その1行から何かが生まれて、さらに先に進むことができれば。

慣れてきた人は、UIについて考えてみましょう。私と長谷川さんの連載や、紹介した西畑さんのドーナツ本にはアイデアがたくさん詰まっています。

今回のセッションではjQueryに焦点をあてていてCSSにはふれませんでしたが高津戸さん・福田さんのセッションで見たようなCSS3でのUI実装と組み合わせられれば可能性はまだまだ無限にあると思います。

コーダー・マークアップエンジニアの役割的なものもありますがせっかくフロントエンドに立っているのですからJavaScript難しい、で諦めずに、jQueryを通してもっともっとふれてみてください。私自身そうだったように、Coding with jQueryで新しいきっかけが掴めるかも知れません。

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

ちなみに補足しておくとたぬきは本当はチワワですよ？まさか本当のたぬきじゃないですよ。一応念のために…笑

各サンプルにはセッションでは使わなかったサンプルも含めリンクを貼っています。（見やすさを考えてキャプチャにしたものがいくつかありますので）また各章で利用した自作プラグインのリンクを貼っておきます。

• delval （ユーザビリティ向上case1で利用）
• jQselectable （ユーザビリティ向上case2で利用）
• TwttrFloatTip （Ajaxで利用）

2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『XHTML&CSS超高速コーディング術 LIVE!』（大藤 幹さん＋大杉 充さん／スキルパートナーズ）セッションのスライドと音声をシェアします。

• スライド（PDF、41ページ、13.3MB）　
• 音声（MP3、1:10:28、45.1MB）

HTML5、CSS3などとこれから大きく変わりつつあるウェブ業界ですが、このような大きな変化は今後も何度も訪れるはずです。

そのような動きに対して、しっかりと取り組んでいくことも非常に重要である一方で、そのような変化にふりまわされて現在の仕事に影響が出てしまうのも困りものです。

何が重要で、何を優先すべきなのか？ そんなことに悩んでしまいがちな方には、しつこいようですが『7つの習慣』をお勧めします！ けっこう耳が痛い内容が多いのですが、1回だけではなく、3?4回くらい読むと、共感できる部分が身についてきますよ（自己啓発系の本が好きでない方、何度も紹介してスミマセンです）。

2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『マークアップエンジニアのキャリアパス』（森田 雄さん）セッションのスライドと音声をシェアします。

• スライド（ブログにて公開）
• 音声（MP3、22:01、12.6MB）

2010年7月22日、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.50のフォローアップとして、「a-blog cms」を開発されている山本かずみち（アップルップル）さんのセッションのスライドとメッセージをシェアします。

• スライドデータ 6.4MB
• 音声（MP3、18:58、9.1MB）

a-blog cms は、Web制作者向けのツールなので、基本的にはHTML+CSSが書ける人向けとなっております。管理ページを含めたサイト全体をお客様向けにカスタマイズしたいという、そんな方に是非使って頂きたいと思っております。

1周年記念パックというお得なライセンスを今なら購入できるのですが、ほとんど時間がありません。twitterを利用して、以下のように私に連絡を下さい。今月中であれば、1周年記念パック＋αを提供致します「@kazumich #cssniteginza50 に参加しました。 #ablogcms 買います！」

• 1周年記念パック #cssniteginza50参加者に特別に7/31(土)まで延長

また、もっとしっかり a-blog cms について聞きたいという方は、是非オンラインセミナーに参加下さい。参加される方のブラウザ上に、スライドや、私のデスクトップを表示させ、音声で紹介させて頂いております。

• オンラインセミナー 7/27(火) 19:00 - 21:00
• a-blog cms イベントスケジュール

デモをした時に使った Mac OS X への簡単インストール版は、以下のURLでダウンロード＆説明があります。

• あなたのMacでa-blog cms1.3.1を体験してみて下さい

カスタムフィールドについて、使った事がある人が少なかったので、以下のデモをした方がよかったかもしれません。こちらもご覧になってみて下さい。

• 静的サイトのトピックスを10分で動的コンテンツにする方法

2010年7月22日、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.50のフォローアップとして、「Jimdo」をリリースされているKDDI Webコミュニケーションズの高畑哲平さんさんのセッションのスライドとメッセージをシェアします。

CSS Nite in Ginza Vol.50にご参加頂いた皆様、Jimdo Japanの高畑です。

a-blog cms、tsumiki2.0とは少々毛並みの異なるサービスとしてご認識いただけたかと思います。 Jimdoはエンドユーザーが知識がなければないほど力を発揮するサービスですので、是非ご活用ください。

• スライド（PDF）
• 音声（MP3、13:30、9.1MB）

プレゼンテーション内でご紹介したテンプレート作成ですが、Page Partnerという名前でプログラムを用意しております。アフィリエイトと連結することも可能です。ちょっとした小遣い稼ぎに良いかもしれません。

• 【Page Partnerプログラム、アフィリエイトについて】

また、昨日デモで紹介したテンプレートは、Jimdoを使ってビジネスをされているデザイナーの方のサイトです。 マニュアルやテンプレートも数多く記載されていますので、併せてご活用ください。

Jimdoを使ったビジネス事例

• http://www.sitenext.net/
• http://jp-m.jimdo.com/

その他質問等ありましたら、twitterでご質問いただいても構いません。お気軽にお問い合わせください。

twitterアカウント

• @teppeitakahata
• @jimdojapan

2010年7月15日、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.49のフォローアップとして、バシャログ。で公開されたフォローアップと音声をシェアします。

• CSS Nite in Ginza, Vol.49「バシャログ LIVE」が終了しました。 | バシャログ。
• CSS Nite in Ginza, Vol.49「バシャログ LIVE」 で紹介したDreamweaverの正規表現クエリーを公開します | バシャログ。
• CSS Nite in Ginza, Vol.49「バシャログ LIVE」 の Fireworks 編フォローです | バシャログ。
• 完全無料の当番表生成サービス 「当番くん」 | バシャログ。
• 音声（MP3、59:50、28.7MB）

なお、CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！のサービスもはじまっています。

明日、2010年7月24日（土）12:00-19:00、ベルサール飯田橋にて、SEOにフォーカスしたCSS Nite LP, Disk 10を開催します。

会場はベルサール飯田橋です。当初、ベルサール新宿とご案内していましたが、変更になっていますので、お間違いなくお願いします。

ご参加される方へ

• 7月16日にメールにて受講票を送付しました。届いているかどうか早めにご確認ください。
• ご参加いただく方へのメモをご一読ください。
• 懇親会は規定数に達したため、締め切りました。

本日、リマインダー（最後のカウントダウンメール）をお送りします。

ご参加希望の方へ

本当にギリギリまで会場を使っているため、物理的に机・椅子がありません。申し訳ありませんが、お問い合わせいただいてもお断りするしかできません。

2010年7月24日（土）12:00-19:00、ベルサール飯田橋にて、SEOにフォーカスしたCSS Nite LP, Disk 10を開催します。

会場はベルサール飯田橋です。当初、ベルサール新宿とご案内していましたが、変更になっていますので、お間違いなくお願いします。

ご参加される方へ

• 7月16日に受講票を送付しました。届いているかどうか早めにご確認ください。

お知らせ

• お申し込みはいただいたものの、決済が完了していない方には、キャンセル処理を行いました、というメールをお送りしています。参加の意思がなくなった場合には、ご連絡いただけれると助かります。
• CSS Nite LP, Disk 10は有料イベントで、ご参加には事前申し込み（＋事前決済）が必要です。すでにキャンセル待ち、および、その繰り上げも終了していますので、お問い合わせいただいてもご参加いただけません。また、物理的に机・椅子がないため、当日、フラリとご来場いただいても、ご参加をお断りします。