「CSS Nite in KOBE vol.2」に参加しました

6月30日に開催された「CSS Nite in KOBE vol.2」に行ってきました!

一日がっつりデザインの話というのはなかなか無いんじゃないかということで、思い切って神戸まで遠征しました。
グラフィックと見映えの話に留まらず、情報設計やディレクションにまで話題が及び、交通費と参加費のもとはバッチリとってきましたよ!

全体の感想

「コンテンツは王様」を大前提として、そのコンテンツをより伝えやすくする設計・見映え作り・世界観のお話。
全編通して日頃携わる分野にドンピシャな内容だったせいか、納得したり感心したりしていたらあっという間の5時間でした。

あとは、紙媒体にも造詣の深い登壇者さんが多かったからか、かなり見映えに突っ込んでいた印象が残っています。

セッションごとの感想

長谷川 敦士さん「クロスチャネル時代のWebデザイン」

株式会社コンセントの長谷川敦士さんのセッション。
コンセントさんはWebだけでなく、コミュニケーションツールとしての紙媒体にも力を入れていらっしゃるとのこと。

Webデザイナー=IA

IA(インフォメーションアーキテクチャ)の定義と歴史に触れつつ、Webデザイナーが「理解をデザインする=IA(インフォメーションアーキテクト)の役割を果たす」必要性について述べられました。

IAというとデザイナーのキャリアパスのひとつという程度のイメージしかありませんでしたが、Webが「情報を伝える」ツールである以上、すべてのWeb制作者がIAでなくてはならないというのは納得です。
無精をしたり手癖でものを作ってはいけないということでしょうね。ここは猛省。

思考法とカスタマージャーニーマップ

カスタマージャーニーマップという言葉を初めて知りました。
Google画像検索:カスタマージャーニーマップ

具体的な手法のお話が多かったので、イメージが湧きやすかったです。
問題を解決できるUXデザインのためにはユーザー体験を可視化して整理する必要があるよね、というお話。

クロスチャネルとクロスサービス

タイトルにもなっているクロスチャネルとは、あるサービスとユーザーを結ぶ接点がWebサイト、実店舗など複数あることです。
買い物をするのは店頭でも、情報収集はパソコンやスマートフォンで行う(もちろん店頭でも情報収集)のが今のユーザーの常識だというのは納得でした。個人的には電話もよく使います。

「スマホで何ができるか、ではなく、ユーザーがどうデバイスを使うかが重要」というのは目から鱗でした。
ユーザー体験を可視化すると、ユーザーがハッピーにゴールへ至るのに足りない要素やツールが見えてくると思うので、隙間産業的需要が見つけられそうです。

坂本 邦夫さん「Webデザインで考えておきたい色の話」

基礎からわかるホームページの配色の坂本邦夫さんのセッション。
ヒアリングに欠かせない情報共有のテクニックや色彩技法など、具体的な手法の話が多かったので普段の行動に沿って考えられたのはよかったです。

クライアントと意識を共有する

配色は制作の初期に決まるので、色関連でリテイクを食らうとのちのちの修正が大変です。
なので、直接コミュニケーションをとるクライアントさん(特に営業さん)と意識を共有するのは重要。

たとえば同じ「高級感」でも、年収1億の人と年収数百万の人の「高級感」は異なるので、明確な指標が必要だよね、というお話でした。
色見本帳を見せたり、イメージボードを制作すると可視化できてラクになるのかも。

色を決める際に気をつけること

  • 好みだけで選んでいないか?
  • 目的に合っているか?
  • 長く使い続けられる色か?
  • 既存の販促ツールの色は?
  • リニューアルの場合なら現状の色は?

最近はCI刷新ブームなので「ブランド形成の近道は、同じ色を長く使い続けること」というのは意外でした。

「色彩技法なんて勉強して役に立つの?」という会場からのご意見は、(一応)学問として色彩を学んでいた者としては複雑でしたが、色を決めた理由をロジカルに説明できるだけでも十分役に立ってるんじゃないかと個人的には思ってます。
とりあえず色見本帳1冊用意して進出色・後退色だけ勉強しておけば幸せになれます。

鷹野 雅弘さん「Webデザイナーのためのタイポグラフィと文字組版」

