手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します！

Rough Notation

Webサイト｜GitHub

テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます！というようなアニメーションも面白いですね。

導入方法

JavaScriptファイルで

import { annotate } from 'https://unpkg.com/rough-notation?module';

または npm でインストールします。

npm install --save rough-notation

実装方法

基本的には実装したい要素を指定して、装飾を指定し、show() で呼び出します。タイプは underline、box、circle、highlight、strike-through、crossed-off、bracket から選べます。

JavaScript

import { annotate } from 'https://unpkg.com/rough-notation?module';
// npm でインストールした場合はこちら↓
// import { annotate } from 'rough-notation';

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();

See the Pen
Rough Notation Demo by Mana (@manabox)
on CodePen.

↑ページ表示時にアニメーションもあります！デモ画面の右下「Rerun」ボタンから再度読み込んで見てくださいね。

CHART.XKCD

Webサイト｜GitHub

手書き風のラインがかわいいグラフを描画できるライブラリー。線グラフの他に棒グラフや円グラフ、レーダーチャートなどもあります。ただ表示させるだけでなく、グラフ上にカーソルをあわせるとデータも表示されますよ！

導入方法

HTMLファイルにJavaScriptファイルを読み込ませる、

<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>

または npm でインストールします。

npm i chart.xkcd

実装方法

HTMLには空のSVGタグを用意し、JavaScriptでは title でグラフのタイトル、xLabel で横軸のラベル、yLabel で縦軸のラベル、あとはデータを指定すればOK。

HTML

<svg class="line-chart"></svg>

JavaScript

const svg = document.querySelector(".line-chart");

new chartXkcd.Line(svg, {
  title: "デベロッパーの月収",
  xLabel: "月",
  yLabel: "$ ドル",
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
    datasets: [
      {
        label: "計画",
        data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000]
      },
      {
        label: "現実",
        data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150]
      }
    ]
  },
  options: {}
});

デフォルトではタイトルなどの文字は英語しか手書き風にならず、通常のゴシック体で表示されるので、Google Fontsを使って日本語を指定すると尚良！!important をつけないと弾かれます。

CSS

@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
.line-chart {
  font-family: 'Yomogi', cursive !important;
}

See the Pen
Doodle CSS Demo by Mana (@manabox)
on CodePen.

roughViz.js

GitHub

塗りのスタイルや粗さなど、表示オプションが豊富な手書き風グラフライブラリー。線グラフや棒グラフ、円グラフ、散布図などが描画できます。こちらもグラフ上にカーソルをあわせるとデータが表示されますよ。データは外部CSVファイルにも対応しています。

導入方法

HTMLファイルにJavaScriptファイルを読み込ませる、

<script src="https://unpkg.com/rough-viz@1.0.6"></script>

または npm でインストールします。

npm install rough-viz

実装方法

HTMLで空の要素を用意して、JavaScriptでは new roughViz につづけてグラフの様式、要素の指定、データを入力すればOK。オプションで色や線の幅、塗りのスタイルなどが指定できます。粗さ（roughness）は数値で指定できますが、8くらいから何がなんだかわからなくなるので、指定の際は気をつけましょう。

HTML

<div id="viz"></div>

JavaScript

new roughViz.Donut({
  element: "#viz",
  data: {
    labels: ["a", "b", "c"],
    values: [20, 10, 5]
  },
  colors: ["#0bd", "#fc2", "#f99"]
});

See the Pen
roughViz.js Demo by Mana (@manabox)
on CodePen.

Rough.js

Webサイト｜GitHub

手書き風の図形をCanvasやSVGで描画できます。9KB以下と軽量。縁取りだけでも可愛いので、アニメーションと組み合わせてあれこれ楽しめそうですね！

導入方法

head タグ内でファイルを読み込ませる、

<script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>

または npm でインストールします。

npm install --save roughjs

実装方法

HTMLで描画する要素を用意しておいて、JavaScriptで座標や装飾を指定するだけです。塗りつぶしの模様は hachure (デフォルト), solid, zigzag, cross-hatch, dots, dashed, zigzag-line から選べます。

JavaScript

const rc = rough.canvas(document.getElementById('rough-shapes'));
rc.circle(50, 50, 80, { fill: '#0bd' });

下記のデモでは簡単な図形のみですが、細かな座標を指定して描画してみても面白そうです（冒頭のサムネイル画像のロゴマークも、試しにこのライブラリーで描画したものを加工しています！）。

See the Pen
Rough.js Demo by Mana (@manabox)
on CodePen.

他にも手書き風にするためのおすすめライブラリーがあれば教えてくださいね！