これは、筆者の「2025振り返り用ひとりアドカレ」記事の一つです。
はじめに
本記事でいうデザインとは、グラフィックデザインやエディトリアルデザイン、webデザインなどを指します。
プロダクトデザインやインテリアデザイン、カーデザインといった分野とは異なるのでご注意ください。
また、本記事では「クリエイティブ」という言葉を「webサイトやチラシなどの視覚的制作物」というニュアンスで扱います。
筆者は、普段 webデザイナーという名目で働いていますが、所属企業ではweb解析をしたり、顧客折衝（※最近は少ない）したり、簡易な社内システムや販促ツール、業務自動化ツールを作ったり、たまに紙媒体のデザインをしたりなど色々なことをしています。
所属企業はグループ企業の各種クリエイティブ制作を主に扱っているのですが、クライアント（グループ企業）のクリエイティブに対する理解は「来週か2週間後までにこんな感じのコーポレートサイト作って～、明日までに○○枚の名刺ください」とかいう感じです。
筆者はこうした場所で働く中で良くも悪くも「なんか分からんけど今っぽくて悪くない感じ」を相手に思わせればスムーズに進んでいく経験を実感してきました。
しかし、この「なんか分からんけど今っぽくて悪くない感じ」を相手に思わせるには、やはりある程度デザインに関する知識が必要です。
ところで、この「なんか分からんけど今っぽくて悪くない感じ」ですが、かなり抽象的なので筆者の経験則のもと解釈してみると要件や要望が達成されている（または達成が期待できそうな）感じで、かつ素人臭くないデザインになっているようなものだと成り立つ印象です。
そこで、本記事では及第点デザインのレベル感を実現するための情報を、筆者の経験則を交えて書いていきたいと思います。
具体的には以下の方々を読者層にしています。
対象読者
- webエンジニアの中でもフロントエンド寄りの方々
- デザイナーとエンジニア（コーダー）との橋渡し役となる立場の方々
- 非IT系企業で、社内向けクリエイティブを任されている方々
- web技術や知見に自信があるものの、UI・モックアップ・プロトタイプ製作において詰まってしまう方々
- デザインに関心のあるwebエンジニア
結論
「デザインの4原則」をはじめ、デザインに関する基礎知識を学んで活用する。つまり、地道な基礎学習が大事になる。
基礎知識さえあれば、実務で「情報のまとまりが視覚的に整理されているか」や「強調すべき要素が一目で判別できるか」といった観点で自分の成果物をチェックするだけでも「及第点」かどうかの判断ができるようになる。
ただし現代では、基礎知識に関してある程度の理解が必要となるものの、それをベースにAI活用する方法も考えられる。
手掛けるクリエイティブの要件や制約、基礎知識をロジックとしてプロンプトに盛り込んでAI（LLM）に生成させることで、 使い捨て用途や簡易なモックアップ・プロトタイプの場合は十分となる可能性もある。
webバナー作成をベースにしたプロンプト例
プロンプト例
※以下のプロンプト例ではwebバナーを指定していますが、サムネイルやヒーローイメージ画像、フライヤー（チラシ）などにも一部調整すれば対応できるかと思います。
## タスク：
葬儀会社の手元供養品に関するブランディングおよび集客目的のwebバナー作成
## 前提・背景：
### 前提：
あなたは紙媒体をはじめ、動画やwebなど幅広いクリエイティブでキャリアを積んできた経験豊富なクリエイターです。
これまで培った経験や知見をベースに**webバナーを作成**してください。
重要な注意事項として、これは**視覚的情報が「評価」に強く関わるクリエイティブ制作**なので、適宜「**実際のビジュアル化（画像生成）**」を実施してインタラクティブにブラッシュアップしていくタスクフローを意識してください。
### 背景：
タスク依頼の背景には以下の事情や状況、構想などがあります。よく読んで理解して下さい。
手元供養という葬送手段の認知度が高くないので、そこを高めるとともに最終的には手元供養を一つの事業軸に成長させるまでの構想を持っています。
今回、そのファーストステップとして**ブランディング向上及び集客**を目的としています。
## クリエイティブ制作における注意事項：
近接・整列・反復・コントラストといった「デザインの4原則」を踏襲し、どういった点が各法則に則っているか**デザイン（成果物の）言語化**までお願いします。
上記を必須事項とした上で今回のwebバナーは以下のイメージ・テイストで制作をお願いします。
### クリエイティブのイメージ・テイスト：
- 高価格帯の製品もあるため、稚拙になりすぎないよう品性や高級感を感じるデザイン・テイストにする
- 手元供養という性質なので、「楽しさ」や「明るさ」、「ワクワク」といったポジティブなイメージにならないよう意識する
- 必要に応じて人物を盛り込み、適宜キャッチコピーまで設ける
- 人物や手元供養品の写真は差し替えられるような再利用（コンポーネント）性を意識する
- キーカラーは「深い青」、サブカラーは「ゴールド」、アクセントカラーは「オレンジ」、これらを必要に応じて利用する
### ターゲット層：
- 30代から50代の「親の最期を気に掛ける子ども層」
- 60代から80代など「自身の終活を意識している層」
## 制約・条件：
- webバナーのサイズ設定については明示的に指示されない場合「**16/9の比率設定**」で進めてください
- 基本的に**こちらの了承が得られるまではタスク実施はストップ**してください
- 不明点や疑問点、法律上の懸念点、他に必要な情報があれば**作業を一時中断**して尋ねてください
- ステップバイステップで作業フェーズを設けて、自身でセルフレビューした上で各フェーズおよびタスクを提案してください
上記プロンプトによるAIが生成したwebバナー
何も指示していなのに2パターン用意してくるのは素晴らしいですね。
しかしどちらも少し情報量が足りないと感じたので追加依頼をしました。
追加プロンプト：もう少しCTAと訴求効果を高められそうな、手元供養に関する詳細情報を盛り込んでください。文章量は15から75字程度で。
ちなみに、先ほどのAIクリエイティブができるまでは4〜5回ほどやり取り（AI側からのヒアリングと了承依頼）が発生します。1〜2回程度で生成してほしい方はプロンプトの以下部分を調整してください。
## 制約・条件：
+ - webバナーのサイズ設定については明示的に指示されない場合「**16/9の比率設定**」で進めてください
- - 基本的に**こちらの了承が得られるまではタスク実施はストップ**してください
- - 不明点や疑問点、法律上の懸念点、他に必要な情報があれば**作業を一時中断**して尋ねてください
- - ステップバイステップで作業フェーズを設けて、自身でセルフレビューした上で各フェーズおよびタスクを提案してください
- 先ほどのプロンプトをベースに、フライヤー（チラシ）作成に変更した場合のAIクリエイティブ
筆者の持つデザイン観
筆者は「デザインとはイメージを形にし、分かりやすさ（視認性や可読性、判別性）を提供する働きかけ」だと思っています。
そして（顧客がわざわざ言語化しないようなものまで含めた）要望をバランスよく実現するにはデザイン性と機能性（または情報伝達性）の両立が大事だと考えています。
※紙媒体など「機能」と呼べるものがないクリエイティブもあります。その場合、機能に準ずるクリエイティブの主目的と言えば「情報伝達性」になるかと思います。
このデザインと機能性（または情報伝達性）の両立が「なんか分からんけど今っぽくて悪くない感じ」といった及第点デザインへと近づくポイントになります。
なぜなら、 自分たちのしてほしいモノ・コトな状態になっていて、見栄えも悪くないのであれば「これでいこう！」となる可能性が高いからです。
デザインする前の準備（情報設計）
情報の整理（グループ化 / すみ分け）をしっかり行うことで勝手に分類（差別化）されていきます。
それほど情報の整理は重要です。
webエンジニアリングでいうと、要件定義や技術選定、設計部分にあたります。ここで決めた方針や判断が下層レイヤーにまで影響を及ぼすことを意識してください。
情報のすみ分けはしっかり行い、合意（意思疎通）も取っておく
1.情報の整理
情報をカテゴライズしていきます。
この時に意識してほしいのが【 どうして（なぜ）、どこの、だれに、どのように、いつ（いつから / いつまで）、ソレを届けたいのか 】という部分です。
例えば、とある駅前イベントでの集客や告知という想定をします。
この時、可能であれば「その先── イベント実施による集客や告知を通じて「この先どうなりたいのか」という展望」までヒアリングしておいたり、意識しておけたりすると尚良しだと思います。
2.情報の優先順位決め
上記イベント開催のケースでは以下の優先順位とします。
※あくまで事例で、クライアントや内容に応じてケースバイケースです。
- イベント内容
- イベント名
- イベント特典
- 参加ゲスト
- イベントのアピールポイント
- QRコードでの事前予約特典の告知
- 開催場所 / 時間
- イベント内容
- アトラクションなど詳細情報
- 企画企業や組織の情報
- お問い合わせ先やサイト（LP）のQRコード
3.優先順位の高いものほど強調する
情報をスムーズに伝えるためには、統一性を持たせたり、対比させたり、アクセント（アイコン/インフォグラフィック等）を付けたりなど工夫をこらす必要がありますが、やみくもにしてもうまくいきません
※ブロークングリッドレイアウトやノングリッドデザインといったものもありますがこれは基礎知識を土台に成り立つものです。
これは先の優先順位情報をChatGPTに投げて作ってもらったA4フライヤーになります。
雑なプロンプトの割に結構いい感じです。文字はあれですが。
ただの参考例なので良いのですが、なぜ2024年なのでしょう。
これから説明する近接や整列、反復、コントラストといったデザインの4原則が反映されていてプロトタイプ例としては十分ですね。
ただ、個人的には「開催場所 / 時間」をもう少し大きくして、フッターにある運営元情報の部分をスマートに圧縮できそうだと思いました。
先ほど触れた「デザインの4原則」は、かなり有名な「ノンデザイナーズ・デザインブック」にも記載されている内容なので知っている方も多いかと思います。
本記事ではwebエンジニア向けに内容を噛み砕いて説明していきます。
デザインの4原則を知る
近接
分類した情報（要素）同士の関連性（兄弟・並列・主従）の違いを意識します。
- 親兄弟と主従では「メインとサブ」の関係性が異なる
- 兄弟：関係性は変動値（ミュータブル） / 主従：関係性は固定値（イミュータブル）
- 兄弟例：
- カテゴリーA > 各種タグ a, b, c, d, e, f, ...
- カテゴリーB > 各種タグ a, b, c, d, e, f, ...
- 並列例：
- 本文内の各種「中見出し」や「小見出し」
- 主従例：
- タイトル > リード文 > 本文
- 兄弟例：
- 兄弟：関係性は変動値（ミュータブル） / 主従：関係性は固定値（イミュータブル）
※あくまで関係性の比喩表現であり、実装上の可変・不変を指すものではありません。
整列
余白やデザイン要素、シェイプ（線や塗、要素の形など）を活かして「見えないガイドライン」を作り出します。
「見えないガイドライン」とは、ここまでにも出てきている「箇条書きにおけるインデント部分」を指します。
明示的に線は引かれていませんが、- 〇〇と記述するとマークダウン記法ではビュレット（中黒点）及びインデント付きの箇条書きを表現できます。
さらに階層構造も実現できますね。
この階層構造を認識できるのも「見えないガイドライン」でインデントが揃っているためです。
線を使って明示的に「視認できるガイドライン」を用いるのも有効
エンティティ図のテーブル表のように線を用いて明示的に整列させる方法も有効です。
バランス（重心）を意識する
これは少しイメージしづらい部分ですが、例えば以下のようなレイアウトがあったとします。
一つだけならいいですが、複数あると右側が重い印象になりますよね。
そのため次のように奇数または偶数要素を反転させて統一感とリズム感を付けるパターンも多いです。
余白の取り方は制作物のイメージを左右するので注意
例えば、ラグジュアリーや高級、落ち着きというイメージには余白を大きく取ります。
一般住宅と豪邸を対比してみると敷地面積の広さが大きく異なりますよね？ 多くのスペースを使えることは古今東西、富を想起させます。
実際、高級なコスメや服、製品のチラシでは商品とちょっとしたキャッチコピー、または有名人と商品のみというものがありますよね？
逆に、スーパーの安売り・特売チラシはどうでしょう？
あなたの頭の中に浮かんだイメージは十数〜数十の商品がすし詰めのようにひしめき合って、余白などほぼ無いデザイン・レイアウトではないですか？
余白はとても難しいです。
しかし、これをマスターすると大きく見違えることもある部分なので余白について知識を深めたい方は、これも有名ですが以下の書籍が読みやすくおすすめです。
「書籍を読む時間も無いし、俺は・私はデザイン寄りではなくもっとロジカルに学びたいんだ！」という方は後述する「8の倍数」だけでも読んでみてください。
反復
フォントや字間、配色、配置、あしらい等に一定の法則性や統一性を持たせましょう。
先のチラシで言うと以下のような部分になります。
小見出しは全て赤い帯（塗り）でラップされていて、写真も白枠を設けてサイズ感が統一されています。
小見出しと写真は関連する者同士で配置されていて、メインコンテンツであるラーメンの写真だけ他のものと差別化（白枠線が無くトリミング）されていますね。
人間は似たものを見ると無意識に統一性を見出す性質を持っていて、反復の法則はそれを活用した手法になります。反復の素晴らしいところは、統一性を生み出すため副作用として認知負荷の軽減にもつながります。
「コレとアレは同じレイアウト・デザインだから、並列関係か、または似たようなものなのね」と無意識に意識させることができます。
コントラスト
デザイン・レイアウトにおいて対比 / 差別化を生み出す働きです。
白と黒、赤と緑、青とオレンジといったカラーリングでいう補色の関係性と同じようにコントラストがあることで調和を取りながら要素を引き立てられます。
-
カラーリングの補色
色相環というものがあって、それぞれの色味の直線上にある色が補色の関係を持っています。この補色の関係を持つ色味同士を組み合わせるとコントラストが生まれます。
コントラストもチラシ例でいくと、メインコンテンツであるラーメンの写真だけ他のものと差別化（白枠線が無くトリミング）されている部分などがあたります。
その他、文字のジャンプ率などもコントラストの好例です。
ラーメンがイベントの主役なので大きく目立っていますね。
そしてここでは近接で紹介した主従関係も確認できます。
- チラシのタイトル部における主従関係
タイトル（ラーメン） > キャッチコピー（人気ラーメン店が集結！）
コントラストは、特徴付けや対比、差別化をもたらすデザイン要素をはじめ、工夫を意識しておくと良いです。
それら引き出しを増やすために常にいろいろな制作物を見て「学びや気づき」を収集しておくことをオススメします。
例えば、電車の広告や商品パッケージ、街にある各種広告におけるデザイン的な工夫（あしらいや装飾など）や構造、配色、レイアウトなどです。
この時、ただ眺めるのではなく「なぜそのレイアウトなのか、配色なのか」をはじめ、「誰がターゲットなのか、だからこのデザインやカラーリング、フォント選定なのだろうか」といったデザイナーの意図まで考えると自然とデザイン観が磨かれていくと思います。
デザインの4原則はユニットでも、インテグレーションでも働く
ここまでの説明で各法則が単体で成り立っている場合と相互作用している場合もあることが分かったと思います。
例えば、本記事で言うと以下の部分になります。
小見出しは全て赤い帯（塗り）でラップされていて、写真も白枠を設けてサイズ感が統一されています。
小見出しと写真は関連する者同士で配置されていて、メインコンテンツであるラーメンの写真だけ他のものと差別化（白枠線が無くトリミング）されていますね。
-
反復およびコントラスト
小見出しは全て赤い帯（塗り）でラップされていて、写真も白枠を設けてサイズ感が統一 -
近接
小見出しと写真は関連する者同士で配置されていて-
整列
3つのラーメンは中央揃え、キッズエリアの写真は一まとめにして整然と配置
-
-
コントラスト
ラーメンの写真だけ他のものと差別化（白枠線が無くトリミング）
上記に加えて、チラシ全体で見てみると各法則が他にも散りばめられているのが分かります。
-
反復：- 小見出しの赤い帯はチラシ全体で流用されているユニットコンポーネント（
コントラストの法則） - 開催場所と開催日時の文字カラー。関連情報として一つのブロック（コンポーネント）にしている（
近接の法則）
- 小見出しの赤い帯はチラシ全体で流用されているユニットコンポーネント（
-
整列：- チラシ全体に padding（内側の余白）が均等に効いている
- フッター部の運営元情報で電話番号やメールアドレス、サイトURLなどがインデントを通じて整列している（
近接の法則）。電話番号だけ少し文字サイズが大きめ（コントラストの法則）
-
コントラスト：- PR箇所である特典部分（事前予約） は寒色（青系）を用いて差別化を図っている（目立たせている）。事前予約の成立に必要な情報（QRコード）をすぐ側に配置（
近接の法則） - 明るくて楽しいフェスイベント感を演出する装飾やあしらい（花火や縁日、ビール、星など）
- PR箇所である特典部分（事前予約） は寒色（青系）を用いて差別化を図っている（目立たせている）。事前予約の成立に必要な情報（QRコード）をすぐ側に配置（
-
近接：- イベント概要（タイトルやキャッチコピー）や特典情報、開催場所・日時、詳細情報、運営元情報がセクション分けされている
- 各セクション部の中でも当法則を適用（例：イベント概要セクションではゲスト写真を近くに配置）
このように、デザインは論理的に考えて構成していくところもあるのでwebエンジニアにとって親和性が高いように感じます。
実装アプローチやロジック、設計、技術選定などロジカルに対応する場面が多いwebエンジニアにこそ、これらデザインの4原則を武器にしてほしいです。
以下は意識すると更にブラッシュアップできるようなポイントです（※必須ではない）
- 英数字には原則「欧文フォント」を使用する
- 和 / 洋文字ともに制作物のイメージに合わせた「似たもの」を使用する
- 見出し / 本文で異なるフォントを使う場合は、それぞれ該当箇所において統一させる
- 使用するフォント数（
font-family）は、一つの制作物に対して1〜3種類程度がベター（ウェイトの豊富なfont-familyを選んでおくと楽） - タイトル / キャッチコピーはカーニングを行って字間を整える（可能なら各文字の大きさや濃度も調整する）
-
-,:など記号類をはじめ、英数字はベースラインも意識して適宜調整する - デザインのトレンドを知って（追って）おく
- 例1：2026年のカラーは白系（クラウドダンサー：Cloud Dancer）
- 例2：iOS 26 で導入された Liquid Glass という（おばあちゃんの家でよく見た透け窓ガラスみたいな）デザインの視覚効果・手法
制約など注意すべきこと
レギュレーション
自社開発や社内向けツールがメインの場合は少ないかもしれませんが制作物には「レギュレーション」という制約が発生するケースもあります。
レギュレーションとは「制作物における絶対ルールや仕様規定」のことで、ロゴやコーポレートカラーなどを定められた仕様通り（例：周囲に○○px, ptの余白を取る）にしなければならない制約を指します。
関係各所との意思疎通や合意形成
いわゆる「根回し」です。
これがないとプロジェクト終盤でちゃぶ台返しとなったり、二度手間が発生したりなど進行に大きな影響を及ぼします。
特に、デザインは言語化が難しく、定性的な評価になりがちなので小さなことでも確認や合意といった意思疎通を大事にしたほうが良いです。
あくまでもユーザー本位、とはいえ……
「どのようなデザインならユーザーが楽に目標を達成できるか？」や「自分の手掛けたデザインがどのような影響を与えるか？」までを考えたデザインやアプローチを意識したいです。
一つの目安が 「なぜそのデザインなのか」を自分の言葉で言語化できるデザインかどうか というところになります。
これは筆者の主観ですが、ユーザー本位に必要なのは、実情を理解して共感することだと経験則で実感しています。相手の立場になって想像する、つまりリスペクトと思いやりを大事するといった心構え？に近いスタンスです。
とはいえ、最終的にはクライアントの要望やビジネスサイドの意見を受け入れる必要があります。
時には、ダークパターンの実装（※自身の要望が結果的にそうなることを理解していない人も、理解している人もいる）をはじめ、エンドユーザーにとって不利益になるかもしれない要望を受ける場面もあるかもしれません。
本来は作り手として断固断るべきですが、筆者は「プロジェクトにこれまで関わってきた人たちの負担」を考えたり、「結局クライアントあっての仕事だから」という言い訳がましい理由で折れてしまうことが多いです。
正直、筆者自身も全然うまくできていませんが、他の方々はここら辺どうやってうまくやっているのでしょうか？（泣）
さいごに
筆者の経験則も交えながら話してきたので一部再現性は低いのですが、デザインの4原則は汎用的ですし、本記事述べたようにwebエンジニアとも親和性が高いと思います。
結局、近道したければ一見遠回りに見えるような基礎知識（デザインの4原則）の習得が重要になるはずです。
基礎知識さえあれば、実務で「情報のまとまりが視覚的に整理されているか」や「強調すべき要素が一目で判別できるか」といった観点で自分の成果物をチェックするだけでも「及第点」かどうかの判断ができるようになるでしょう。
もし、デザインに関してさらに興味が出てくれば、ブロークングリッドレイアウトやノングリッドデザインといったパターンを調べたり、タイポグラフィにも手を伸ばしてみると幅が広がると思います。
あと、本記事のイベントチラシ例はChatGPTに生成してもらいましたが、簡易的なプロンプトでもある程度の出来だったので、マークダウンまたはXMLを用いてしっかりプロンプトエンジニアリングすれば使い捨てチラシで良い場合は十分かもしれませんね。
本記事がデザインやUIレイアウトなどに悩むwebエンジニアの方々の役に少しでも立てれば幸いです。
ここまで読んでいただき、ありがとうございました。
おまけ：
8の倍数
余白、コンテンツ幅、要素のサイズなど、数値の設定が必要なものは8の倍数の値（8px、16px、24px…）を用いて作成するというデザイン手法です。
昔、筆者が見聞きした「8の倍数」に関する手書きメモが残っていたので（需要の有無にかかわらず）掲載したいと思います。
- 余白やブロックサイズは8の倍数で設計（※ただし状況に応じて4の倍数に変更可）
- 最小余白は16pxで設計
- PCサイトのコンテンツ幅は1280pxで設計（※参照ページでは1080px）
- ワイヤーフレーム・デザインカンプ制作時のグリッドは40px（1280/32）で指定
コンテンツ幅やグリッドに関しては、コンテナークエリの登場によって必要性が以前ほど高くないかもしれません。
可読性が担保される文字数って？
「行長が長ければ行間は広く、行長が短ければ行間は狭く」が一つの答えになります。
行長（width）は、横組みだと15～35（40）文字、縦組みだと15～40（45）文字程度が目安です。
30～45文字以上など長くなる場合は2段・3段など段組みにして可読性を確保してください。
文字は枠で囲わない
文字は線で構成されているので枠線などで囲うと窮屈で煩雑な印象になります。
文字数が多い時は枠で囲わずに塗りで対応してみてください。
もし、枠線と塗りを併用したい場合は枠線の色を濃く、塗りを薄めにすると比較的バランスが取れます。……が、やりすぎると稚拙な印象（デザイン）になってしまう可能性もあります。
単調なレイアウトになる可能性もありますが、囲み（枠）や背景色（塗り）を付けることで整列させやすくもなります。