Aggregator

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、谷 拓樹さん（サイバーエージェント） の『LESS is MORE: CSSプリプロセッサをシンプルに使う』のスライドなどを公開します。

• スライド（PDF、81ページ、8.1MB）
• 音声

メッセージ、補足

LESSについてのセッション担当の谷です。

今回のセミナーでは限られた時間の中での話ということもあり、細かいところまで3つのCSSプリプロセッサを比較するような話ではなかったのですが、CSSプリプロセッサのシェアのほとんどがSassの中、LESSという選択肢があるということを理解してもらえていれば幸いです。（あくまでも選択肢として）

講演後に少しお話した通り、会社のプロジェクトではSassを使っています。またツールの機能性としてはStylusが好きです。なのでLESSを強くおすすめするというわけではありません。

しかし、これからCSSプリプロセッサを使いはじめる、という人については、LESSという選択肢はおおいにアリ、だとおもっています。それで物足りなくなれば、他のツールも検討してみてください。

また最後の質疑応答でいただいた、CSS設計の勉強になる電子書籍、SMACSSは下記のサイトでみることができます。こちらの日本語版については、完成次第こちらのサイトからも案内されるとおもいますが、著者である@cssradarをフォローしておくと、販売時にアナウンスがあるとおもいますのでどうぞフォローしてください。

• Scalable and Modular Architecture for CSS CSS設計のプロセス、ルールについての電子書籍

みなさま長丁場でしたが、ありがとうございました。

• http://twitter.com/hiloki
• http://inkdesign.jp

その他本セッションに登場したURLや、関連URLなど:

• LESS
• LESSの開発者 Alexis Sellier@cloudheadのポートフォリオサイト
• Is LESS in need of support?（LESSの開発状況についての議論）
• Crunch - LESS Editor（LESS搭載エディタ）
• LESS.app（MacOS用LESSのGUIコンパイラー）
• SimpLESS（Windowにも対応しているLESSのGUIコンパイラー）
• LESS2CSS（オンラインでLESSを試せるツール）
• LESS日本語ドキュメント（1.3.1）
• LESS1.3.1からの新しい色関数のデモ
• Clearless（LESSのMixinライブラリ）
• LESShat（LESSのMixinライブラリ）
• Extending Bootstrap（Twitter BootstrapのLESSによる拡張説明ページ）
• Why Less?（Bootstrapの開発者による、LESSを選んだ理由について）
• A webpage that uses CSS styles does not render correctly in Internet Explorer（IE9以下における、CSSファイル内の4,095以上のルール（セレクタ）バグについて）
• bless（4,095以上のセレクタになった場合にファイルを分割・importしてくれるツール）
• About HTML semantics and front-end architecture（@necolas氏によるHTML,CSS設計についての記事）
• 邦訳：About HTML semantics and front-end architecture
• Adactio: Journal?Caveat（レスポンシブ・ウェブデザインにおいて、それが常にベストな回答ではないことについて）
• Scalable and Modular Architecture for CSS（CSS設計のプロセス、ルールについての電子書籍）
• en.ja OSSについて（オープンソースのドキュメント翻訳プロジェクト、en.jaについて）

ビデオ

• ウェブサイト
• ヘルプセンター
• アップグレードガイド

2013年4月25日（木）、コワーキングスペース茅場町Co-EdoでCSS Nite @Co-Edo, Vol.10 「Webデザイナーのための撮影術」を開催し、26名の方にご参加いただきました。

2013年5月16日（木）14:00-17:00、クリーク・アンド・リバー社セミナールーム（麹町）でクリ☆ステ特別編：ウェブマスター1年生のための「ホワイトハットSEO」 を開催します。

対象は、新たにウェブマスターになった方。Googleの担当者からGoogle検索の基本的な考え方、最新情報のご紹介を始め、楽天の検索エンジン対策担当者の方とのトークセッションなどを実施します。

なお、クリ☆ステは、2012年3月からクリーク・アンド・リバー社、CSS Nite、DTP Transitのコラボ企画としてしているものですが、今回の特別編は、Web担当者Forumとの共催でお送りします。

今回のHCD-Netセミナーin名古屋では、「プロダクトとサービスの融合に
よる経験デザイン」と題して、経験工学(XE: Experience Engineering)の
立場から、プロダクトとサービスの融合的デザインのアプローチについて、
実習をまじえて学習していただきます。現在、UX(User Experience)が
話題になっていますが、講演者は、サービスについてUXと呼ぶことは
不適切と考え*、それをRX(Recipient Experience)と呼び、UXとRXを
統合的に扱う立場を経験工学(XE)として提唱しています。まだ、試論の
段階ではありますが、ISOのTC159/SC4/WG6の国内主査を担当してきた
経験やUX白書の作成に関与してきた経験を元にしています。世界でも
初めての試みですので、皆様方の積極的な参加をお待ちしております。
*注記　たとえば病院において、患者が医師や看護師を「使っている」
というのも、学校において生徒や学生が教師を「使っている」というのも
不適切です。レストランのウェイトレスを客が「使っている」というのも
同様です。このようなサービス場面では、サービスを受容する、
つまりreceiveすると言うべきで、その名詞形のrecipientを使ってRXと
呼んでいる次第です。

