01 / 05

ウェブデザイン
体験授業

プロのデザイナーと同じ思考プロセスで
実際のWebサイトを作ってみよう

📖 ウェブデザインとは?

ウェブデザインとは、単に「見た目をきれいにする」だけではありません。
ユーザー体験(UX)を考慮し、情報を分かりやすく整理し、
目的達成を支援するための総合的な設計プロセスです。

今日は、実在する商品のランディングページ
プロと同じ手順で作ってみます

02 / 05

クライアントブリーフィング

デザイナーの仕事は、まずクライアントの真のニーズを理解することから始まります。
今日のクライアントは、革新的なドライヤーを開発したスタートアップ企業です。

🎯 プロジェクト概要

🎨 ランディングページ(LP)とは?

ユーザーが検索やSNS広告から最初にたどり着くページのこと。
商品購入や資料請求など、明確な行動(コンバージョン)を促すことが目的。
一般的なWebサイトとは違い、1つのゴールに向かって設計します。

03 / 05

戦略設計:ユーザー中心で考える

いきなりデザインツールを開くのはNG
まずは戦略的思考でプロジェクトの土台を固めましょう。

👤 ペルソナ設計

「忙しい朝の大学生」って具体的にどんな人?

  • • 1限に間に合わせるため朝は時間との勝負
  • • SNS映えを意識、おしゃれには手を抜きたくない
  • • でも高価すぎる商品は手が出ない
  • • スマホで情報収集、口コミを重視

🎯 価値提案

なぜこの商品を選ぶべき?

  • 時短:従来の半分の時間で乾く
  • 軽量:腕が疲れない、旅行にも便利
  • 美髪:マイナスイオンでツヤ髪に
  • 価格:学生にも手が届く価格帯

🧠 デザイン思考とは?

ユーザーの共感(Empathize)から始まり、問題定義→アイデア創出→プロトタイプ→テスト
5段階で進める人間中心の問題解決手法。GoogleやAppleなど世界的企業も採用している思考プロセスです。

🎨 ビジュアル方向性の決定

カラー

清潔感のある白×アクセントカラー

トーン

親しみやすく、でも信頼できる

レイアウト

スマホファースト、直感的

04 / 05

制作実習:Canvaで形にしよう

戦略が決まったら、いよいよビジュアル制作です。
プロ仕様のCanvaを使って、本格的なLPを作成していきます。

🚀 Canvaテンプレートを開く

* 今回専用のテンプレートが開きます

🛠️ Canvaとは?

オーストラリア発のグラフィックデザインツール。プロ級のテンプレート直感的な操作で、
デザイン経験がなくても高品質な作品が作れます。世界で1億人以上が利用中!

⚡ Phase 1:基礎操作(15分)

  • テンプレート選択:LP用レイアウトの理解
  • 要素編集:テキスト・画像・色の変更方法
  • レイアウト調整:要素の配置とサイズ調整
  • プレビュー機能:実際の表示確認

🎨 Phase 2:メインビジュアル制作(25分)

  • ヘッダー:キャッチコピー・商品画像配置
  • 価値提案:3つの特徴を視覚化
  • CTA設計:購入ボタンのデザイン
  • レスポンシブ:スマホ表示の調整

📱 Phase 3:コンバージョン最適化(20分)

心理学的アプローチ

  • 希少性:「限定100台」などの訴求
  • 社会的証明:レビュー・評価の配置
  • 緊急性:「今だけ特価」の表現

視覚的工夫

  • 視線誘導:Zパターンのレイアウト
  • 色彩心理:CTAボタンの色選択
  • 余白活用:重要情報の強調
05 / 05

プレゼンテーション & 振り返り

作品完成後は、プロのデザイナーと同じように
クライアントプレゼンテーションを体験してみましょう。

🗣️ プレゼンのポイント

  • 戦略説明:なぜこのデザインにしたのか
  • ターゲット分析:どんなユーザーを想定したか
  • 工夫点:特にこだわった部分の解説
  • 期待効果:このLPで何を達成できるか

📊 評価の観点

  • ユーザビリティ:使いやすさ・分かりやすさ
  • ブランド適合性:商品イメージとの一致
  • コンバージョン:行動を促す力
  • 独創性:オリジナルな視点・アイデア

🌟 本日の学習成果

戦略思考

ユーザー中心設計の基礎

実制作スキル

プロツールの実践活用

プレゼン力

デザイン意図の言語化

今日の経験が、皆さんの「好き」「得意」の発見、
そして将来のキャリア選択に繋がることを願っています。