AndroidのUIをデザインするとき参考にしている資料まとめ

メインのお仕事がAndroid UI担当になって早1年。

今年は絶対に月に1回はブログを更新すると決めました。
こんにちは。YUKIです。

AndroidのUIデザイン関連でこまめにチェックしている資料をまとめてみました。
これからAndroidのUI関係の情報を集める方、Material Designのガイドラインが発表されてからどう変わったのか収集中の方の参考になれば幸いです!

a

メインのお仕事がAndroid UI担当になって早1年。

今年は絶対に月に1回はブログを更新すると決めました。 こんにちは。YUKIです。

AndroidのUIデザイン関連でこまめにチェックしている資料をまとめてみました。 これからAndroidのUI関係の情報を集める方、Material Designのガイドラインが発表されてからどう変わったのか収集中の方の参考になれば幸いです!

(2015/1/10 現在)

ドキュメント関係

公式資料関係

Material Design ガイドライン

http://www.google.com/design/spec/material-design/introduction.html
まずは読み込んでMaterial Designの思想を理解

Google Developers Blog

http://googledevelopers.blogspot.jp/
最新情報が更新されるのでチェック

Google Developers Blog 日本語

http://googledevjp.blogspot.jp/
日本語版

その他、ガイドラインなどが日本語でわかりやすく解説されている資料

qiitaのAndroid関連の資料

http://qiita.com/tags/android

参考記事ピップアップ

職種の枠を超えて劇的な効率化をはかる!デザイナーさんむけAndroid のUI作成の簡単まとめ

http://qiita.com/appwatcher/items/aa5f4026dc7db0dd10b2
画像リソースなどは自分でコミットしたほうがエンジニアさんに余計な手間をかけさせずにすみますし、色や文字サイズの変更などでも直接コードを変更させてもらうこともあるので(もちろんしっかりコードレビューしてもらっています)効率よく作業していくために

マテリアルデザイン#1 Menus, Dialog, Pickers

http://qiita.com/m1noon/items/0cab1f685ff9f2a0ee3d

マテリアルデザイン#2 Subheaders, Switches, Snackbars & toasts

http://qiita.com/m1noon/items/3824c37a2ac8ab77950e

マテリアルデザイン#3 Card, Chips, Tabs

http://qiita.com/m1noon/items/365233b06343b08140a5
マテリアルデザインのそれぞれの要素についてポイントをわかりやすくまとめてあります

yanzmさんのブログ

http://y-anz-m.blogspot.jp/
ここの色ってどこ変えたら変わるんだったっけ…とかいうときに調べていたら、だいたいstackoverflowかyanzmさんのブログに辿り着きます。
ありがたや…!

デザインしていく上で参考になるリソース

Googleが公式に配っているもの

Color palettes

http://www.google.com/design/spec/resources/color-palettes.html
IllustratorとPhotoshop用のカラースウォッチがダウンロードできます

Layout templates

http://www.google.com/design/spec/resources/layout-templates.html
ai形式のレイアウトのテンプレートがダウンロードできます

Roboto & Noto fonts

http://www.google.com/design/spec/resources/roboto-noto-fonts.html
RobotoとNotoのフォントファイルがダウンロードできます

Sticker sheets & icons

http://www.google.com/design/spec/resources/sticker-sheets-icons.html
各コンポーネントのファイルとアイコンファイルがダウンロードできます。 アイコンファイルはGithubでも管理されています。 svgファイルとかも全部置いてあります!

デザインの参考になる資料

Android UI Patterns

http://www.androiduipatterns.com/
2段タブとかいろんなUIパターンが紹介されています

Material UI Kit

https://ui8.net/product/material-ui-kit?rel=sar
PhotoshopとSketch用の有料のテンプレート集。 ECやSNSっぽい感じだったり、かなりの種類のレイアウトがあります。 買わなくてもどんなレイアウトのページが含まれているのか一覧になっているので、見るだけでも配置や店方の参考になります。

MaterialDialogs Sample

https://play.google.com/store/apps/details?id=com.afollestad.materialdialogssample
マテリアルデザインのダイアログのサンプルアプリ

