新卒2週間で辞めた奴のUXデザイナー備忘録

1年後にUXデザイナーとして海外渡航を目標に、UXデザイン、webについて発信していきます。

スマホの操作名称。あなたはいくつ知っている?

こんにちは!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指しているりゅーやです。

 

こんな記事を最近見ました。

スマホアプリで今までにないジェスチャーを導入するには?”

 

最初このタイトルを見たときは

ピンとこなかったのですが、

要するに

"普段はしないスマホ操作を

アプリで導入するには?"

といった内容です。

 

みんなが当たり前に持っているスマホでの操作。

実はあの操作もUXを考えて

設計されたものなんです!

そのためおそらく、

ほとんどの方はスマホの操作を

説明書見ながら。。。

なんてことはせずに自然と

使いこなしています。

 

ということで今回はスマホの操作について

ご紹介します。

 

f:id:ryuya_u:20181002231853j:plain

 

目次

そもそもスマートフォンとは?

当たり前ですが、スマホの操作ってPCと違いますよね?

PCではマウスやキーボードといった出力装置を使うのに

対してスマホで使うのは指だけです。

 

しかもガラケーと違ってキーを叩く

のではなく画面をタッチするだけ。

 

この画面をタッチできる機能を

OSといいます。

Androido、IOSって聞いたことありますか?

この2つが

現在のほとんどのスマホを構成するOSです。

 

結論、ほとんどの人の認識は

何も考えずに画面を操作できて

”持ち運びができるパソコン”

といった具合です。

スマホの操作名称

IT業界にいるとスマホのユーザーテスト(きちんと動くか)

を見る際に、

画面を"ピンチイン"した際に崩れないかとか

"タップ"した際に次の画面に遷移できるか

なんて操作名称をよく使用します。

 

よく使うスマホの操作名称を

下記にまとめてみました。

 

・タップ

    操作方法:画面を指先で1回叩く

         使う時:リンクや画像を選択する

・ダブルタップ
操作方法:画面を指先で2回叩く
使う時:拡大表示をする時
・ロングタップ,長押し
操作方法:画面を指先で長く押す
使う時:テキストをコピペなど
・フリック
操作方法:画面に触れ、その指先を素早く払う
使う時:文字入力の際などで使用
・スワイプ
操作方法:画面に触れ、その指先をスライドさせる
使う時:画面遷移など
・ピンチイン
操作方法:2本の指の間隔を狭める
使う時:画面を縮小する
・ピンチアウト
操作方法:2本の指の間隔を広くする
使う時:画面を拡大する

まとめ 

 以上が大まかな

スマホ操作の用語になります。

自分がいつも何気なくしている動作に

名前があったなんて驚いた方もいらっしゃるのでは?

 

もしIT業界で働くことがあれば

知っていて損はありません。

日常生活でもふと友達に

"見えないからピンチアウトして"

なんて言えたら

カッコいいかも知れません笑 

<

みんなが知らない間に体験を創造。ミラーの法則とは?

おはようございます!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

台風が近づいていますね

実は今日、キャンプの予定だったのですが

急遽中止にして家でゆっくりトムとジェリーを見ながら

くつろいでおります。w

 

突然ですが、皆さんは勉強などで暗記をするとき

どのようにして覚えますか?

 

”他の物事と関連づける”、”なんども書く”、”内容を深掘りして覚える”

など人それぞれだと思います。

 

なぜこんなことを聞くのかというと、

実はUXデザインにおいても、

人に情報を覚えてもらうことも意識しながら設計をしているんです。

 

そこで、参考にしている考え方に

ミラーの法則というものがあります。

 

今回はそんなミラーの法則をご紹介します。

f:id:ryuya_u:20180930020132j:plain

目次

 

ミラーの法則とは?

ミラーの法則とは、

ハーバード大学院教授の心理学者、ジョージ・A・ミラー氏

が導き出した法則です。

 

ミラー氏は「マジカルナンバー7+-2」という論文で

人間が一瞬で記憶できる量には限りがあり、

その情報の量が7+-2であると発表しました。

 

この7+-2とは、チャンク(文字の塊)を意味しています。

 

この法則が発表された後の2001年に

ミズーリ大学のネルソン・コーワンが

”4+-1がマジカルナンバーである”と説き、

現在ではこの4+-1の原則が用いられています。

 

 

ユーザーに覚えてもらいたい情報って?

UXデザイン設計をする際、

