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

Pocket

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

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

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

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

エフェクト

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

位置、構成

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

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

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

_

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

Pocket

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

Pocket

こんにちは!デザイン業務に関わっておりますコンです。

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

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


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

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


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

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

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

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

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

 

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

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

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


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

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

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

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


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

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

■紙
■ペン
■スマホ

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


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

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

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

 


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

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

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


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

 


④実機で確認する

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

 

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


おわりに

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

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

Pocket

簡単!パターン素材の作り方-応用編-

Pocket

今回は前に更新しました【パターン素材の作り方-基礎編-】の応用版を紹介したいと思います。
「どこがパターン素材の切れ目なの?」と思うような、より複雑な柄を使用してのパターン素材となります。

ですので初めてパターン素材を作る方は基礎編より見て頂けますとより理解がしやすいかと思います。

—————————————————————-
★作成環境:IllustratorCC2017
★動作確認:Windows7
★所要時間:20分(素材ありき)
—————————————————————-

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

[おさらい]パターン素材とは

★自分で作ったパターン素材をスウォッチに登録することで、色を選択する感覚でいつでも使える。
★作ったパターン素材は描画対象に縦横敷き詰める形で配置。

『花柄繰り返しパターン』
メイキング

上下・左右の絵柄、スペースのつながりに注意しながら作ってみましょう!
※ここで紹介しております内容は、一作例となります。
サイズ、比率等は説明のしやすい様に書いております。

【ゴール】複数の柄(モチーフ)がバランスよく入っている包装紙のようなもの。
素材の切れ目が分かり辛い。

【用意する物】花素材。以下のものをイラレで作成しました。

【1】ツールの長方形ツールで長方形を描く。
【縦180px横140px・色#132d4c】今回、見やすい背景色を選択しています。

【2】長方形に花の素材をバランスよく配置していきます。
ですが、ただ置きたいように置いてしまうと、敷き詰めたときに上下左右が繋がらなくなってしまうので手順を踏んで配置していきましょう。

【3】土台のサイズに合わせてクリッピングマスクをかけます。

【4】パターンを登録します。
【ウィンドウ】の中にある【パターンオプション】を開きます。
開いたら作成したパターン画像を選択したまま、右上のメニューを開き【新規パターンを作成】をクリックします。

【5】ポップアップのOKを押すとパターンが登録され編集画面が出てきます。
任意の名前とパターンの縦横サイズを記載します。

【6】縦横サイズを記載するとパターンの枠サイズが変更されます。
パターン素材を枠に当て込みます。

【6】当て込んだら左上の完了をクリックして閉じます。

【7】スウォッチに登録され完了です!

使ってみた

最後に

花柄繰り返しパターンの作成の際にはより壁紙っぽく見せるため素材の
それぞれが孤立しすぎないことです。
蔓を伸ばして花と花をつなぐことで全体的に滑らかな雰囲気に、また、
花のサイズの大小をつけすぎないことがポイントです。

いかがでしたでしょうか?
繰り返しパターンの応用編を紹介させて頂きました。
使用する素材のサイズがバラバラな、規則性の無い柄でもパターン素材に
することは出来ます。あくまでも、ここでの作成法は一例ですので是非
参考の上、作成しやすい方法を試みてくださいませ!
以上スガがお送りいたしました。

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

関連リンク  * * * * * * * * * * * * * * * * * * * * * * * *

パターン素材の作り方-基礎編-

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

 

 

Pocket

カルーセルとユーザビリティー

Pocket


カルーセルとは?

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


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

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

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


使いやすさのポイント

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

1. ちょい見せ

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

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

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

3. 全体数の表示

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

4. ポジション

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

5. ループ

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

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


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

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

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

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

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


早速作る

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


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

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

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


最後に

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

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


/////////// 関連記事はこちら↓ //////////

『リフレッシュレート』とUX

プロトタイピングに挑戦する

プロトタイピングの活用

Pocket

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

Pocket

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

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

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

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

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

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

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

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

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

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

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


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

初心者向け!エンドロールの作り方②[After Effects編]

Pocket

こんにちは!デザイン業務に関わっておりますコンです。

さて、今回のテーマは「初心者向け!エンドロールの作り方②」です。
エンドロールの中でも、結婚式の披露宴などで流すエンドロールムービーの作り方をご紹介します!

