CSS Nite in OKAYAMA, Vol.7「UI/UXから考えるウェブ制作」で、UIとUXとコミュニケーションについて学んできました！

こんにちは。初心者フリーランス主婦のムラカミです。

2017年11月25日（土）、岡山情報ビジネス学院で行われた CSS Nite in OKAYAMA, Vol.7「UI/UXから考えるウェブ制作」に参加し、UIとUXについて学んできました！

私はウェブ制作を独学しながらフリーランスとして働いている山口の主婦で（２歳の娘がいます）、まだまだ分からないことだらけなのですが…とても学びの多い１日でした。ブログも書き慣れておらずあまりうまくまとめられませんが、『私が理解した内容』と『感じたこと』を書きたいと思います！（もし誤解があれば申し訳ありません。そのようなことがあればご指摘いただけますと幸いです…）

ファン作りを考慮したマーケティング施策とUX

スピーカー：株式会社KDDIウェブコミュニケーションズ阿部正幸さん

共用型レンタルサーバー事業のCPI。"営業"がいないながら、業績は毎年右肩上がりだそうです。差別化しにくいこの業界でどうやってそれを成し遂げたのか？その答えは…ファン作りを考慮したマーケティングでした。

私が理解した内容

ファンと顧客体験価値

"最安値"と"最高品質"はそれが売れる理由になる。では中間の価格帯であるCPI（3,980円〜）が売れる理由は？ズバリ顧客体験価値を提供し続けているから。CPIのの場合、サーバーの面倒なことは何も気にしなくて良いという顧客体験価値を作っている。

顧客体験価値に満足すればファンになり、ファンになると検討せずに購入する。口コミを広めてくれる。と言うことは好きになってもらうことが企業のマーケティングには必要。

マーケティング施策（好きになってもらう方法）

メディアの運営（ユーザーが欲しい情報をメインとするブログを運営（CPIスタッフブログ）。広告記事はごくたまに）
ソーシャルメディア（社員の顔写真や食べ物の好みを載せることにより親近感を出す。また、500〜1,000円の広告費を出すことで10倍のリーチ数になる）
ファンミーティングを開き、要望を聞き、改善する（改善対応することでファン度がさらに上がる）

アクセス解析

名前のメモが取れなかったので、アクセス解析のサービス名はフォローアップのスライドで後ほど確認しようと思っていますが、あるユーザーがコンバージョンに至るまでに、いつ、どのページを見に来たか追跡してデータ化するアクセス解析がすごかった。

まとめ

購買は「最安・最高・ファン」から見込める
ファン獲得のために、フィードバック・顧客体験価値を高め、ユーザーが欲しい情報を発信する

感想

ウェブを通して事業がモテるための考え方や具体的なテクニックを知ることができました。クライアントの事業やプロジェクトにファンをつけるために、まずはできそうな事からやってみます。また自分自身については、まだまだ事業も小さいしファンを増やす…という発想が今までありませんでしたが、少しずつでもファンになってもらえるよう仕事しようと気持ちを新たにしました！

ワイヤーフレームとビジュアルデザインの間の暗くて深い闇

スピーカー：株式会社スイッチ鷹野雅弘さん

2017年9月30日に東京で行われたCSS Nite LP53のダイジェスト版を再演してくださいました！

私が理解した内容

ウェブはユーザーとのタッチポイントであるが、ウェブ制作は、そのものの制作だけでなく流れの中で捉える必要がある。そもそもUIとUXは次元が違うものである。

ディレクターとデザイナーの間でスムーズにやりとりするための考え方

必要なのはクライアントとの合意形成。ワイヤーフレームにこだわらずドキュメントでも、制作の段階ごとに確認できるものを作ったら良い
担当者と決裁者が違う場合は承認フローを先に決めておく。何を持って良しとするかの判断基準が大事。
最近では利用者の代表となるようなペルソナを作り『ペルソナだったらどう考えるか？』や『A/Bテスト』行い、良し悪しを数字で決める事も。

ワイヤーフレームは、作る人・タイプ・役割によって出来上がるものが異なる

作る人（クライアント担当者・ディレクター（強調点が異なる）・デザイナー（完成度高い））
タイプ（ランディングページ発想（インパクト勝負でメインビジュアル作り込み）・ツリー発想（情報分類・整理）・スタイルガイド（ルール化））
役割（コピーについて、ダミーの文章ではレイアウトが崩れるので先にコピーを早い段階で決めることで精度が良くなる。１行が２行になる可能性もあることを考えなくてはいけない）

