スマホ向け抽象的デザイン

モバイル向け画像を製作する作業は、
画面解像度の低い携帯電話向けに作っていた時代から、高解像度のスマートフォン向けにシフトしており、非常に多くの情報を扱う必要があります。

240pixel → 320pixel → 640pixel → フルHD/2K → 4K

結果、
レイアウトや素材を製作する場合の情報選択肢/余地が増え、判断に時間がかかり、細部まで作りこみが出来てしまう為、終わりが見えなくなる作業を生む可能性が高まり、
また、高まった表現力は「具体性」「趣向」の判断を生む状況にも及んできております。

…今回はそんな予期せぬセグメントを避ける抽象的な表現情報量との適切な向き合い方を考えてみました。


制約の中での可能性

日本人は制約を受けた状況下での、アイデアと効率化を得意としているといわれています。
理由として、限られた島国国土の中で生活をしてきた影響もあるのでしょうか。

1980、90年代の量産性に長けたアニメフォーマットの確率や、家庭用ゲーム機ハードとソフト面での成功、
そして、携帯電話とハード/ソフトの開発においても世界の指標たる結果を残してきた状況は、
いずれも、「黎明期から成長期へ向かう中でのテクノロジーが後追いする制限下」であったといえます。

しかし、
逆の視点から見てみると、
日本人は可能性溢れる選択肢状況下では目的を見失い、
多彩な表現力の状況下でも方向性を見失いがちな思考を持っているとも考えられます。

話を「表現」「UI」に絞ってみると、
日本人は、シンプルで捉えやすいUIに長けている可能性が考えられるのではないでしょうか(強引ですが)。


シンプルで捉えやすい表現とは?

わかりやすさの条件は「単純構造」で「敷居が低い」でしょうか。

グラフィックデザインでは標識やマークなど「アイコン化」されたものがその代表ですが、
そのわかりやすさを追求して結果が、私たちが良く見るシンプルなデザインになっています。

いずれのマークも初見の記憶がないくらい一般的に生活に浸透しており、
作りこんだ表現にする必要がないことを理解いただけるのではないでしょうか。


セグメントしない表現とは?

人を選ばない(セグメントしない)表現とは、狭義ではなく広義で抽象的であることです。
作りこみ、具体的にすることが目的である以外はシンプルな表現で進めることのメリットが多いのではないでしょうか。
例えば、

・運用性/更新性の向上
・容量削減
・表示速度改善

でしょうか。

ピンク色の画像は描き込みが多く具体的で、見る人にカテゴリ(犬/車)を越えて詳細(犬種/車種)まで想像させています。


まとめ

情報設計に「更新」は付き物です。
運用パフォーマンスを考えた場合、
グラフィックデザインはトータルコストを抑えられる素材を選ぶ必然があり、
アーティスティックなグラフィックであれば、
芸術品として「想い」を込める必要があります。

限界の作りこみが価値に大きな影響を与えるコンテンツはありますので、
都度案件の「目的と訴求対象」を意識して、
抽象的で適切な情報設計を運用してみるメリットは十分あるのではないでしょうか。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

2016-2017 ブログまとめテスト

こんにちは、はらです。私の年内最後の更新となります。
今回は2016-2017年のデジマースブログの中からUIに関してクイズ形式でいくつか出題したいと思います。
どの問題もデジマースブログを毎週チェックしている方ならわかるはずです!?
※解答はページ下部に記載しています。
 


 
(15点)

1)カテゴリ検索時に、カテゴリ内の検索数を表示する機能をなんと呼びますか?

解答・解説をすぐ見る>

(各5点)
コントロール系部品の名称についてお答えください

解答・解説をすぐ見る>

(各5点)
コントロール系部品の名称についてお答えください

解答・解説をすぐ見る>

(20点)

1)図のような実際の画面を利用し、直接ボタンの意味や操作手順などを説明する見せ方をなんと呼びますか?

解答・解説をすぐ見る>

(20点)

1)UIの手法の1つで、仕様説明を初回起動時に行うことをなんと呼びますか?

解答・解説をすぐ見る>

(5点)

1)図のような複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWebコンポーネントの事をなんと呼びますか?

解答・解説をすぐ見る>

いかがでしたが?難しい問題が多かったと思いますので、点数が低くても気にする必要はありません。これらの情報は知っておくとミーティングがスムーズに進むのでUIに関わる方は知っておいて損ではないと思います。ではまた来年に…はらでした。


解答はコチラ

【1】15点
1)ファセットカウント