前回のIllustrator編の続きとなっています。
Illustratorで文字が組めたら、After Effectsで文字が上へ流れていく動きを付けてみましょう!


使用するソフト

今回は1種類のソフトを使用して動画を作ります。

■After Effects(アフターエフェクト)

バージョンは「CC 2017」を使用しています。


作成の全体の流れ

作成の全体の流れは大きく分けて3つです。

①作るべき動画のサイズと素材を確認。
②Illustratorでテキスト作成・文章の構成確認。
③After Effectsでテキストが上にスクロールする動きを付けます。

今回は③についてお話していきたいと思います。


エンドロールを動かそう!

1.After Effectsで新規コンポジションを作成

After Effectsを立ち上げ、「ファイル」→「新規コンポジション」を選択。

「幅」は640px、「高さ」は360pxと入れます。
「デュレ―ション」は動画の長さを決められます。ここはエンドロールの長さで必要な時間がそれぞれ違うかと思います。後で時間の長さは変えられますので仮で入れておいて下さい。今回は一旦「40秒」としています。
「背景色」は黒にして下さい。ここもエンドロールの背景色に合わせて変えて下さいね。

OKを押すと、「コンポジション」パネルが真っ黒な状態で開けたかと思います。


2.IllustratorのデータをAfter Effectsに取り込む

「プロジェクト」パネルにIllustratorのデータをドラッグ&ドロップします。

下記のようにモーダルウィンドウが出てきたら、「レイヤーを統合」を選択してOKを押します。
こうすることで、Illustratorで作ったデータがレイヤーで分かれていても、背景や文字などを1つの画像として読み込むことが出来ます。


3.読み込んだデータをタイムラインに乗せる

「プロジェクト」パネルにデータが読み込めたら、そこから「タイムライン」パネルにドラッグ&ドロップします。

ここまで来たら、「コンポジション」パネルでIllustratorで作ったデータが見れるようになっているかと思います。


4.位置を整える

エンドロールの始まりは、テキストの映り込んでいない真っ黒な画面から始まるのが一般的です。
※今回は背景が黒いシンプルなエンドロールなので上記のようにしていますが、写真を使用していたり状況が違う場合はそちらに合わせて下さいね。

今のままだとエンドロールの中盤あたりが中途半端に「コンポジション」パネルに表示されていますので、まずエンドロールの頭の部分が表示されているように位置を整えます。
「整列」パネルの「垂直方向の上に整列」を選択してください。

次に、エンドロールを「選択ツール」で直に選択し、画像を下げてテキストが全く見えない状態にします。


5.エンドロールを動かす為の指定

エンドロールのように、下から上へ要素が流れていく動きを付けたい時は、画像が動く始まりと終わりの「位置」を指定する必要があります。

まずは、開始位置を指定します。
「タイムライン」パネルの「ソース名:エンドロールムービー.ai」の左側にある、三角のアイコンをクリックします。
クリックすると下部に「トランスフォーム」と出てくるので再度クリックします。
いくつか項目が出てきますので、「位置」と書いてある行のストップウォッチのようなアイコンをクリックします。

ここまで来ると、同じく「タイムライン」パネルの右側が下記の図のようになっているかと思います。

「キーフレーム」と言う青いひし形のアイコンが表示されています。これで、エンドロールの開始位置を指定することが出来ました。
今の状態は、「0秒の時、エンドロールムービー.aiはここにいるよ」と言う事を表しています。

次に、終了地点を指定します。
「タイムライン」パネルの「時間インジゲーター」を右端(終了時間)へ寄せます。

「整列」パネルの「垂直方向の下に整列」を選択してください。
続けて、エンドロールを「選択ツール」で直に選択し、画像を上に移動させてテキストが全く見えない状態にします。

ここまで出来たら、「タイムライン」パネルに「キーフレーム」が出来ているか確認してみましょう。
下記の図のようになっていたら、エンドロールの終了位置を指定することが出来ています。


6.実際にエンドロールを動かしてみる

動画を書き出す前に、動きをチェックしましょう。「プレビュー」にある再生ボタンで再生できます。

問題ない方は、手順8へ行ってください。
動画が早すぎたり遅すぎたりして、文字が読みづらい…と言う方は、手順7を確認してください。


7.動画の時間を変更する

