【cocoda】タグの記事一覧｜ミトラボ https://mito-lab.com フリーランスWebデザイナーの実験と備忘録 Sun, 09 Feb 2020 05:41:13 +0000 ja hourly 1 https://wordpress.org/?v=5.6.17 https://mito-lab.com/wp-content/uploads/2019/11/cropped-fav_mitolab2.0-1-32x32.jpg 【cocoda】タグの記事一覧｜ミトラボ https://mito-lab.com 32 32 #DailyCocoda 25個作った成長と気づき＆UIデザインで使っているツールのご紹介 https://mito-lab.com/dailycocoda_25/ https://mito-lab.com/dailycocoda_25/#respond Sun, 09 Feb 2020 05:30:39 +0000 https://mito-lab.com/?p=2033 こんにちは、mito(@mito_works)です。

今回は、UIの勉強のために取り組んでいる「Daily Cocoda!」を25個チャレンジした記録です。

momo
momo
どんな成長や気づきがあったかということをまとめるね。
mito
mito
使っていたツールなども紹介していきます！

私のUI勉強法

cocoda!というサービスの中の1日1つお題が出される「Daily Cocoda!」をこなしていました。

momo
momo
「Daily Cocoda!」の詳しい内容はこちらの記事に書いているので、読んでね！

https://mito-lab.com/cocoda-ui-study/

cocoda!で勉強をはじめて感じた変化

cocoda!で勉強（デザインを作る）ようになって感じた変化が3つありました。

UIの原則を意識してアプリを見るようになった

例えば、アプリのUIにおいて「否定的な内容は左側」という原則があります。

mito
mito
「キャンセル」「保存」というボタンが並ぶときキャンセルは必ず左にあるな〜と。原則と照らし合わせてアプリを観察しています。

iOS ヒューマンインターフェースの原則

 

携帯のアプリなどとりあえずダウンロードするようになった

momo
momo
スマホ内にあるアプリ。かなり増えたね〜

今まで知らなかったアプリやサービスを知ることができ、自分の枠外にあるターゲットについても考察できるようになってきました。

UIを通してサービスが気になるようになった

そのサービスに携わっているデザイナーさんの考え方や制作過程が気になるようになりました。

UIという知識を深めつつ。デザイン全般の知識も興味が出てインプットができるようになったなと思います。

例えばママリというママの一歩を支える情報サイト

どういう想いで作られているのか？ということをみていくと自ずと配色などのデザインやUIの意図が読み取れたりします。

ママリ

ママリのブランドロゴに込めた想い 

cocoda!を取り組んで感じたデザイン力の変化

毎回、「ターゲット」「コンセプト」それに伴うデザインを考えているので、思考が深くなり、それがデザインに反映されたように思います。

地図アプリの行き先検索画面

デザインの感想

ユーザーについて深く考える作業が楽しかったです。
「よく使う道がすぐ確認できる」というコンセプトがなぜ必要なのか？よく使う道なら検索せずに行くんじゃないの？？と分からなかったので自分なりに考えてデザインに落としました。

 

デザインの意図

「よく使う道を確認する」のはなぜか？から考えて
・最短ルートが知りたい
・寄り道していて道がわからなくなった時に使う
・いつもバスで行っていた道を自転車でいくという冒険をする
というようなことを考えました。
なので、
・経路
・どれくらいかかるか？
・他の行き方候補
がわかりやすくなるように他の情報は極力減らしました。

手軽に使える方法として、よくいく場所、お気に入りの場所を登録しておくようにしています。

 

最初の頃は、要素はそれほど多くないのにどこに何を配置するのかデザインはどうするのか？で悩んで時間がかかっていました。

 メッセージ画面

デザインの感想
なんの要素を入れるか、どの順番に並べるかを考えるのが難しかった。
あれもこれもとなりがち。

 

デザインの意図

・メールとの差別化でアクティブかどうかということ意識
・手軽にコミュニケーションを取る手段として使われることを想定して、音声入力と絵文字をわかりやすい位置に配置

 

メインカラー、サブカラー、ベースカラーに加えて情報の強弱をつけるために色の透過度、太さを変えて調整、透過＋グラデーションなど小技を身に付け、表現の幅が広がってきました。

ライブ配信アプリのライブ画面

デザインの感想
17LIVE、showroom、Liveme一通りダウンロードして見ました。
こんな世界があるのか〜と新しい発見です。

 

デザインの意図

見る人は、顔を見て会話したいという思いが強いと思うので、コメントと動画配信の映像がお互い邪魔をせず共存することを意識。
グラデーションや透過を使って主張しすぎず情報をグループごとにまとめて見せるようにしました。

後半、情報設計、特にユーザーが求めていることをUIに反映するということを徐々に意識できるようになりました。

また、直感的で使いやすい、わかりやすい。

momo
momo
使いやすいってどういうこと？を深堀したよ。
mito
mito
「ユーザは何をしたくてどう使えれば嬉しいか」それに付随する操作の流れを意識しています。

 

 ECサイトの商品詳細画面

デザインの感想
作るときにHIGだとどうだろう？とガイドラインを意識すると迷いが減るなと思いました。

 

デザインの意図
特に情報設計を意識しました。

・ファーストビューに購入ボタン（サイズ選ぶ）を入れるようにしました。
イメージ写真や詳細はスクロールして確認するので良いという判断です。
・20代男性というターゲットに対し、そこまで服にお金をかけられないけれどおしゃれをしたいという層だと想定し、お得感や購入をためらう要素に関して目立つ配色でデザインしました。

momo
momo
リワードモーダル、通話中アプリなどよく目にしているけれど素通りしていたデザインにも目を向けられるようになってきたよ！

 

mito
mito
ここからは、「Cocoda!」でUIデザインをするときに使っているツールのご紹介です。

UIガイドラインのご紹介

プラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。

iOS Human Interface Guidelines

使っているアイコンのご紹介

flaticon

シンプルにモノクロのアイコンや、フラットアイコンなど様々な種類のアイコンがあり、一番使いやすいなと思って使っていました。

momo
momo
カラフルなアイコンもテイストを揃えると使いやすいよ！
MATERIAL DESIGN

シンプルでわかりやすいアイコンを探すのであればこちらがおすすめ

ICCOON MONO

シンプルなモノクロアイコンを日本語で探したいときによく使っています。

mito
mito
UIデザインをするときにいつもこの3つの中から探しています。
おまけ

使いたいなと思ってみていますが、使う機会を逃しているサイト。
カラフルでフラットデザインに特化しているので機会があれば使いたいです！

FLAT ICON DESIGN

使っているテンプレートのご紹介

iphoe用のUIをデザインしているので、こちらをダウンロードして使っています。

Apple Design Resources

中身はこんなものが入っています。

ヘッター部分の戻る矢印や、ボタンなどiphoneで汎用的に使われているUIだね！

mito
mito
これを使うことでデザインのスピードが上がりました。

cocoda!を通してこれから身に付けたいと思ったこと

mito
mito
常にUIのトレンドは動くものだと思うので、最新のデザインを公式サイトをみて把握しておくということをしていきたいです。
momo
momo
ここに紹介されているようなサイトを参考にUIトレンドの動向を把握できるといいね！

Material Designを最速で使いこなす

mito
mito
Daily Cocoda!自体はまだ半分。後半も引き続き取り組んでいきます！
]]> https://mito-lab.com/dailycocoda_25/feed/ 0