なぜ、若葉色を基調にしたか — 配色を「誰に・何を・どう届けたいか」から逆算する

商品を売るための1ページのWebサイト ── 業界では「ランディングページ」と呼ばれます ── の配色を決めるとき、多くの場合「業界の定番」や「流行りの組み合わせ」から発想が始まる。

食品系なら緑と白。コスメなら淡いピンク。男性向けはネイビーとグレー。それぞれにテンプレートがあり、そのテンプレートが「無難な正解」として流通している。

ただ、その正解は本当に、商品を届けたい相手に届くのだろうか。

想定された架空クライアントと、その課題

デジタルハリウッド (DHU) の中間課題で取り組んだ、架空の無農薬野菜ネット通販「スグ食べ」のWebページ。その設計の話を、すこし書いておきたい。

相談シート (お客様からの依頼内容を聞き取る書類) に書かれていた課題は、明快だった。

既存サイトはあるが、今回ネット広告 (検索結果に出てくる広告) を出すことになり、もっと響くWebページが必要になった。食へのこだわりが強い方に届く内容にして、なにはともあれ「お試し購入」へ導きたい ── という設定。

届けたい相手は、まだ成長期の子どもがいるママ。働き盛りの夫にも、まだまだ元気でいてほしいと願う妻。そこそこ食にお金をかけられて、「ていねいな暮らし」が好きな方々。

伝えたいこととして、無農薬・有機野菜が最優先で置かれ、その次に「身体にいいものを販売している」というブランドの印象づくり、産地直送、旬のものが味わえる、と続く。

ページのイメージとしては「ナチュラルで明るく、清潔感がある感じ」「ある程度リッチなデザインがほしいが、ギラギラした昔ながらのページは避けたい」と言葉が並んでいた。

求められたのは、初めて見て1分以内に「この野菜なら安心できる」「朝の食卓に並んでいてほしい」と感じてもらえるページだった。

設計判断 — 若葉色を基調にした、緑の濃淡で構成する

選んだのは、若葉色を基調にして、緑の濃淡だけでページ全体を組み上げる配色設計だった。
背景には3段階の淡い緑を用意して、セクションごとに使い分けた。一番落ち着いた #DBE0CC、明るい淡黄緑の #E8EED2、ライムベージュに近い #F0F3D6。画面を上から下へ読み進めるにつれて、ページ全体に「朝の光が差し込んでくる」ような、ひと続きの感じを作りたかった。

狙ったのは、朝の台所だった。

朝の台所に立った瞬間の、まだ少し眠い空気と、窓から差し込む柔らかい光。料理を作る側の手元に置きたいと思える、安心と明るさが同居する空気感。それを画面のなかに再現したかった。

純白だと清潔感は出るが、少し冷たい。緑のほうに寄せると、生活の温度が宿る。3色の緑はどれも彩度を抑えて、若葉のような明るさを残しつつ、画面のなかでうるさくならない強さに調整した。

文字色には、深い緑の #324001 をメインに、補助として #137F18 を置いた。背景と文字を同じ色相のなかで、濃淡だけで成立させる。画面のなかに「ひとつの世界」を作って、雑音を入れない設計を選んだ。

ただ、それだけだと、肝心の「お試し購入」へ向かう一押しが弱くなる。

そこで、お試し購入ボタンには、全体の緑から外れた強い色を置いた。鮮やかな赤の #E13B3B と、ライムイエローの #D8F028。画面のなかで一点だけ、強く呼びかけてくれる役割を担わせた。

全体が緑で静まっているからこそ、ボタンの強い色が「今、押してほしい」という呼びかけとして際立つ。

相談シートには「お試しセットのボタンが目立つようにしてほしい」と書かれている一方で、「ギラギラした昔ながらのページにはしてほしくない」とも書かれていた。両立しにくい要件を、『静かな緑のなかに、一点だけ強い赤と黄』という構図で受けようとした。

定番から始めるのではなく、届けたい相手の一日のなかで「いつ、どんな気持ちでこの商品に出会ってほしいか」から逆算する。出てきた答えがたまたま定番と近くても、選んでいる根拠はまったく違う。

設計判断 (補足) — タイポの組み合わせ

配色とセットで考えたのが、書体 (フォント) の組み合わせだった。

選んだのは、明朝体 (筆で書いたような落ち着いた書体) を大見出しに、ゴシック体 (シンプルでスッキリした書体) を本文に置く構成。

明朝体で「無農薬」の信頼と、その背景にある手間ひまへの敬意を表現する。続くゴシック体の本文で、「今日」の即時性と、購入までの軽やかさを担保する。当時、自分のなかでは「明朝で重みを、ゴシックで軽やかさを」という感覚的な使い分けにすぎなかった。

ただ振り返ると、その後 kyouichi design works の自社サイトを設計するときに「静と動」という言葉で明確化した発想の芽が、この時点ですでに芽生えていたのかもしれない。

学習プロジェクトの一つひとつが、後に自分のブランドの軸になるまで連続している。設計判断は、その瞬間に完結するのではなく、振り返るたびに意味を付け直されていく。

届けたい相手の「家族に出したい」という静かな願いと、「お試しで始めたい」という軽やかな行動を、同じ画面で受けとめたかった ── その感覚は、当時もたしかにあった。

結果と、学習プロジェクトだったからこそ気づいたこと

このWebページは、学校の中間課題として、架空のお客様「スグ食べ」に対する伝え方の設計を、デザインツールでパソコンとスマホ両方に対応したデザインデータとして仕上げた。

設計の根拠を1つひとつ言語化したことで、配色と書体の選択がぶれることはなかった。「なぜそうなのか」を、自分のなかで毎回答えられる状態にしてから手を動かした。

学習プロジェクトだからといって、適当に組み立てる必要はない。むしろ「実在しないからこそ、設計の根拠を自分で立て切らないと、お客様像が浮かんでこない」と感じた経験だった。実際のお客様の口頭での感想や反応で答え合わせができない分、相談シートに書かれた一行一行から、届けたい相手の一日と、購入までの気持ちの動きを、自分の頭のなかで何度も再生する必要があった。

その経験を通して、配色や書体の選択は、好みで選ぶものではなくて、「誰に・何を・どう届けたいか」から逆算するものだと確信した。

Design with Story

kyouichi design works は、個人事業主の方々のWebサイト・LP（1ページのWebサイト）・SNSを、ストーリーから設計するデザイン会社として2026年6月に開業した。

「Design with Story」というコンセプトには、設計のすべての判断にストーリーを宿らせたい、という意図が込められている。配色のひとつ、書体のひとつにも、相手の一日と、相手の願いと、それを届けるためのロジックがある。

配色の次につまずいたのは、文字組みでした。その話はこちらに書いています。▶ 配色を直しても、垢抜けなかった — Webデザイン初心者がつまずく「文字組み」の話

Webサイト・LP・SNSデザインのご相談、入り口の質問だけでも大歓迎です。▶ 公式LINEで相談する（@kyouichi_design）

— kyouichi design works / kris

制作実績はポートフォリオでもご覧いただけます 

マガジンフォローのお願い

「Design with Story（コラム）」は、設計判断と思考のプロセスを記録するマガジンです。
これからも案件ごと・学習ごとの設計の話を書いていきます。よかったらフォローしてもらえると嬉しいです。