メニューバーの「コンポジション」→「コンポジション設定」を選択。
「デュレ―ション」の時間を変更します。動画を都度再生しながら最適な長さに調節してみて下さい。

エンドロールの特性上、多くの人が一斉に見たり読んだりすることになりますので、読むのに十分な時間を確保してあげてください。


8.動画を書き出す

「ファイル」→「書き出し」→「Adobe Media Encoder キューに追加」を選択します。
Adobe Media Encoderが開きますので、下記の図の再生マークを押すと書き出しが始まります。

これで、エンドロールは完成です!
実際に書き出した動画が下記になります。この流れで作るとこんな風になるんだなと言う参考程度に見てみて下さい。

※この動画はブログ掲載用に設定を調整しています。


おわりに

いかがでしたでしょうか?
実際に動画として完成するとちょっと嬉しくなるのではないでしょうか!

今回はスタンダードなエンドロールの作り方でしたが、背景を変えたり、写真を載せたりするだけでもガラッと雰囲気が変わります。
ぜひ色々試してみて下さい。そして、思い出に残る素敵な結婚式のエンドロールムービーを作って下さいね!

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

Pocket

シネマグラフ

Pocket

シネマグラフってご存知ですか?
映画の何かかなと思ってしまうかもしれないのですが、映画の業績表などではないのです。
私も何かわからなかったため、ちょっと調べてみました!!
何らかの形でデザインにも活かせそうなことがありましたので(私の主観ですが)紹介させて頂きます。

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

▼シネマグラフとは??

そもそもシネマグラフとは、映画の業績表などではなかったら何のなのか?
一言でいうと「一部のみを動かしてループさせた画像」です。

―――はぁ…い、一部ですか?

―――調べてみたらそうでした。

下のようなアニメーションGIFの様に万遍なく動くTHEアニメーションではないのです。


▼実際に見てみましょう


永遠にあふれることのない紅茶


水だけが出続ける


水の勢いで溜まった水だけが動く
説明用に作成を致しましたため、かなり手軽な生活感有るものばかりですがおゆるしをば。

シネマグラフは特に多くを語ることが無いくらい分かりやすいものだと思います。

一部のみ繰り返しの動きがついていると何だかとても不思議な世界です。
つい、ぼーっと見てしまいますね。
作成上の関係で生活感ある水系のものになりますが、逆に言うと誰でも簡単にシネマグラフが作れるという事ですね!
編集も思っている以上にサクッとできます。
(申し訳ございませんが、作成方法は割愛させて頂きます。)
また、多くのものが動く所や、動物など様々なもので作成するともっと臨場感あふれる不思議な光景が作れるかもしれませんね。

EX)
・後ろにある影だけが動き続ける
・人で賑わう縁日の頭上で花火だけが繰り返し動く
・夏の草木が静止する中、風鈴だけが繰り返し動く
・交差点で信号だけが動き人は静止
・ワンちゃんの尻尾のみが動き続ける
・溶けずに燃え続ける蝋燭
・ひたすら瞬きだけを繰り返す人
・人間の持ち物だけが動く

ちょっと考えるだけでもたくさん出てきます。

▼使いどころ

個人で楽しむため、人に作ったものをSNSで見てもらいたい等といった所や、はたまた企業のブランド訴求の延長線として、使うことも効果的です。

全体が動いていないことにより動く箇所にピンポイントで目が行きやすくなる構造になるため「特に見せたい」箇所などの訴求が強くできますね。

例えば、“新しいハンドバッグ”をHP上で訴求したい場合以下のような訴求も考えられます。

※写真動画のシネマグラフが用意できないためイラストで表現させて頂いております。

ハンドバッグだけが繰り返し動く。
一見とてもシンプルな構造ですが、ハンドバッグだけが動いていると、自然と目がそちらに向かいますよね。
見てくれる人の目線を自然な形で商品へ誘導することでストレスなく新商品の訴求が出来ているのではないでしょうか?
場面や動かす一部の大きさによって、様々な表現が期待出来そうです。

▼最後に

いかがでしたでしょうか?
見ているだけで不思議な感覚になりますよね~!
一見静止画かと思いますが一部だけ不可思議に動いていたら、ついつい人は見てしまいます。
何かしらの惹き画像にもなりますので効果的に使えたら良いですよね。
もしもこれを機に気になった方は是非シネマグラフを検索してみて下さい。

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

