デザインからビジネス指向に進化した「CSS nite in Fukui 」

今回で３回目の開催となる「CSS nite in Fukui」に行ってきました。2008年3月の１回目に参加した時は、私の苦手なデザインスキルを勉強しましたが、２年弱経った今回は、ビジネスを勉強出来る場へと進化していました。

■CSS Nite in FUKUI, Vol.3

「ウェブでどんなことが表現できるんだっけ？」という２年弱前のデザイン面の話題から進化し、今回は情報アーキテクトや、取材テクニック、レベニューシェアといった、クライアントとの関係にフォーカスをあわせたセッションが多かったです。

↑デスクが広くて便利な会場でした。emobileはつながらないものの、WiFiがあったのでバッチリ！

Twitterからの実況ログ

私としては大いに楽しめ、かなりTwitterにtsudaっておきました。残念ながら、私のアカウントが「Twitter検索八分」になっており、リアルタイム検索にひっかからず悔しい思いをしたのですが、自分のまとめログとして残しておいたので、ここにTwilogでまとめておきます。

コンセント長谷川さん「Hello IA」

• コンセント長谷川さんのセッション「Hello IA」 #cssnitefukui posted at 13:02:27
• 「情報アーキテクチャとは何か？」が主題 #cssnitefukui posted at 13:06:11
• 「情報アーキテクチャ」を実践している会場の人割合は１割 #cssnitefukui posted at 13:07:16
• ワイヤーフレーム≠IA #cssnitefukui posted at 13:09:34
• 長谷川さんの会社「コンセント」はここ。http://www.concentinc.jp/ #cssnitefukui posted at 13:10:53
• IAを理解するオススメ本「Web情報アーキテクチャ（オライリー）」http://www.amazon.co.jp/dp/487311134X/ #cssnitefukui posted at 13:13:24
• IAには狭義も広義も幅広いので、WebIAとは「サイト構造」をスコープとする。 #cssnitefukui posted at 13:16:49
• ウェブサイトのIA要素は、サイト構造・ナビゲーション・ラベルの３つ #cssnitefukui posted at 13:17:43
• RT @msng: セミナーに参加するときは、スピーカーの方を見てうなずきながら聞くと、スピーカーもテンションがあがってもっといい話が聞けると思う！ #cssnitefukui posted at 13:19:30
• IA = ♥ #cssnitefukui posted at 13:21:24
• IAが必要な３つの理由。見せたい情報に気づかれない、探している情報が見つからない、情報があふれる。 #cssnitefukui posted at 13:23:43
• ここまでIAの概念でしたが、ここから具体的な手法。 #cssnitefukui posted at 13:27:12
• 長谷川さんのIA本。http://www.amazon.co.jp/dp/4861005779/ #cssnitefukui posted at 13:27:59
• ユーザー分析シートなどでペルソナを描く。 #cssnitefukui posted at 13:31:57
• Location, Alphabetically, Time, Category, Hierarchyの「LATCH」で情報を分類する。このうちCategoryのみ主観的。他は客観的。 #cssnitefukui posted at 13:33:35
• エンジニアの私にとっては、情報の整理はER図が一番好き。サイトデザインの情報分類って何だか煩雑な気がする。キレイに整理する手法ないのかな？ #cssnitefukui posted at 13:35:25
• ナビゲーションは７種類ある。それらを３つのエリアのどこに置くかをルール付けすることで、ユーザにとって使いやすくなる。 #cssnitefukui posted at 13:40:31
• 私見：「ウェブECOシステム」というキーワード出てきた。ECOシステムって生態系ということらしく、昨日も「ビジネスECOシステム」を勉強してた。流行りなのかな？ #cssnitefukui posted at 13:43:00
• ってことで、ワイヤーフレームにたどり着くまでに「ユーザ分析やサイト構造ルールなどを決めておきましょう」というのがIAのお話でした。段取り八分！ #cssnitefukui posted at 13:45:54
• 東京ではワイヤーフレーム研究会というのが盛り上がっているようだ。 #cssnitefukui posted at 13:47:13
• コンセント長谷川さんのノベルティ、SiteItが便利そう。http://www.concentinc.jp/labs/2009/04/site-it/ #cssnitefukui posted at 13:51:57
• コンセント長谷川さんからIA100本とSiteItをプレゼントされた！ #cssnitefukui posted at 13:53:53
• ブタの鼻≠コンセント #cssnitefukui posted at 13:54:36

