WEB制作者向けイベント「CSS Nite in OKAYAMA Vol.7」に参加してきました!

2018年5月28日

スポンサーリンク

日中はサラリーマン、休日はWEB制作をしているはるまきです。

WEB制作をする人なら知ってるかもしれないですが、全国各地で開かれているフロント周りの勉強会CSS Niteが開催されたので、行ってきました。

岡山に移住した身としては、こういうセミナーはとても貴重です。

今回のテーマは「UI/UXから考えるウェブ制作」でした。

UI(ユーザーインターフェース)、UX(ユーザーエクスペリエンス)っていう言葉を日頃使いますが、こうやってちゃんと考える機会はとても貴重です。

 

プログラムはこんな感じです!

 

ということで、各セッションで面白かったポイントを紹介します!

余談ですが、UI/UXの話だけあって、プレゼンで使われていたスライドが面白かったです。
参加者には後日メールで、スライドのデータが送られるので、こういうフォローアップも超うれしいです。

 

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

阿部 正幸
株式会社KDDIウェブコミュニケーションズ )

KDDIウェブコミュニケーションズが提供している「CPIレンタルサーバー」は、競合が多いレンタルサーバー業界で、堅調に増収増益を重ねています。
その裏にあるマーケティング活動を紹介されていました。

CPIは、格安サーバー(ロリポップなど)でもなく、超ハイスペックサーバー(AWS)でもなく、中道の領域を抑えています。
※AWSはレンタルサーバーではないです

僕もこのブログを始める時に、レンタルサーバーの価格とスペックは色々比較しましたので、CPIの評判の良さは知っていました。
(結局、僕はWordPressだけできれば良いので、エックスサーバーのwpXレンタルサーバーにしました)

CPIは、サーバーの環境構築で面倒なこと(テスト環境から本場環境への反映など)が簡単に解決できます。そして、高セキュリティ!
「格安サーバーは少し心もとないけど、超ハイスペックサーバーまではいらない」というターゲットユーザーの心をぐっと掴んでいますね。
何かCPIの宣伝になっていましたねw

本題です。
このCPIを売るためのマーケティング活動の話。
よくWEBでのマーケティングと言うと、「広告だ!」、「アフィリエイトだ!」、「いやコンテンツマーケティング」だというピンポイントの話になりがちです。

が、阿部さんは、「全ての施策が有機的に連動しているから、もっと広い目でみるべき」(有機的とは言ってなかったけど)と。

その一例として、効果測定ツール「WEB Antenna」でトラッキングしたユーザーの情報を紹介していました。
紹介されていたユーザー(もちろん個人は不特定)は、20日間に複数のブログコンテンツを閲覧して、CPIの購入にいたっていました。

これは、「特定のブログコンテンツが成果につながった」のではなく、「複数のブログコンテンツの繋がりがユーザーの理解を深め成果につながった」と考えられます。

同じように、早く成果を上げるために即効性のある施策(広告やアフィリエイト)に注力しがちですが、ユーザーはもっと色々な情報をみて判断しているから、そのフィールドを戦略的に広げるべきだと僕は理解しました。

このフィールドが出来上がった時に、ユーザーはファンになり、CVが堅調に増えていきます。
施策を広域的に意識することはなかなか難しいので、「WEB Antenna」のようにユーザー行動をトラッキングして定量化することが重要になると思いました。

 

② ワイヤーフレームとビジュアルデザインの間の暗くて深い闇
(CSS Nite LP53ダイジェスト版)

鷹野 雅弘
株式会社スイッチ

こちらは、東京で開催された「CSS Nite LP53」のダイジェスト版でした。

ダイジェスト版なので、話が広範囲でしたが、ざっくりまとめると「クライアントとディレクターとデザイナー」の3者の間にある溝(闇)をどうしたら埋められるかという話でした。

で、それを「進め方」「作るもの」「ツール」の視点で紹介していました。
(と僕は解釈しています)

 

進め方

クライアント
⇒制作したいイメージの実現

ディレクター
⇒クライアントと合意した内容の制作

デザイナー
⇒より良いデザイン制作

3者は、それぞれの意思(目的)があるため、溝が生まれる。
これを埋めるためには「ペルソナ」をしっかり設定すべき。
3者の基準がぶれると進行が進まないので、「ペルソナ」設定して「基準」をつくる必要がある。

 

作るもの

①ランディングページなど
⇒インパクトが重要。
⇒とにかく作ることが優先!

②コーポレートサイトなど
⇒情報の分類など分かりやすさが重要。
⇒設計やページの構成をしっかり考えつつ、細かなUIは問わずに作る!

③ウェブサービスなど
⇒構成要素やパーツの文脈(なぜそこにパーツが必要なのかの関係)が重要。
⇒設計、ページの構成、細かなUIまでしっかり考慮して、作る!

 

ツール

3者間で認識を揃えるためには、

①はパワポなどでつくればよい

②、③は、ワイヤーフレームツール(AdobeXD、Sketch)や共有ツール(InVision、Prott)を使うとよい

 

・・・と、ざっくり言うとこんな内容でした。
僕がWEB制作する時は、パワポ、イラレ、フォトショでのデータのやり取りが多いのですが、ページが多いものは確かに巻き戻りがあって不便なので、この三点は意識して進めていきたいです。

 

スポンサーリンク

 

③ ユーザーにちゃんと使ってもらえるUIデザインのコツ

秋葉 ちひろ
株式会社ツクロア

