LiberkaDesign Guidelines

Individual Media Guidelines

共通のデザイン原則を、各媒体の制作と検証へつなぎます。ガイドラインとチェックリスト・禁則事項を、媒体ごとに確認できます。

スライド

メッセージと論理を原稿で固め、図表・画像へ展開する。

スライドのガイドライン · チェックリスト・禁則事項

ドキュメント

要約から本文・根拠まで、読み手が自分で辿れる文書をつくる。

ドキュメントのガイドライン · チェックリスト・禁則事項

Web

情報構造、操作、状態、アクセシビリティを一貫して設計する。

Webのガイドライン · チェックリスト・禁則事項

視覚表現ライブラリ

背景と視覚表現の実例を見る

問いから表現を比較する81形式。HTML実装ありの29形式と参照専用の52形式を区別しています。検索ツール production_search_visuals は用途・注意点・入力契約を返します。

形式 用途 実装
V01 横棒 どれが大きいか。カテゴリと同単位の値 HTML / bars
V02 縦棒 期間・順序ごとの量。区間値 参照専用
V03 ドット 僅かな差を含む値の位置。カテゴリと値 参照専用
V04 ロリポップ 多数カテゴリの大小 参照専用
V05 グループ棒 各カテゴリ内の系列差 参照専用
V06 ダンベル 同一対象の二値の差 参照専用
V07 スロープ 二時点での変化方向 参照専用
V08 発散棒 基準を超えた/下回った差 参照専用
V09 バレット 実績は目標に届いたか 参照専用
V10 ウォーターフォール 初期値から最終値への増減内訳 参照専用
V11 パレート 上位項目でどれだけ占めるか 参照専用
V12 ベンチマーク点図 対象は基準群のどこか 参照専用
V13 折れ線 いつ、どのように変わるか。時点と値 参照専用
V14 ステップ線 状態・料金・残高がいつ切り替わるか 参照専用
V15 小分割時系列 複数対象の推移を比較 参照専用
V16 指数化時系列 基準時点からの相対変化 参照専用
V17 区間・帯付き推移 推定・予測の幅を含めて読む 参照専用
V18 スパークライン 多数項目の傾向を一覧 参照専用
V19 ガント 作業の期間・重なり 参照専用
V20 マイルストーン いつ何を確認・決定するか HTML / milestones
V21 カレンダーヒートマップ 曜日・季節の繰り返し 参照専用
V22 コホート表 同じ開始群がどう継続するか 参照専用
V23 ヒストグラム どの範囲に多いか。個票または区間度数 参照専用
V24 ドットストリップ 個体値と重なりを見る 参照専用
V25 箱ひげ 群ごとの中央値と広がり 参照専用
V26 バイオリン 群ごとの分布形状 参照専用
V27 累積分布 閾値以下は何割か 参照専用
V28 散布図 二変数がどう関連するか 参照専用
V29 バブル散布図 関連に第三の量を重ねる 参照専用
V30 ヒートマップ 二軸の組合せの強弱 参照専用
V31 推定値と区間 差はどの程度確かか 参照専用
V32 感度分析図 前提が変わると結論はどう変わるか 参照専用
V33 シナリオ比較 複数前提で結果がどう違うか 参照専用
V34 積み上げ棒 総量と内訳はどう違うか HTML / stacked
V35 100%積み上げ 構成比の違いは何か HTML / stacked-percent
V36 円・ドーナツ 一つの全体の大まかな構成 参照専用
V37 ワッフル 全体のうち何割か HTML / waffle
V38 単位アイコン図 人数等を身近な単位で理解 参照専用
V39 ツリーマップ 多数の部分と階層の構成 参照専用
V40 サンバースト 階層ごとの構成経路 参照専用
V41 サンキー どこからどこへ量が移るか 参照専用
V42 アルビアル 分類の所属が段階間でどう変わるか 参照専用
V43 階級区分図 地域ごとの率・密度はどう違うか 参照専用
V44 比例記号地図 地点・地域の総量はどれだけか 参照専用
V45 注釈付き位置図 どこにあり、どう移動するか 参照専用
V46 ツリー 何が何に属するか HTML / hierarchy
V47 包含図 どこまでが範囲か HTML / containment
V48 集合図 共通・固有の要素は何か 参照専用
V49 ネットワーク 誰と誰がどうつながるか 参照専用
V50 レイヤー図 役割がどう積み重なるか HTML / layers
V51 分解・断面図 全体の中に何があるか 参照専用
V52 プロセスフロー どの順に何を行うか 参照専用
V53 スイムレーン 誰から誰へ渡るか HTML / swimlane
V54 状態遷移 何が起きると状態が変わるか 参照専用
V55 シーケンス 主体間のやり取りの順番 参照専用
V56 決定木 条件からどの選択へ進むか 参照専用
V57 論証・根拠図 結論を何が支えるか 参照専用
V58 因果仮説図 どの要因が何へ作用する想定か 参照専用
V59 ジャーニー 読者・利用者は何を経験するか HTML / journey
V60 サービスブループリント 体験を裏側で誰が支えるか 参照専用
V61 ストーリーボード 場面がどう移り、何が変わるか HTML / storyboard
V62 Before/After対照 何を維持し何を変えるか HTML / comparison
V63 数値参照表 値を正確に調べる HTML / table
V64 選択肢比較表 条件ごとの違いを比べる HTML / table
V65 権限マトリクス 誰が何をできるか HTML / table
V66 責任分担表 誰が実行・承認・支援するか HTML / table
V67 決定表 条件の組合せと結果 HTML / table
V68 根拠対応表 主張の裏付けを辿る HTML / table
V69 リスク表 問題と対応を追う HTML / table
V70 二軸配置 トレードオフを探索する 参照専用
V71 スコアカード 複数観点を要約する HTML / table
V72 レーダー 同一尺度で特徴形状を見る 参照専用
V73 端末モックアップ 実画面が利用環境でどう見えるか。実機の外観素材または生成モックアップと画面asset HTML / device
V74 月桂冠・実績エンブレム 何を根拠に評価・提携を示すか。短い主張と出典 HTML / laurel
V75 インラインハイライト 文のどこが判断の核か。前置き・強調句・後置き HTML / highlight
V76 コメント吹き出し 誰のどんな声が課題を具体化するか。発言・話者・出典・実例か想定か HTML / quote
V77 概念ピラミッド 基盤と上位の役割はどう積み重なるか。上から順序付きの層 HTML / pyramid
V78 番号付きカード 提案の特徴・段階は何か。01・02・03と短い要点、任意の指定アイコン HTML / cards
V79 注釈付き画面 実画面のどこを見れば何が分かるか。画面と座標・番号・説明 HTML / annotated
V80 対応ペア 課題と施策、入力と出力はどう対応するか。左右の項目と関係名 HTML / pairs
V81 基準付き指標 何と比べて現在値がどうか。値・基準値・単位・期間・出典 HTML / metric