日本アンドロイドの会：矢野りんさん「ウェブデザインの詰めかたに関するご提案」

• 日本アンドロイドの会：矢野りんさんのセッションスタート #cssnitefukui posted at 14:07:47
• 「ウェブデザインの詰めかたに関するご提案」 #cssnitefukui posted at 14:08:11
• 日本アンドロイドの会とは・・・http://android.siprop.org/ #cssnitefukui posted at 14:09:32
• モックアップの制作工程は６つの順で。ワイヤーフレームの確認、ファーストビューへのおさまりチェック、グリッド設計、プロポーションの選択、カラーリングの検討、細部のツメ。 #cssnitefukui posted at 14:15:25
• ワイヤーフレームとビジュアルデザインは分けて考えるべき。いきなり色を付けるべからず。 #cssnitefukui posted at 14:16:28
• ファーストビュー(980×580くらい)に何を詰めるかを考える。 #cssnitefukui posted at 14:19:26
• 人間は四角を見ると最初に真ん中辺を見る。よって、ページタイトルがファーストビューの真ん中辺りにあると分かりやすい。 #cssnitefukui posted at 14:21:59
• グリッド設計。メインカラム(68) = サブカラム(27)×2 ＋ 余白(14)、として×１２カラムが一般的。 #cssnitefukui posted at 14:24:41
• 他のサイトがどんなグリッド設計しているか分かる「960 Grid System」 http://960.gs/ #cssnitefukui posted at 14:26:07
• グリッド設計のCSSを自動出力してくれる「Plumb」 http://www.mdaines.com/plumb/ #cssnitefukui posted at 14:28:07
• 箱のサイズは計画的に決めましょう（りんさん） #cssnitefukui posted at 14:29:57
• 次はプロポーションの選択。黄金矩形=1:1.61、ルート２矩形=1:1.41。さっきのグリッドで横幅決まれば、このどちらかを選べば迷わなくて済む。 #cssnitefukui posted at 14:31:42
• 次はカラーリング。ビジュアルのクオリティの８割（根拠はりんさん直感）は「色」にかかっている。 #cssnitefukui posted at 14:34:55
• カラーリングのポイントは３つ。カラースキームを理解する。色彩が表す意味を知る。色が引き起こす対比の効果を把握する。 #cssnitefukui posted at 14:35:40
• 色の３属性。色相(Hue)、彩度(Saturation)、明度(Brightness)。 #cssnitefukui posted at 14:36:48
• 類似色相系カラースキームとは・・・同じ、または隣りの色相で、彩度・明度を変えて、組み合わせる色を選ぶ。 #cssnitefukui posted at 14:39:59
• 色相差系カラースキームとは・・・対照的な色を使う。Y字型、＋字型。緊張感ある雰囲気。 #cssnitefukui posted at 14:41:36
• イラストレーターCS3からはカラースキームを選択するツールがあるので、覚えなくてもよいが、考え方は分かっておくこと。 #cssnitefukui posted at 14:42:19
• 色相差系カラースキームで色とりどりを使う場合は、グレーやホワイトを多く使うこと。そうしないとウルサくなる。 #cssnitefukui posted at 14:45:00
• カラースキームを素直に使えば、迷いがない。クライアントに説明しやすい。 #cssnitefukui posted at 14:45:56
• 「色は面積によって印象が違う（りんさん）」、当たり前だが今まで考えたことなかった。 #cssnitefukui posted at 14:47:57
• @msng ありゃ？ホントですね。なぜだろう。まぁいいか。 #cssnitefukui posted at 14:49:57
• 最後に細部のツメ。角丸、写真のコントラスト、行間、などなど。 #cssnitefukui posted at 14:51:40
• りんさんから書籍のプレゼント。「Webデザインメソッド」ほか http://www.amazon.co.jp/dp/4862670644/ #cssnitefukui posted at 14:54:43