【2】各5点
1)セグメンテッドコントロール
2)スライダ
3)アクティビティインジケータ
4)ピッカー

【3】各5点
1)ステッパー
2)ページコントロール
3)ラジオボタン
4)スイッチ

【4】20点
1)コーチマーク

【5】20点
1)ウォークスルー

【6】5点
1)カルーセル

押せる画像・ボタンについて考えてみる

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼押せる画像・ボタン①

サイト内で画像やボタンを押す際に分かり辛くて、踏みとどまったり、探したりしたことはありませんか?
さて今回はそんな画像やボタンをどうしたらユーザーへ認識してもらいやすくなるか、改めて考えていきたいと思います。

上記のワンちゃんの画像をみて「押せる」と直感的に感じた方は少ないのではないでしょうか。
上記の画像は見出しの写真かと思いつつも、さりげなく押してみたら先へ進む事ができたというパターンになりやすい一例です。

とにかく押せるかどうかはちょっと分かり辛いですね。
それでは、この画像をどうしたら「押せる」と直感的に認識、感じることができるのでしょうか?考えていきたいと思います。

画面横いっぱいに画像を置いてしまっている為、上下にある帯(※コンテンツ帯)と同じく押せない領域と見えてしまいがちです。

■押せない画像との差別化(左右のスペース)
・押せるボタンは画面横いっぱいまで使用せず画像の左右のスペースをあけるとべたっとした状態から浮き出てくるので差別化がしやすく、この場合コンテンツ帯との押せる・押せないメリハリもついて分かりやすい。

■一目で押せると分かる様にする。
・?マークで遷移できることを視覚化。「こちら」などのダイレクトな文言でも可。
・押せるものは角丸で表現する等。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼押せる画像・ボタン②

サイト上部右上にもっと見るボタンが有るのがお分かりでしょうか。
文字が小さく見辛い点とそもそも帯上でのテキストの羅列ですので、「押せる」と認識するのに少々時間がかかってしまう気がします。
サイト運営側で意図してこの表現または優先度にしている場合を除き、このままですとユーザーが見落とす可能性が高くなってしまいますよね。
それでは見落としが無い様にするにはどうしたらよいか考えていきたいと思います。

・帯上にあるテキストの羅列ですので、「押せる」と認識がし辛い。
・文字が小さく視認性が悪い。

■視認性アップ(図A)
・単純に文字の視認性を上げて、見やすくする。
右側のの帯タイトルより大きくなると不自然になってしまうので注意が必要です。

■見やすく図形化させる(図B)
・四角いボタンにすることで「押せる」イメージをわきやすくさせる。

■目線の流れで見える位置に移動(図C)
・もっと見るを帯状ではなく、ダウンロードボタンの下などのコンテンツ内容内に置くことで自然と目に入る訴求にする。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼押せる画像・ボタン③

上記の画像、押せる画像なのですが一見「押せる」という認識よりも押せない画像に見えてしまいます。

押せるようなイメージがないから、といってしまえばそれまでなのですがそれ以上に注意しなければならないことがあります。
早速ですが見ていきましょう。

・(一応左右に空白スペースがあり帯との差別化はできているが)画像がファーストビューに収まりきれておらずスクロールしないと全体像がみえない。
・押せる画像は大きすぎると押せる=ボタンの認識が弱くなりやすい。

■画像を適度なサイズにする
・押せる画像を最低限ファーストビューに収まる様、調整をする。
一目で押せると判断できるとなるとこのサイズ感でも少々大きめなので、ファーストビューの2/3以下にまとめると良いと思います。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼最後に

デザイン案を考える際に押せるものの表現をどの様なものにするか等も内容と同じくらい細かく設定するとユーザーに
伝わりやすいサイトになるのではないでしょうか。
ex)角丸にする、左右に余白を置く、遷移マークを入れる等

遷移させる画像やボタン等が分かり辛く、それらの箇所で回遊が停滞してしまうのは致命的といっても過言ではございません。
ユーザーがスムーズに回遊できるよう改めて遷移させる画像やボタンの見直しをしてみるのも良いかもしれません。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

 

UIと配色


配色とは、2色以上の色を組み合わせ、配置および構成をする事です。
UIデザインでは、どのような配色を行うのかによって、使用感やユーザーに与える印象が大きく変化します。といってもUIデザインに限りませんが…。
色の扱い方はとても奥が深く、国や地域によって色に対するイメージは変わります。また、組み合わせ方は数え切れないため一言で配色について語りきる事はできません。一言でなくとも語りきれないと思います。
今回はよりカテゴリを絞り、色は色でもUIデザインにおける色(配色)のポイントについていくつかご紹介致します。