その他

Lollipop 用のコードサンプル(Google公式、日本語訳)

http://googledevjp.blogspot.jp/2014/12/lollipop.html

ULTRALINX内のBest Android Apps & Gamesに乗っているアプリのUI

http://theultralinx.com/best-android-apps-games

iOS側のデザイン思想やUIパターンも知っておく

公式ドキュメント

iOS Human Interface Guidelines

https://developer.apple.com/jp/devcenter/ios/library/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html

ユーザーインターフェースデザインのヒント

https://developer.apple.com/jp/design/tips/

iOSのデザイン、インターフェース、アニメーションを知るために

Mobile Design Inspiration

http://inspirationmobile.tumblr.com/

Inspired UI

http://inspired-ui.com/

pttrns

http://www.pttrns.com/

uiGIFs

http://uigifs.com/

動きのサンプル


他にも参考になるサイトやリソースの情報があればお待ちしています!

ここ数ヶ月Material Designやその他アプリのUI関係のガイドラインを読みこんでいたのですが、読みこめば読みこむほどガイドラインの捉え方が変わってきました。
そもそもなぜそういうガイドラインになったのか、制定した人はそうすることによりユーザーにとってどんなメリットがあると考えているのか、という経緯をしっかり読みといて、さらにそれは自社のアプリのユーザーにとっても最適のUIなのか?をひとつひとつ考えた上で実装していくようにしたいと思っています。
ユーザーヒアリングも続けつつ、使ってくれている人にとってのベストなUIを常に考えていきたいです。

【床 Advent Calendar】会社の床

今年は床AdventCalendarに参加しましたw

http://www.adventar.org/calendars/539

こちらは会社の床です。
本物フローリングではなく、木目調のタイル床です。

傷はどんどんついていったのではなく、最初からダメージ感のあるデザインです。

198742

今年は床AdventCalendarに参加しましたw

http://www.adventar.org/calendars/539

こちらは会社の床です。
本物フローリングではなく、木目調のタイル床です。

傷はどんどんついていったのではなく、最初からダメージ感のあるデザインです。

198698

オフィスオフィスしたカーペットがあまり好きではないので
とっても気に入っています!

みなさまぜひお近くにお越しの際は遊びに来てくださいね♡

フリマアプリFril(フリル)が2014年Googleベストアプリに選ばれました!!

あやうく1年ぶりの更新になるところでした。
お久しぶりです。YUKIです。

前回書いた転職エントリーにもあったように「UIデザイナー」になって早11ヶ月。
とにかくユーザーに良い体験を届けることだけ考えているチームメンバーとFril(フリル)を作っています。

そんなFrilが…!!!!

あやうく1年ぶりの更新になるところでした。
お久しぶりです。YUKIです。

前回書いた転職エントリーにもあったように「UIデザイナー」になって早11ヶ月。
とにかくユーザーに良い体験を届けることだけ考えているチームメンバーとFril(フリル)を作っています。

fril

先月、Androidユーザーにも最高の体験を届けるべくiOSライクだったUIをすべて見直して
1から作り直し、Androidのガイドライン(Material Designのガイドライン)に沿った形でFrilのUIをリニューアルしました。

これまでのFrilユーザーが困らず使えて、かつよりよいUIになるように何度も何度もペーパープロトを作りなおしました。
(その経緯も近いうちに書きたい)

そんなフリルが…

なんと!Google Play Store 2014年ベストアプリに選ばれました!!!

スクリーンショット 2014-12-04 13.08.31

あああ…うれしい…

これを目指して1年間頑張ってきたのでホントにうれしいです…!!!!

これからもよりよい体験を届けられるように改善を頑張って行きたいと思います!

 

この数カ月で

  • デザイナーのためのGithub入門
  • Android Studioデビューに当って知っておいたほうがよい機能10選
  • 初めてのMaterial Design
  • FrilのUI大幅リニューアルのその過程

このあたりのネタが溜まってきたので、早くブログに書けるようにがんばります!

福岡→東京へ。東京で働きはじめました。

いろいろいっぺんにありすぎて
全然ブログを更新できていなかったのですが、生きています。

