Playground

Webアプリ集

所長が趣味で作ったブラウザだけで動くツールたちです。
「こんなこともできるんだ」という発見として、また実際の業務にもお役立てください。

App 01

黄金比計算器

黄金比(φ = 1.618…)は、自然界や芸術作品に普遍的に現れる「美しい比率」です。

幅を入力すると、黄金比に基づいた高さ・隣辺・正方形部分を自動で算出します。 カード・画像・レイアウトのサイズ決定に役立ちます。

φ = (1 + √5) / 2 ≈ 1.6180339...
黄金比の高さ 185.4
長辺(width × φ) 485.4
正方形部分 300 × 300
App 02

カラーパレット生成器

ベースカラーを1色選ぶだけで、補色・類似色・トライアド配色を自動生成します。

色相環の数学的な計算に基づいて算出するため、直感ではなく「論理に基づいた美しい配色」が得られます。 ブランドカラーの選定やサイトのカラースキーム設計に活用してください。

#025DCC
ベースカラー
補色(Complementary)
類似色(Analogous)
トライアド(Triadic)
App 03

タイポグラフィ比較

フォントの組み合わせ(ペアリング)は、サイトの印象を大きく左右します。

3種のフォントを並べてリアルタイムで比較。テキストを入力すると、すべてのフォントに反映されます。

Noto Serif JP(明朝体)
伝統的な威厳と温かみ。ブランドの「格」を出したいときに。
Lato(欧文サンセリフ)
クリーンでモダン。数字・英字の読みやすさが際立つ。
Roboto Mono(等幅)
技術的なクールさ。数値・コード・キャッチコピーに映える。
App 04

モジュラースケール計算器

「調和のとれたフォントサイズ」は偶然ではなく、数学的な比率から生まれます。

ベースフォントサイズと比率を設定すると、美しいタイプスケールを自動生成します。 このサイト自体もモジュラースケールに基づいてフォントサイズを設計しています。