---
title: コードでデザインをするということ
tags:  #design  
author: [Hiroki Tani](https://www.docswell.com/user/hiloki)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/GJWL8R1PE2.jpg?width=480
description: デザインとは？エンジニアリングとは？といった小難しい話はしません。 デジタルプロダクトに関わってきたデザイナーとしてコードを書くということ、そしてコードでデザインをするというのはどういうことかについて、自身のキャリアを辿りながら今考えていることや、なぜそれを続けてきているのかについてお話します。  https://fest2022.spctrm.design/
published: December 11, 22
canonical: https://www.docswell.com/s/hiloki/ZG8YMZ-designing-with-code
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/GJWL8R1PE2.jpg)



# Page. 2

![Page Image](https://bcdn.docswell.com/page/4EZM8RP6J3.jpg)

Hiroki Tani
@hiloki
Web Designer
↓
Frontend Developer
↓
UX Engineer
↓
Design Engineer


# Page. 3

![Page Image](https://bcdn.docswell.com/page/Y76NPRML7V.jpg)



# Page. 4

![Page Image](https://bcdn.docswell.com/page/G755K8ZM74.jpg)



# Page. 5

![Page Image](https://bcdn.docswell.com/page/9J2NWKRRER.jpg)



# Page. 6

![Page Image](https://bcdn.docswell.com/page/DEYPLND5EM.jpg)

Code is a Material


# Page. 7

![Page Image](https://bcdn.docswell.com/page/VJN54X6478.jpg)



# Page. 8

![Page Image](https://bcdn.docswell.com/page/YE9YQ8L4J3.jpg)



# Page. 9

![Page Image](https://bcdn.docswell.com/page/GE86G8XV7D.jpg)



# Page. 10

![Page Image](https://bcdn.docswell.com/page/LEL9GR8RJR.jpg)



# Page. 11

![Page Image](https://bcdn.docswell.com/page/4JMZQR6PEW.jpg)



# Page. 12

![Page Image](https://bcdn.docswell.com/page/PJR68RPY79.jpg)

font-size: clamp(1rem, -1rem + 5vw, 2rem)


# Page. 13

![Page Image](https://bcdn.docswell.com/page/PEXM8R347X.jpg)



# Page. 14

![Page Image](https://bcdn.docswell.com/page/3EKGKRYPJD.jpg)



# Page. 15

![Page Image](https://bcdn.docswell.com/page/L73NZ89475.jpg)

> "Meta-design is much more difficult
> than design; it's easier to draw
> something than to explain how to
> draw it"
> - Donald Knuth, The Metafont Book


# Page. 16

![Page Image](https://bcdn.docswell.com/page/87DWRMG5JG.jpg)



# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJP9WR3DE8.jpg)

Code is a Meta-design tool


# Page. 18

![Page Image](https://bcdn.docswell.com/page/2EVM8R4GEQ.jpg)

:root {
--ratio: 1.5;
--s-5: calc(var(--s-4) / var(--ratio));
--s-4: calc(var(--s-3) / var(--ratio));
--s-3: calc(var(--s-2) / var(--ratio));
--s-2: calc(var(--s-1) / var(--ratio));
--s-1: calc(var(--s0) / var(--ratio));
--s0: 1rem;
--s1: calc(var(--s0) * var(--ratio));
--s2: calc(var(--s1) * var(--ratio));
--s3: calc(var(--s2) * var(--ratio));
--s4: calc(var(--s3) * var(--ratio));
--s5: calc(var(--s4) * var(--ratio));
}


# Page. 19

![Page Image](https://bcdn.docswell.com/page/57GG5MKD7L.jpg)



# Page. 20

![Page Image](https://bcdn.docswell.com/page/4EQXZRNX7P.jpg)



# Page. 21

![Page Image](https://bcdn.docswell.com/page/KJ4638G271.jpg)



# Page. 22

![Page Image](https://bcdn.docswell.com/page/LE1V12DK7G.jpg)

Code is a Language


# Page. 23

![Page Image](https://bcdn.docswell.com/page/GEWL8RYP72.jpg)



# Page. 24

![Page Image](https://bcdn.docswell.com/page/47ZM8RX6E3.jpg)



# Page. 25

![Page Image](https://bcdn.docswell.com/page/YJ6NPR4LJV.jpg)



# Page. 26

![Page Image](https://bcdn.docswell.com/page/GJ55K8QMJ4.jpg)



# Page. 27

![Page Image](https://bcdn.docswell.com/page/9E2NWKPR7R.jpg)

function Sticker(props: { message: string }) {
return <p>{props.message}</p>;
}
function Scene() {
return (
<Container>
<Sticker message="Hello" />
</Container>
);
}


# Page. 28

![Page Image](https://bcdn.docswell.com/page/D7YPLN557M.jpg)

Code is a Material
Code is a Meta-design tool
Code is a Language
// Design with Code now!


# Page. 29

![Page Image](https://bcdn.docswell.com/page/VEN54XN4J8.jpg)

Ask Me Anything about
-
Designing with Code
Design Systems
Figma Plugin/Widget
HTML,CSS
How to drip tasty coffee
Lovely Shiba-dogs


# Page. 30

![Page Image](https://bcdn.docswell.com/page/Y79YQ8R4E3.jpg)

References
-
Code is a Material, Clarity 2019
Flower Typer Three.js, CodePen
“Content Is Like Water”, Medium
Donald Knuth Biography, The Crazy Programmer
Metafont examples
https://every-layout.dev/rudiments/modular-scale/
Figma Hacks and Workflow Enhancements with Plugins, Config 2022