クライアントがユーザーに覚えてもらいたい

情報に関してはとりわけ

このミラーの法則を参考に設計を練っています。

 

例えばレストランのサイトを思い浮かべて見てください。

レストランのサイトを検索する際、

ユーザーが求めている情報は何でしょうか?

 

”他のレストランと比較をしたい”、”お店に関する情報が欲しい”、
”予約したい”などかと思います。

 

それでは、レストランのオーナー(クライアント)がサイトに求める

役割は何でしょうか?

ほとんどの場合が

"ユーザーにお店にきて欲しい"と思っているでしょう。

 

これこそがユーザーに覚えて欲しい情報であり、

ユーザーも求めている情報です。

そのためここでは

アクセス情報を科学する必要があります。

 

ミラーの法則活用例

それでは、ミラーの法則を用いて

アクセス情報を科学して行きましょう。

 

アクセス情報の中で何が必要かを考えて行きます。

今回の例はレストランなので、

ユーザーがレストランに訪れる際に必要な情報に

以下を挙げることができると思います。

・電話番号

・郵便番号

・住所

・交通手段

・営業時間

 

それではミラーの法則である

4+-1で情報を記載すると以下になります。

・電話番号: 03-1234-5678

・郵便番号: 120-3456

・住所: 東京都 〇〇区 〇丁目

・名前: イタリアン 〇〇〇

 

といった形になります。

これがミラーの法則を用いられずに記載されると

 

・電話番号: 0312345678

・郵便番号: 1203456

・住所: 東京都〇〇区〇丁目

・名前: イタリア 〇〇〇

見づらく、覚えにくいですよね?

 

ミラーの法則を用いてチャンクに分けることで

見やすく、自然と覚えやすい文字構造を表現する

ことができるのです。

まとめ

ミラーの法則なんて聞いたことはないけれど、

私たちがサイトで当たり前のように閲覧してきた

表示形式であったと思います。

 

ただ文字と文字の間に空白がないだけで

情報の獲得しやすさがだいぶ変わりましたよね?

 

この体験を創造するのがUXデザインです。

 

今回はその簡単な一例である

ミラーの法則をご紹介しました。

現代で求められているモバイルファースト。SEOにも大きく影響!!

こんにちは!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

本日3本目の記事です。

お恥ずかしながら初めて一日で3本書きました。

 

日常的にこれくらい書けたら嬉しいなと思います。

記事のクオリティーも上げないとね。。。。

 

前回どこかの記事でモバイルファーストについて触れたので

深掘りしていきたいと思います。

 

 

 

f:id:ryuya_u:20180929104942j:plain

目次

 

モバイルファーストとは

イメージとしては

PCサイトからではなく、モバイル用のサイトから制作をすることです。

しかし、ただモバイル用のサイトから着手すれば良いという訳では

ありません。

 

サイトの目的によって、モバイルからのアクセス数が多くなるのか

それともPCやタブレットからの流入の方が見込められるのかに

よってサイト設計で力を入れるべきポイントが変わります。

 

今日において、ほとんどのサイトがスマホから検索されるといっても

過言ではないため

モバイルファースト=モバイル用のサイトから作成する

となっていますが、

あくまでもクライアントの目的を達成する手段として

モバイルファーストという概念を用いているということを

忘れないようにしましょう。

 

モバイルファーストの特徴4つ

特徴としては以下の4つをあげることができます。

1.モバイルの普及

スマートフォンでのサイト閲覧が60%以上と言われるほど浸透してきました。

そのためスマホ用のサイトしか制作しないという企業も存在し、

今後もスマホからのサイト閲覧数が増加していく見込みです。

 

2.webサイトのデバイスのサイズ

PCスマホでは画面のサイズが異なるため、

デザインも当然のように変わります。

ここではスマホのデザインを優先し、

PCスマホのデザインに合わせて作成します。

 

3.ケーバビリティ(機能性)

スマホは持ち運びができる上に、P

Cよりも気軽にwebサイトを閲覧することができます。

 

4.コンテキストの変化

スマホの携帯性により、いつでもどこでも検索ができるようになりました。

よって様々な動機から検索をしています。

 

 

まとめ

モバイルファーストとはどのようなものか

理解できたでしょうか?

 

モバイルファーストとはあくまでも

クライアントの目的、ユーザーのUI/UXを考慮した上で

取り入れられる概念で、

ただ何も考えずに

モバイル用のサイトから作成する

というものではありません。

 