大事なポイント

ワイヤーフレームはその時までに達した合意を形にしたものであり、デザインカンプやプロとタイプがその通りでなくても良い
中間生産物は合意形成のため、確定していることと自分で考える余地が明確であると良い
中間制作物の精度をみんなで高めていく

感想

私はひとりで仕事しているため、ウェブ制作で分業の体験はないのですが、ワイヤーフレームとビジュアルデザインとの間には暗くて深い闇がある場合もあるのですね。考え方はクライアントと自分にも十分に置き換えられ、実践できるものだと思いました。特に『中間生産物であるワイヤーフレームは合意形成のために作られ、確定したこと・工夫の余地があるものを明確にしておく』ということはすぐにやってみます。少し前まで『ワイヤーやカンプって何のために必要なんだろう』と思っていた私にとっては、とても良いタイミングで学べました。

だれでもできる！ユーザーにちゃんと使ってもらえるUIデザインのコツ

スピーカー：株式会社ツクロア秋葉ちひろさん

秋葉さんが教えてくださったのは、UXのデザインする際は、最初にキーワードを拾い出して次に文章として繋げ、それをUIに変換していくというもの。（初心者の）私自身はこのような方法を聞いたのは初めてでとても興味深かったです。

私が理解した内容

ユーザーにちゃんと使ってもらうUI制作のステップ

クライアントの要望を聞いてそれらを全て『キーワード』で書き出す
それをペルソナのユーザーストーリーとして、５W1Hを作成し、課題を見つけ、ゴールに導く
クライアントとディレクターとデザイナーとの間で認識を共有するために、箇条書きや図ではなくまずはワークとして文章を作る（例：『宿泊の料金体系は、繁忙期・繁忙期の日祝前日・通常・通常の日祝前日に分けられ、基本料金は○○円で…』）。
これをデザイナーが読むことで、クライアントの意図を理解しやくすなり、チームで共有認識度が高まる

ユーザーストーリー

クライアントの商品を紹介するときに、『うちの商品はこんなに良くて素晴らしいです』と自分を主語にしてしまうと非常に怪しくなる。だから、どういう人（ペルソナ）にその商品を打ち出したいか？を考え、ペルソナを主語にしたユーザーストーリーを作ることが大切。このフローをデザイナーを含めたチーム全員で共有することで認識をより強く共有することができる。

この『言葉を使う方法』は専門的でないのでクライアントを巻き込めるという利点がある。ユーザーのことを知り、考えることが大切。ワイヤーだけもらったら、行間を読み取れない。

感想

いつも情報や物事を整理することを考えていました。今回のお話を聞いて、あえて文章にすることで、図では省略されてしまう"行間"が補われ、チームの中で認識を共有するのに有効だと分かりました。また、セッションの内容からはずれますが、１つのことを達成するのにはいろいろな方法があって、例えばチームのメンバーの気質や思考方法の傾向で柔軟にやり方を変えてみるのも良いなと思いました。

「予期的UXによるUIデザイン」どうデザインする？ユーザーとのファーストコンタクト

スピーカー：株式会社ザッパラス藤井幹大さん

ユーザーとクライアントのゴールを両立して達成するための「予期的UX」によるデザインの手法についてお話くださいました！

私が理解した内容

UIとはユーザーと『何か』の境界面。その何かを探るのがUIを作ること。
UXには時の流れがある。行動前のUXのことを『予期的UX』という。
ユーザーに行動してもらうには、行動をデザインする。行動をデザインするには予期的なUXが必要。
予期の予期の予期の予期…といったように体験が波状的になっって予期的UXになる。
最初は本当にしてほしいことに絞り『少しの"したい"』に絞る。ゴールにつながる波状的な期待感の第一歩として最適であることが大事。
UIデザインのコラボツール『Figma』がとても良い。URLだけで共有でき、だれがどこを見ているかすぐわかる。同時編集でき、デザインファイルの共有がしやすい。スケッチのファイルもインポートできる。

感想

