CSS Nite in TOSA, Vol.2が昨年に引き続き、今年も開催されました。

去年は主に参加する側で出席したのですが、今年は運営スタッフとして参加しました。

おかげさまで定員一杯の満席で、当日を迎えることができました。参加して頂いた方々ありがとうございました。

当日の雰囲気などは、後日レポートで公式に紹介されますので、ここでは各講師陣がどのようなセッションをされたのかを綴りたいと思います。(あくまで自分用にメモった分なのでご了承下さい)

1.中野 玄さん HOOP Design代表

「タイトル:Webデザインの心得」ということで、「そもそもWebデザインって何?」という視点から、最低限抑えておくべきポイントをお話されました。

「誰に何を伝えるのか」を正しく理解して、「Webの特性」と「何をデザインするか」を明確に知ることが重要となる。

1.インタラクション
・マウスオーバー ・ローディングなど
透過PNGが多くなる傾向にある。
⇒ tiny png(https://tinypng.com/) で圧縮してファイル容量を小さくする。

2.動的サイト
・クライアントさんが、たくさんコンテンツを増やしたときや逆に増えずにスカスカの場合も想定してデザインしておく必要がある。

3.導線の設定
・スタートとゴールを明確に
・ペルソナ・シナリオを作成して、ユーザーのニーズを明確にする
・ナビゲーション・・・コンテンツ構成、レイアウト、UIなど複層的に設計する

4.解像度の違いを意識する
・72dpi→HiDPIに変わりつつある
・表現可能なものをSVGに

5.フォルム
これからのカタチ
スキュアモーフィズム → フラットデザイン

考える要因として、
・メタファの再現がしづらくなった
・タッチデバイスの操作感
・多くを一画面で説明する必要がなくなった
・バージョンアップなどで変更・更新しづらい
・UIの自由度
・コンテンツ重視でコンテンツが見やすい
・ミニマルデザイン化の流れ

まとめ
・対話的な操作
・ユーザー主導
・目的ある導線設計 ←特に大事
・必要な解像度・最適化
・時代に沿ったUIを検討する

2.鍋坂 理恵さん 株式会社サン・サン 代表取締役

「タイトル:Webデザインの傾向と質をあげるためのUIのポイント」ということで、効果的にコンテンツをみせるためのWebデザインについてのお話などでした。

最近のWebデザインの傾向として
・シンプルでデザインするのは難しいが、ユーザーの操作が簡単になっている
・色を使ったところが操作できるところになっている、文字が大きめ。

デザインカンプの必要性
□メリット
・クライアントさんの説得材料になる。敷居が低い。
・ビジュアルにおける試行錯誤に強い

■デメリット
・操作できない
・コーディング後の仕上がり感の違い
・修正がしにくい

◎お客さんのスキルや環境に合わせてうまく組み合わせて使うのがベター。

Photoshopで作業するときのポイント
・単位はピクセル
・レイヤー

      ■フッター

 

      ■コンテンツエリア

 

      ■メインイメージ

 

      ■サイドボタン

 

    ■ヘッダー

でレイヤーを作成して、その中に小さなフォルダーを作って管理するとよい

・パターンとシェイブ
・スマートオブジェクト(Illustrator ⇒ Photoshop)

タッチデバイスの操作
・44px
・レイアウトにゆとりを
・指の大きさも考慮
・重要機能は下側に

タッチデバイスを考慮したナビゲーション
・優先順位を考える
サイトで必ずユーザーが必要とするもの → コンテンツに到着できるか → あらゆるコンテンツを見ているときに必要になる要素・ボタンなど → 問い合わせ先 → 起業が優先するもの

シチュエーションを考える
・たとえば、電話をかけるボタンは下など(片手で操作しやすい)
・問い合わせフォームの操作性

設計時には、デザインの方向性・コンセプトや実装内容に基づいて、デザインのルール(見た目・操作性など)を決めること。

3.鷹野 雅弘さん 株式会社スイッチ

鷹野さんは「Web制作で使うIllustrator」というテーマでした。

テーブルレイアウト → CSSレイアウト(Web標準) → マルチデバイス対応

3つの動向
① phablet(ファブレット・スマホとタブレットの中間にあるデバイスのこと)
② 断片化(デバイスディスプレイの種類の多さ)
③ HiDPI

マルチデバイス時代の画像
・ピクセルパーフェクト・・・もう無理な時代。
・脱ビットマップ・・・CSS3で表現する。SVGを使う。

従来ビットマップ
・GIF
・JPEG
・PNG

これからのIllustrator脱ビットマップ
・CSS3 ・SVGとして書き出せる

Illustratorのよいところ
・テキストに応じて変形するボタンなど、柔軟に自動調節してくれる

Web向けにIllustratorを使うときに必要な設定は以下のとおり。
ファイル新規で、
・プロファイルはWeb
・カラーモードはRGB
・ライタライズ効果はスクリーン72px

表示 – 校正設定・・インターネット標準

CSS3
・角丸
・不透明度
・ドロップシャドウ
・グラデーション
・非デバイスフォント
などをコードで表現することができる。

SVGオプション
・SVGプロファイル ・SVGテキスト
・SVGはimgと同じように使える
※IE678には未対応

これからは、アイコンフォントにも注目!
・Font Awesome
http://fortawesome.github.io/Font-Awesome/

・ICONVAULT
http://iconvau.lt/

まとめ
Illustratorはマルチデバイスのときに注目アップ。
CSS3、SVGを書き出すときにちょっと注意が必要。

4.いちがみ トモロヲさん 15VISION

「Webデザインに必然性を持たせる情報設計術」

クライアントとのビジネスとその課題を理解できていない。

◎コミュニケーションのポイント

1.ビジネスに関与するという意思表示を示すこと
セオドアレビット曰く、
「ドリルを買おうとしている人は、ドリルが欲しいのではなく、穴を開けたいのだ。」
⇒ 顧客の本質をみなさいということ。

クライアントニーズの裏側
・認知度
・営業
・商品
→ Webサイトを運営する力で経営課題を解決することを望んでいる

まずは企業全体の活動をみること!

      ● Web

 

      ・直接営業

 

      ・DM

 

      ・電話

 

      ・TVCM

 

    ・新聞・雑誌広告

「今日のデザインはデザイナーだけでは大き過ぎる」

ドキュメンテーション
→ 実証のためあるいはコミュニケーションのために情報をドキュメント化すること
・プロセスの可視化
・考えたことの経緯を示す

ファシリテーション
→ (会議・ミーティングのなかで)自ら空気を作って、みんなでデザインを作って巻き込むということ
・スピーディな合意
・質の高いアウトプット
そのためにたとえば、このような手法がある
・講演会やミニワークショップを開催

シチュエーション・ニーズ分析
・優良顧客の「用事を探る」
・クライアントさんに顧客目線になってもらう
← 三河屋さんのように

・2年後の理想を確認

Webサイトの運用体制を築く

      ● 小さいサイクルを素早く継続的にまわすこと

 

      ● チャレンジし、エラーを許容する文化を築く

 

    ● 定期的な振り返りを必ず行うこと

◆ 振り返りに最適なKPT(ケプト)

Keep ・・・・ よかったことを続ける
Problem ・・ 改善、問題、やめた方がいいこと
Try ・・・・ 試してみたいこと

KPTの良さ
・PDCAは難しい
・良い点を振り返ると前向きになる
・ナレッジの蓄積
・計画外のよかったことを共有できる
・短期サイクルでまわせる

◆ 画面設定まわり

ストーリーから導かれる画面設定を。
時系列で顧客を導くストーリー
ステップごとの顧客の心理の変化

まとめ
これからのWebデザインとは
・経営視点を持ち、営業を取りにいくというように。

これからは、UIやデザインだけじゃない。⇒ 目に見えないところも。

セミナーに参加しての感想

このエントリーは、あくまで個人用にメモったのを展開したので、個人によっては捉え方がちがう部分もあったかと思います。

ぼくは紙媒体とはほとんど縁がないので、個人的にはいちがみ トモロヲさんの「Webデザインに必然性を持たせる情報設計術」が実際の仕事とリンクする話で興味深かったです。

クライアントさんの希望するところが、どこにあるかというのをしっかり共有しておかないと、もったいないだけのサイトが出来てしまいます。ただ、なかなかクライアントさんは提案を受け入れてくれなかったりするので、「チャレンジし、エラーを許容する文化を築く」という雰囲気をクライアントさんと共に作るというのは大切ですよね。

いちがみ トモロヲさんの話は、Web業界だけに留まらずKPTなどの手法や考え方はどのような仕事にでも応用できると思います。

何はともあれ、無事に2回目となるCSS Nite in TOSAが無事に終了することができてよかったです。参加して頂いたみなさん、本当にありがとうございました。そして、講師の方々、スタッフの方々、まっことお疲れさまでした!