また、特徴として4つほど

記述しましたが

 

この特徴4つにサイトが対応することで

 SEO(検索エンジン)にも影響を与える

と考えられています。

 

Google2015年にスマートフォン対応をしたサイトを検索上位に表示させるなど、

スマホ面でのUI/UXを重視する傾向が年々強くなっています。

 

さらにスマホ以外にもタブレットなど様々なデバイス

登場しているため、

 

どの端末にも適合し、表示されるレスポンシブ化が

好まれるようになってきています。

 

クライアント、ユーザーがサイトに求めている内容を

叶えるためにもモバイルファースト、レスポンシブ化に

ついてはじっくり考慮する必要があります。

 

 

 

デザインを極めるなら、ヒューマンインストラクションを知れ!

こんにちは!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

先ほどサイトリリースの夜勤が終わりまして、

帰宅したのですが、

家の扉が開かない。。。!!

 

そう、彼女さんが家のロックをしているから、、、

可愛い寝顔が拝めないアンド、

10時まで寝てるから家に入れないw

 

仕方なくマックに入ってこの記事を書いています。

 

そろそろ今まで書いてきた記事にテコ入れしようかなー

なんて思っているのですが、

 

やっぱり勉強したことを書きたくなっちゃいますよね!!w

 

てことで今回は

ヒューマンコンピュータインタラクション(なにそれ)

についてです。

 

 

f:id:ryuya_u:20180929075125j:plain

目次

 

ヒューマンコンピュータインタラクションとは

簡単にいうと、

人からコンピュータへ、コンピュータから人に伝達する

コミュニケーションルートのことです。

 

実はこれ、空軍の戦闘機にわかりにくいUI操作による

事故から生まれた学問のようです。

 

構成要素

ヒューマンインタラクションの要素は以下になります。

 

1.コンピュータサイエンス

→ITシステムのこと

 

2.認知心理学

→情報処理の観点から人の認知を研究する学問

 

3.デザイン

→ここでは表面上、UIについて指しています

 

このヒューマンインタラクション、

webサイトの設計を考える上でとても役立つ学問

のようです。

 

webサイトも

コンピュータなどのシステムで作られ、

ユーザーがサイトを回遊していく中でどのようにゴールへと

導いていくかを考え、

デザインの構成を練りますよね?

 

このようにwebサイトにも

同じ3要素が入っているため、

ヒューマンインタラクションについて学習すると

サイト設計の際に必要な観点を深めることができます。

 

まとめ

ヒューマンインタラクションとは

UIに置いて、目に見えるもので

”人を導く”という観点が似通っており、

 

学習を深めるとwebサイト設計の観点である、

”ユーザー視線”、”クライアントの目的”

”サイトの本当の役割”といった観点を深めることができます。

 

今回冒頭で触れた戦闘機の事故について少し

ご紹介すると、

ON/OFF、キャビン点灯、シート脱出といったスイッチが

同じキャビン内にあり、形も統一したものであったそうです。

 

もう簡単にご想像できますよね?

同じ場所にあり、同じ形でスイッチが複数ある。

 

そりゃあ、間違えてスイッチを押してしまう可能性は

十分にあります。

 

敵との戦闘中に、キャビン点灯を押して自分の位置を知らせてしまったり、

脱出装置を正しく見分けられずその間に撃墜という

パターンもあったそうです。

 

恐ろしい限りですね。。。

 

このようにUI(デザイン)はwebの世界以外でも欠かせない

存在で、

”見て理解することができる”、UIのデザイン重要性が

今回紹介した

戦闘機の事故を通してひしひしと感じられるかと思います。 

 

 

 

サイト成績が気になるあなた、EFO意識してる?

おはようございます!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

ようやくホームページの

リリース作業が終了しました!

 

最初は緊張していたのですが、

諸先輩方の優しいフォローのおかげで

無事にやりきれました!

しかも飲みにまで連れていってくれて

ありがとうございます!!

 

はてさて、今回はEFOについて書いていきます。

 

EFOって知っていますか?
ECサイトを自分で運営している方には

必須の対策ですよ!

EFO(Entry Form Optimization)

つまりエントリーフォーム最適化の意味です。

 

エントリーフォームの最適化とは

ユーザーがお問い合わせフォームを入力する際に

どれだけストレスを感じずに入力できるかというもの。

 

これこそUXの部分ですね!

 

このEFOができているか否かで
お問合せ率が大幅に変化します!

 

