CSS Nite in Okayama, vol.7「UI/UXから考えるウェブ制作」(2017年11月25日開催) ~Web制作者のためのセミナーイベント CSS Nite の岡山版

オープニング

音声・スライド・メッセージ・動画

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

阿部 正幸
講師 阿部 正幸
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

動画

講師よりメッセージ

CSS Nite in OKYAMAに参加の皆さまありがとうございました。
「ファン作りを考慮したマーケティング施策とUX」に登壇させていただいた、阿部正幸です。

今回は弊社が販売しているレンタルサーバーCPIの販促施策をご紹介させていただきました。
1つ1つの施策はそれぞれ目的を決めて運用しています。
Webマーケティングの王道はLPを作り広告を出稿することですが、それ以外にも様々なことを実施してます。

幅広く知ってもらうための施策
コンテンツ施策
広告出稿 -> LP

ファン作りの施策
ソーシャル運営(Facebook、LINE@)
ブログ運営
イベント運営・懇親会の参加
お役立ち動画(Youtube)
CPIエバンジェリスト制度

プロダクトの改善
お客様から直接意見をお伺いし、社内にフィードバック

これらの施策を通じて顧客体験価値を提供し続け、多くの方に知ってもらう、ファンになってもらうことをしています。

流入経路の一例をご紹介させていただくと
1. オフラインイベントに参加したお客様とFacebookで繋がる
2. Facebookに投稿したWeb制作向け記事から、ブログに流入する
3. ブログがユーザーのために役立つ(タメになったことで心に残る)
4. サーバー選定の時にCPIを思いだす
5. サーバー選定の比較検討時にCPIを入れていただく
6. 運良くCPIを借りていただく
7. オフラインイベントで再び会う(さらに仲良くなる)
8. CPIを好きになる

イベントでもご紹介させていただきましたが、1人ファンが増えると、そこからの口コミが期待できますので、さらなるプロダクトの認知拡大につながります。

今回は弊社が行なっているマーケティング施策の一部をご紹介させていただきました。
ぜひ皆様の販促施策のヒントになると幸いです。

最後に
長くなりましたがセミナーに参加いただきました皆様、フォローアップメッセージを最後まで読んでいただきありがとうございました。
またみなさまにお会いできることを楽しみにしております。

下記は私のソーシャルアカウントです。
LINE@ではセミナーの無料招待チケットなどもお配りしております。
お気軽にLine@、Facebookフォローいただけると幸いです。

Facebook
https://www.facebook.com/chiyo.abe

LINE@
http://line.me/ti/p/@gkv8736o

CPIスタッフブログ
http://shared-blog.kddi-web.com/

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

鷹野 雅弘
講師 鷹野 雅弘
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

動画

講師よりメッセージ

改めてご参加ありがとうございました。

今回、はじめて「ダイジェスト」という取り組みを行ってみましたが、自分なりに咀嚼したものにすればよかったかな、と反省しています。

それはともかく、今、Adobe XDの動きへの注目度が高まっています。11月29日に開催予定のAdobe MAX Japan 2017でも多くのセッションがXDを取り上げます。Sketch.appと比べながら、何ができるか等、おさえておくとよいでしょう。

「ディレクターはPowerPointでワイヤーフレーム」を作成することが多いようですが、XDはディレクターでも触れるツールと利用されています。

また、お会いできることを楽しみにしています。

リンク集

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

秋葉 ちひろ
講師 秋葉 ちひろ
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

動画

講師よりメッセージ

このたびは、ありがとうございました。 文章で表現する方法は、ある種自己流でもあったのですが、この講演でお話して「目からウロコ」「ぜひ取り入れてみたい」「今ちょうど使えそう!」という声をお聞きし、 私自身もたいへん実のあるものになりました。ありがとうございます。

私も東京でUIデザインの仕事をやって5年ほどになりますが、 いくら考えても正解にたどりつく気がしないし、ユーザーのこともわかりません(笑)。

でもそうも言ってられないので、自分から近づいていくしかなくて。 だれでもできる、「言葉」→「文章」というユーザーストーリーの作成をぜひ試してみてください。

今回の講演内容と同じような考え方が拙著「Webデザイン・コミュニケーションの教科書」にもありますので、 ぜひUIデザインや情報設計のヒントに、お手にとっていただけたらと思います。

http://www.amazon.co.jp/dp/4797376228/

また、文章化について参加したワークショップはこちらです。

「2017年9月24日(日)のXデザインフォーラムにてポスター発表をしました。 | 情報設計視覚化研究会」

http://www.ia-visualize.org/posts/3242349

※この研究会サイトも、追っていくとUIデザインのヒントがたくさんありそうです。

地元の岡山でこのようなお話する機会をいただき、ありがとうございました。

vol.5でも登壇させていただいていたので、そちらもご参考にと思います。

https://cssnite-okayama.jp/vol5/after.html#akiba

Twitter: https://twitter.com/tommmmy

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

藤井 幹大
講師 藤井 幹大
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

動画

講師よりメッセージ

みなさん話を聞いていただきありがとうございました。
膨大なUXの領域の中から「予期的UX」にしぼったのですが、逆に全体感を知らないとわかりにくい部分もあったかと思います。
具体的な疑問点がありましたら、TwitterのDMやFacebookのメッセージなどでもご質問いただければお答えしますので、お気軽にお寄せください。

UXデザインについては、『UXデザイン教科書』である程度網羅的に基礎を学べるのですが、まさに「教科書」なのでとっつきにくいかもしれません。ただ、間違ったことが一切書かれていないのでUXを学ぶならリファレンスとして必携だと思います。
ネットや本で読んでもなかなかわかりにくいところがあるので、UXからUIに落とし込んでいくところのワークショップや少人数での勉強会などもできたらしたいです。

