ここでは全部を理解せずとも、デザイナーでなくとも何となく分かるをベースに書いております。゚*1メニューを開くよく見るメニューマークですね。タップすると何らかの形でメニューが開かれます。一瞬メニューを開く流れが目の前からプツっと途切れたように見えます。遷移が遅かったら尚更です。右側の「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。見るとメニューマークが切り取られ開かれたメニューに付属し、最後には戻る矢印に変換されています。開いてから閉じるところまでさりげなくユーザーを誘導しています。2ボタンタップ一見、どちらのボタンもタップ時に色が変わっていますので、押したかどうかの判別はしやすいです。言えば「マテリアルデザイン」の方はタップした際に指で触れた部分に変化が起きているため自分がどの部分に触れたか、よりリアルに体感できますね。手順としては、どちらも申し分はないですが1のメニューを開く同様「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。人は動いているものについつい目が向いてしまうものですが、モーションが入ることで自然とユーザーの行動を分かり易くサポートしてくれているのですね。如何でしたでしょうか。ほんの一部ですが、見え方・捉え方に違いがあるのが分かると思います。流れが切れずスムーズに遷移してくれるとモチベーションも上がりますよね。今回にてマテリアルデザインについて最終回となります。機会があればまた、同テーマについて書いていきたいと思います。次回は別テーマをデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。コメントを残すサービスVSユーザー!UIリテラシー格差を考えるこんにちは。サービスデザインに関わっているネモトです。年末年始、どう過ごされましたか。深い瞑想をしながら考えてみたのでお付き合いください。機能やUIのリテラシーを高めるには、それなりの年月と経験、趣向が必要です。全体に目を向けると、一定の初心者層は、いつの時代でも生まれ存在している事実を忘れてはいけません。そこで問題となるのが、高リテラシー層の専門用語/先進的機能の常用です。多くのユーザーからして見れば「コワレモノに触るタッチ箇所探しゲーム」になってしまっているのが現実です。弱者の利用を意識したUI設計が必要になりますが、サービス側はその分野を知るが故に、一般的尺度にズレが生じがちなのです。多数である視聴者をなおざりにした為に、仕組みを理解したとしても納得出来なかったことです。本に例えるなら「実用書」よりも「雑誌」的な受け入れやすさが必要だと考えます。サービスをわざわざ身構えて使用したいニーズは無いのではないでしょうか。アイコン表現について紹介します。「ハンバーガーアイコン」はメニューを表すものとして、業界では一般的ですが、リテラシーの低い利用者にとっては認知できない表現でしょう。数々の検証結果も見つけられるように、アイコン記号だけではなく、文字によるラベル表現が伴った方が理解と実際の利用が多いようです。単純な選択肢として、UIは、高いリテラシーと経験を必要としない表現からスタートするべきです。「UI設計に関わる人間は新しい表現を認めない/追わない」ことで、サービスの敷居を下げる必要があるのではないでしょうか。空気のように慣れ親しんだ理解あるUIコンポーネントなのではないでしょうか。皆様はどうお考えでしょうか。コメントを残す知らないと会話がストップ!?コントロール系部品の名前(2)新年最初の更新を担当いたします。明けましておめでとうございます。2017年もデジマースブログをよろしくお願い致します!それでは昨年のUIに関する話題を振り返ってみたいと思いま.........いえ、その前にまだ紹介していない内容がありました。それは...「地味ですが基本となるコントロール系部品(2)」の紹介です!早速ですが第2段の紹介を始めていきたいと思います。今回は「ステッパー」「ページコントロール」「テキストフィールド」「スイッチ」「チェックボックス」「ラジオボタン」についてご紹介いたしました。各コンポーネントは、使用する場所を誤れば意味のないものとなってしまいます。そのため、名前だけではなく使用場面を合わせて知っておく事も大切です。前回紹介したコンポーネントと、今回紹介したものを合わせて覚えれば、UIに関する打ち合わせで以前より会話がスムーズに進行すると思います。それでは、みなさま本年もよろしくお願い致します。コメントを残すマテリアルデザイン~アニメーションpart2~こんにちはもしくはこんばんは!デザイン業務に関わっております、スガです!2016年も残すところあとわずかになりました。お家の片づけも仕事もやる事いっぱいの師走は本当に忙しいですね。日に日に時間の流れが速くなっているような気がします。前回の記事にてマテリアルデザインのアニメーションについてお話しさせて頂きました。今回も引き続きアニメーション部分に触れていきたいと思います!*。ここでは全部を理解せずとも、デザイナーでなくとも何となく分かるをベースに書いております。★現実的な動きに合わせたモーションが推奨されているマテリアルデザインのアニメーションの利点とは?さっそくではありますが、アナタは下記の様に見たい記事を見つけました。このパッと切り替わる動作は普段見慣れている人が多いかと思います。求めている動作が早いことはとても良い事です。長いマラソンのスタートとゴールの部分だけを見た様な感じです。そこで、もっとユーザーメリットが組み込まれたらどうでしょう?動作からすぐに結果が出ている時点でスピード面において充分メリットがありますが、ここに「ユーザー自身が行った動作に対して、今自分がどのような状態なのかが一目で分かる」とどうでしょう。アナタは下記の様に見たい記事を見つけました。今自分がどのような状態なのかが一目で分かる状態になります。長いマラソンはスタートとゴールの間に、走っている過程があります。その過程の部分をマテリアルデザインではユーザーの操作に合わせてリアリティのある現実的な動きを加えスライドや拡大などのモーションで次のページへ誘導を行います。今までなかったはっきりとした遷移過程のアニメーションによって、ユーザーの目線の動きもバッチリとらえ(人はつい動くものなどを追ってしまいますよね)次々起こる動作をスムーズに解消していくことが出来ますね。最後に現実的な動き(例:スタートとゴールの間)に合わせたモーションを加えると操作もより分かりやすくなります。これらのモーションには様々な種類があり、スライドしたり、画面内のパーツが入れ替わったり回ったり......様々なものがあります。これからスマートフォンでサイトなどを見るときに少し注意して見てみて下さい。気にしていなかっただけで、実は上記のようなモーションで誘導されていたかもしれません。マテリアルデザインは奥が深いですね。次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。コメントを残すアプリに必要なアイコンサイズ-Android編-こんにちは。デザイン業務に関わっております、コンドウです。今回のテーマは、「アプリに必要なアイコンサイズ-Android編-」です。前回私が作成した記事、「アプリに必要なアイコンサイズ-iOS編-」に続いて、Android端末のホーム画面に表示されるアイコンサイズについてご紹介したいと思います!iOSのアイコンサイズも知りたいと言う方は、ぜひ「iOS編」の記事もご覧ください!Androidのホームアイコンてどんな形?さて、みなさんはAndroidのホームアイコンと言うと、どのような形を思い出しますか?四角でしょうか?丸でしょうか?Androidのホームアイコンは、ベースの形に決まりはありません。視認性やコンセプトと整合性が取れていれば、自由に作ることが出来ます。色合いだけでなく形も様々なので、ホーム画面が賑やかになり、見ていて楽しい気持ちになりますね!また、アプリ開発者側としても、アプリの特徴や中身をより効果的に伝えることが出来ます。系統が同じアプリが並んだ場合も、より分かりやすい見た目である方がユーザーの意識が向きやすくなります。私は各Android端末の「設定」アイコンが好きです。歯車や工具をモチーフとしていることが多く武骨な印象になりがちですが、ベースの形に決まりがないおかげで、モチーフの凹凸を活かした表現ができます。端末やOSによってフラットだったりシャドウが効いていたり、アクセントカラーが入っていたりとシンプルながらも特徴が出ていて面白いです。話が少し逸れてしまいましたが、ここからが本題です。自由に形が作れても、サイズには決まりがあります。下記は、2016年12月16日時点のデータです。仕様に変更があった際は、都度都度ブログにまとめていきたいと思います!それでは、以下がサイズ一覧です。AndroidホームAndroid番外編いかがでしたでしょうか?サイズ内に収まっていれば、形は自由です。iOSでは出来ないようなデザインに挑戦するも良し、AndroidとiOSでも形を統一してブランディング重視のデザインにするも良し。アプリの良さが伝わるような素敵なアイコンを作ってみてください。今後も、作成に必要なサイズの調査は行っていきますので、新情報が出た際は、随時こちらでまとめていきたいと思います。iOSに必要なアイコンサイズは、下記のページにまとめてありますので、興味のある方は覗いてみてください!アプリに必要なアイコンサイズ-iOS編-それではまた!コンドウでした。コメントを残すあぁ...Flashツールに望みはあるか?こんにちは。サービスデザインに関わっているネモトです。現在はAdobe内にて開発が継続しています。Webページの切り替えにオーバー表現なアニメーションが展開されたり、アーティスティックな個人WebサイトのUIでは目を奪われる表現に使われたり、さらには、YouTubeなど、Web動画再生の仕組みにも過去使われていました。そんなFlashの制作ツールはタイムライン制御GUIによる直感的な操作が特徴で、JavaScriptやhtmlなどが苦手なWebデザイナーでも簡単にアニメーションが作れたことで大変支持を得たのです。独自のActionScriptを使用することでインタラクティブな制御か可能となり、プログラムスキルがあればFlashアプリも作ることが出来る特徴があります。近年では、SEO対策や脆弱性問題とブラウザ組み込みプラグインという特性上から標準搭載されなくなっている傾向がありますが、まだまだ実装例も多くあり、身近なアニメーションツールと手段として使われています。CC」に変更して開発が継続されることになり、世のフラッシャーに希望を与えました。今後のアップデートによって、動画書き出し含めて機能充実が期待されています。「静」でなく「動」の表現を企画者や開発者に伝える手段として適切なツールなのではないでしょうか。CC」を是非活用して、プロジェクトメンバー間で、プロトタイピングによる使用感の共有を進めてみてください。次回も日々変化するWeb制作環境などにスポットを当ててご紹介します。コメントを残す知らないと会話がストップ!?コントロール系部品の名前(1)「ちょっと待ってください、ピッカーって何でしたっけ?」ミーティングで飛び交うUIの用語、何か分からないまま話を進めてしまった...。質問して話の流れを止めてしまった...。そんな経験をしたことのある今回のブログ更新担当のはらです。こんにちは!UIのミーティングをスムーズに進行するためには、やはり使用される各部品の名前を知っておく必要があります。あいまいな表現で相手に伝えたがために、のちに話が食い違う、なんて事があるかもしれません...。いうことで今回も、私の前回のブログに引き続き、UIで使用される部品の紹介をします!紹介する部品は、地味ですが基本となるコントロール系部品です。系部品を6種類、名前と使用場面を合わせて紹介しました。名前をなんとなくでも頭に入れておくと、打ち合わせの最中に「あっ、これのことだ」となると思います。紹介したいよく見るコンポーネントがあるのですが、量が多いのでそれはまた次回の更新で紹介したいと思っております。コメントを残すアプリに必要なアイコンサイズ-iOS編-こんにちは。デザイン業務に関わっております、コンドウです。今回のテーマは、「アプリに必要なアイコンサイズ-iOS編-」です。ここで言うアイコンとは、iPhoneのホーム画面などで表示されるアイコンのことです。表示される場所は3ヵ所あります。上記の「ホーム」と、「設定」「Spotlight」です。「設定」は、設定アプリ内のリスト左側に表示されます。「Spotlight」は、ホーム画面を左スワイプした時などに出てくる、検索画面の候補や結果として表示されます。アプリ開発に関わっている方にとっては、頭を悩ませる要素の1つですよね...。これからアプリを作りたい!と思っている方は、サイズはいくつ?何個作ればいいの?そもそも1サイズじゃ駄目なの?と疑問が沢山かと思います。そんな時の為に、必要なアイコンのサイズをまとめました。自社で開発する際にまとめたデータとなりますので、角丸の半径などは目安として考えてもらえればと思います。留意事項として、アイコンのサイズは、OSのバージョンアップのタイミングで細かく変化することがあります。2016年11月24日時点のデータですのでご注意ください。サイズが変わった際は、都度都度ブログにまとめていきたいと思います!それでは、下記からサイズ一覧となります。ProAppStore申請用いかがでしたでしょうか?1つアプリを作るのに、こんなに沢山のサイズが必要なのか...と驚いた方もいるかもしれません。基準となるアイコンを1つ作って、それを拡大・縮小すれば良いのでは?と思うかもしれませんが、それだと角丸の比率が変わってしまう場合があります。比率が違うと実機で表示された際、アイコンの周りに意図しない枠線が付いてしまう事がありますので、1つ1つ丁寧に確認・作成を行って下さい。プロジェクトメンバーと意見を出し合い、こだわって作ったアイコンです。最後の詰めまでかっこよく決めてあげてください。作成に必要なサイズの調査や更新は随時行っていきますので、新情報が出た際は、随時こちらでまとめていきたいと思います。それではまた!コンドウでした。コメントを残すマテリアルデザイン~アニメーション~こんにちはもしくはこんばんは!デザイン業務に関わっております、スガです!前回の記事にて、マテリアルデザインはこのようなもの、とざっくりお話しさせて頂きました。今回は「マテリアルデザインのアニメーション」に触れていきたいと思います。