f:id:ryuya_u:20180929053044p:plain


目次

 

最低限の入力項目にする

入力項目が多いほどユーザーのコンバージョン率が

下がりやすいです。

 

例えば、

”入力完了まで30分”と記載されたお問い合わせフォームに

果たしてユーザーは最後までフォーム入力をするでしょうか?

 

おそらく、

他のサイトを一度見てみようと思うはずです。

 

例えば、

住所を記入する項目では、

郵便番号を記入すると自動で検索することができる

システムや、

氏名を入力すると同時にふりがなも入力されるなど

 

項目数を減らすのみならず、

スピーディーにお問い合わせが完了する

仕組みも作成していきましょう。

 

エラーを事前に回避する

入力している時に、

未入力箇所や半角文字で入力されていないなどで

エラーが表示されたことはありませんか?

 

エラーが起きた際、

正直いらっとしますよね。

”また入力し直しかよ”、

”間違えたところ探さないといけないのかよ”みたいな。

 

ユーザーがそう感じないように、

プレースホルダーテキスト(入力例)や、

記入してほしい形をあらかじめ明記するといったことは必須です。

 

さらに、

エラーになった箇所はユーザーに探してもらうのではなく、

エラー箇所を視認でき、すぐに編集できる形式にしましょう。

 

そうすることで、

ユーザーが感じるストレスを少なくすることができます。

 

わかりやすいアクションボタンを設置する

お問い合わせフォームの入力が終了しました。

 

さあ、送信。。。あれ、送信ボタンどこ?

これクリックしたけどちゃんと内容が送信されてるの?

 

なんて思われるアクションボタンは絶対にやめましょう。

 

アクションボタンは、

入力した内容を送信することができるボタンであることを明記、

きちんと送信されたかを確認することができる画面に遷移する

ものを配置しなければいけません。

 

そのため、”送信”というあいまいな文言ではなく

”入力内容を送信する”といった文言表示にし、

送信されたことがわかる確認画面を用意、”送信完了”の文言が表示される

ようにしましょう。

 

まとめ

いかがでしたでしょうか?

EFO

・お問合せフォームの項目数は最小限に
・エラーにならないようにしっかりとユーザーを導く

・エラーバックはユーザーにストレスがかからないように

・アクションボタンははっきりと明記し、

送信したことがわかるようにする。

 

できていましたか?

もし、できていない箇所が1つでもあるなら

改善して見ましょう。

 

CVRの達成率が上昇していくはずです。

3分で理解。デザインを考える前に、サイト設計ってどうするの?

こんにちは!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

webやUXデザインについて発信していますが、

今回はUXデザインの目的、"ユーザー体験の設計"を通して

どのように「使いやすい」、「わかりやすい」webサイトを

構築していくのか気になりますよね?

今回はサイト設計の基盤、

サイトストラクチャについて書きます。

 

f:id:ryuya_u:20180928142548j:plain

目次

サイトストラクチャとは

簡単に言うと、

webサイト全体の構造を示す設計書のようなもの。

 

ページとページをどのような順番で結びつけていくか、

コンテンツをどのページに置き、

ユーザーを目的の情報までどうやってたどり着けるようにするか

をまとめたものです。

サイトストラクチャの作り方

1.メインとなるターゲットの導線(ユーザーの道筋)を書き出す

まず最初に、ターゲットとなるユーザーが目的の情報まで

迷うことなくスムーズにゴール(サイトの目的)まで辿りつけるように

イメージしていきます。

 

設計者やクライアントが重要と考えるコンテンツも

ユーザーから見たら意外と重要ではないこともあります。

 

そのため、いかにサイト全体を俯瞰し、

メインとなる導線を明確にしていくかが重要です。

 

2.サイトストラクチャのパターンを参考にする

多くのwebサイトは、いくつかのサイトストラクチャ のパターンが

組み合わされて成立しています。

 

以下がサイトストラクチャの主なパターンになります。

・ファセット分類型構造

ECサイトなど、「価格」や「カテゴリ」など様々な条件で

検索することができる。

 

・階層型構造

コーポレートサイト(企業サイト)によく使われています。

「どこに何があるか」が明確になっている。

 

・直線型構造

お問い合わせ・予約・会員登録

といった入力→確認→送信の一連の流れを指します。

ユーザーが一つのタスクに対して、集中できるように

なっています。

 

3.スマートフォンのデザインも考慮する

今日ではスマホからサイトを訪れるパターンが