Pocket

『リフレッシュレート』とUX

Pocket

私たちが普段眺めているスマホやタブレットの画面ですが、
実は、操作してない時でも頻繁に画面を書き換えています。

画面を書き換え(⇒リフレッシュ)しているということは、
常に貴重なバッテリーを消費しているので、その部分だけ聞くとエコではありません。

スマホなど、使用開始から2年目に近くなると著しくバッテリーの劣化を感じますが、
出先での充電も面倒ではあるので、
可能であれば何とか温存して一日持たせたいところです。

そんなネガティブな話題から入りましたが、
リフレッシュレートの機能の恩恵は大きく、私たちの使用感/満足度など、
UXに大きく影響を与えます。

今回は機械的な話に寄りますが、
この(単位時間で画面をリフレッシュする⇒)「リフレッシュレート」の話をUXと絡めて考えてみます。


■リフレッシュレートとは?

一般的な説明として、リフレッシュレートとは、
1秒間にスマフォやテレビなどの画面を何回書き換え更新するか、の理解で良いと思います。
機器の仕様書には、

60Hz(ヘルツ)だの120Hzや最近ですと240Hzなんて数字も確認できます。

つまりはスマホの画面が一秒間に60回だったり120回だったり240回、
最新状態に書き換えしてる端末がそれぞれあるということです。
忙しくエネルギー使いまくってそうですね。

では日本でも売れているiPhoneやiPad Proの仕様についてみてみます。


■iPhoneやiPad Proのリフレッシュレートは?

・iPhone   60Hz
・iPad Pro  60Hz(可変リフレッシュレート)

でした。 ※2017/6/6時点発売済みの端末

ロック画面の静止画状態でも、1秒間に60回も書き換えているなんて、環境に申し訳ないですね…。
バッテリー消費もしているので使用者のメリットもありません。
これは良くない体験の様です。

でも…『iPad Pro』の仕様をよく見てください。
”可変リフレッシュレート” となってます。

『iPad Pro』の可変リフレッシュレートですが、
実は利用者が操作していない状況を判断して、
リフレッシュレートを低く[30Hz(30回書き換え)などに] 変更させているんです!
画面を操作していないときはエコモードになるなんて、
見えないところでもユーザーに恩恵を与えているんですね。
バッテリー持ちを良くするための機能だと思いますが、
双方にメリットがあり、
これは良い体験なのではないでしょうか。


■新型iPad Proの仕様

2017年6月6日、Appleは、
同社の開発者カンファレンス「WWDC17」の基調講演で、
「iPad Pro」シリーズの刷新を発表をしました。

・iPad Pro  120Hz [可変リフレッシュレート(48Hz/24Hzなど)]

こちらの製品の仕様では、
リフレッシュレートが大きく向上して120Hzに変更されました。
目的としては、「Apple Pencil」の体験向上が上げられ、
レスポンスが快適になるとのことです。

仕様上だけでもペン先への描画追従性が倍に上がるので、
”書き味”に大きな変化が現れることでしょう。

またリフレッシュレートの向上は、
画面スクロール時にも影響が出ると判断でき、
ヌルヌルとしたスクロールになることで、文字の視認性が良くなるのではないでしょうか。

大きな使用体験の変化は新たな需要を生みます。

「読む/見る」といったニーズでは行き渡った感があったタブレット端末ですが、
「描く/伝える」といった新たな体験と価値を提供するツールとして、
新しい市場を開拓するのではないでしょうか。

■今後のリフレッシュレートの向上について

モバイルツールとして120Hzのリフレッシュレートを実装してきましたが、
コンシューマ向け「据置型モニター」での市場では、
240Hzの領域まで量産技術が進んでいます。
さらに、
人間の目で判断できる限界(140~200Hzという説)もあり、
240Hzあれば十分なのですが、
ホールド型液晶画面は仕様上残像の問題が出るので、
その点をカバーする目的で、
高速にリフレッシュする480Hzまで行きつく必要があるのではないでしょうか。
表示応答性に優れた「有機ELディスプレイ」との組み合わせも考えると未知の領域ですが、
スマホでヌルヌルとスクロールしながら文字を速読する、
そんな体験が出来る時代までもう少しです。

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

