地の凹凸と、浮かぶガラス。

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 で見る (新しいタブで開きます)

このデザインで、あなたの仕事に合うアプリを。

予約や在庫の管理、スマートフォンで使う小さな道具まで。まずはお仕事のことを聞かせてください。

無料で相談する