恥ずかしながら『予期的UX』という言葉を初めて聞ききました。そもそも、まだまだUXについてもとても浅い理解しかないので、正直にいうと結構難しかったです（内容の部分の記述が少なくて…申し訳ありません…）。でも、ここでしっかりと言っておきたいのは、お話を聞けてとても良かったということです！"今回は"深く理解はできなかったけど、初めて『予期的UX』という考え方に触れて、どういうことか考えるきっかけになりました。今後の学びの足がかりとなりました。『ユーザーの期待値をどう作るか』考えていきたいと思います。

Webフォント最新事情2017 ～UIを彩るWebフォントの活用～

スピーカー：ソフトバンク・テクノロジー株式会社 FONTPLUS 関口浩之さん

フォントおじさんとして有名な関口さん。フォントの持つ力から、ウェブフォント事情まで『愛おしいフォントくん』のお話をたっぷりお聞きしました。

私の理解した内容

フォントとウェブの事情

近年では紙・雑誌・ウェブサイトの垣根が低くなっている。数年前まではデザイン書体のボタンはイラレやフォトショでしか作れなかったが、今はHTMLとCSSでどんなボタンもだいたいできる。
これまで、ウェブの世界ではフォントが置き去りにされたが、ウェブの誕生から約20年を経てWebフォント仕様が定義された。

フォントの表現力とUIとしての価値

フォントは読み手の感情を左右する。（角が尖っているものは日本人には『怖い』印象を持たれがちなので、病院などはほぼ丸ゴシック）
人は0.1秒くらいで好きか嫌いかを判断するため、フォントはインフォメーションにおける重要なインターフェイス表現。
後回しにされがちだが、クライアントへの提案の初期段階でフォント選定した方が良い。
ゴシック体は見やすさ・視認性が高い。
明朝体は文字を並べた時に凸凹しており可読性に優れる。また感情的でもあり、小説が明朝体なのは抑揚をつけることで感情が体に入ってくるから（藤田重信さん談）。

フォントと技術

WebフォントについてはBoldだとWindowsで綺麗に見えない場合がある。ウェブフォントならウェイトがたくさんあり、綺麗に表現できる。
『rest APIサブセット取得 + CND配信』などの仕組みで、Windowsでも綺麗に出るように・どんな状況でも早く見られる配信の工夫をしている。
もっと早く！もっと早くに対応していく！

感想

コンテンツの美観・情報の重み付け・情緒表現ができるフォントをウェブで使えば、情報を的確に伝えるための重要なUI/UXになるということがよく分かりました。また、最後の方で『もっと早く！という要望に対応して、どんどん技術を開発している。不満や意見はどんどん寄せて欲しい』というお話を力強くされていたのが印象的でした。ウェブフォントはどんどん進化しています。私ももっと進化したいと感じました。

全体を通して

約120名の熱気溢れる会場で、あっと言う間の４時間でした。まだまだ手探りで勉強しつつサイト制作している私は、今まで『画面を作るだけで精一杯』の状態だったと思います。でも今回UXの考え方・UIの設計方法・コミュニケーションの取り方などを学んで、今の状態を一歩抜け出して、より良い価値をクライアントに提供したいという気持ちを強くしました。

仕事も育児も『初めてだから時間が掛かるのはしょうがいない』と思い過ごしているところがありましたが、もっと学びに時間を割けるよう効率化してやっていかねばと思います。

CSS Nite in OKAYAMA、直前の申し込みとなりましたが参加できて良かったです！ご登壇の皆さま、運営の皆さま、参加者の皆さま、そしてうっかり終電に乗り遅れてしまった私を泊めてくださった三浦さん、ありがとうございました！

おまけ

f:id:ud_fibonacci:20171127143451p:plain

こんな勉強中の主婦の私ですが、次回の岡山WEBクリエイターズ「年末スペシャル2017」の中四国ライトニングトークでお話させていただくことになりました。お気付きの通り、仕事のノウハウについてはお話しできないのですが、幼い子どもを持ちながら家で働く生活など"紹介"したいと思います。

子育てと言っても・働き方と言っても多種多様で、特に私が正解というわけではありません。だから「こうしたらいいいよ〜」的なものではありません。これから子育てする可能性のある方や子育て中の方が身近にいる方に向けて「私の場合はこんな感じ」を紹介することで、何か想像したり考えたりする材料の一つになってくれたら嬉しいなと思っています。宜しくお願いします。