CSS Nite in AOMORI, Vol.5に参加してきました

2011年7月30日、青森市の『アウガ』で開催された『CSS Nite in AOMORI, Vol.5』に参加してきました。

天気もよく、風も心地よい青森、ちょっと早めに到着したので昼食を。

アウガの向かいにある『食事処 おさない』でホタテフライ定食を。甘くてうまい。食べログでも人気のお店のようです。

CSS Nite in AOMORI本編

今回は

『これからのデザイン』を支えるベストプラクティス

と題しての内容。セッション／出演は、

• Webクリエーター、次の10年を生き抜くために 青森編（中川 直樹さん）
• いま、仕事で使うHTML5（小山田 晃浩さん）
• もし青森の女子WebデザイナーがAndroidと出会ったら。（くどう けいこさん）
• 色使いにしぼってデザインをブラッシュアップしよう（矢野 りんさん）

でした。

自分メモなど。

Webクリエーター、次の10年を生き抜くために 青森編

中川さんのセッション。手書き中心のスライドはかなり新鮮。見やすくていいですこれ。

地方ごとにデザイン対しての考え方やアプローチが違う、その地方に合ったものを提案していくべき、とのことでした。

地方というか、もっといえばクライアントごとにデザインの要求度や、もしくはデザインはそこそこで良いから売れるための手法、的なお話もよくあるところです。

良いデザイン＝カッコイイことではなくて、それを形成するための前段階が重要ではないのかなーと。

デバイスの変化

昨今のデバイスの進化で体験しているように、ブラウザのx軸・y軸表現から、タッチ操作など、直感的になりました。今後はもっともっとこういった新しい変化が起きてきます。

でも、どんどん進化・変化しているのは表現方法やインターフェースであり、コンテンツそのものは変わらない。中川さんそうおっしゃってました。たしかにその通り。

次代のキーワードを拾い、アイデアを出してこそこれから10年生きられるウェブクリエイター。

簡単なことではないですね…。

いま、仕事で使うHTML5

ピクセルグリッドの小山田さんによるHTML5解説。

ぶっちゃけ、IEの下位バージョンを考えるとなかなか登場させづらいHTML5ですが、埋め込みコンテンツ（canvasとかvideo要素）とかは使わずに、構造を表す新要素を中心に使うと良い、とのこと。

HTMLの新要素はおよそ30で、今までXHTML1やHTML4がベースなので、ちょこちょこ足していけば、ひとまずのHTML5になりますね。

年々仕様が固まってきて、そろそろ新要素を取り入れてもいいかな？的な気にもなってきました。

実際ワタシが使うのはブログとかだけなので、企業サイトにも導入を考えてみよう。

日本の企業も、HTML5を採用する企業が増えてきました。

もし青森の女子WebデザイナーがAndroidと出会ったら。

くどうさんはショートセッションで『もし青森の女子WebデザイナーがAndroidと出会ったら。』

くどうさんがデザインを行い、さらにプログラマーと組んでAndroidアプリを作られたようです。

コミュニケーションに使ったツールや、デザイナー、プログラマーの思考など、体験談をふまえた内容。

協業するときにはけっこうこのあたり大事だったりしますね。体験談だとなお説得力あります。

ワタクシ、iPhoneのためAndroidアプリの話はあんまりピンとこないですが、思考など参考になりました。

休憩、青森の遊び心

途中休憩30分！長い！嬉しい！

お菓子サービスは出演者の顔写真パッケージのチロルチョコ。
そういえばこんなプリントサービスありましたね。

30分というしっかり休んだ気になる休憩でリフレッシュ。

青森ロゴとか、Twitterのチロルチョコも。

色使いにしぼってデザインをブラッシュアップしよう

最後のセッションは矢野りんさん。ワタクシ、コレが聞きたくてはるばるやってきました！

まずは色（ツール）に関する基礎。
PhotoshopやIllustratorのカラー設定はデフォルトでRGBだったりCMYKだったり。これを直感的にいじってカラーバリエーションを作っても、統一性が無く非常に雑な配色になるので、コレではなくHSBを使いましょう、と。