WEB、アプリはもちろん、業務系サービス(病院の受付画面のアレ)のUIも手掛ける会社なので、媒体ごとの特性の説明が面白かったです。

DTPデザインは、ターゲットユーザーが広範囲になることが多いが、操作性は問われません。
一方で、アプリデザインはターゲットユーザーは絞られるが、その分操作性が重要になります。

で、WEBはターゲットユーザーも広くかつ、操作性も求められるので、とても難しい媒体とのことです。

確かに、僕も東京でアプリサービスを担当していた時、ターゲットユーザーと操作性(特にUI)について、凄く色々言われてましたね。
逆に、WEBサービスを展開するチームは、ターゲットユーザーと操作性はそこそこに、UXに意識を向けていた気がします。

で、秋葉さんは、難しい媒体であるWEBの制作を進める時に、クライアントといかに認識をそろえるかという問いについて「キーワードでストーリーをつくる」という方法を提唱していました。

これは超納得です。
よく会議とかでもキーワードを洗い出すことってありますが、キーワードだけだと、出席者は「ふーん」みたいな顔しかしませんw

洗い出したキーワードをもとにストーリーを作ってクライアントに提示する。
時間はかかりますが、イメージできますもんね。
そして、「イメージ」の認識を揃えることが目的なので、これは確かに使えそうです。

WEB制作に関わらず、会社で企画を通すときにも応用できればやってみます。

 

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

藤井 幹大
株式会社ザッパラス )

まず、「予期的UX」という言葉。
UXデザイン会社Standardのブログから引用させていただきます。

・予期的UX:経験を想像する

・一時的UX:経験する

・エピソード的UX:ある経験を内省する

・累積的UX:利用期間全体を回想する

 

つまり、予期的UXは、ユーザーに「このサービスをつかったらこんなことが期待できそう!」っていうこと表現するかということかなと。

藤井さんは、この予期的UXをデザインするために「ユーザーに対して期待を波状的に展開する必要がある」と説明していました。

その例として、「ALBUS(アルバス)」というアプリの設計思想について紹介していました。
(こういう良いサービスの設計思想が知れるのってうれしいですよね!)

例えば、サービスを提供する側は、ユーザーに「写真を登録させる」、「アルバムを注文させる」などのコンバージョンポイントをいかに越えさせるかに躍起になります。

でも、あまりにも押しすぎるとユーザーの抵抗が高まり、誰もコンバージョンしません。
一方で、逆に訴求をしすぎないと、コンバージョンポイント前に大量の離脱を招いてしまいます。

この押しすぎず、引きすぎない絶妙な設計(ユーザー体験)が重要です。

ALBUSでは、これを「まあこれくらいならやってみるか」という小さなハードルを設定することで、着実にコンバージョンポイントを通過していく設計になっていました。
(具体的な説明をすると冗長化するので、止めときますw)

・・・それにしても、「UXは難しいなあorz」と感じました。

UX白書というUXについてまとめた文書の中で、「ぶっちゃけUXは定義できないっす!」と書かれている通り、UX言語化するのが難しい領域なんですね。

 

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

関口 浩之ソフトバンク・テクノロジー株式会社 

フォントおじさんこと関口さんはWEBサービスにおけるフォントの役割を紹介していました。
関口さんは、もう変態的にフォントが大好きっていうことが伝わる内容でしたw

本に使われるフォントは「ゴシック体」ではなく「明朝体」が用いられるのは、会話のようにリズムが生まれやすいという話など豆知識情報も満載でした。

で、フォントは日常に溶け込んでいるので、その重要性を素通りしていることが多いとのこと。

例えば、「止まる」という道路標識が何で書かれているかという質問があり、何となくゴシックかなという程度でしか認識していません。(正解は丸ゴシック)
でも、別のフォントを当てはめると違和感しかなかったです。
それだけ日常溶け込んでいるんですね。

その一方で、昔は、WEBはフォントが全然使えず、表現の世界が狭まっていました。
数えるほどのフォントからしか選べないので、どれもこれも「Welcome to my homepage !」ww

それが、WEBフォントが使えるようになり、あらゆるページが表現豊かなものになりました。
紹介されたページの中には、htmlとCSSだけで書かれたページもフォントの力でとても魅力的に映りました。

だから、「高度な装飾も大事だけど、フォントをちゃんと見てる?」っていうメッセージを関口さんから受け取ったような気がして、今後の制作でちゃんと意識しようと痛感しました。

 

で、そんなフォント大好き関口さんの会社が提供する「FONT PLUS」というサービスも変態的に高速な処理を実装していましたw

一般的に、WEBフォントは、ページを読み込む際に表示(レンダリング)までに時間がかかります。
この時間はかなり改善されているのですが、FONT PLUSでは、この時流に飽き足らず必要な文字だけを読み込む「サブセット機能」という変態的な機能を独自開発し、爆速で表示できるようになっています。

今後、「FONT PLUS」を使うかは分かりませんが、フォントは意識していきます。

 

最後に

東京にいた頃は、勉強会の数がとんでもなく多かったです。

でも、今も「量」が大事とは思っていません。
勉強会ばかり参加して、消化不良になるよりは、コンスタントに良質な情報を仕入れた方が良いです。

「CSS Nite in OKAYAMA」やこれを支援している「岡山WEBクリエイターズ」は、とても良質な情報を仕入れられる貴重なイベントです。

岡山でWEBに興味ある方は、ぜひ参加してみてください☆

スポンサーリンク