あのUIなんだっけ?

こんにちは、今回のブログ更新担当のデジマースのはらです。私の初めての更新となります!


「UIに関してミーティングをしたとき、使いたいパーツの名称が分からず、上手く伝えることができなかった…」そんな経験、あなたにはありませんか?
と、いう事で今回は最近よく見るけれど、名称を知らない人が多いであろうUIをご紹介したいと思います。それでは…いきなりですが…問題です!

ph_01

正解は「コーチマーク」です。パッと答えられた方…さすがです!
このコーチマーク、アプリを使っていると時々見かけますよね。これは問題文に記載している通り、操作方法などをユーザーに案内するためのものです。
表示のタイミングは主にアプリ起動時で、ユーザーがこれから使用する画面の上に半透明の地をのせ、さらにその上に説明文や矢印をのせ表示します。(大抵はオーバーレイ表示と呼ばれています)

コーチマークを平たく言うと「“実際の画面を利用”し、直接ボタンの意味や操作手順などを説明する」見せ方です。もっともっと平たく言うと「使用画面上に説明を直接表示する方法」です。
この方法だったらわざわざ別画面に遷移してチュートリアルやヘルプなどを確認しなくて済みますよね!

コーチマークは初めてアプリを起動したユーザーにボタンの場所を直接伝えたい時に使用すると効果的です。(本来は説明なしでも使い方が分かるように設計されていることが理想です)
直接表示で伝えやすい反面、すぐに使って試したいユーザーからは鬱陶しく思われてしまうかもしれません。アラートもそうですが、何度もコーチマークを出すとユーザーは無視するようになってしまいます。使う前に本当にこのタイミングで使用する必要があるのか検討した上で使用しましょう。

メリットとデメリット

では、まとめとして、メリットとデメリットを紹介していきます。

ph_02

UIは使いどころを間違えると、我慢できないほど使いにくいものになってしまいます。ですので、どのUIが適切なのか慎重に協議した上で導入しましょう。

ウォークスルー

こんにちは。デザイン業務に関わっております、デジマースのコンです。

今回のテーマは「ウォークスルー」です。アプリ開発に関わったことがあれば、聞いたことがある人も多いかもしれません。
聞いたことはあるけど、それってどう言うものなの?何の意味があるの?と疑問をお持ちの方を対象にお話させて頂こうと思います。


ウォークスルーとは

ウォークスルーは、ユーザーインターフェイス(UI)・システム開発・バーチャルリアリティ(VR)・ゲーム・自動車業界など、様々な分野で使用されている言葉で、それぞれ意味が異なります。

語源は演劇から来ていて、立ち稽古やリハーサルなど、筋の流れや演者の動きを確認することを指します。
他にも、実地検証、通り抜けるなどの意味を持つ英単語でもあります。
 
ここでは「ユーザーインターフェイス(UI)」の分野で使用されてるウォークスルーについてお話します。
 
UIの手法の1つで、「アプリで出来ること」などの仕様説明を初回起動時に行うことです。
新しくダウンロードしたアプリを起動した際、画像が何枚か表示されてイラストやテキストで使い方を教えてくれた…と言った経験がある方も多いのではないでしょうか?
あれがウォークスルーです。
チュートリアルと呼ばれることもありますが、UI分野ではウォークスルーが正式名称です。

pic_161028_01

チュートリアルは、実際の操作手順などタスクごとに丁寧に説明し、ユーザーに学習してもらう為の別機能になります。

pic_161028_02

メリット・デメリット

メリットは、「サービス理解と利用促進」です。
ウォークスルーは、アプリで出来ることや操作方法など情報を段階的に見せることに適しています。初めてアプリを利用するユーザーに、操作感とそれによって得られる結果をまず理解してもらうことで、利用を促すことができます。
アプリを使うことでどんなメリットが得られるのかすぐ知ることが出来れば、ユーザーも安心して使うことが出来ますね。
開発者側としても、アプリの基本情報をすぐに伝えられるので、都度説明を挟む必要がなくなりUIの最適化に繋げられます。

pic_161028_03

デメリットは、多くのユーザーにとって、ウォークスルーは「鬱陶しい」ものでもあると言うことです。
アプリを早くいじりたくてダウンロードする時間も惜しいと言う人にとっては、やっと出来ると思った矢先に出てくるウォークスルーは、せっかく高まったテンションを下げてしまう可能性もあります。
また、初回起動時に1回説明するだけなので、詳細まで長々と説明してもユーザーが内容を覚えられないこともあります。

ウォークスルーが適切でないと、ユーザーの離脱に繋がる可能性もあるので注意しましょう。