こんにちは。YUKIです。

私事ですが、2014年から東京で働き始めました。

いろいろいっぺんにありすぎて
全然ブログを更新できていなかったのですが、生きています。

こんにちは。
YUKIです。

私事ですが、2014年から東京で働き始めました。

東京で暮らしたい、働きたいなという
ポジティブな理由がいくつかあって、
東京に出てくることになりました。

会社が嫌になったとか、
福岡が嫌になったとかそういうネガティブな理由は全ーーーーーくありません。

ただ、東京で暮らしてみたい気持ちがほんのちょっと勝ってしまったのです。

福岡は大好きです。
職場も街も人も、全部大好きです。

暮らしやすくて最高です!

できれば毎日帰りたい!!!

離れる日は絶望的に寂しかったし、
身内もおらず、実家(長崎)からさらに離れてしまう不安もありました。

福岡の友達と会うたび
やっぱりやめたいと何度思ったことか…。

でも、東京を知らずして
福岡のよさだけを力説するのもどうかと思っていたのも事実。

地方、地方都市、都市、これでコンプリートです。

客観的に九州を見る、いい機会にもなりそうです。

やらない後悔よりやる後悔。
一度きりの人生、やらずに後悔したくない!

いや後悔するつもりはありませんが…!

ということで、
ここに住んでいるからこそできることをいっぱいやって
東京のいいところ、福岡のいいところ、たくさん噛み締めて
いろんなことをたくさん吸収したいと思います。

東京の勉強会情報とか全然わからないので
いろいろ教えていただけるとうれしいです!

ということで東京の皆様、これからどうぞよろしくお願いします。

新しい街は寂しくもありますが、
発見の連続で楽しさもあります。

でも基本的にはまだまだ寂しくしています…。

福岡、いえ全国のみなさま!
東京にくるときには絶対連絡してくださいね!!泣

東京のみなさまも、ぜひご飯とか誘ってください!

職場が恵比寿なので
平日、恵比寿でランチとかでも大歓迎です☆

会社から飛び出していきますのでぜひ!

ということで、環境は変わりましたが、
私はわたしでなんら変わっておりませんので
みなさま今後ともどうぞよろしくお願いいたします。

そして新しい職場について

東京での新しい職場についてですが、株式会社Fablicというところで働いています。

フリマアプリのFrilというアプリを作っている会社です。
https://fril.jp/

gplay_512

働き始めてまだ2週間ですが、
会社はとっても楽しいです☆

前職では2~3人で仕事をすることが多かったので、
デザイナーもエンジニアも複数人いるこの環境で仕事をするのはすごく新鮮です。

よりよいアプリになるように全力でがんばっていきますので、
みなさまどうぞFrilをよろしくお願いします!

Fril
https://fril.jp/

for Android
https://play.google.com/store/apps/details?id=jp.co.fablic.fril

for iPhone
https://itunes.apple.com/jp/app/furimaapurifril-fasshonyaburando/id523497998?mt=8

☆ちなみに☆
デザイナーをもう一人募集しています!
どなたか一緒に働きませんか??^^

https://www.wantedly.com/projects/1425

【日曜×プログラミング】年号・祝日・祭日・六曜がすぐわかる シンプルなカレンダー作りました。

日曜×芸人を見ながらパソコンと戯れていたYUKIです。
こんばんは。

googleカレンダーやらスマホのカレンダーやら卓上カレンダーやらいろんなカレンダーを使っているのですが、
祝日や六曜、干支や年号が一度にわかる見やすいカレンダーがなかったので作ってみました!

日曜×芸人を見ながらパソコンと戯れていたYUKIです。
こんばんは!

普段からgoogleカレンダーやらスマホのカレンダーやら
卓上カレンダーやらいろんなカレンダーを使っているのですが、

  • 今日何曜日だっけ?(カレンダーによって月曜始まりだったり日曜始まりだったりして見間違う)
  • その日祝日だっけ?(Googleカレンダーの祝日わかりにくい)
  • 今日大安?仏滅?(意外と載ってるカレンダー少ない)
  • 今年って平成何年だっけ…(おしゃれor海外カレンダーには西暦のみだったり)
  • 来年の干支は…(そんな時期ですね)