////////// 関連記事はこちら↓ //////////

プロトタイピングに挑戦する

プロトタイピングの活用


[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈する


サービスVSユーザー!UIリテラシー格差


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

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

Pocket

こんにちは、ハラです。モバイルアプリで何気なく見るアニメーション、実は見た目を良くする為だけにあるのではなく、使用時のストレスや違和感をなくし使いやすさや満足感を高めるために使用されています。今回のブログではそんなUIのアニメーションについてご紹介いたします。

見た目だけじゃないアニメーション

まずは①の画面と②の画面のメニューボタンを押した後の反応を見比べてみてください。①と②でユーザーに違和感を与えないメニューの表示方法はどちらだと思いますか?

  ①    ②

 

大抵の方は②の方を選んだのではないでしょうか? ①ではメニューボタンを押した後にメニューが突然現れました。対して②ではメニューがスライドして現れました。スライドしてメニューが出てきた場合の方が違和感が無いのはなぜか? それはスライドして現れる方が現実に近いからです。現実では魔法のようにいきなり何かが出現することはありません、ユーザの想像を越えない現実に近い動きを加える事で自然でストレスのないメニューの表示が可能となります。①のように「よくわからない場所から突然現れる」という事になると、目線をどこに置くべきか定まらずストレスとなります。
ユーザーは、現実で起きる動きに近い表現に対しては自然に適応します、非現実的なアクションを起こすとユーザーは混乱してしまい、複雑なUIと捉えてしまいます。

そのほかにもアニメーションを使うと効果的な場面をご紹介します。

更新の動作
   

 

こちらは「画面を下にスワイプして放す」という動作により更新を行った場合に現れるアニメーションです。画面のどこからでもスワイプにより更新する事ができるこの方法は、ナビゲーションバーまで指を伸ばして更新ボタンを押し、画面に更新中と表示されるという流れがないため、ユーザにとってはボタンよりも楽な操作となります。しかし、このスワイプ更新にはアニメーションが必要不可欠です。もし、この操作にアニメーションが無かった場合、気づきとなる要素がないため、ユーザーは“どこまで下げればいいのか?” “更新がされているのか?”と悩んでしまいます。かといってどの辺りまで下げるべきなのかをチュートリアルで説明する事は、読まれるかわからない上にユーザーの使用を一時的に止めてしまうため、最良の手段とはいえません。このスワイプ更新のように、行って欲しい動作のイメージに沿ったアニメーションを加える事で、ユーザーは煩わしいチュートリアルを読む必要がなくなります。

削除と詰め
  ×    ○

 

リストなどで追加・削除を行った際にアニメーションが無かった場合、要素が消えたことや消えた空間が詰められたということがあまりにも突然で、ユーザーが認識をする事が難しく混乱します。また、削除と詰めなどの複数の動作が同時に起きる事も混乱の原因になります。この場合はアニメーションにより「削除」→「スペースを詰める」と言う順序をわかりやすく表示する事で混乱を避けることができます。このようにアニメーションにはアクションの順序を伝える手段として有効です。


UIにアニメーションを取り入れる事は非常に重要です。「言われてみれば、ここにアニメーション使われているよね」と、思われるぐらい自然に組み込むことが理想です。また、ポジティブな体験を伝え、ユーザーを飽きさせないようにする・惹きつけるアニメーションももちろんあります!(こちらもまた別の機会にご紹介してみたいと思います)では。

Pocket

ユーザーフレンドリー

Pocket

こんにちは!デザイン業務に関わっておりますコンです。

不安定なお天気が続きますね。急に大雨が降ったりするので困ってしまいます。
さっそく新品の靴が濡れてしまいました…みなさんも気をつけて下さいね。
もし靴の買い替えをご検討中の方は梅雨が明けてからの方が良いかもしれませんよ!

さて、今回のテーマは「ユーザーフレンドリー」です。
ユーザーフレンドリーとはどんなものなのか、スマホ向けサービスをデザインする視点で考えていきたいと思います。


ユーザーフレンドリーとは?

ユーザーフレンドリーとは、その名の通り「使う人にとって親切なこと」と言う意味です。
ユーザーの視点に立ったサービス設計や、使いやすい状態を言います。UIデザインをする上でとても大切なことです。

「何も知らない人が初めてこのサービスを見た時、使い方がわかるかな?」と考えてみて下さい。
ユーザーは、何か目的があってサービスを利用しようと思っています。その目的をストレスなく達成してもらう為に、ユーザーフレンドリーを意識してUIデザインを行って下さい。
そうすることで、問題点のある現状よりUIを向上させることが出来るはずです。


ユーザーフレンドリーのポイント

ユーザーフレンドリーで特に意識すべき代表的なポイントをご紹介したいと思います。


①目線の流れを意識する

基礎的なことではありますが「目線の流れ」を考えましょう。
簡単に言えば、横書きの文字は左から右へ、行が変われば上から下へ読むのが自然なことですので、そう行った目の動線を意識すると言うことです。

目線があっちこっちに行くより、一定のルールでテンポよく見せてあげた方が見やすいですよね。

②優先度を明確にする

ユーザーにとって優先度が高い物から順番に構成しましょう。
①とも関係しますが、目線が左から右、上から下へ動く特徴を活かし、優先度の高い物は上部または左上に置くと効果的です。
最も目立ち多くの人に見てもらえる場所ですので、それだけユーザーがすぐ気付くことが出来ます。

更にその中でも優先度が最も低い物やあまり目立たせたくない物、最も重要な物で表現を変えたりするとよりわかりやすくなります。

上記を意識してボタンを配置する場合のイメージも作ってみました。下の図を見てみて下さい。

まず、あまり目立って欲しくない物とは「キャンセル」「戻る」など離脱する要素で、イメージの左の図のように色の面積を減らして目立たないようにしています。
開発側からするとネガティブな要素なので、出来るだけ押してほしくないですよね…。
優先度をかなり下げてテキストだけにすることもありますが、これは開発側の目線なのでユーザーフレンドリーではなくなってしまいます。
その場合はテキストの色を変えてあげたりするとアクションを起こせる気づきになるので、ユーザーフレンドリーになります。

次に、特に重要な物とは「決済の確定」「消去」など取り消せない要素で、イメージの右の図のように注意を促す赤色を使用して目立つようにしています。
こうすることで目線を優先度の高い物へ誘導してあげることが出来ます。


③押せることがすぐわかるようにする

ボタンやリンクパネルなどタップすることでアクションが起きる要素が、押せるものだとすぐわかるようにしましょう。

下記の図を見てみて下さい。

左の図のより、右の図の方がボタンだと認識しやすく押せることが分かりやすいですよね。
文字を囲っただけですが、ちょっとしたことでグッとわかりやすさが変わってきます。

優先度が低いアクションに対しては、テキストの下に下線を引いたり、矢印アイコンを付けるだけでも効果があります。

 

ここで注意したいのが、押せる場所と押せない場所の違いが明確になるようにすることです。
押せない場所が押せるように見えないように表現を変えましょう。


④シンプルに

機能や画面の要素は出来るだけシンプルにしましょう。
選択肢が多ければその分迷いが発生しますので、ユーザーが目的を達成するまでに時間を掛けさせてしまいます。

極端な話ですが、選択肢が2つしかなければ、どちらか1つ選べばいいだけなのでわかりやすいですよね。
機能を減らすのが難しい時など、どうしても画面内が複雑になってしまう場合は、最も優先度が高い物が何なのかわかるように構成しましょう。

例えば下記の図ですが、機能が沢山ある中でもシンプルに見せることが出来ます。

左の図は、選択肢が多い上に見た目も同じなので、どこを選択すればいいか一目ではわかりづらいですよね。
上から下まで読んでから選択する…と言う動きになるので、時間のロスだったりユーザーのストレスに繋がります。
右の図だと、「はい」「いいえ」の選択肢にまず目がいきますよね。「青いボタンのどちらかを押せばいいんだな」とユーザーが直感的に気付けるかと思います。
このように、いかにシンプルに見せるか注意することで、わかりやすさに大きな違いが出てきます。


おわりに

いかがでしたでしょうか?
ユーザーフレンドリーの考え方自体は、そんなに難しい事ではないですよね。
そもそも機能が複雑だったり、サービス開発が進んでいく中で仕様が変化したりすると「どうすればいいかな?」と悩むところではありますが…

悩んだ時こそ、ユーザーにとって何がフレンドリーなのか初心に返ることも大事なのではないでしょうか!

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

Pocket