参考URL:『UXデザイン教科書』https://www.amazon.co.jp/dp/4621300377

Q1:
Figmaいいですね!早速使ってみます!地方だとまだまだですが、デザイナーは頭を使う仕事に移行しそうですね。

A1:
Figmaは多くの方に気に入っていただけたようでうれしいです。コラボは今後デザイン業界のキーワードになっていくと思います。Figmaに関しては突然Closeしたらすみません 。実は「InVision Studio」という競合ツールの公開を待っていたりします。
頭を使って仕事ができるかどうかは、東京ですと既に多くの会社で採用の基準になっていると思います。どこであってもデザイナーにしかできない領域はデザイナーが考えるのが当たり前になっていくと思います。同時に責任も重くなるわけですが。

Q2:
アルバスの例のおかげでUXの大切さがわかった。最初からアルバムを売る、売らないことの重要性、心理。

A2:
これ実は事業側からしたらすごく怖いことだと思うんです。
買ってくれないかもしれないわけですから。
でも自分たちのつくっているものの価値・魅力を信じて分割しているんですね。
今の世の中は代わりがいくらでも見つかるので、いかに信頼関係を築くのかが重要だという話でもあると思います。

参考URL
1. 「Sketch vs. Figma」デザインツールとして優れているのはどちらか(だいぶFigma寄りの記事です):http://getnews.jp/archives/1669975
2. SketchとAdobe XDを使っていたデザイナーの私がFigmaに心底惚れたワケ:https://www.webprofessional.jp/web-design-2016-attack-chromes/
3. InVision Studio:https://www.invisionapp.com/studio

Q3:
理論の話なので仕方ないですが、少し話がかたかったでしょうか。ただ内容はとても役に立ちました。

A.3:
かたくなるのクセなんです。すみません・・・他の方からも話し方が早かったなどのご意見もあり、反省しつつ今後に活かします。
ただ、重要なのはALBUSの波状的なUXデザインについては、たんなる評論ではなく実際にそのようにデザインしているということで、僕らも自社サービスで実践しています。
UIデザインの世界では理論と実践の距離が縮まっていて、感性だけではなく、成果の再現性を持ったデザインが求められているということですね。

ご質問などは下記からお気軽にどうぞ!
Twitter:@mikihirocks
Facebook:https://www.facebook.com/mikihiro.fujii
(友達申請歓迎です!される場合は、岡山のCSS Niteに参加されていた旨をメッセージでお知らせください。)

予期的UXや事業でのデザインについてなどはこちら
Slideshare :https://www.slideshare.net/mikihirofujii
Medium : https://medium.com/@mikihirocks

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

関口 浩之
講師 関口 浩之
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

動画

講師よりメッセージ

『Webフォント最新事情2017~UIを彩るWebフォントの活用~』を担当しましたソフトバンク・テクノロジーの関口浩之です。みなさんと一緒に「知ってるようで意外と知らないフォントの世界」を学ぶことができてうれしかったです。ありがとうございました。

普段あまり意識していないフォントや書体ですが、WebサイトのUI/UX、見やすさ、美しさ、情報の重みづけ、ブランディングの観点で、フォントの選定や文字組みって大事なんだなぁ~って認識していただけたならうれしいです。

実際のWebサイト案件の現場において、フォントことでわからないことがあればお気軽にご相談ください。FONTPLUSに関することでなくてもいいです。FONTPLUS を持っていないまたはFONTPLUS を買う予定でない方でも、遠慮なく、Webフォントに関するご意見、ご要望、ツッコミなどをお待ちしております!

セッション最後でご紹介した「FONTPLUS 入会金0円キャンペーン」ですが、申し込みしてもライセンスを購入しない限り、課金されることはありません。だけど、1回だけでも、1,000円のスマートライセンスを購入してくれるとうれしいです。もちろん、ずっと使ってもらえるともっとうれしいです。なお、クライアント案件が出てくるまで、ライセンス購入をお休みしても大丈夫です。

FONTPLUS 入会金0円キャンペーン用紙ダウンロード
http://bit.ly/2BkSAyp

知ってるようで意外と知らないフォントの世界、身近に感じて街中の交通標識や案内板、ポスターの文字を観察したり、テレビのテロップ文字を観察して、「あっ、スライドの51ページで出てきたあのフォントだぁ~」って感じで楽しんみてください。最後に、「まちもじ」に関する僕のブログもいくつか紹介します。あっ、道路標識の「止まれ」のお話は2年前にブログで書いてました(笑)

まちもじ「日本人は丸いゴシック体がお好き?」
http://www.mag2.com/p/news/18554
まちもじ「丸い明朝体」
http://www.mag2.com/p/news/19383

またの機会にお会い出来ることを楽しみにしております。

関口浩之
ソフトバンク・テクノロジー
Webフォント エバンジェリスト
(フォントおじさん)

エンディングムービー

特別協力

CSS Nite

岡山情報ビジネス学院

岡山WEBクリエイターズ

リンク

CSS Nite in Okayama YouTubeチャンネル

イベント一覧

vol.1 明日から使える! Webディレクション術

vol.2 今日から使えるHTML5&CSS3

vol.3 Webクリエイターのための、制作効率アップ術

vol.4 デザイナーじゃなくても知っておきたい、成果の上がるWebデザイン

vol.5 マルチデバイス対応の最新事情

vol.6 ワンランク上のWeb制作

vol.7 UI/UXから考えるWeb制作

vol.8 ウェブ制作の改善手法

vol.9 現場の視点で工夫するウェブ制作