70% 25% 5%の配色

UIに使用する色数の目安は3色です。3色以上にする事が間違いと言うわけではありませんが、色数を増やしすぎると、どこを強調しているのか、どこに触れる事ができるのかなどが伝わりにくくなり、情報が整理されていないような見づらいUIになってしまいます。
しかし、色数を押さえたからといって適切に配色ができているわけではありません、使用する量も重要になります。UIにおいて実際に3色をどのようにして選び、使用するのかということは「70・25・5の法則」を意識すると選びやすくなります。70・25・5の配色はベースカラー70%、メインカラー25%、アクセントカラー5%にする配色法です。ちなみにこの「70・25・5」の考え方はwebデザインでは基本とされている配色方法です。

70% ベースカラー:ベースカラーは主に背景に使用される色であり、一番使用される色となります。多くのアプリケーション・WEBでは白が使用されています。
基本的には原色などの彩度の高い色は使用しません。使用すると文字が読みにくくなってしまう事があるためです。そのためベースカラーは控えめな色にする事が望ましいです。料理で言うところのお皿です。ピンク色のお皿に料理が盛られて出てきたら、落ち着いて食べる事ができないですよね…!?

25% メインカラー:メインカラーはサービスのイメージや方向性に沿った色を使用します。使用するのは25%で70%のベースカラーほどではありませんが、ここで使用する色によってユーザーの第一印象が変化します。一般的にはサービスのイメージカラーや、コーポレートカラーが使用されています。

5% アクセント(サブ)カラー:ボタンや通知・警告などユーザーに特別な何かがあると感じさせるために使用します。また、メリハリを出し全体を引き締める効果もあります。メインカラーと補色の関係にある色と組み合わせるとアクセントとしての役割を高めることができます。
アプリケーションの配色を検討していると、3色ではまとめ切れない箇所が出ててくると思います。その場合は3色以上になりますがアクセントカラーを追加してみてください。アクセントカラーは機能として追加されているのであれば、増えても問題ありません。ただ、アクセントカラーを使用しすぎてしまうと、アクセントとしての効果が薄れるばかりか、安っぽい質の悪いUIに見えてしまいますので使用する量に気を付けてください。

※)補色
色相環と呼ばれる色の順番と関係を円にしたものにおいて、正反対に位置する色の組み合わせ。

文字に「黒」は使わない!?

皆さんがWEBサイトで「黒」だと思っている文字の色は、見た目は黒でも実際には「グレー」が使用されている可能性があります。

●吾輩は猫である  ●吾輩は猫である