っていうときがちょいちょいあって、
すべてを満たしているカレンダーが手元になかったので
(探せばきっとあると思うんだけど)これを見ればすぐわかる!っていうのが欲しくて、作ってみました。

Japanese Holiday Calendar
日本の祝日/祭日/六曜/干支/年号がひとめでわかるカレンダー

design

ほんとに祝日と年号と六曜とかが載ってるだけのシンプルなものです。
デザインも見やすいようにシンプルにしました。

祝日はマウスカーソルを載せるか、スマホだったらタップすると祝日名が表示されます。
完全に私ひとりが便利なだけな気がしますが、せっかくなので公開してみました。
次の連休を探したり冠婚葬祭の日程決めなどにも使えるかも?

レスポンシブにしたのでスマホでもいい感じに見れます。

祝日に詳しくなってきた

壁紙コレクションを作った時に書いたカレンダー描画のコードをベースに作っていたのですが、これは今月とか翌月とかのカレンダーを出力するのに使うコードだったので、過去のことを全然考えていませんでした。

過去にも遡れるようにするカレンダーを作るなら、皇室慶弔行事に伴う休日とかこのへんもきっちり処理しないとカレンダーがおかしくなってしまいます。

http://ja.wikipedia.org/wiki/%E5%9B%BD%E6%B0%91%E3%81%AE%E7%A5%9D%E6%97%A5

祝日についていろいろ調べたのでだいぶ詳しくなってきました。
特に5月の祝日が細々と変わっていることを恥ずかしながら知りませんでした…。

以前、5月4日が休みだった理由とか。(祝日と祝日に挟まれているから休みだった。今はみどりの日。)
振替休日のルールとか。

過去30年ぐらいさかのぼって見てみたのですが、
ここ10年ぐらいで本当に祝日が増えて3連休も増えてますね!

こんなところに2038年問題…

結構前に書いたコードにUNIXタイムスタンプを利用している箇所が結構あって
2038年問題をちょいちょい仕込んでしまっていることに気が付きました…

なので2037年までしかうまく動かないので今はまだ2037年までしか見れません…。

まぁまた祝日の法律が変わると思うので
そもそもこのままで2038年まで使えるわけではないんですが、
早めに書きなおそうと思います><

参考にさせていただいたサイト

なお、コードを書くにあたって以下のサイトのコードを参考にさせていただきました!
ありがとうございました^^

祝日の計算

AddinBox(祝日マクロ-2)

旧暦計算

旧暦計算PHPスクリプト


Japanese Holiday Calendar
日本の祝日/祭日/六曜/干支/年号がひとめでわかるカレンダー

室内で遊べる砂「キネティックサンド」がすごかった!!!!

ひさしぶりにおもちゃ売り場を通りかかったら
「室内用お砂遊び キネティックサンド」
なるものを見つけました。

なんかひさしぶりにおもちゃで感動したのでブログ記事にしてみます!

ひさしぶりにおもちゃ売り場を通りかかったら
「室内用お砂遊び キネティックサンド」
なるものを見つけました。


[tmkm-amazon]B00CO5AQ12[/tmkm-amazon]

ぱっと見みると、まぁふつうの砂なんですが…。

なんかドロッとしているのです。

ラングスジャパン (RANGS) 室内用お砂遊び キネティックサンド 1kg

そして力を加えるとちゃんと固まるのです!!!!

ラングスジャパン (RANGS) 室内用お砂遊び キネティックサンド 1kg

水を入れたりする必要がなくて常に湿った状態を維持するとのこと。

一応動画もあったので貼っておきます。

調べてみると、98%の砂と2%のシリコン素材でできているらしい。
(シリコン素材も元は小麦でグルテンは入っていないとありました)

思いついた人すごい…!!!

これがあれば間違いなくきれいな砂のお城が作れます…!!!!w
大人ですが、なんか久しぶりに砂遊びがしたくなりました(笑)

最近日本でも販売がはじまった商品らしいです。

