未経験からWebデザインを習得！
ITスキルで自由な働き方を実現しよう
未経験からWebデザインを習得！
ITスキルで自由な働き方を実現しよう
Webデザインだけではなくデザイン全般の基礎知識から、Figmaを用いたWebデザインを学べるプロセスを紹介します。
この学習プロセスの特徴
基礎～実践までのスキルが身につく
デザイン基礎からツールの使い方まで、初心者でも確実にスキルアップできる構成です。
現場で使える、実践的な制作経験
実際の現場を想定した課題に取り組むことで、 即戦力となるスキルを習得できます。
プロのワークフローを体験できる
現役デザイナーの実務に基づいた知識とノウハウを学び、即戦力として活躍できる実践力を身につけます。
学習プロセス
STEP
デザインの前提知識を身につけよう
Webデザインを学ぶための前提知識や基礎知識を身につけます
Webデザインの前提知識を学ぼう
- Webデザインとは何かを知ろう
- Webデザインの概要や役割、それに必要なスキルを理解し、Web以外のデザインとの違いを学ぶ。
- Webデザイン業界と職種を知ろう
- デザイン業界の全般的な知識と、デザイナーの職業について学ぶ。
- Webデザインの制作工程を知ろう
- Webデザイン案件の受注から納品するまでの製作工程について学びます。
- Webデザインの代表的なツールを知ろう
- Webデザインに用いるデバイスやソフトウェアにどのようなものがあるかを学びます。
- Webデザイナーになるための学習ロードマップを知ろう
- Webデザイナーを目指すための学習方法やその道筋を学びます。
- プロのサポートでWebデザインを最速で習得する方法
デザインの基礎を学ぼう
デザインの基本要素
- 色：視覚的な印象を決定づける重要な要素。ブランドイメージやユーザー心理に大きく影響
- 形：情報の区分けや視線誘導に使用。矩形、円形、有機的な形状それぞれに異なる印象を与える
- 空間：余白（ホワイトスペース）の活用で読みやすさと視認性を向上
- タイポグラフィ：文字の大きさ、間隔、行間で可読性とデザイン性を両立
色彩理論
- 基本色相環の理解：補色、類似色、トライアドなどの配色パターン
- ブランドカラーの選定方法：目的や業種に応じた適切な色の選択
- アクセシビリティを考慮したコントラスト比の確保
- カラーパレットの作成手順：メインカラー、アクセントカラーの決定
- プロのサポートでWebデザインを最速で習得する方法
レイアウトの基本原則を学ぼう
グリッドシステム
- 12列グリッドの基本：効率的なレイアウト配置の方法
- レスポンシブデザインのためのブレイクポイント設定
- 要素間の整列と揃え：視覚的な安定感の作り方
- モジュラーグリッドの活用：情報の整理と構造化
視覚的階層
- 重要度に応じた情報の配置方法
- サイズ、色、コントラストによる強弱のつけ方
- F型パターンやZ型パターンの活用方法
- アイキャッチとなる要素の効果的な配置
- プロのサポートでWebデザインを最速で習得する方法
STEP
UXデザインの基礎を習得しよう
UXデザインの基礎を学び、ホームページの基本的な作り方を身につけます
ユーザー理解と分析方法を学ぼう
ペルソナとユーザー理解
- ターゲットユーザーを具体化する
- ユーザーの課題や目的を明確にする
- 基本的なユーザー調査の方法を学ぶ
ユーザージャーニー
- ユーザーの行動の流れを理解する
- 重要なタッチポイントを特定する
- 問題点と改善機会を見つける
コンバージョン設計
- ゴールまでの導線を設計する
- 離脱ポイントを把握する
- ユーザーの行動を促す要素を学ぶ
- プロのサポートでWebデザインを最速で習得する方法
UX設計を実践してみよう
情報の整理と構造化
- コンテンツの優先順位をつける
- 分かりやすい見出しをつける
- シンプルな導線を設計する
スマートフォン対応
- モバイルファーストの考え方を理解する
- タップしやすい設計を学ぶ
- 画面サイズに応じた表示を考える
基本的なインタラクション
- ボタンやリンクの分かりやすい表現
- フィードバックの基本
- 基本的なアニメーションの活用
- プロのサポートでWebデザインを最速で習得する方法
STEP
Webサイトのデザインの基本を習得しよう
Figmaの基本操作を習得します。LPやコーポレートサイトを題材にしてFigmaを用いたデザイン方法を学習します。
Figmaの基本的な使い方を学ぼう
インターフェースの理解
- 画面構成とツールの基本操作
- レイヤーとグループの概念
- フレームとグリッドの使い方
オブジェクトの操作
- 図形・テキストの作成と編集
- 整列・分布・グループ化
- カラーとエフェクトの適用
便利な機能
- オートレイアウトの基本
- コンストレインツの活用
- スタイルの保存と適用
- プロのサポートでWebデザインを最速で習得する方法
Figmaの効率的な使い方を学ぼう
コンポーネントの活用
- 再利用可能なパーツの作成
- インスタンスの概念と活用
- 変更の一括反映方法
デザインの管理
- 命名規則とページ管理
- バージョン管理の基本
- アセットの整理方法
画像とリソース
- 画像の配置と最適化
- アイコンの活用方法
- カラースタイルの管理
- プロのサポートでWebデザインを最速で習得する方法
Figmaでプロトタイプを作成してみよう
基本的なインタラクション
- クリック・タップの設定
- 画面遷移の作成
- シンプルなアニメーション
プレビューと共有
- プロトタイプの動作確認
- 共有リンクの作成
- フィードバックの受け取り方
レスポンシブ対応
- スマートフォン版の作成
- 自動レイアウトの活用
- ブレイクポイントの設定
- プロのサポートでWebデザインを最速で習得する方法
独学に不安を感じているあなたへ
未経験から現場で活躍できるWebデザイナーへ
- 入学から卒業まで現役エンジニアのインストラクターから専属で学べる！
- 学習コーチと現役エンジニアが対応するQ&A掲示板であなたの学習をトリプルサポート
- 卒業後もさまざまなサポートを継続的に利用できる