令和8年（2026年）8月2日（日）、美唄市民会館にて、未来クライム「Webディレクター体験講座（Wix体験会）」の第3回目が開催されました。本講座は、美唄市の人材育成プロジェクト「未来クライム」の一環として、デジタルワークを通じた多様な働き方を目指す受講生を対象に、ノーコードのWebサイト制作ツール「Wix」を使った実践的なスキルを習得する全5回のプログラムです。

中盤の折り返しとなる第3回は、「カラー・レイアウト・フォント」をメインテーマに、午後1時から約4時間にわたる講義が実施されました。Webデザインの根幹をなすビジュアルの基礎知識や、見る人の視線と心を動かすデザインの「4大原則」について、座学とエディタを使った実践を交えて深く学びました。

■デザインの第一歩：画像データとカラーの基礎知識

講義の冒頭、岩下講師は「Webサイトは基本的に画像とフォント（テキスト情報）で構成されているため、この2つの扱い方を学ぶことがデザインの出発点である」と語りました。

まず、画像には拡大しても画質が荒くならない「ベクターデータ（SVGなど）」と、写真のように画素の集まりで構成される「ビットマップデータ（JPEG、PNGなど）」の2種類があることを説明しました。特にWeb制作においては、サーバーの容量制限やページの読み込み速度に直結するため、画像のデータ容量を適切に管理・縮小する知識が不可欠であると強調しました。また、サイトに掲載する写真のクオリティを高めるため、日頃からプロのカメラマンの作品（XなどのSNS投稿や雑誌）に触れ、良い写真を見極める目を養うことの大切さを伝えました。

続いて、カラーの専門的な知識についての講義が行われました。Wixの色選択画面の仕組みに触れながら、赤や青といった「色相」、明るさを示す「明度」、色の強さを示す「彩度」の仕組みがわかりやすく解説されました。さらに、淡い「パステルカラー」はベースカラーやメインカラー、ボックスなどの背景色として非常に使いやすいこと、和風で絶妙な色合いを選べる「日本カラーズ」という岩下氏お気に入りのカラー選定サイトが紹介され、カラーコードのコピー＆ペーストによる効率的な色設定の手法が伝授されました。また、コンバージョン（行動喚起）に直結するボタンの色としては、心理学的に最もクリックされやすい「オレンジ色」を意識すると効果的であるという実用的なアドバイスもありました。

■ルールを作る基本「3つのカラー」と黄金比率

Webサイトの配色において、最も重要な「カラーの役割と配分ルール」について講義が進められました。デザインにおける色の黄金比率は、ベースカラー「70%」、メインカラー「25%」、アクセントカラー「5%」です。

ベースカラー（70%）：主にサイトの背景色や余白に使用する色です。メインとアクセントの色を引き立てる脇役であり、最も面積が広いため、白、黒、グレーなどの「無彩色」や、明度が高く淡い色がよく使われます。これらはどんなアクセントカラーとも相性が良く、サイトに安定感を与えます。

メインカラー（25%）：サイトの印象を決定づける「主役」の色です。企業のロゴマークや、ターゲット層のイメージ（例えば、信頼感を与える青、情熱を表す赤など）に合わせて1色を決定します。

アクセントカラー（5%）：最も目立つ色で、全体をピリッと引き締める役割を持ちます。ユーザーの目を引くために使用され、お問い合わせフォームの送信ボタンなど、重要なアクションを起こさせたい箇所に効果的に配置します。

これらのカラーマネジメントを怠り、色を使いすぎたり、配分のバランスが崩れたりすると、視認性が低下し、ユーザーにとって非常に見づらいサイトになってしまうことが警告されました。

■デザインを劇的に向上させる「4大原則」

講義の後半では、Webサイト制作のみならず、企画書やレポート作成などすべての資料作りに共通して役立つデザインの「4大原則」について、詳細な解説が行われました。

1.  近接（Proximity）

    同じグループの情報を近づけて配置し、異なるグループは遠ざけるというルールです。情報を近接させることで、その副産物として「余白」が生まれます。この余白こそが、ユーザーに情報の区切りを瞬時に認識させるための極めて重要なデザイン要素となります。

2.  整列（Alignment）

    情報を上下左右にきれいに揃えて配置することです。文字の書き始め（始点）や終点を正確に揃えるだけで、サイトの信頼性と読みやすさが劇的に向上します。岩下氏は「きっちり合わせることはプロでも意外とできていない人が多く、最も意識すべきポイントである」と語りました。

3.  強弱（Contrast）

    情報の重要度に応じて、大きさにメリハリをつけることです。見出しを大きく、本文を小さく、注意書きは赤色にするなどのコントラストをつけることで、ユーザーは何が重要な情報なのかを直感的に理解することができます。

4.  反復（Repetition）

    フォントの種類やサイズ、レイアウト、色などの一連のルールを、サイト内で繰り返し使用することです。これによりサイト全体に統一感（リズム）が生まれます。Wixで最初に「サイトデザイン」としてカラーやフォントのテーマを設定しておくのは、この「反復ルール」を自動的に反映させて、デザインのブレを防ぐために非常に合理的であると解説されました。

岩下氏からは、「デザインがどうしても素人っぽくなってしまう原因の多くは、この4原則を意識できていないことにある」とし、前職の会社ではこれらを徹底するため、朝礼で「近接！整列！強弱！反復！」と全員で唱和していたというユニークなエピソードが披露され、受講生たちの笑いと納得を誘いました。

■ Wixエディタを使った実践ワークと受講生の様子

学んだ4大原則を体感するため、実際にWixエディタを開き、新しい白紙ページに「デザイン済みセクション」を複数追加して編集するワークが行われました。

用意されたセクションが、どのように「近接」のルールに従って見出し、本文、ボタンが配置されているか、またセクション同士の「余白」がどのように情報整理に役立っているかを、受講生は自らの手で操作しながら確認しました。

「これまでは何となく配置していたけれど、文字の間隔やセクションの隙間に意味があることがよく分かった」と、受講生たちも自発的に余白のサイズを調整するなど、デザインの奥深さに感動している様子が印象的でした。

■まとめと次回への展望

■まとめと次回への展望

第3回目の講座は、デザインの見た目の華やかさだけでなく、「なぜこの色を使い、なぜこの位置に配置するのか」という論理的なデザイン思考を身につける、極めて有意義な時間となりました。

受講生の皆さんも、ご自身の思い描くサイトをより見やすく、プロらしい仕上がりにするために、真剣にカラーコードや4原則と向き合っていました。

次回（第4回）は「ウェブマーケティングスキル（WixでECサイト構築）」をテーマに、いよいよ実際にビジネスを動かすためのネットショップ機能の実装について学んでいきます。成果発表会に向けて、一人ひとりのサイトがどのような完成形に近づいていくのか、今後の展開がますます楽しみになる充実した一日となりました。