CSSNite創設者の鷹野さんによる、Web業界ではまだまだ甘いタイポや文字組版のテクニックと、なぜそれが必要なのかというお話。
DTPオペレーターもどきをやっていた者としては身につまされるお話でした。

なぜツメ処理が大切なのか?

ずばり、「読みやすくするため」です。
当たり前といえば当たり前ですが、コンテンツをより分かりやすくするためには欠かせない心配りですよね。

意外と見落としがちな修正ポイントもご紹介いただいたので、書き出しておきます。

  • 和文フォントと欧文フォントではベースラインが異なるので要注意
  • -(ハイフン)は数字に対してやや下に落ちて見えるので、ベースラインを修正すること
  • 「」()は文字がボールドのときもウェイトを細くする
  • (校正ネタで)意外と日にちと曜日は間違ってるので注意

サイトパーソナリティーは文言のチョイスに表れる

サイト内の文章はかっちりと丁寧語を使うのか、それとももっとフランクなのか、そのチョイスでサイトパーソナリティー(サイトの人格)が決まるとのこと。
ことばの使い方に合ったフォントが重要だというのは納得です。

ぼくたちのゴシック(↑のアイキャッチ画像で使用)は幼稚園のサイトには合っても、お堅い官公庁のサイトにはあまり向きません。そんな感じの具体例をいくつか自分の中にストックしておくと、ヒアリングやイメージ作りに役立ちそうです。

細いフォントは流行るのか

「これから細いフォントが来るんじゃないか」という会場からの質問がありました。
ようするに某WWDCの極細ヘルベチカの話なんですが、「読みにくいよね」というのがスピーカーさんの総意だったイメージです。
Webフォントについても言及されてましたが、こちらも主張しすぎるので利用は要注意とのことです。
文字は読ませてなんぼである、というお話でした。

中川 直樹さん「Webデザインは、いったい、何を解決できるのか?!〜平面と映像、それを包括するWeb Art Directorの仕事〜」

株式会社アンティーファクトリーの中川直樹さんのセッション。
ご本人の軽妙なトークが神がかっていました。1枚のスライドで1時間近く話された逸話もお持ちだとか。

ブランドパーソナリティをサイトの人物像へ昇華

ブランド力を売りにする製品・企業の場合、Webサイトにはそのブランドパーソナリティーをサイトの人物像(サイトパーソナリティー)に昇華するのが大切とのこと。
サイトパーソナリティーを固めておけば、あとあとの制作でブレがないそうです。
そして、サイトパーソナリティーとペルソナは違うとのこと。

個人的には、ペルソナ(代表的ユーザー)と仲良くできるようなサイトパーソナリティ−(サイトの人格)がベストなんじゃないかと、お話を聞いていて感じました。

エモーショナルなWebデザインは「オノマトペ」を表現すること

既存の印刷物や映像をWebサイト化するだけじゃない、Webデザ(イナーにしかできないエモーショナルなWeb表現のお話。
パララックスを使った2通りのWebサイトを例に出されていました。

印刷物の考え方を踏襲したロジカルなWebサイト
クレ・ド・ポー ボーテ

WebデザインならではのエモーショナルなWebサイト
Mac Pro

エモーショナルなデザインとは「オノマトペ」をサイトで表現することだそうです。
(話は反れますが、オノマトペとはなんぞや?という方は「オノマトペのうた」でぐぐってみてください。1分40秒の名作です)
あくまでオノマトペ(世界観とも言い換えられるかも?)を表現するために技術があるのであって、パララックスなどの技術が目的になっていはいけないとのことでした。
ついつい覚えたこと・新しいことを使いたくなってしまいますが、ゴールは忘れずにいたいものです。

懇親会にもお邪魔してきました

神戸まで来たんだから!と懇親会まで参加してきました。

人脈よりは自分のモチベーションを上げるのが目的でしたが、実行委員の皆さんに混じってCSSNite運営の裏側についてこっそり聞き耳を立てたり、関西フリーランスの現状のお話なども聞けたりと、収穫は充分でした。
告知やPRのコーナーが1時間弱設けられていたので、制作物と人が繋がりやすくて助かりました。アウェーの身としてはとても有り難かったです。

ちゃっかり抽選でWebアナリスト検定ベーシックの教科書を当ててしまったので、元を取るべく解析の勉強も再開します。