pic_161028_04

ユーザーファーストなウォークスルー

適切なウォークスルーとは、「ユーザーファースト」なものであると考えます。
説明したいことを全部詰め込んで、ページが多すぎたり文章が長すぎてしまったり、開発側の気持ちを押し付けてはいけません。
「文章は簡潔に」「最低限伝えたいことだけ」伝えることを目的に作るといいと思います。

ウォークスルーの内容で多いのは、メイン機能の簡単な説明です。目玉の機能でない限り、細かい説明は可能な限り省略しています。全体の長さは3~5枚が多いです。

また、すぐにアプリを使いたいユーザーの為にスキップボタンを設置したり、前後のページは自由に行き来できるようにするなど、繰り返し確認できるようにすることも効果的です。

pic_161028_05

注意したいのが、緊急を要するシーンで使われるアプリや、使い方が周知の機能であれば、そもそもウォークスルーがない方が適切な場合もあります。
そういう時は、思い切ってウォークスルーはなくすと言う判断も必要です。この機能は絶対に必要なものではありません。

アプリを使ってくれる人にとって何が本当に良いことなのか、ユーザーファーストを意識して作ってみてください。

最後に

今回はウォークスルーの基礎的な部分についてお話しさせて頂きましたが、いかがだったでしょうか。

ウォークスルーって聞いたことはあるけど具体的にどう言う機能なのかわからなかった、どういう風に作ればいいか全然わからなかった、と言う方の疑問が解消されていたら幸いです。

マテリアルデザイン

こんにちはもしくはこんばんは!そして初めまして。
デザイン業務に関わっております、デジマースのスガです。

さっそくではありますが「マテリアルデザイン」というものをご存知でしょうか?
また、言葉だけは聞いたことがある方も多いのではないでしょうか?

私自身も言葉だけは聞いたことは有りました。
ですが実際に足を踏み入れてみると内容が深く、
すぐに全てを理解するのは難しく感じました。

ここでは全部を理解せずとも、デザイナーでなくとも何となく分かる
をベースに「マテリアルデザイン」に触れていきたいと思います。


マテリアルデザインとは?

まず「マテリアルデザイン」とは2014年7月にGoogleが発表した新たなデザインのガイドラインです。
このガイドラインによってアプリの外観について一連のルールが設定されました。

※「マテリアルデザイン」をそのまま直訳すると「物質的デザイン」という意味になります。

マテリアルデザインの目的

スマートフォンやタブレット、テレビ、メガネ、腕時計などのデバイスで統一感のあるデザインを取り入れることで操作性も統一され、デバイスが変わってもユーザーが使いやすいUIを表現できるそう。

フラットデザインからマテリアルデザインへ

まず念のためフラットデザインとは、デザインにおいて余分な要素を無くし、
立体的な加工等の装飾を抑えることでシンプルに分かりやすくレイアウトやカラー構成で形成される平面的なデザインのことを指します。

gazou1

★特徴として★
・デザインの装飾部分を排除する事でシンプルに特化しページ内のコンテンツを惹きただせます。
・ページ内の要素によっては適さない場合もあります。
・マルチデバイスの対応と共に普及。

フラットデザインには今までにない新たなデザイン性を見出し
メリットも有る反面、デメリットも目立つようになってきました。

デザインの装飾部分を排除したことで、ページの見出しや帯、
遷移できるボタンの区別などがし辛くなりました。

そこで、フラットデザインに「光」や「影」、「奥行き」の触感的表現を含ませたものが「マテリアルデザイン」です。

「影」要素

マテリアルデザインでは影の要素が大事なものになります。
フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念があります。
gazou2
重ねるパーツの枚数によって高さ(上から見た奥行き感)を考慮し、影の表現を変えることでユーザーに「触れられるもの」ということを直感的に認識できるようにします。

カラー設定

マテリアルデザインでは、1つのページ内で色を多様しません。
基本的には下記のような4色で構成をします。

gazou3

・PRIMARY COLOR      :メインカラー
・DARK PRIMARY COLOR    :メインカラーと同系色
・ACCENT COLOR       :メインカラーと対比する色
・WINDOW BACKGROUND COLOR :無彩色、メインカラーと同系色

こちらの4色での配色はあくまでも一例ですので、
これらを逸脱してもマテリアルデザインでなくなるわけではありません。

最後に

気づかずに見ていたWEBサイトが実はマテリアルデザインがされているものであったということがあるかもしれません。
少しでも「これは、マテリアルデザインかもしれない」と興味を持って頂ければ幸いです。

私も勉強中の身ですが引き続き、全部を理解せずとも、
デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!