地の凹凸と、浮かぶガラス。
fukicycle design v0.2.0
ことり# がアプリを作るときに使っている、自作のデザインシステムです。凹凸とガラスの質感、アイコン、そしてボタンの置き場所まで、画面づくりの決まりをひとつにまとめています。
色は製品ごとに決めます。決まっているのは手ざわりと使い方なので、お店の色に合わせながら、はじめて触る人も迷わない画面に仕上げられます。
同じ質感を、3つの色で
デザインシステムに渡すのは、地の2色・文字・差し色の5色だけです。影や光、ガラスはそこから計算されます。右上の切り替えで、夜の見え方も確かめられます。
-
このサイトの色
-
青い製品なら
-
やわらかい製品なら
決まり
-
置く前に考える
ボタンを置く前に「どこにあるべきか」「使う人はどんな気持ちで押すか」を決めます。よく使う操作は親指の届く下側に、たまに使う操作は上側に置きます。
-
色は製品ごと、質感は同じ
テーマカラーは製品に合わせて決めます。影や光、ガラスはその色から計算するので、緑でも青でも、同じ手ざわりに見えます。
-
凹凸は地の一部
浮いた板や沈んだ受け皿は、地と同じ色のまま、影と光だけで作ります。面を別の色で塗りません。
-
ガラスは浮いているものだけ
すりガラスは、ナビや札のように中身の上に浮くものだけに使います。下のものが透けて見えることで、重なりが分かります。
-
選んでいるものは沈める
押したボタンも、選んでいるタブも、地に沈んで差し色になります。アイコンは、同じ形のガラスをもう一枚少しずらして重ねます。
-
新しい版は、使う人が選ぶ
アプリが勝手に切り替わることはありません。お知らせで伝え、使う人が好きなときに更新できます。
アイコン一覧54個
24×24の格子に、太さ1.6の線で描いています。ひとつのアイコンに、ふだん使う「線」と、選んでいるときの「ガラス」の二つの形があります。それぞれに、画面のどこに置くか、使う人がどんな気持ちで押すかを決めています。
ナビゲーション
-
ホーム
home- 置き場所
- タブバー左端
- 押す気持ち
- 迷ったとき、いつもの起点に戻りたい
-
戻る
back- 置き場所
- 画面左上(親指で届く左端)
- 押す気持ち
- ひとつ前の画面に戻りたい
-
進む
forward- 置き場所
- リスト行の右端
- 押す気持ち
- この項目の中身を見たい(押せる行の合図)
-
閉じる
close- 置き場所
- シート・モーダルの右上
- 押す気持ち
- 今の作業をやめて元に戻りたい
-
メニュー
menu- 置き場所
- 左上(タブバーが無いWebアプリのみ)
- 押す気持ち
- ほかの画面を探したい
-
その他
more- 置き場所
- カード・行の右上
- 押す気持ち
- めったに使わない操作(複製・書き出し等)をしたい
-
検索
search- 置き場所
- 一覧画面の上部(入力欄の左)
- 押す気持ち
- 目当ての記録を素早く見つけたい
-
設定
settings- 置き場所
- 全画面のトップバー右上(一番右)
- 押す気持ち
- 自分好みに変えたい・困ったときに確認したい
-
開く
expand- 置き場所
- 折りたたんだ行(よくある質問など)の右端。開くと上下が反転する
- 押す気持ち
- 隠れている続きを、その場で読みたい
操作
-
追加
add- 置き場所
- 右下のFAB(親指ゾーン)
- 押す気持ち
- 新しい記録をすぐ残したい
-
編集
edit- 置き場所
- 詳細画面の右上/対象の右
- 押す気持ち
- 間違いを直したい
-
削除
delete- 置き場所
- 編集画面の最下部(主ボタンから離す)
- 押す気持ち
- 不要な記録を消したい(取り消せない→確認を挟む)
-
共有
share- 置き場所
- 詳細画面の右上
- 押す気持ち
- 誰かに見せたい・送りたい
-
保存
download- 置き場所
- 書き出し画面・シートの中
- 押す気持ち
- 手元に残しておきたい
-
コピー
copy- 置き場所
- コード・ID・URLの右隣
- 押す気持ち
- この値をほかで使いたい
-
絞り込み
filter- 置き場所
- 一覧の上部、検索欄の右
- 押す気持ち
- 条件に合うものだけ見たい
-
並び替え
sort- 置き場所
- 一覧の上部、絞り込みの隣
- 押す気持ち
- 新しい順・良い順で見たい
-
更新
update- 置き場所
- 通知一覧の「新しい版」のお知らせ、設定 > このアプリについて
- 押す気持ち
- 区切りのいいときに新しい版にしたい(リリースノートを見てから決めたい)
-
元に戻す
undo- 置き場所
- 削除・変更直後のトースト内
- 押す気持ち
- うっかりした操作を取り消したい
状態
-
完了
check- 置き場所
- 保存後のトースト・完了した行
- 押す気持ち
- ちゃんとできたか確かめたい
-
情報
info- 置き場所
- 用語や数値の横
- 押す気持ち
- これが何を意味するか知りたい
-
注意
warning- 置き場所
- 入力欄の下・バナー
- 押す気持ち
- このまま進んで大丈夫か知りたい
-
エラー
error- 置き場所
- 失敗した場所のすぐ横
- 押す気持ち
- 何がだめで、どう直せばいいか知りたい
-
通知(風鈴)
notify- 置き場所
- トップバー右上(設定の左)。全アプリで常に表示
- 押す気持ち
- 見逃したお知らせ(新しい版を含む)を確認したい
メディア
-
カメラ
camera- 置き場所
- 記録フォームの写真欄/レシート読取
- 押す気持ち
- その場で写真を撮って残したい
-
写真
image- 置き場所
- 記録フォームの写真欄(カメラの隣)
- 押す気持ち
- 撮ってある写真から選びたい
-
マイク
mic- 置き場所
- 入力欄の右端
- 押す気持ち
- 手を使わずに入力したい
-
再生
play- 置き場所
- タイマー・計測の主ボタン
- 押す気持ち
- 計測やタイマーを始めたい
-
一時停止
pause- 置き場所
- 再生と同じ位置(押すと入れ替わる)
- 押す気持ち
- 少しだけ止めたい
時間・データ
-
暦
calendar- 置き場所
- 日付欄・履歴画面の右上
- 押す気持ち
- あの日の記録を見たい
-
時刻
clock- 置き場所
- 時刻欄
- 押す気持ち
- いつ起きたことかを残したい
-
砂時計
timer- 置き場所
- 発酵・待ち時間の表示
- 押す気持ち
- あとどれくらい待つか知りたい
-
グラフ
chart- 置き場所
- タブバー(記録の振り返り)
- 押す気持ち
- 成長や変化を一目で見たい
-
一覧
list- 置き場所
- タブバー(記録の一覧)
- 押す気持ち
- 残した記録をまとめて見たい
人
-
自分
user- 置き場所
- タブバー右端
- 押す気持ち
- 自分の情報や記録全体を確かめたい
-
会話
chat- 置き場所
- タブバー中央
- 押す気持ち
- 誰かに相談したい・返事を見たい
-
いいね
heart- 置き場所
- 投稿の左下(指の自然な位置)
- 押す気持ち
- 良かったと伝えたい
-
栞
bookmark- 置き場所
- 記事・ルートの右上
- 押す気持ち
- あとでまた見返したい
アプリ固有
-
自転車
bike- 置き場所
- ぽたりん:ライド開始・機材
- 押す気持ち
- これから走る/走った記録を見たい
-
経路
route- 置き場所
- 地図画面の右下(現在地の上)
- 押す気持ち
- 走りやすい道を通って行きたい
-
地点
pin- 置き場所
- 地図上・場所欄
- 押す気持ち
- この場所を残したい・共有したい
-
がま口
wallet- 置き場所
- 家計簿:タブバー(支出)
- 押す気持ち
- 今月いくら使ったか知りたい
-
食パン
bread- 置き場所
- ひとこね:新しい仕込み
- 押す気持ち
- 今日のパン作りを記録したい
-
温度
thermo- 置き場所
- ひとこね:室温・生地温度の欄
- 押す気持ち
- 発酵の条件を残して比べたい
-
同期
cloud- 置き場所
- 設定のデータ欄・同期状態の表示
- 押す気持ち
- ほかの端末でも同じ記録を見たい
-
鍵
lock- 置き場所
- 非公開・招待制の表示の横
- 押す気持ち
- 自分(仲間)だけに見えるか確かめたい
-
外部リンク
external- 置き場所
- リンク文字の右隣
- 押す気持ち
- 別のサイトで詳しく見たい(アプリから出ると分かる)
表示
-
昼
sun- 置き場所
- 設定 > 表示 > テーマ
- 押す気持ち
- 明るい所で見やすくしたい
-
夜
moon- 置き場所
- 設定 > 表示 > テーマ
- 押す気持ち
- 暗い所でまぶしくないようにしたい
-
自動
theme-auto- 置き場所
- 設定 > 表示 > テーマ
- 押す気持ち
- 端末の設定(昼・夜)に合わせてほしい
和モチーフ
-
青海波
seigaiha- 置き場所
- 読み込み中など、待っている間の演出(使うかはアプリごとに決める)
- 押す気持ち
- 待っている間も心地よくいたい
-
桜
sakura- 置き場所
- 目標達成・自己ベストの演出
- 押す気持ち
- がんばったことを祝ってほしい
-
暖簾
noren- 置き場所
- お店・ショップ・サイトへの入口
- 押す気持ち
- お店(ストア)に入りたい
-
円相
enso- 置き場所
- すべて完了したときの演出
- 押す気持ち
- ひと区切りついた満足感を味わいたい
公開しています
このデザインシステムは、MIT ライセンスで GitHub に公開しています。どなたでもお使いいただけます。お使いになるときに、クレジットを書いていただけるとうれしいです。
「fukicycle」の名前とロゴは、ライセンスに含まれません。
GitHub で見る (新しいタブで開きます)このデザインで、あなたの仕事に合うアプリを。
予約や在庫の管理、スマートフォンで使う小さな道具まで。まずはお仕事のことを聞かせてください。
無料で相談する