数値

金額、人数、点数、面積、率など、業務システムにおいては様々な数値を表示/入力ともに取り扱います。データとしての数値は単体および関連する数値どうしの見せかたいかんで伝わりやすさが大きく変わります。それぞれの意味や性質に応じて適切な表示方法を検討します。また、入力する場合もどのような形式やシステムからの補助があるとユーザーにとって都合がよく、認知や操作の上で負荷が小さくなるのか、そして間違いが起こりづらくなるのかよく検討します。

数値の書式

右揃えに

金額や数量など、同一属性情報としての数値が複数要素について繰り返し並ぶような場合、数字を右寄せにすることで情報を拾いやすくなります。とくに表組内では同列の数値の桁位置が揃って縦に並ぶため効果的です。

メーカー品番 品名 単価 点数
MK00008945 スペースカレー 1,200
MK00008941 宇宙おにぎり(鮭) 980
MK00008949 スペースアイスクリーム(バニラ) 1,480

数値の入力

ステッパー

あまり数が大きくならず、1つずつ(1単位ずつ)の増減を行う場合に適しています。

HTML
<div class="row js-stepper">
  <div class="col-xs-6 col-sm-3 col-md-2 col-all-closer col-all-closer--leftend">
    <div class="form-group">
      <label><span class="label-text">数量</span></label>
      <input type="text" class="form-control text-right" value="1">
    </div>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-2 col-all-closer col-all-closer--rightend">
    <div class="form-group">
      <div class="btn-group btn--ls">
        <button type="button" class="btn btn-inverse js-stepper--minus"><span class="icon-abui-minus"></span></button>
        <button type="button" class="btn btn-inverse js-stepper--plus"><span class="icon-abui-plus"></span></button>
      </div>
    </div>
  </div>
</div>
jQuery
const stepnum = 1;
$('.js-stepper').find('.btn-group button').on('click', function() {
  const $field = $('.js-stepper').find('input[type="text"]');
  let val = parseInt($field.val());
  if ($(this).hasClass('js-stepper--minus')) {
    val = val - stepnum;
  } else if ($(this).hasClass('js-stepper--plus')) {
    val = val + stepnum;
  };
  $field.val(val);
});
スライダー

自由な入力を制限して決まった範囲と刻み幅で数値を入力させたい場合、また指定可能な値の範囲が視認できるほうが良い場合に適しています。

0.0

cm
  • -3.0
  • -2.0
  • -1.0
  • ±0
  • +1.0
  • +2.0
  • +3.0