■セミナーの趣旨：
セミナーでは、まずUXやXEの考え方を説明した後、XEにおける
プロセスモデルを説明します。そこでは、ユーザのニーズの把握と、
その結果にもとづいたプロダクトとサービスの設計、その情報の
ユーザに対する提供、ユーザにおける期待や予測の形成、プロダクトの
入手とそれに続く短期的利用および長期的利用(UX: User Experience)、
さらに長期的利用におけるサービスの利用(RX: Recipient Experience)、
そして廃棄とその後の印象形成、といった内容について、説明します。
また、ユーザ調査や経験評価の手法についても説明します。
ワークショップでは、ユーザから得られた情報にもとづいてどのように
してプロダクト設計とサービス設計を連携的に行うかについて、
試論にもとづき短時間の実習をしていただきます。

■日時：2013年6月8日（土）13:30～18:00 (13:10　受付け開始）

■会場：愛知工業大学 自由が丘キャンパス　
http://www.ait.ac.jp/access/jiyugaoka.html

■参加費：HCD-Net会員: 3,000円（学生会員: 0円）、
一般: 5,000円、一般学生:1,000円

■定員：40名（先着順）

■懇親会:(18:30～20:00）希望者のみ
○地下鉄東山線本山駅周辺：場所未定
○懇親会参加費： 3,500円

■セミナー内容
・ユーザビリティからUXへ
・サービスへの展開とRXへ
・RXのプロセスモデルと、プロダクト設計とサービス設計の連携
・実習　ユーザ調査におけるポイント、連携設計におけるポイント、
評価におけるポイント

■講師プロフィール：黒須　正明氏、放送大学情報コース、教授
http://user-engineering.net/masaaki/index.html
　1978年早稲田大学文学研究科博士課程で心理学を専攻。
日立製作所に入社、中央研究所で日本語入力方式やLISPプログラミング
支援環境などのソフトウェアシステムの研究開発に従事。1988年同社
デザイン研究所に移り、インタラクションデザイン、ユーザビリティ評価
の研究に従事。1996年に静岡大学情報学部情報科学科教授として赴任、
ユーザ工学の体系化を行う。2001年文部科学省メディア教育開発センター
教授として赴任。現在は、放送大学教授。ユーザ工学の立場から
経験工学(XE)、感性体験、人工物ライフサイクルなど、人間と人工物の
適切な関係のあり方というテーマに取り組んでいる。
　学会活動として、APCHI98大会委員長、INTERACT2001大会長、
ICHCD2009,2011大会長、IFIP/TC13委員会日本代表、ISO TC159/SC4/WG6委員、
ISO TC159/SC7/WG6/CIF SG委員などをなどを歴任。現在は、
NPO人間中心設計推進機構の理事長をつとめている。著訳書に
「認知的インタフェース」「ヒューマンインタフェース」
「ユーザ工学入門」「ISO13407がわかる本」「ユーザビリティテスティング」
「ペーパープロトタイピング」「ユーザビリティハンドブック」等

■参加申込方法：
タイトルを「HCD-Netセミナーin名古屋-3」として
以下の内容を[email protected] までご連絡ください。
-------------------------------------------------------
氏名：
所属：
電話番号：
メールアドレス：
会員種別：　賛助会員・正会員・学生会員・一般
懇親会：　参加します　/　参加しません
---------------------------------------------------
請求書をご希望の場合は本文にその旨と、請求書のあて先と
郵送先をご指定ください。
受付メールを事務局より返信いたします。
参加費の支払い方法の案内は受付メールに記載されています。
受付メールが4、5日（土日祝日を除く）で届かない場合は
事務局にご連絡ください。

ネットPRを成功させるために、今回はまず「ネットPR」とは何か？についてお伝えします。

PR（Public Relations）とは、“パブリック”つまり公共でのコミュニケーションを維持・促進するための活動を意味しています。

インターネット登場以前、企業がパブリックに対して情報を提供するにはマスメディアを経由するしか方法がありませんでした。
それにも関わらず、企業の広報担者がプレスリリースを配信してマスメディアを回っても、全ての情報が取り上げられるわけではありません。取り上げられたとしても、それはマスメディアよって編集・加工されたものであり、企業が発信した生の情報がパブリックに届くことはほとんどありませんでした。
費用を払ってマスメディア媒体のスペースを買う“広告宣伝”もありますが、いずれにしろマスメディアを経由することになります。

しかし、インターネットの登場により、直接パブリックに対して情報を届けることができるようになったのです。企業の広報活動は大きく変化しました。
インターネットが普及するにつれ、自社のWebサイトでの情報発信のみならずメールマガジンやブログやRSSなどが出現し、ソーシャルメディアも身近なものになりました。今では企業情報の伝達方法やルートはとても多様化しています。
つまり、インターネットによって企業が本当の意味で“Public” Relations活動ができるようになったのです。

マスメディアの役割の変化

トリプルメディアという言葉が登場して久しいですが、今すべての企業にはメディアを運営する感覚で情報発信、情報流通の活性化を行うことが求められています。
ネットPR.JPでは、「広告・PRにこだわらず、あらゆる手段を通じて企業の情報流通を促進すること」をインターネットでのPRと定義し、従来の「PR力」「マーケティング力」に加え、「コンテンツ設計力」「情報流通力」を総合して「ネットPR」と定義しています。

ポイント

• インターネット以前はメディアを通してしかパブリックに対して情報を伝達できなかった
• インターネットにより企業は自社メディアを手に入れ、パブリックに対して情報を直接届けられるようになった
• マスメディアは企業にとって「唯一の情報伝達ルート」から「複数ある情報伝達ルートの“ひとつ”」に変わった
• 「広告・PRにこだわらず、あらゆる手段を通じて企業の情報流通を促進すること」をネットPRという

インターネットは、一般消費者にも大きな変化をもたらしました。以前は企業から提供される限られた情報しか入手することができず、消費者はそれに対して受け身でした。
ところが今では、人々は自分が知りたいときに知りたい情報にアクセスできるようになりました。また、ブログやソーシャルメディアの登場によって自分から情報を発信することも可能です。情報の流れは双方向になり、消費者は能動的に働きかけられる立場に変わったのです。
つまり、企業と消費者の情報格差がなくなったと言えます。このことは企業のマーケティング活動にも大きく影響することとなります。

インターネット登場以前のマーケティングでは、消費者の購買プロセスは「AIDMA」と言われ「Attention（注意）、Interested（興味・関心）、Desire（欲求）、Memory（記憶）、Action（行動）」の順に推移とされていましたが、消費者と情報との関係が変化したことで、このプロセスは「AISAS」に変わったと言われています。「Attention（注意）、Interested（興味・関心）、Search（検索）、Action（行動）、Share（共有）」となります。

インターネット上で情報を検索する“Search”、インターネット上に蓄積されていく“Share”のことを考えると、やはり企業にとってWeb上の情報コンテンツは重要な役割を担います。

インターネット以降のネットPR

企業には今、あらゆる情報コンテンツをWeb上に蓄積し、人々が検索したときに彼らが求めている情報にきちんと辿りつけるようにすること、そして、人々が情報共有することを考慮したコンテンツを設計することが求められています。
そのためには広告やPRの枠を超えて、情報流通を促進する力が必要不可欠なのです。

ポイント

• インターネット以降、一般消費者は「企業からの一方通行な情報を受け身で待つ立場」から「情報を能動的に取りにいける立場」「情報を発信できる立場」に変わった
• インターネットの登場により消費者の購買プロセスは「AIDMA」から「AISAS」に変化し、Web上に蓄積されるコンテンツがキーとなった
• 企業には情報流通を促進する、ネットPRの力が必要不可欠となった

当コーナーでは、これからネットPR成功のポイントを定期的にご紹介していきます。

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、こもり まさあきさんの『環境に合わせて快適コンパイル生活』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

こもりの担当セッションはツールの紹介に終始しました。既に使い始めている方には物足りない、コマンドラインを敬遠されてる方には理解しにくい内容だったかもしれません。ただ、昨日の皆さんのセッションでもたびたび出てきてたように、Webの制作方法が大きく様変わりしているような時代です。

ツールはいつもコマンドラインで使うものから始まります。GUIのツールというのは、環境の用意や黒い画面で実行しているコマンドにグラフィカルなボタンをつけただけです。コマンドラインといっても、昨日ご覧いただいたように入れるのはせいぜい2、3個。それだけ覚えてしまえば難しいことはありません。

Webがアプリケーション化しているというお話もあったように、仕事の境界線すらあいまいになって複雑化している状況に今後乗り遅れず対応するためにも、そろそろプリプロセッサをその入り口として、通称「黒い画面」にも触れてみてはいかがでしょうか？

本セッションの後半は「Ruby」や「Node.js」のいずれかが必要なものばかりです。付け加えるなら「Git」などもそろそろ導入しておく方が作業の効率化は図れます。いずれも、説明し始めるとそれだけで1日のセッションになってしまうので、簡単なインストーラの所在地だけお伝えしておきます。OS XにはあらかじめRubyは入っているので、そのままのバージョンでよければすぐに「Sass」や「Compass」はコマンドラインから使えるようになります。

※インストール方法や使い方はGoogleなどで検索してください。

• Ruby Installer for Windows ～Windows向けのRubyの簡単インストーラ
• RVM ～Rubyのバージョンマネージャ
• rbenv ～最新のRubyのバージョンマネージャ
• Node.js ～Node.jsのオフィシャルサイト
• nodebrew ～ピクセルグリッドの外村さんが作られてるNode.jsのバージョンマネージャ

最後に、本セッション中で軽く流した「roots」について簡単な操作説明をビデオで用意しました。

CSS Nite LP, Disk 26 roots demo from komori, masaaki on Vimeo.