Hue、Saturation、Brightnessですね。
（WindowsだとB→V［Value］だっけか）

コレを操ると、色相を固定のまま彩度と明度をコントロール可能。
これにより、中間色を作る。デザイン作業にはRGBよりもHSB！

補色の使い方

補色は色相環でズバリ対極にある色。これを隣り合わせるとちらついて気持ち悪い。（目の中で境界にグレーができる）
例として、ブルーとオレンジとか。

補色を使う場合は、彩度を下げて使う。

カラーリングの微調整／写真の目立たせ方

Webサイトの写真は何が入ってくるか分からない、というか全体の調和を考えて写真をチョイスするケースはほぼないですよね。

そこで、どんな写真でもキレイにおさめて見せるのは、

• 白
• 黒
• グレー

もう、いずれか！

黒の場合はサイト全体の雰囲気からかけ離れる場合があり、これを採用した場合は、このようにした意図などをしっかり説明しないといけません。

色は入れず、無彩色をバックにすると良いようです。特にグレーは万能。

色相のパターン

押さえるべきは以下の4つ。

類似色相系カラースキーム
Monochromatic color scheme
モノトーンで展開。彩度と明度でカラーバリエーションを作っていく。
単調になるので注意。

類似色相系カラースキーム
Analogous color scheme
相似形で展開。メインの色を決定してカラーバリエーション作成。
統一感がけっこう出る。

色相差系カラースキーム
Split-complementary color scheme
多少的な色使い。補色を避けるときに使えそう。
彩度が高いとけっこう元気な雰囲気になる。

色相差系カラースキーム
Tetradic color scheme
色相環の対角をチョイス。色数も多く、けっこうハデな雰囲気になりそう。

このあと、ワークショップ

撮影してきた自然界のものを色鉛筆で色を拾ってみる、というもの。

ワタシは花の写真を用意しました。

目をこらして、色を探す。
『赤』は単純な『赤』ではなく、光や影の具合などでも中間色がムチャクチャあることに気づきました。

色鉛筆で色の掛け合わせとかもしたりして、楽しい。

自分的な気づき、まとめ

中間色を制すると、良いデザイン（色コントロール）ができる。

中間色にこだわり、処理をすべし。

矢野さんいわく、画面ばっかり見てると色に鈍感になってしまいがちだそうです。

とにかくいろんなものを見て、中間色にこだわる。脳内HSBを養う。

懇親会

青森の夜を満喫。

なんだか結婚式の二次会会場みたいなお店で懇親会。
でも席移動が容易だったり、料理を取りに行くのに席を立ったりで、なにかとコミュニケーションが取りやすい環境でした。ナイスチョイス。

おかげで名刺たっぷりいただきましたが、こちらが途中で切らしてしまうという失態…。もらいっぱなしでスミマセン。

二次会はダイニングで

笑猫酒家（えみねしゅか）
遅れて入ったらなんだか貸し切り独占状態。奥に座れないのでカウンターで神さんとしっぽり飲む。楽しい。

その後

鷹野さん、中川さんと3人で青森一オシャレなバーという『Ar（アール）』へ。

良い雰囲気です。仙台だと、Zino Classicみたいな感じ。スイカなんとかカクテルをいただいて、本日終了。

ホントはもっと遊びたかったけれども、前日までの過労に負けて撤退。

翌日、青森観光

朝早めに起きて、kota散歩。

青森駅の後ろの方にある、海を見てきました。

ホント風が気持ちいい。

青森県立美術館へ

出演者の方や、青森の方たちと一緒に美術館へ。アートを満喫。

『あおもりけん』前では矢野さんがセクシーポーズ。

でっかい建造物です。ちょっと掃除したほうがいいかも…汚れがスジってました。

午前中、たっぷり美術館を堪能させていただきました！
青森の皆さん、本当にありがとうございました！

グルメ編は後日仙グルにて。