真空ラボ岩崎さん「ウェブディレクションの秘訣」

• これより福井陣４名が登壇します。 #cssnitefukui posted at 15:11:42
• 真空ラボ http://www.shin-qoo.com/ 岩崎さん「ウェブディレクションの秘訣」 #cssnitefukui posted at 15:12:52
• ふくい産業支援センターのWiFi回線スピードは、上り6.9Mbps下り8.9Mbps。 素晴らしい会場です。 #cssnitefukui posted at 15:19:44
• 早い、安い、うまいの法則。それぞれをかけると、まずい、高い、遅いになる。バランスをとって進めるのがディレクターの役割。 #cssnitefukui posted at 15:21:02
• WCAF(Web Creaters Association Fukui)は次回1/10(Sat)開催予定。 http://www.wcaf.jp/ メルマガ登録かRSS登録しましょう。 #cssnitefukui posted at 15:23:04
• ウェブサイトの制作は、一軒家からビルへ。さらにマチ作りになってきている。 #cssnitefukui posted at 15:24:09

サーフボード東さん「情報収集術」

• メガネ２号、サーフボード東さん「情報収集術」 #cssnitefukui posted at 15:26:27
• @taijuさんが東さんだと、初めてつながった日。（←遅いやろ） #cssnitefukui posted at 15:28:10
• 情報収集の３ステップ＝ストック→インプット→アウトプット #cssnitefukui posted at 15:30:05
• 情報源をストックする工程が一番難しい。@taijuさんは、ブログランキングサイトとはてブを使っている。 #cssnitefukui posted at 15:31:21
• TopHatenar(http://tophatenar.com/) を使って興味のあるサイトを探してフィード登録する。 #cssnitefukui posted at 15:33:41
• ちなみに私(takamorry)のランキングはコレ。http://tophatenar.com/view/https://takamorry.com/ #cssnitefukui posted at 15:34:46
• どうだ？ RT @kira88 @takamorry 前後に半角スペースを入れてみてください #cssnitefukui posted at 15:38:04

カウベル森川さん「コンテンツをひねり出す、ある一つの方法」

• 「きちんと雑談してますか？」のスライド写真に「アルファギークに逢ってきた」が！ #cssnitefukui posted at 15:45:13
• 取材とは・・・クライアントの日常を引き出す作業、である（カウベル森川さん） #cssnitefukui posted at 15:46:44
• 「きちんと雑談」した取材の具体的アウトプットはコレ ■ハートの70年のあゆみ|ハートグループについて|封筒・名刺・紙製品のハート http://www.heart-group.co.jp/corp/about/history/ #cssnitefukui posted at 15:51:24
• クライアントさんのイメージを超えるアウトプットを提供するには、「雑談から引き出してあげる」というのが大切ということだな。言われたものを作るだけでは価値がない。 #cssnitefukui posted at 15:52:31
• ピアだ！なつかしい！ #cssnitefukui posted at 15:53:27
• 森川さんのスライドは、いつも面白い写真を挟んでくれている。話題の切替が分かる。うまいなー。どうやっていい感じの写真探すんだろう？ #cssnitefukui posted at 15:56:53
• 取材する人にオススメの本「キラークエスチョン」 http://www.amazon.co.jp/dp/4334035213/ #cssnitefukui posted at 15:57:27
• あれ？@teckingさん、ベーシスト？私はドラマーです。 #cssnitefukui posted at 15:57:57
• 何か今日は質問が出ないなー。福井人はシャイ。。。 #cssnitefukui posted at 16:02:25
• 相手から引き出すための鉄板クエスチョン、相手のタイプに合わせて２６個あり。さっきの本に載っているとのこと。 #cssnitefukui posted at 16:03:24

デジタルインプルーブメント吉村さん「Webデザインをはじめたい人向けの学習プラットフォームについて」

• 吉村さんのスライド、鷹野さん曰く「素晴らしい」とのこと。何とペンタブレットで手書き！ #cssnitefukui posted at 16:05:27
• デジタルインプルーブメント吉村さん「Webデザインをはじめたい人向けの学習プラットフォームについて」 #cssnitefukui posted at 16:06:16
• Webデザインの最初の入り口はいろいろ難しくてとっつきにくいんだけど、Progressionで作るといいかもよ。という話。 コレ知らなかった。http://progression.jp/ja/ #cssnitefukui posted at 16:09:45
• 吉村さんが講師している大学生の作品紹介。ややっ、かわいい、かわいい！ #cssnitefukui posted at 16:10:32
• あー、これ使って最初入ってくると、好きになれるかもな。 #cssnitefukui posted at 16:11:41
• Progression（プログレッション）でどうやってサイト作るかのYouTube動画。 http://www.youtube.com/watch?v=jQOywzVgcs8 #cssnitefukui posted at 16:12:57
• Progressionの概要ページhttp://progression.jp/ja/overview/ に、「もうスクリプトは、いりません」とあるぞ。確かに吉村さんのデモビデオでもAS書いてない。 #cssnitefukui posted at 16:15:59
• ProgressionとはFlash作りのフレームワークである。フレームワークは早く作るためにあり、作業時間を浮かせてデザインとかの人間がやるべき作業を増やすのだ。 #cssnitefukui posted at 16:18:40
• Progressionってフリーウェアなんですね。http://progression.jp/ja/overview/license/ #cssnitefukui posted at 16:19:33
• このブログからも学べるよ。→■Progression 学習ノート http://www.d-improvement.jp/learning/progression/ #cssnitefukui posted at 16:21:37
• 吉村さんが息切れしたのでw 伊藤さんによるFxUG北陸コミュニティの紹介になった。http://www.fxug.net/ #cssnitefukui posted at 16:23:39
• FxUG北陸の次回は富山で寒鰤！ #cssnitefukui posted at 16:24:17
• 吉村さんからふくい産業支援センターのなかのひとに無茶ぶり！いいFlashセミナーありますか？→12/9,10にありまっせ！ #cssnitefukui posted at 16:26:29
• え！Flash使いの森先生が後ろに座ってた！ #cssnitefukui posted at 16:27:10

バドーゾ増永さん「利益分配型サイト（レベニューシェア）制作はこんなに面白い」

• さて、次はトリの増永さんです。 #cssnitefukui posted at 16:40:59
• 今回の #cssnitefukui のログがうまいこと検索に引っかからないのですが、後日Twilogでまとめて、ブログにあげますね。 posted at 16:42:31
• バドーゾ増永さん「利益分配型サイト（レベニューシェア）制作はこんなに面白い」、作業時間ではなく、クライアントが得た成果で報酬を得る。 #cssnitefukui posted at 16:44:03
• アイスブレイクは昨日撮った写真、結城秀康（家康の息子）と、県庁がお城の中にあるという話。 #cssnitefukui posted at 16:45:57
• @msngさんのブログ「頭ん中」 http://www.msng.info/ #cssnitefukui posted at 16:48:30
• 増永さん、かつて英語の先生ですので、レベニューがrevenueだ。 #cssnitefukui posted at 16:49:59
• レベニューシェアの実例、ニシナ屋珈琲http://www.nishinaya.com/items/ #cssnitefukui posted at 16:53:34
• 実例その２、社会保険労務士資格の学習サイト http://www.sharoad.com/ #cssnitefukui posted at 16:54:36
• 実例その３、社会保険・年金の本、ダンコーガイも読んでる http://www.kimo2.net/ #cssnitefukui posted at 16:56:15
• ジャコウネコのウ●コから作る「コピ・ルアック」 200g13,000円！ http://www.nishinaya.com/%E3%82%B3%E3%83%94%E3%83%AB%E3%82%A2%E3%83%83%E3%82%AF/ #cssnitefukui posted at 16:58:35
• KB:@neo6120, Gt:@taiju, Vo:@msng, Dr:@takamorry, Bs:@tecking ってことでよい？CNFバンド。 #cssnitefukui posted at 17:02:29
• ニシナ屋珈琲さんは「システム提供」のパターン。商品を売るための仕組みを提供。 #cssnitefukui posted at 17:03:28
• 社労道は「共同プロジェクト」のパターン。新規事業にはシステム・コンテンツ・チャネルの３つがあると成功する。参加メンバー各自がそれぞれの役割を果たし、レベニューをシェアする。 #cssnitefukui posted at 17:07:19
• 新規事業の難しさはプライス設定。#cssnitefukui posted at 17:09:50
• その３の場合は「販売支援」のパターン。今ではほとんど手間がかかっていない。 #cssnitefukui posted at 17:11:39
• 商品・サービス側にとっては初期費用はかからない。継続的にリニューアルが行われる。相談しながらサイトを運用できる #cssnitefukui posted at 17:13:46
• レベニューシェアはネット完結のビジネスだけに当てはまるのかな？リアルが入った瞬間にややこしくなるような。。。 #cssnitefukui posted at 17:14:21
• ウェブ担当にとっては、継続的利益、提案しやすい、最初から完成しなくてよい。 #cssnitefukui posted at 17:17:19
• ユーザにとってよいサービスにして、共に利益を生み出すので、気持ちいい。 #cssnitefukui posted at 17:19:41
• PCのバッテリーなくなった。4.5hだった。iPhoneに切り替えた。#cssnitefukui posted at 17:20:55
• 気を付けたいこと。ウェブ担当側は、制作コストが回収出来ない可能性あり。継続カイゼンが必要。#cssnitefukui posted at 17:23:17
• お互いの最大課題は、信頼関係を築くこと。#cssnitefukui posted at 17:25:22
• 結局、自分が一人の経営者として覚悟を持ち、パートナーを得れるか、ということですな。#cssnitefukui posted at 17:27:15

ビジネスへと向かうウェブ技術者たち

特に@msngさんのレベニューシェアのセッションは、これまでの単なるモノ作りではなく、パートナーと協力して工夫して、サービスの売り上げを伸ばすことで、自分のやりがいや、消費者にとって良いサイトを作るモチベーションになるのである、ということを学び、会場も納得して（半信半疑かな）聴いていた。これまでサイト作りだけをやっていた人には難しい話だったかも知れないけど、結局ビジネスってこういうこと。自分自身の信用を売り、パートナーを獲得し、ともに利益を得る。自然な潮流だと感じたし、率先して事例を作り続ける@msngさんに敬意を表したいと思います。

写真集

↑スピーカー一同。お疲れさまでした！

↑その後の交流会の様子。あちこちで活発過ぎるコミュニケーションが展開。

↑二次会でもあちこちでそれぞれの持ちネタを披露。

↑今年初となるセイコガニ付！次回はほぐさず出てきて、バリバリいきたいところ。カニの食べ方の勉強にもなるし。

書籍集

セッションの中ではいくつもの書籍が紹介されていました。私も既にいくつか購入済み。

Web情報アーキテクチャ―最適なサイト構築のための論理的アプローチ (単行本)

↑情報アーキテクチャ(IA)のさきがけとなった本らしい。長谷川さんによる紹介。

IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計 (単行本)

↑長谷川さん著のIA100。ディレクターの方に。

WEBデザインメソッド-伝わるコンテンツのための理論と実践 (単行本)

↑矢野りんさん著のWebデザインメソッド。デザイナーの方に。

キラークエスチョン (光文社新書) (新書)

↑森川さん紹介のキラークエスチョン。「クライアントの日常を聴くことが取材だ」との森川さん持論。

P.S.
その後ちょっとした事件が。スイッチ鷹野さんのカメラが二次会場でなくなった。探しても出てこない。翌日私のカメラバッグを開けたら、なんとそこには鷹野さんのカメラが。。。なぜここにあるのか記憶がないが、酔って自分のと２台を入れてしまったものと思われ。連絡とろうにも連絡先がわからなかったので、Twitterで助けを求めたら即解決した。Twitterって素晴らしい。ご協力いただいた方、ありがとうございました。