19
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

油絵から学んだ、デザイン・コード・働き方に共通する「余白理論」

19
Last updated at Posted at 2026-06-25

はじめに

 初めまして。入社3ヶ月目の新人エンジニアです。今回がQiita初投稿(デビュー作)になります。これからよろしくお願いいたします。

 私が高校生の頃、美術部で油絵を描いていたときのことです。 キャンバスに向かっている私に、顧問の先生がよくこんなアドバイスをしてくれました。

「余白を意識しろ!」

 当時の私は、気合いを入れて画面の隅から隅まで絵の具をベタベタと塗りつぶしてしまいがちでした。しかし、そうするとかえって絵全体が重苦しくなり、主役のモチーフが死んでしまいます。あえて「描き込まない空間(余白)」を作ることで、初めて絵の全体像が引き立つということを、私は油絵から学びました。

 それから時が経ち、私は今、入社して3ヶ月の新人エンジニアとして日々奮闘しています。 1ヶ月前に全体研修を終え、現在はエンジニアとしての専門研修を受けている真っ最中なのですが、少しずつデザインの基礎やコーディングの規約を学んでいく中で、ふと気づいたことがあります。

「要するに、あらゆる基本は『余白を意識すること』に集約されるのではないか?」

 今回は、新人エンジニアの私が学びの中で行き着いた【余白理論】について語ってみたいと思います。

目に見える余白:美しさは「余白」が作る

デザイン4原則

 UIを美しくするための「デザイン4原則(近接・整列・反復・コントラスト)」という言葉があります。これらを意識することはもちろん大切ですが、その根底にあるのは結局のところ「余白」ではないでしょうか。

  • 画面端との余白(マージン)
  • 要素と要素の間の余白(パディング・ギャップ)

 文字や図そのものよりも、それらの周りにある「余白のサイズ」に統一感を持たせること。言い換えれば、「適切な場所に、統一されたサイズの余白を配置する」だけで、デザインは劇的に洗練され、見やすくなります。

インデントと改行という名の秩序

 この理論は、ソースコードを書く際にも全く同じことが言えます。

 私たちが常に意識している「インデントを揃える」という行為。これも結局、「画面左端からの余白を、同じスコープ内で均等にする」という【横の余白】の調整に他なりません。 また、意味のまとまりごとに空行を入れる【縦の余白】も重要です。適切な位置にスペースや改行を入れることで、コードの意図が視覚的に伝わり、可読性が格段に上がります。

 デザインもコードも、ルールのある「余白」を整えることで、アウトプットの質は一段階上がるのです。

目に見えない余白:100%で塗りつぶさない

 ここまでは「目に見える余白」の話をしてきましたが、この理論は私たちの「働き方」という目に見えない領域にも適用できると感じています。

スケジュールを塗りつぶすと息苦しくなる

 新人である私は今、「早く一人前になりたい」という思いから、つい予定やタスクをパズルのように隙間なく埋め尽くしてしまいそうになります。しかし、これは油絵のキャンバスを100%塗りつぶすのと同じ状態です。

  • 予期せぬエラーで調査に時間がかかる
  • 先輩から新しい知識を教わる
  • 単純に集中力が切れてしまう

 こういったイレギュラーが起きた瞬間、ギチギチのスケジュールはあっけなく破綻し、焦りだけが残ります。特に学びの多い新人期間において、体力や集中力を毎日100%使い切ってしまうのは、かえって吸収力を落としてしまう原因になりかねません。

80%の本体に、100%の力で臨むための「余白」

 だからこそ、頑張りすぎないための手段として、あえて最初から「20%の余白」を作っておくことが大切だと気づきました。全体の稼働スケジュールを80%程度に留め、残りの20%は余力として持っておくのです。

 ただし、ここで一つ重要なことがあります。 それは「80%の本体には、100%の全力で臨む」ということです。当たり前のことですが、コアとなる80%のタスクに全力で向き合わなければ、質の高いアウトプットは生まれず、本来のパフォーマンスを発揮しきれなくなってしまいます。

 20%の余白(余裕)があるからこそ、残りの80%に「100%の集中力」を注ぎ込めるのです。

 この余白は、決してサボっている時間ではありません。油絵でいうところの「一歩引いて、絵の全体像を確認する時間」です。 心とスケジュールに余白があるからこそ、「このコード、もっとシンプルに書けないかな?」「今つまずいているエラー、別の見方ができないかな?」と立ち止まって考える余裕が生まれます。ギリギリまで予定を詰め込まないことで、かえって全体像がよく見え、結果的に質の高い仕事につながるのです。

おわりに

 高校時代、油絵のキャンバスに向き合っていた頃に先生からいただいた「余白を意識しろ」というお言葉。 エンジニアとしてのスタートラインに立った今、その本当の意味を少し分かった気がします。

 画面のUIも、ソースコードの記述も、そして日々のスケジュールも。 隙間なく埋め尽くされたものに、美しさや余裕は宿りません。

 ツールを使ってタスクを限界まで詰め込むのではなく、あえて空白の時間を組み込む。 これから先、仕事で息切れしそうになったときは、コードのインデントを整えるのと同じように、自分の働き方にもスッと「余白」を差し込んでいきたいと思います。

 今回が初めてのQiita投稿でしたが、最後まで読んでいただきありがとうございました。これからも学んだことを少しずつアウトプットしていきたいと思います。

19
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?