文章と写真じゃほんとにあんまり伝わらないのですが、
さわってみると結構感動な質感なので、おもちゃコーナーに行く機会があったらぜひ触ってみてください!

↓ラングスジャパンの楽天サイトでも買えるみたいです。

キネティックサンド公式サイト

「偶数月は初心者向けのおそらく3.7 回目くらいのWordBench 福岡」で発表してきました!

WordBench福岡の勉強会、「偶数月は初心者向けのおそらく3.7 回目くらいのWordBench 福岡」で発表してきました!

当日のスライドです。

今回、先日ABC Words 2013で発表させていただいた内容を再編集して発表してきました。

具体的なやり方は調べてばいくらでも出てくるのですが、
なにができるのかわからなければ具体的なやり方も調べようがないので
こういうことができる!というのを簡単にまとめて発表してみました。

機会があればまたなにかまとめて発表したいなと思います!
主催の@tekapoさんはじめ、みなさんありがとうございましたー!

↓当日のツイートなどはこちら
http://togetter.com/li/578231

Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

イラストフォント配布サイト作りました!

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

イラストをフォント化したTTFフォントの配布サイトです。

Windows、Mac OS X以降で使えます。
Webフォント用のファイルも準備予定です。

個人、商用ともにフリーです。
ご自由にお使いください^^

自分で好きなものだけWebフォント化していただいても大丈夫◎

デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。

こういうのがあると便利ー!などのご意見もお待ちしています!!

Font用のSVGファイルはFireworksで

ちなみにサイトのデザイン、アニメーションGIFの作成、フォントの元になったSVGファイルの作成はFireworksで。

詳しい手順などは以下のサイトがとっても参考になりますのでぜひ見てみてください♪

Bootstrap下調べ

bootstrap

というわけでBootstrapを使うにあたって、いろいろ調べ事をしたのでメモしておきます。

Bootstrap 3でレスポンシブを無効にできるか?

Bootstrap 2系は要素を追加してレスポンシブを実現するようになっていたそうなのですが、3系は標準でレスポンシブ対応とのこと。

今回のサイトはPC用のフォント配布サイトということもあって、レスポンシブである必要もあまりなかったのでレスポンシブを無効にする方法を調べました。
以下の手順で簡単にできました。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>を削除する。
<link rel=”stylesheet” href=”css/bootstrap.min.css” media=”screen”>の下に、
<link rel=”stylesheet” href=”css/non-responsive.css” media=”screen”>を追加する。
<script src=”js/respond.min.js”></script>を削除する。
グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*にする。

引用:Bootstrap移行ガイド レスポンシブの無効化

英語ですが、公式サイトにも手順がのっています。

公式:http://getbootstrap.com/examples/non-responsive/

段組はどういう仕組み?

bootstrapでは12カラムのグリッドシステムが採用されています。
トップページは4:4:4、下層ページは8:4で割って使うことにしました。

画像はどのサイズで作る?

%で指定されているグリッドシステムなので、このときこのカラムが○pxというのがいまいちわかりにくいです。なので全体的に画像は大きめに作って、グリッドに対してwidth:100%で貼り付ける必要があるのかなー?という印象。

フォームのスタイリング

classを適切に指定してあげれば、使いやすいフォームに簡単にスタイリングできます。
Contact Form 7だったらこんな感じ。

デザインの調整

以前、2系をさわろうとしたとき、なかなか複雑すぎて
必要な物だけ自分で書いたほうが早そう…と思ってしまって挫折したことがあったのですが
3系は見た目もすごくシンプルになっていて、その分CSSの装飾もシンプルなので追加のCSSで上書きがしやすい感じでした。

その他参考にしたサイトなど

全体的な感想

どっちかというと画像少なめなティザーサイトとか、管理画面とかそういうものをさくさくっと作るのによいのかなーという印象を受けました。

いろんな仕様があって、その仕様にすべて対応できるのか?とかを調べて使うにはちょっと大変かもしれませんが自分に決定権のあるこういう個人サイトをパパっと作るにはものすごく便利です!

なんとなく勝手がわかってきたので、今度はレスポンシブで作ってみたいと思います☆