60%以上と言われています。

 

そのスマホでのデザインを無視してサイトを構築してしまうと

スマホユーザーからのサイト導入が期待できないもの

となってしまいます。

 

”モバイルファースト”スマホサイトから設計をするという

スタイルも生まれているので、

自分のサービス、ターゲットに合わせて考えましょう。

 

まとめ

今回はサイトを構築する前に、

どんなサイトを作っていくか?

 

この部分に焦点を当て、

サイトストラクチャについて紹介しました。

 

一言でサイトストラクチャと言っても、

様々なサイトがあるように

サイトストラクチャにもパターンがたくさんあります。

 

そのパターンを今回作成するサイトの目的を考え、

組み合わせていき、

オリジナルが完成するのです。

 

次回はサイトストララクチャの種類について書こうかな

と思います。

長期的なサービスにはUXデザインが必須!マーケティングとの違いはなに?

こんにちは!

色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

今週末に彼女さんとキャンプへ行こうと思っていたのですが、

天気が悪い、さらには台風が来てるということで延長することに決めました。

(実は雨天での延長3回目)

 

本日も天気が悪い中、会社で仕事をしていたのですが

ふと頭に浮かんだ疑問があります。

 

UXとマーケティングの違いは何か

 

気になりませんか?

だって、”顧客目線”や”価値提供をする”という考え方はほとんど似通って

いるように思えます。

 

ということで、UXとマーケティングの違いを考察してみました。

 

*今回UXに関する説明は省いているため意味がわからない方は

以下の記事も読んでみてください。

vevarasana0724.hatenablog.com

 

 

f:id:ryuya_u:20180927224935j:plain

目次

 

マーケティングとは

そもそもマーケティングって言葉の意味、

知っていますか?

簡単に言えば、市場を作る儲かるサービスを作る

ことです。

ピーター・ドラッカーがビジネス成功の概論として提唱しました。

 

活動のプロセスは以下になります。

1.市場調査

消費者が何を求めているかを知るためにアンケートを

とったり、公的なデータを用いて分析をします。

 

2.サービスを開発、もしくは引っ張ってくる

市場調査の元、顧客が求めているであろうサービスを

開発する、もしくは既存で世に出ている

他企業のサービス提供の支援を申し出るかを決める。

 

3.広告宣伝

開発、もしくは他社のサービスを顧客に知ってもらう

ために宣伝やインターネット広告といった活動をする。

 

4.検証

広告宣伝の費用に対して、効果はどのくらいあったのかを

検証します。

この検証データから宣伝を打ち止めにするか、

費用をさらに投入するかといった対策が投じられます。

 

UXとマーケティングはどのように違うのか

UXの考え方として、

前提にあるのが”ユーザー体験を設計すること”

です。

 

そのためマーケティングの顧客目線や市場調査と

少し似通ったところがあります。

 

しかし、UXはデザイン思考から誕生した

アプローチ法のため、”顧客が求めるサービス”という

視点で考えることは少ないです。

 

利益とユーザー、どちらを獲得しますか?

例えば、みなさんYoutube見ますよね?

Youtubeが始まる前に広告が流れ、

また動画の途中で広告に切り替わってイラつく。。

こんな体験したことありませんか?

ここで数値を見て、

利益が多く出ているが、ユーザーは快適に

動画を閲覧しづらそうだなと導き出しても、

 

利益が上がっていればまあ成功

この価値観がマーケティングです。

 

逆に、

利益は物足りないが、ユーザーからの評価は高い。

 

ユーザーからの評価が高い

この価値観がUXです。

 

聞く分にはUXの方が良いように聞こえますが、

これでは企業が成り立ちません。

だから昨今のビジネスでは

マーケティングとUXは同等の存在で、

掛け合わせることで顧客が満足し利益を生み出せる

という方向性が強くなってきています。

 

まとめ

マーケティングは利益を生み出すための理論であり、
UXは顧客の問題を解決するアプローチ法です。

 

よって、UXとマーケティングは異なる理論、方法で

ありますが

最終目的である”価値の提供”、”ビジネスの成功”という

部分は同じです。

 

利益が上がるからという理由で、

UX部分を改善しなければ他の新しい利益を上げる

施策を考えなくてはなりません。

 

ユーザーの存在を無視しては利益は生まれないからです。

 

よって、ユーザー視点(UX)を踏まえた長期的にプラスに

なる方向へ目指すことが重要です。