令和8年（2026年）7月19日（日）、未来クライム「Webディレクター体験講座（Wix体験会）」の第2回目が開催されました。

本講座は、美唄市の人材育成プロジェクトの一環として、デジタルワークを通じた多様な働き方を目指す方を対象に、ノーコードのWebサイト制作ツール「Wix」を用いた実践的なスキル習得を目的としています。

全5回コースの第2回目となる今回は「Webデザイン力向上①」をテーマに、約4時間にわたる講義が行われました。Webサイトの見た目を決定づけるカラーやフォントの基礎知識から、ページの骨組みとなるセクションの活用、さらにはサイトを多機能化するアプリの導入まで、より実践的で専門的な内容へと踏み込みました。

■白紙から作るデザインの土台：カラーパレットの設定

前回の講座では用意されたテンプレートを編集する手順を学びましたが、今回はあえて何も描かれていない「白紙テンプレート」を開き、ゼロからサイトを構築していく手法でスタートしました。

エディタ画面の「サイトデザイン」メニューから、まずは「カラーパレット」の設定を行いました。サイトのベースとなる色を決めるとともに、色を円状に配置した色相環の概念が解説されました。メインカラーの対極に位置する色である「補色」をアクセントカラーとして用いることで、目立たせたいポイントを効果的に強調できるという、プロならではの配色テクニックが伝授されました。

■無料で使える高品質フォントと、見出し・段落の概念

続いて、サイト全体の「テキストテーマ（フォント）」の設定が行われました。Wixの大きな魅力の一つとして、通常であれば導入に高額な費用がかかる高品質なフォントが、無料で多数利用できる点が紹介され、受講者から驚きの声が上がりました。

フォント選びにおいては、ゴシック体と明朝体が持つ印象の違いを理解することが大切です。講義では、「見出しには力強いゴシック体を使用し、本文（段落）には読みやすい明朝体（游明朝体など）を使用する」といった具体的な組み合わせ例が提示されました。

さらに、Webサイトの裏側の構造として重要な「Hタグ（見出し）」と「Pタグ（段落）」の概念が説明されました。H1からH6まである見出し（ヘディング）タグと、パラグラフを意味するPタグを正しく使い分けることは、デザインを整えるだけでなく、検索エンジンにサイトの構造を正しく伝えるためのSEO（検索エンジン最適化）対策としても非常に重要であることが共有されました。

また、参考となる他のWebサイトが「どのような色やフォントを使っているのか」を調べるためのツールとして、「WhatFont」などの便利なブラウザ拡張機能が紹介され、プロも実践している情報収集の効率的な手法を学びました。

■セクションによるページ構成

カラーとフォントのルールが定まった後は、ページの骨組みとなる「セクション」の追加について学びました。WixにおけるWebページは、全ページ共通で表示される上部の「ヘッダー」と下部の「フッター」、そしてその間に挟まれる「セクション」という大きな箱の組み合わせで成り立っています。 このセクションの中に画像やテキストを配置し、ヘッダーの下に新しいセクションを縦に繋げていくことで、情報が整理されたまとまりのあるページレイアウトを構築できることが解説されました。Wixにはあらかじめデザインされたセクションのテンプレートも豊富に用意されており、それらを組み合わせるだけでも自由度の高いサイト制作が可能となります。

■ Wix App（アプリ）による機能拡張

講義の後半では、サイトに様々な機能を追加できる「Wix App（アプリ）」の紹介が行われました。ノーコードツールであるWixの最大の強みは、複雑なプログラミングの知識がなくても、アプリを追加するだけで高度なシステムをワンクリックで組み込める点にあります。 今回は代表的なアプリとして以下の4つが解説されました。

• Wix ビデオ：複数動画の管理や、ダウンロード販売・レンタル対応などが可能な動画配信ツール。
• Wix ミュージック：楽曲のアップロードからアルバム作成、オーディオのストリーミング再生やコミッションなしでの楽曲販売ができる音楽ツール。
• Wix ブログ：新着情報やお知らせ、コラム記事の配信など、サイトの更新頻度を高めて多彩な情報を発信するために欠かせない機能。
• Wix FAQ：サイト訪問者からの「よくある質問」をカテゴリ別に整理し、折りたたみ式ですばやく回答を提示できる機能。 これらのアプリを事業の目的に応じて組み合わせることで、単なる情報を載せたホームページから、実際にビジネスを動かす多機能なWebサイトへと進化させることができる点が強調されました。

■まとめ

第2回目の講座は、白紙の状態からデザインの土台（カラー・フォント・セクション）を構築し、アプリによって機能を肉付けしていくという、プロのWebデザイナーの思考プロセスを疑似体験する密度の濃い時間となりました。 受講生の皆さんも、ご自身の思い描くサイトイメージに合わせて色やフォントを真剣に選び、デザインの奥深さと楽しさを実感されている様子でした。

次回（第3回）は、さらに踏み込んだデザイン手法やレイアウトについて学んでいく予定です。最終日の成果発表に向けて、皆さんのサイトがどのように形作られていくのか、今後の進化がますます楽しみになる一日となりました。