サイト成績が気になるあなた、EFO意識してる？
おはようございます！
色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
ようやくホームページの
リリース作業が終了しました！
最初は緊張していたのですが、
諸先輩方の優しいフォローのおかげで
無事にやりきれました！
しかも飲みにまで連れていってくれて
ありがとうございます！！
はてさて、今回はEFOについて書いていきます。
EFOって知っていますか？
ECサイトを自分で運営している方には
必須の対策ですよ！
EFO(Entry Form Optimization)
つまりエントリーフォーム最適化の意味です。
エントリーフォームの最適化とは
ユーザーがお問い合わせフォームを入力する際に
どれだけストレスを感じずに入力できるかというもの。
これこそUXの部分ですね！
このEFOができているか否かで
お問合せ率が大幅に変化します！
目次
最低限の入力項目にする
入力項目が多いほどユーザーのコンバージョン率が
下がりやすいです。
例えば、
”入力完了まで30分”と記載されたお問い合わせフォームに
果たしてユーザーは最後までフォーム入力をするでしょうか？
おそらく、
他のサイトを一度見てみようと思うはずです。
例えば、
住所を記入する項目では、
郵便番号を記入すると自動で検索することができる
システムや、
氏名を入力すると同時にふりがなも入力されるなど
項目数を減らすのみならず、
スピーディーにお問い合わせが完了する
仕組みも作成していきましょう。
エラーを事前に回避する
入力している時に、
未入力箇所や半角文字で入力されていないなどで
エラーが表示されたことはありませんか？
エラーが起きた際、
正直いらっとしますよね。
”また入力し直しかよ”、
”間違えたところ探さないといけないのかよ”みたいな。
ユーザーがそう感じないように、
プレースホルダーテキスト(入力例)や、
記入してほしい形をあらかじめ明記するといったことは必須です。
さらに、
エラーになった箇所はユーザーに探してもらうのではなく、
エラー箇所を視認でき、すぐに編集できる形式にしましょう。
そうすることで、
ユーザーが感じるストレスを少なくすることができます。
わかりやすいアクションボタンを設置する
お問い合わせフォームの入力が終了しました。
さあ、送信。。。あれ、送信ボタンどこ？
これクリックしたけどちゃんと内容が送信されてるの？
なんて思われるアクションボタンは絶対にやめましょう。
アクションボタンは、
入力した内容を送信することができるボタンであることを明記、
きちんと送信されたかを確認することができる画面に遷移する
ものを配置しなければいけません。
そのため、”送信”というあいまいな文言ではなく
”入力内容を送信する”といった文言表示にし、
送信されたことがわかる確認画面を用意、”送信完了”の文言が表示される
ようにしましょう。
まとめ
いかがでしたでしょうか？
EFO
・お問合せフォームの項目数は最小限に
・エラーにならないようにしっかりとユーザーを導く
・エラーバックはユーザーにストレスがかからないように
・アクションボタンははっきりと明記し、
送信したことがわかるようにする。
できていましたか？
もし、できていない箇所が1つでもあるなら
改善して見ましょう。
CVRの達成率が上昇していくはずです。
3分で理解。デザインを考える前に、サイト設計ってどうするの？
こんにちは！
色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに)
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
webやUXデザインについて発信していますが、
今回はUXデザインの目的、"ユーザー体験の設計"を通して
どのように「使いやすい」、「わかりやすい」webサイトを
構築していくのか気になりますよね？
今回はサイト設計の基盤、
サイトストラクチャについて書きます。
目次
サイトストラクチャとは
簡単に言うと、
webサイト全体の構造を示す設計書のようなもの。
ページとページをどのような順番で結びつけていくか、
コンテンツをどのページに置き、
ユーザーを目的の情報までどうやってたどり着けるようにするか
をまとめたものです。
サイトストラクチャの作り方
1.メインとなるターゲットの導線(ユーザーの道筋)を書き出す
まず最初に、ターゲットとなるユーザーが目的の情報まで
迷うことなくスムーズにゴール(サイトの目的)まで辿りつけるように
イメージしていきます。
設計者やクライアントが重要と考えるコンテンツも
ユーザーから見たら意外と重要ではないこともあります。
そのため、いかにサイト全体を俯瞰し、
メインとなる導線を明確にしていくかが重要です。
2.サイトストラクチャのパターンを参考にする
多くのwebサイトは、いくつかのサイトストラクチャ のパターンが
組み合わされて成立しています。
以下がサイトストラクチャの主なパターンになります。
・ファセット分類型構造
ECサイトなど、「価格」や「カテゴリ」など様々な条件で
検索することができる。
・階層型構造
コーポレートサイト(企業サイト)によく使われています。
「どこに何があるか」が明確になっている。
・直線型構造
お問い合わせ・予約・会員登録
といった入力→確認→送信の一連の流れを指します。
ユーザーが一つのタスクに対して、集中できるように
なっています。
3.スマートフォンのデザインも考慮する
今日ではスマホからサイトを訪れるパターンが
60%以上と言われています。
そのスマホでのデザインを無視してサイトを構築してしまうと
スマホユーザーからのサイト導入が期待できないもの
となってしまいます。
スタイルも生まれているので、
自分のサービス、ターゲットに合わせて考えましょう。
まとめ
今回はサイトを構築する前に、
どんなサイトを作っていくか？
この部分に焦点を当て、
サイトストラクチャについて紹介しました。
一言でサイトストラクチャと言っても、
様々なサイトがあるように
サイトストラクチャにもパターンがたくさんあります。
そのパターンを今回作成するサイトの目的を考え、
組み合わせていき、
オリジナルが完成するのです。
次回はサイトストララクチャの種類について書こうかな
と思います。
長期的なサービスにはUXデザインが必須！マーケティングとの違いはなに？
こんにちは！
色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
今週末に彼女さんとキャンプへ行こうと思っていたのですが、
天気が悪い、さらには台風が来てるということで延長することに決めました。
(実は雨天での延長3回目)
本日も天気が悪い中、会社で仕事をしていたのですが
ふと頭に浮かんだ疑問があります。
UXとマーケティングの違いは何か
気になりませんか？
だって、”顧客目線”や”価値提供をする”という考え方はほとんど似通って
いるように思えます。
ということで、UXとマーケティングの違いを考察してみました。
*今回UXに関する説明は省いているため意味がわからない方は
以下の記事も読んでみてください。
目次
マーケティングとは
そもそもマーケティングって言葉の意味、
知っていますか？
簡単に言えば、市場を作る、儲かるサービスを作る
ことです。
ピーター・ドラッカーがビジネス成功の概論として提唱しました。
活動のプロセスは以下になります。
1.市場調査
消費者が何を求めているかを知るためにアンケートを
とったり、公的なデータを用いて分析をします。
2.サービスを開発、もしくは引っ張ってくる
市場調査の元、顧客が求めているであろうサービスを
開発する、もしくは既存で世に出ている
他企業のサービス提供の支援を申し出るかを決める。
3.広告宣伝
開発、もしくは他社のサービスを顧客に知ってもらう
ために宣伝やインターネット広告といった活動をする。
4.検証
広告宣伝の費用に対して、効果はどのくらいあったのかを
検証します。
この検証データから宣伝を打ち止めにするか、
費用をさらに投入するかといった対策が投じられます。
UXとマーケティングはどのように違うのか
UXの考え方として、
前提にあるのが”ユーザー体験を設計すること”
です。
そのためマーケティングの顧客目線や市場調査と
少し似通ったところがあります。
しかし、UXはデザイン思考から誕生した
アプローチ法のため、”顧客が求めるサービス”という
視点で考えることは少ないです。
利益とユーザー、どちらを獲得しますか？
例えば、みなさんYoutube見ますよね？
Youtubeが始まる前に広告が流れ、
また動画の途中で広告に切り替わってイラつく。。
こんな体験したことありませんか？
ここで数値を見て、
利益が多く出ているが、ユーザーは快適に
動画を閲覧しづらそうだなと導き出しても、
利益が上がっていればまあ成功
この価値観がマーケティングです。
逆に、
利益は物足りないが、ユーザーからの評価は高い。
ユーザーからの評価が高い
この価値観がUXです。
聞く分にはUXの方が良いように聞こえますが、
これでは企業が成り立ちません。
だから昨今のビジネスでは
マーケティングとUXは同等の存在で、
掛け合わせることで顧客が満足し利益を生み出せる
という方向性が強くなってきています。
まとめ
マーケティングは利益を生み出すための理論であり、
UXは顧客の問題を解決するアプローチ法です。
よって、UXとマーケティングは異なる理論、方法で
ありますが
最終目的である”価値の提供”、”ビジネスの成功”という
部分は同じです。
利益が上がるからという理由で、
UX部分を改善しなければ他の新しい利益を上げる
施策を考えなくてはなりません。
ユーザーの存在を無視しては利益は生まれないからです。
よって、ユーザー視点(UX)を踏まえた長期的にプラスに
なる方向へ目指すことが重要です。
ブログのデザインをしていくよ！テーマカラーが最大の決めて。
こんばんは！
ブログで初めてこんばんはで挨拶をしました、
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
実は仕事でホームページをリリースする本番作業を
今日突然言い渡され、夜勤を命じられてしまいました。
まあ、夜勤はIT業界の宿命ってやつですけどショック。
ネットが使えればいつでも、どこでも働けますから。
(こんな部分でもしっかりと発揮されてます、、)
さて、前回は”文字はデザインの基盤である”
という記事を書きました。
はてさて、そして今回のテーマはとうとう
”色”です！
目次
デザインのテーマカラーは3つ！
配色にはそれぞれ役割があり、
今回はその3つをご紹介します。
・ベースカラー
webサイトの約70%を占める、基本となる色です。
背景色といった最も広い範囲に使用されます。
このベースカラーですが、仮に蛍光色の黄色などが使用されていたらどうですか？
見づらく、目が疲れてしまいますよね？
白やグレー、
メインカラーの明度を上げた色など読み手が読みやすくなり、
サイトの配色に統一感が生まれる色をチョイスしましょう。
・メインカラー
約25%を占める、サイトのテーマを決める色です。
例えば、やさしいイメージを伝えたい場合は暖色、女性が好むかわいらしいサイトにしたいならピンク
という風に表現したい世界観やターゲットが好むと考えられる色を選びましょう。
・アクセントカラー
約5%程度の割合を占め、サイトの中でメリハリをつけるための色です。
そのため、お問い合わせフォームや
”ユーザーが次に遷移してほしい！”と思う
リンクボタンのカラーによく使用されます。
この3つをまとめてテーマカラーといいます。
テーマカラーを使ってブログページをデザイン！
こちらは宣言になってしまうのですが、
一応UXデザイナーなのに、
はてなブログをこのまま使用していくのはいかがな
ものかと、、
そのため、これからちまちま編集していこうと思います！
どこまで編集できるのかはわかりませんが、
テーマは”シンプル”です。
理由としては、
・UXデザイナー、web系に興味がある方
・海外でいつか働きたいと思っている方
にお役に立てればと思い書いており、
カラフルなものよりも、
シンプル目の方が閲覧しやすく
学習のストレスがかからないかなと思ったからです。
ただでさえ、勉強ってしんどいですもんねw
参考にしようと思っているサイトは以下になります。
こちらのサイト雰囲気を参考にしていこうと思っています。
(特に新井リオさんのブログは本当に憧れw)
まとめ
webデザインで主に使用されている配色構成
わかりましたか？
・ベースカラー
一番大きい色の面積を占めるため
可読性が高い白やグレー、
メインカラーの明度を高くした色を使用
・メインカラー
サイトの雰囲気、テーマを決めるため、
ターゲットが好みそう、商品やロゴに会う
色をチョイス。
・アクセントカラー
メリハリをつける色。
そのため使用頻度は一番少ないです。
ユーザーに遷移してほしいリンクや
お問い合わせフォームボタンに使用しましょう。
この3つだけでなく、
他にも色が増えるケースもあります。
その場合でも、
web配色の黄金比
ベースカラー:70%
テーマカラー:25%
アクセントカラー:5%
の比率は守るよう意識することが大切です。
文字。UXデザイナーがwebフォントを語る
こんにちは！
色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
皆さんはデザイナーと聞くと何が思い浮かびますか？
”色”や”形”を創造していくクリエイティブな職業
というイメージが強いのではないでしょうか？
＊デザイナーめっちゃクリエイティブ！！！
でもないんです、、
もちろん、
デザインを構成していく上でこの2つの要素はとても重要です。
ただそれだけではデザインが成り立たないケースもあります。
特にwebのデザイナーにとってはもう一つ重要な要素があります。
それが一体なんなのか、わかりますか？
それは。。。。。
”文字”です。
文字なんてwebにあってあたりまえ。
だからこそ、文字の書体やサイズに”意図”を持たせ、
きちんと方向性を統一したデザインをする必要があります。
目次
書体だけでもデザインは成り立つ
書体だけのデザイン、、
何か見たことがありますか？
例えば！
↑こんなシャツ見たことありますよね？
(高校の沖縄旅行で僕も買いましたw)
文字の形だけで、人にインパクトを与えたり、
魅せることができるんです。
そのことを私たちは無意識で知っているため、
資料の次のページの書体が微妙に違っていることにストレスを感じたり、
”イタリアン”の店名が和風の書体との組み合わせで
妙に惹かれたりするんです。
書体は
ニュアンスを表現することができ、
ブランディングに向いている要素なのです。
さらに文章で使用している書体を揃えることで
統一感が生まれ、
気持ちよく読むことができます。
webフォントとは
web上で文字のデザイン構成を考える際、
書体のみではなく、
”webフォント”を使用します。
中身が文字化けしていることがありませんか？
原因はバンドルフォントが使われているからです。
バンドルフォントとは
それぞれの端末にもともとあるフォントのことで、
もしOSにないフォントが使用されている場合、
このバンドルフォントが表示されてしまいます。
レスポンシブ化が重要しされている昨今では
webサーバー上に置き、どの端末でも同じフォントで閲覧する
ことができるwebフォントの使用が好まれています。
(デザイン品質が高いほど高価になってしまいますが。。)
webフォントの特徴
それでは簡単に4つの特徴をご紹介します。
1.スマホで文字を拡大しても綺麗
画像で処理したテキストは拡大表示した際に、
乱れてしまったり、ガタついて表示されてしまいますが、
webフォントはフォントそのものが表示されているため
そのまま綺麗に表示されます。
2.検索性の向上
テキストが画像の場合、検索でヒットする対象となりません。
そのため、検索された際に上位表示を狙うのであれば
そのページにとって重要な文言(kw)は
テキストで表示することを推奨します。
(SEO対策ってやつですねw)
3.音声読み上げ機能
こちらは最近開発された機能ですよね？
実はこの機能、テキストで表示されているものしか
読み上げることができません。
今後どのような発展をするかわかりませんが、
意識してみてはいかがでしょうか？
4.翻訳機能
webページが母国語のサイトでない場合、
すぐに翻訳機能に頼ることができますよね？
この機能も音声機能と同様に、
テキストしか読み込むことができないのです。
そのため、最初に画像で処理した文字を
後から翻訳できるようにテキストにしたいとなったら
手間がとてもかかってしまいます。
まとめ
webフォントを使用することで、
画像でなくても、CSSとの組み合わせで訴求できる
ケースが増えてきました。
また、文字でないと使えない機能もあります。
色や形といった目立つ部分よりも
根底の部分にある"文字"もwebフォントを使用して
デザインしていきましょう。
”3分”でわかるサイト制作フロー。顧客のデザインをするだけはNG
こんにちは！
色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
webのUXデザインをする上で、
重要なことが2つあります。
1つ目は、
いかにユーザー目線で物事を捉えて設計をするか。
他のビジネスでもこの"ユーザー目線"は当たり前かもしれませんが、
体験を創造していく上では、
何よりも重要なことです。
そして2つ目は、
”仲間(チーム)のことも考える”です。
少し予想外でしたか？w
web開発を全て 1人で実施することはかなり厳しいです。
UXデザインを設計するにも、
営業の方がただ”カッコいいサイト”、
”青色が好きみたい”といった
情報しかくれなかったらwebの見た目を作るだけでも厳しいですよね？
ということで、
チームにも貢献していくため
今回はweb制作の流れについて知っていきましょう。
目次
1.サイトのポリシーを決めよう
サイト制作の根底になる部分です。
・なぜサイトを作るのか？
・目的は？
・ターゲットは？
・どのような情報を発信していくのか？
といった事柄を明確にしていきます。
このサイトポリシーがもし制作途中でずれてしまったら、
また1から作成し直すといった自体になりかねません。
クライアントは、
自身が求めていることは全て把握してはおらず、
むしろ、サイトポリシーを決める際には
疎通の違いが内容にしっかりとヒアリングをし、
クライアントが本当に求めていることはなんなのかを
聞き出していきましょう。
2.コンセプト、企画書の作成
サイトの方向性が定まったら、
企画書を作成します。
企画書内容 例
・サイトの趣旨
・競合サイトを分析した結果
・デザイン、レイアウト構成、機能の提案
・キャンペーンと連携させるか
など
企画書が完成したら、
最終確認はクライアントと共に行うことが必須です！
3.仕様書、ワイヤーフレームの作成
そしてついに、
ここからサイト設計に入ります。
クライアントと共に決定した、企画書を元に
サイト設計の下書きを行います。
この下書きのことを、仕様書
もしくはワイヤーフレームと言い、
まだ下書きの段階なので紙に書くのもOK、
Excelなどのツールも使って、とにかくアウトプット。
＊クライアントとの確認は必須ではないので、
必要に応じて対応をしていきましょう。
4.デザイン作成
さあ、
デザイナーの出番がきました！！
仕様書を元にデザインを考えていきます。
ただ綺麗に見せるサイトのみならず、
クライアントが求めている役割を達成できるものにしましょう。
そして、必ず”ただ見た目の収まりがいい”でデザインはしないように。
5.コーディング、プログラミング
コーディングまではデザイナーが行うのがほとんどですが、
大規模サイトの場合はプログラマーが担当します。
正確かつ他のプログラマーが編集しやすいコードを記述し、
デバッグなどのテストも実施。
6.サーバーアップロード、運用
そして完成したサイトをサーバにアップし、
アクセス解析やコンテンツを更新していきます。
サイト運用に関しては、制作側が行う場合もありますが、
個人的にはクライアントが一番自分たちのサービスを知っているので
自分たちで運用することが当たり前にできるのが理想かなと常々感じて
います。
まとめ
webサイトの簡単な流れを説明しました。
デザイナーが着手するフローは
主に4と5のデザイン、コーディングの部分。
”クライアントの目的を見える化”するのが担当です。
チームメンバーがデザインを見て、
意図をしっかり伝えられるデザインを制作しましょう。
仮にコーディングは、他の人がする、
デザインはクライアントと一度確認する
といったこともよくあります。
ここで、説明が求められる場合
”デザインができていない”、
UXデザインなんて
科学されていないも同然です。
クライアントと打ち合わせをする人、
コーディング、プログラミングをする人が
スムーズに業務に取りかかれる成果物を作りましょう。
そうすれば、
自ずとクライアントも納得する
デザインが作れるはず。
ペルソナ。それはゲームではなく、ユーザーの顧客満足のために。。
こんにちは！
色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
UXデザインっていかに
ユーザーの立場で考えられるかがとっても重要なんです。
＊この記事参考にしてみてください。
でもそのユーザーって一体誰のことを指しているのか、、、
具体的にわからないですよね？
なぜなら、一人一人によって行動パターンが必ず合致するとは
限らないし、感じ方も違うからです。
だからこそ、多くのユーザーに満足してもらうため
ターゲット層を絞りこみ、
ターゲットの具体的なデータを元に
架空の人物像を作った上でUX設計をします。
ということで
今回はその架空の人物像”ペルソナ”について説明していきます。
目次
ペルソナとは
ペルソナってなんか聞いたことあります？(ゲームとかでw)
おそらく大多数の人はなんとなく”人”に関連するイメージを
持っているんじゃないかなと、、、
結論
ほぼほぼそのイメージであっていますw
詳しく説明すると、
ペルソナはラテン語で”人格”、”仮面”、”キャラクター”の意味をもち、
日本では、ペルソナといったら大体がマーケティング関連で使われています。
ペルソナは、上記であげたように”人格”、”キャラクター”の意味を持っている
ため、マーケティング用語でいう”ターゲット”(サービス対象者)と意味が
混同しがちになってしまいます。
簡単に、”ターゲット”と”ペルソナ”の違いを説明すると、
対象とするデータの範囲が違います。
例
ターゲット→ 性別、年齢、目的など
ペルソナ → 名前、職業、目的の動機など
例のように、
ペルソナの方がより深いところまで
データを落とし込み人物像を想定していきます。
UX設計をする際はこのペルソナを複数用意し、
デザインの構成を練っていきます。
ペルソナの作りかた
ペルソナを作成する際には、
本物の人物としてとり扱うことを前提に作成します。
例
・写真: イラストを使用せず、実物に近いものを使用
・名前: ダミーの名前(社名＋太郎とか)、実在している名前は使用しない
・年齢: 具体的な数字を使う
・性別: 男性、女性できちんと区別する。(場合によっては中性も使う、、)
・職業: 会社名、職種、肩書き
・特徴: 性格や行動思考、趣味など人物像が想像しやすいもの
・セリフ: よく言いそうな発言、人物像から連想されるキャッチコピー
こんな感じで作成し、
ターゲットに属するペルソナが快適なUXを実現するように設計していきます。
まとめ
UXデザインにおいて、
何より重要なのは妥協せずにユーザーに近い目線に
立って設計をすること。
そのために架空のユーザー”ペルソナ”を設計し、
様々な行動パターンを予測して設計していきます。
ただ単にUXデザインと聞いても実務では着手することが
デザイン以外でも多そうですが、、
全てはユーザー様のために！w
デザインをしていくのです！！