左の文字はディスプレイ上で最大の黒(#000000)です。そして右はグレー(#323232)です。
どちらも比較して出さなければ「黒」と認識するはずです。では、どちらも「黒」として扱う場合どちらの黒をオススメするのか…。それは右の黒(グレー)です。
その理由はディスプレイ上で再現される最大の黒(#000000)はとても強いからです。
ベースカラーが白の場合に文字を黒(#000000)にするとコントラストが高い状態となります。そのため他の要素よりも主張が強くなり、文字を読む際の疲れの原因の一つになってしまいます。また、文字の主張が強いためレイアウトの優先順位に影響を与える可能性があります。以上の事から黒ではなくグレーの使用をオススメします。
ですが黒(#000000)を使用することは間違いではありません。レイアウトの表現上必要になることもあります。ただ、使用する際にはグレーにする事も検討してみてください、少し黒を押さえるだけでも印象は変わります。


配色によってサービスのイメージは大きく変わります。目的に合った色を選別し、適切な配分で使用する事が大切です。
配色にはこうした方が良いという基本は存在しますが、絶対にこうしなければいけないというものではありません。絶対にこうだと言う正解もありません。しかし、基本から外れると扱うことは難しく、それ相応の経験と技術が必要になります。
 

ホワイトスペース【余白は怖くない!】

こんにちは!
今回のテーマは「ホワイトスペース【余白は怖くない!】」です。
ホワイトスペースとは何なのか、どのような時に使うのかなど、アプリ開発の観点から説明していきたいと思います。

ディレクターや企画職などノンデザイナーの方、これからデザインを勉強する方向けの内容になっています。


ホワイトスペースとは

ホワイトスペースとは、簡単に言うと「余白」です。
アプリで言うと、画面の両端や上下に設けられている空間、要素と要素の間など、何もない空間を指します。

画像と画像の間だけでなく、字間と行間などの余白もホワイトスペースとなります。

“ホワイト”スペースと言っていますが、白い余白だけに限定されている訳ではありません。無彩色・有彩色・柄・写真でも、「余白」があればそこはホワイトスペースとなります。


なぜホワイトスペースが必要なのか

ホワイトスペースは視覚的な表現をする上で必ず必要な物です。
なぜ必要なのかと言うと、ホワイトスペースがあることで「見やすく」「わかりやすく」「使いやすく」なるからです。

1番大事なことは、ホワイトスペースを“余った場所”ではなく、重要なレイアウトの一部として捉えることです。

余白があると柄や要素を入れて隙間を埋めたくなったり、余白がありすぎると手抜きに見えるのでは…と不安に思う余白恐怖症の人もいるかもしれません。
ですが、余白がないと視認性が悪くなったり、そのページに設定した意味が薄れてしまったり、目的を果たせなくなってしまうなどデメリットが出てきてしまいます。


見やすさ

デザイン制作はもちろん、パワポでの資料作成やテキストだけの表現でも、ホワイトスペースのレイアウトは大切です。
ギチギチに画像や文字が詰まっているより、見やすく読みやすくなりますよね。みなさんも日常、自然と行っているのではないでしょうか。

アプリ画面で言うと、読んだり押したりする要素がある画面の両端には、必ずホワイトスペースを設けましょう。
5%ほどホワイトスペースがあれば十分視認性と押しやすさが保てます。
上下のホワイトスペースについては状況にもよる為一概に言えませんが、「目立たせたいものは多めにホワイトスペースを設ける」「優先度や項目ごとにホワイトスペースのルールを統一する」ことに注意するだけで見やすさが変わってくるかと思います。


わかりやすさ

十分なホワイトペースを設けることで、その中にある要素が強調され、ユーザーが目的を達成しやすくなります。
注目して欲しい要素や、優先度の高い要素を強調したい時に効果的です。


使いやすさ

ユーザーにとって使いやすいサイトにする為に、ホワイトスペースは必須です。
例えば押せる要素があったとして、それが複数並んでいた場合、ホワイトスペースを設けることで押しやすくなります。

また、ユーザーが何か探し物をしていた時に見つけやすくなります。


おわりに

いかがでしたでしょうか?
ホワイトスペースはただの余白ではなく、立派なレイアウトの1つです。
今までは何気なくテキストを改行していた、画像を配置していた、という方は、ぜひこれを期にホワイトスペースを意識してみて下さい。
今まで以上に良いデザイン、資料作成が出来るかと思います!

それではまた!デジマースのコンでした。

サイト内で迷子にさせないために

サイトに遊びに行ったときに迷子になったことはありませんか?
迷子になってしまうとユーザー本人もせっかく訪問したのに目的が達成し辛くなり、しまいにはサイトを離れてしまいます。
提供側もせっかく訪問してくれたユーザーを離脱させてしまう事はとても勿体ないことです。
では、どういった状況でそのような事が生まれてしまうのでしょうか、改めて考えていきたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼訴求元と訴求先の差異

サイトにアクセスしてきたのは良いが訴求元の内容が訴求サイトのどこを探しても見つからない。


ようやく見つけたと思ったら、とても分かり辛い所にありました。

訴求元(例えば広告など)から訪問しているということは、この例の場合「壁紙が1枚もらえる」と言うインセンティブに惹かれてる可能性が高いです。
そのため、希望のものが見つからなければすぐに離脱に繋がってしまい、サイト内の回遊も全く望めなくなってしまいます。

例えばもし出先で場所が分からない、大きな駅構内でなかなか目的地にたどり着かない等の迷子の様な状態のとき、人は知らずのストレスをため込んでいます。
それではどうすればいいのでしょうか?サイト側とユーザー側を考慮しつつ考えてみたいと思います。


訴求元の内容を訴求先で認識しやすく、また整合性をしっかり取ることがユーザーを迷子にさせないことへ繋がっていきます。
結果的に離脱率の減少にもつながるかもしれません。

ただし、サイトによっては掲載する内容の順序や見せ方などをUIデザインを考える際に、訴求元の設置場所を決めていたり、優先度が例えば低く設定されている等、サイト運営側の意図がありますので、上記の例が一概にこうであるとは言えない場合もございます。

▼必要箇所の戻るボタン

サイト回遊中に戻るためのボタンが必要箇所に置かれておらず、TOPや、コンテンツTOPなど等に戻れなくなった事はありませんか?
人によっては端末の矢印を使用する方もいるとは思いますが、上手く挙動しない場合もあるかもしれませんので、サイト内の戻るボタンは用意されている必要はあるでしょう。

サイトによっては、戻るボタンをページ下部に置かず上部のヘッダー、下部のフッターに常駐させていたり、長いページの場合は上部へ戻るボタンが設置されていたりと様々です。
ユーザーがサイトを快適に使える様、サイト内をしっかり行き来できる環境をUIデザインを考える際に並行して考える必要がありますね。

▼現在地の明記

入力フォームやコンテンツの深層まで潜っていると自分がどこにいるのか認識し辛い場合がありますよね。
自分がどこにいるのかわからないとき知らずのうちにストレスがたまってしまうものです。

ユーザーに何か行動を起こさせる際は、予め何を行う必要があるのかしっかりと明記しておくことでユーザーの混乱も防ぐことができます。

▼最後に

サイトの提供内容が優良であってもユーザーは1度でも迷子になると「このサイトは分かり辛い」と印象を覚えてしまうかもしれません。
サイト内のコンテンツ毎の見せ方、内容によってはメリハリをつけるなど、ユーザーが迷わない環境が求められます。
せっかく訪問してくれたユーザー、せっかく作ったサイト、互いに良い方向に向かえる様、UIデザインを含め細かな部分まで目を配る必要がありますね。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。
またお会いしましょう!

ユーザーを混乱させないUIとは

アプリを使用するとき、皆さんは操作に関してストレスなく使用できていますか?あえて説明を聞かなくても、「これは押せる」「これを押せば戻る」など理解できていますか?
普段アプリを使用している方なら、チュートリアルを確認したり説明を聞かずとも「これは押せるな」と、“ある程度予想ができ”スムーズな操作ができるはずです。
実はこの“ある程度予想できる”というのはユーザーの使用経験が豊富というだけではなく“ある程度予想できる”ように設計されているからなのです。
UIでユーザーが混乱してしまう場面は様々です。目的の機能が見つからない、操作方法がわからない、表示されているアイコンの意味がわからないなど、書き出したらキリがないほどあります。
今回は色使い、エフェクト、位置でユーザーを混乱させないための方法をご紹介いたします。

ユーザーを混乱させないためには…

UIでユーザーを混乱させないためには、デザインのルールを決めサービス内で統一する事が必要です。UIデザインでは、色使い、エフェクト、レイアウトなどサービスを通して統一させる必要があります。

UIではタップできる色・強調する色などを統一する必要があります。例えばユーザーが最初に目にするアプリTOP画面でテキストリンクが青だった場合、ユーザーは「青が押せる」と認識します。しかしTOP以外のページでテキストリンクが赤だった場合、ユーザーは「押せるのか?」「強調しているだけなのか?」「押せるようだが特別な意味があるのだろうか?」と、青から赤に変わるだけでこれからの動作やこの後に起きる出来事について余計なイメージが広がり混乱してしまいます。また、見落としてしまうかもしれません。少し大げさな言い方をしましたが、たとえ混乱が一瞬だとしても、これをページ遷移する度に繰り返すとストレスになります。

エフェクト

TOPで押したボタンは立体感のない角丸ボタンだったのに、別ページでは立体的だった。このように、ページ毎に知らない形のボタンに出会うとユーザーは遷移前のページとは関係のないページに来てしまったような違和感を覚えてしまいます。
エフェクトなどのあしらいは統一することが望ましいです。

位置、構成

目的は同じでもページ毎に構成が違う、そのような場合もユーザーは混乱します。

アイコンや操作方法を
OSのガイドラインや定番のものにそろえる

こちらはとても重要なことです、ユーザーはOSの操作に慣れています。ですので見慣れたOSと同じアイコンや操作法でUIを設計すれば当然利用しやすくなります。アプリを設計する際はまず、OSごとに用意されているデザインガイドラインを確認する事をオススメします。
また、アイコンや検索ボックスなどを頻繁に利用されている定番のデザインにすることで、ユーザーがアイコンの意味や操作法を調べる手間が無くなるめ、利用しやすくなります。

_

同じ位置・同じサイズ・同じ色で作られていれば、ページが変わろうともユーザーはこれまでの経験からすぐに意味を理解します。
UIは皆さんの意識しないところで使いやすくなるよう様々な気配りがされています。また、レイアウトが統一されているほうが作りやすいという製作者側のメリットもあります。
他の表現については、機会があればまたご紹介いたします。では。

簡単!ペーパープロトタイピング

こんにちは!
今回のテーマは「簡単!ペーパープロトタイピング」です。
ペーパープロトタイピングとは何なのか、どうやれば良いのかなどを、アプリ開発の観点から説明していきたいと思います。

ディレクターや企画職など、これからペーパープロトタイピングが出来るようになりたい!と言う非デザイナーの方向けの内容になっています。
ぺーパープロトタイピングは誰でも簡単に出来る上、仕事の効率化に有効だったりとメリットが沢山ありますので、ぜひ試してみて下さいね。


ペーパープロトタイピングとは

ペーパープロトタイピングとは、簡単に言うと「紙で試作すること」です。
「こんな感じにしたい」と言うアプリ画面の案を手描きし、完成した時のイメージを視覚化します。
書き出したイメージを元に、遷移や画面の要素を検証し、アプリが使いやすいかの確認を行います。


ペーパープロトタイピングをやるべき3つの理由

ペーパープロトタイピングですが、絶対にやらなければいけない物ではありません。
ですが、これを行うことで得られるメリットは沢山あります。

①素早く作成・修正が出来る
紙とペンさえあれば誰でもすぐ作ることが出来ます。難しいソフトの技術や知識は必要ありません。
イメージを描いては直しを繰り返し、スピード感を持って検証を行う事が出来ます。

「自分は絵が下手だから…」と言う方も大丈夫です!丸や四角などの簡単な図形と文字さえ描ければ出来ます!
遷移や画面の要素の検証に、見た目のクオリティは重要ではありません。何度も検証を行うことが大切ですので、素早く描いたり描き直したりできるペーパープロトタイピングが適しています。

Adobeソフトやパワーポイントを駆使して綺麗に作る必要はありません。
むしろ作成に時間が掛かってしまうので、この段階ではソフトに頼らない方が良いです。
綺麗な線や色合いなど見た目のクオリティが気になって、そこを整えるのに時間が掛かってしまうからです。ここで時間を掛けるべきなのは、描き終わった後の「検証」です。
それに、いくら綺麗に作っても、後々「やっぱりこうしたい」と内外から修正点が沢山出てきます。
ガチガチに作り込むと修正がし辛かったり、大幅な修正になるとそれまでに掛けてきた時間が無駄になってしまいますので、手描きがオススメです。

 

②コミュニケーションツールとして最適
描き出したイメージはすぐプロジェクトメンバーに確認してもらいましょう。そうすることで、メンバー全員が共通のサービスビジョンを持つことに役立ちます。
言葉だけの説明ではイメージすることが難しくても、図として視覚化されている事で認識のズレが軽減されるからです。
また、具体的なイメージを見ることで問題点にも気が付きやすくなり、その場で皆の意見を聞きながらすぐ描き直すことが出来ます。

「思っていたのと実際に見るのとでは違った」と言う、修正の連鎖を軽減することも出来ます。

③後々の手戻りを防ぐ
後々の工程、デザインカンプが完成した、テストアプリが出来た、と言う段階で大きな手戻りが発生しないように防止する為でもあります。
上記の段階まで来て「使いづらいから直したい」と問題が発覚し、解決するには大幅に修正する必要がある…となると、それまでに掛けてきた時間が無駄になるばかりか、更に時間とコストが掛かります。
修正する為に必要なだけ期日や予算の調整が出来れば良いのですが、なかなか難しい場合も多いと思います。
「このアプリは使いやすいか」「要素が足りていて辻褄があっているか」など根本的な問題を確認する為に、ペーパープロトタイピングを行ってください。


ペーパープロトタイピングっていつやるの?

ペーパープロトタイピングを行うタイミングですが、これはそれぞれの開発状況によって異なるかと思います。
今回は例として、「画面遷移図/サイトツリーが完成した後に、ペーパープロトタイピングを行った場合」を想定して進めたいと思います。
この段階でペーパープロトタイピングを行う目的としては、遷移図の整合性の最終確認を行う為です。

絶対にこのタイミングでペーパープロトタイピングをしなければいけない!と言う物ではなく、あくまで弊社の場合はと言う一例なので参考程度に見て下さいね。

「画面遷移図ってそもそもどのタイミングで必要なの?」と言う方は、こちらに詳しく載っていますので、ぜひ読んでみて下さい!


ペーパープロトタイピングに必要な物

ペーパープロトタイピングに必要な物は下記の通りです。

■紙
■ペン
■スマホ

たったこれだけあれば出来てしまいます!
場合によって描く場所は「ホワイトボード」や「ポストイット」などでも良いです。


ペーパープロトタイピングのやり方

①スマホの画面を描く
紙に縦長の長方形を描きましょう。
これはスマホの画面を表しています。手描きでザックリ描いてしまって大丈夫です。

線がぶれるのがどうしても気になる、と言う方は、パワポなどでテンプレートだけ作ってしまっても大丈夫です。
テンプレートは紙に印刷して使ってくださいね。

 


②要素を描く
ヘッダーやフッター、ボタンや画像など、必要な要素をどんどん描いていきましょう。

ここのポイントは「作り込み過ぎないこと」です。
画像は斜線を囲んで表現したり、重要なタイトル以外のテキストは省略して線で表現したり、アイコンは簡素な物や仮の図形を配置する、など。
また、色を付けたり装飾をする必要もありません。ペーパープロトタイピングのメリットである作成スピードが損なわれてしまうからです。

その画面にどんな要素があるのか伝われば十分ですので、細部に時間が掛かり過ぎないようにすることが大切です。


③遷移を確認する
「アプリのTOP画面からどこへ遷移するのか」など、遷移の確認をしましょう。
言葉だけでなく、遷移する順に隣合わせにしたり、線で繋げたり、画面ごとに切り分けて並べたりと、見て伝わるようにするとわかりやすいです。

 


④実機で確認する

紙の上で全体像が掴めたら、実際にスマホで見るとどのようになるか実機確認を行いましょう。
紙に描いたイメージをスマホで撮影して、画像をプロトタイピングアプリ(Prott、Marvel、POPなど)に取り込みましょう。
※プロトタイピングアプリとは、静的な画像に「ボタンを押して遷移する」など動的な効果を付けることが出来るアプリです。
実際にアプリを見る時と同じような画面比率・動作を確認出来るので、より現実的な検証をすることが可能です。

 

紙の上でどんなに考え尽くしても、いざ実機で確認すると思っていたのと違った…なんてことはよく起こります。
「ボタンはこの位置にあるのが適切か」「遷移は適切か」など、実機で検証を行い、ペーパープロトタイピングの段階で問題点を修正出来るようにしましょう。


おわりに

いかがでしたでしょうか?
ペーパープロトタイピングのやり方をまとめてみましたが、思ったより簡単だったのではないでしょうか!
やり方事体は簡単でも、アプリによっては必要な画面要素が多く、物理的に数が多くて大変…と言うのはあるかと思いますが…
ですが、ペーパープロトタイピングをやるのとやらないのとでは、後々の工程のスムーズさに差異が出てきます。

興味を持った方は、ぜひ試してみて下さい!
それではまた!デジマースのコンでした。

注意が必要なカルーセルパネルとユーザビリティーのポイント

カルーセルパネルとは?

カルーセル[carousel]パネルとは、
複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWeb/UIコンポーネントです。


スマートフォンが登場した黎明期から、
カルーセルパネルはナレッジと予見が必要な敷居の高い機能であった為、PC/スマフォでの使用には賛否がありました。
特に最終スライドまでの認知は、構造上少なくなっていく傾向は止むを得ません。

実装は「jQuery」で、Webデザイナーでも簡単に組み込めることから広く利用されておりますが、
理想のカルーセルパネルソースに出会えず、適切に運用されていない状況もあるのではないでしょうか。

今回はそんなカルーセルパネルを有効活用するためのポイントを紹介致します。


使いやすさのポイント

単純に単体静止パネルとして素通りされてしまうのが一番の問題なので、気付きのアピールが必要です。

1. ちょい見せ

「単体パネル」ではなく「複数パネル」であることを認識させる表現にする。

2. 手動+時間での切り替え

停止したままではなく、一定時間経過で自動的に動かすことで複数枚を認識させる

3. 全体数の表示

全スライド数を認識させる

4. ポジション

現在のスライドの表示順番を認識させる

5. ループ

最終スライドから先頭へ戻る(ループする)ことを視覚的に伝え、最初のスライドに手早く戻れることを認識させる。

以上に上げたポイントが一つでも十分でない場合、格納されたスライドの全てを認識させるのは難しくなります。


カルーセルパネルの動きをプロトタイピング

「jQuery」などオープンソースから理想の表現が出来ているカルーセルパネルが見つかれば話は終わってしまいますが、探すにも時間がかかるのではないでしょうか。

それでは、カルーセルパネルの内容や動きが確認できるプロトタイピングして具現化してみます。

デザインも出来て、JavaScriptが出来るWebデザイナーなら問題ないのですが、壁がとても高いと思われます。
そんなプログラムに精通していないデザイナーでも作れるツールが、過去の記事紹介している「Adobe Animate CC」です。

グラフィックUIの操作で作れるためデザイナーに相性が良く、
ある程度のJavaScript命令文を項目を選択するだけで記述出来、厳密に構文を覚える必要がありません。
「再生」「停止」「任意のポイントに戻る」「条件分岐」「繰り返し」
以上を組み合わせるだけでも、
プログラマーやプロジェクトメンバーに動きを確認してもらえるプロトタイプを作ることが出来ます。


早速作る

まずは基本的なレイアウトに「ちょい見せ」搭載したプロトタイプです。
クリックでしか動作が出来ておりませんが、回転してグルグルと回るカルーセルパネル本来の動きが確認できるのではないでしょうか。


プロトタイプならではのバリエーション

追加で2種類のデザイン案も作ってみました。

動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。


最後に

いかがでしたでしょうか。
オペレーションソフトやブラウザ速度の向上した現在では、多くの表現がWeb上で可能となっております。
Webデザイナーに求められるスキルも必然と増え、インタラクティブな動的コンテンツが求められてきていると感じています。

それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。

UIとアニメーションの関係②

必要最低限の機能は揃っていてもアニメーションが一つもないアプリケーションがあった場合、機能面では問題がなくともUI/UX的には優れているとは言えません。
もしそのようなアニメーションのないアプリが存在した場合、あらゆる動作は唐突で、自分が現在どのページにいるのか?どのページから何を呼び出したのか?など、全ての動作にストレスが生じます。UIにアニメーションを取り入れる事で表示に順序が生まれ、目で追うことのできない唐突な動きを削ることができます。このようにアニメーションはユーザーとOSの対話をスムーズに行うための重要な役割を担っています。

ここまでは前回の記事でご説明した通りですが、アニメーションの役割はOSとの対話をスムーズにするだけではありません。アニメーションを使用して楽しさを演出することで印象に残るUXにする事が可能です。
例えばSNSでハートの形をしたグレーのいいねボタンがあった場合「押した直後にピンク色に切り替わる」場合と「押した直後にハートの周りにキラキラした光が浮かびハートが動きながらピンク色に切り替わる」場合では、後者の方が印象に残りやすくなります。コレはいいねと言うポジティブな動作に合わせたアニメーションだからです。大げさに言うと動作と感情に合わせたアニメーションだからです。
また、アニメーションはユーザーの楽しいという体験に影響を与えるだけではなく、ネガティブな動作のストレスを和らげたり、ポジティブな印象に変えることができます。視覚的に楽しければ、ユーザーは印象深く質の高いUI/UXと判断するでしょう。

今回のブログでは、ユーザーの目線や意識を惹きつけたり、体験に影響するアニメーションをいくつかご紹介致します。

1. 反応を示すアニメーション

SNSやECサイトで見かける「いいね」や「お気に入り」ボタン。押した際にアニメーションがあると、押した後の反応が伝わりやすくなるだけではなく、ポジティブな感情とリンクし、楽しい印象を与える事ができます。

2. 状態の切り替えのアニメーション

こちらは機内モードに変更した際に見られるアニメーションです。ONに変更した際には飛行機が飛んでくる。OFFの場合は飛行機が飛んでいく。動きは小さいですが、このような細部への配慮にも、ユーザは楽しさやサービスの質の高さを感じます。

3. 強調のアニメーション

使用して欲しい機能がある場合や、通知がきている場合などにアニメーションを使用することで要素を目立たせることができます。堅苦しい説明がある場合などに使用すると、堅苦しさを和らげることができます。

4. アニメーションの使いすぎに注意

アニメーションは小さくても動いているため目立ちます。そのためアニメーションを多用すると目線が散り、逆にどの要素も目立たなくなります。また、要素の優先順位やシンプルさが失われますので本当に目立たせたい所にだけ使用する事をオススメします。
アニメーションがよく作りこまれていてもアニメーション自体がくどくなっていたら意味がありません。具体的には動作が長い・派手という状態です。この状態だと使用する度に鬱陶しくなります。ユーザーがアプリを何十回、何百回と使用し、アニメーションに新鮮味を感じなくなった瞬間、アニメーションは目障りになります。ツール系アプリ等では特に使いどころに気を付けるべきかと思います。


アニメーションはUXに影響します。私はアプリを使った時にキャラクターが動いたり、ページ内で面白い動きがあった場合、良くできているな~とか、楽しいな~と思います。アニメーションは使用感の向上だけではなく楽しさの演出にも役立ちますが、アニメーションは一度気になりだすととにかく鬱陶しくなってしまいます。使いどころを良く検討した上で組み込む事をお勧めします。