エンジニア・Web技術Web制作・ディレクション講座デザインやコーディングなどの制作スキルやディレクションを学ぶ

Web制作・ディレクション講座では、WebデザインやコーディングなどのWeb制作のスキルや、制作会社をディレクションするための知識を身につけます。演習を交えて学習することで実践的な制作スキルが学べます。

期待できる効果
  • セマンティックコーディングによる高品質なコードでWebサイトが構築できるようになる
  • 仕様設計や導入技術の選定において自社で主導権をもって進行できるようになる

研修前

  • 新人Webデザイナーやコーダーに対して、先輩社員が教育に時間を割くうえでの負担が大きかった
  • 技術的な知識がないことで外注先とのコミュニケーションがうまくいかず遅延や過剰な費用が発生していた

研修後

  • 新人Webデザイナーやコーダーの技術理解が進んだことで社内教育の負担が軽減された
  • 技術的な知識やディレクションを学んだことで、外注先に的確な指示を出せるようになった
デジタル人材育成・研修について相談する

カリキュラム

Web制作・ディレクション講座

Webデザインのスキルやコーディング、WordPressなど、貴社の環境や社員の方のスキルセットに合わせて、必要なスキルを習得できます。Webサイトの制作や運用を外注先に委託している場合は、ディレクションスキルを重点的に身につけることでサイトの更新速度やコストを抑えられるようになります。

対象者

  • 自社サイトやの制作や運用に携わる方
  • サイトの設計など上流工程の業務に関わる方

研修の目的

  • デザインやコーディングのスキルを高めWebサイト制作の内製化を進めたい
  • 企画や設計などの上流工程の仕事を踏まえた仕事ができるようになりたい
デジタル人材育成・研修について相談する

※以下の目次から、貴社にあった言語を選択できます。

HTML/CSS/JavaScript基礎
項目 内容
Web概論・HTML基礎
  • Webの概要
  • ホームページの概要
  • HTMLの基本的なタグ
  • テーブル(表)
ハイパーリンクとマルチメディア
  • ハイパーリンク
  • 画像とWebにおける色指定
  • 動画
  • 音声
フォーム
  • フォームとは
  • フォームのパーツ(基本)
  • フォームのパーツ(応用)
セマンティックコーディングとWeb制作フロー
  • HTMLの変遷
  • セマンティック・コーディング
  • Web制作フロー
  • 画像の書き出し
  • HTMLのコードチェック
CSS基礎
  • CSSとは
  • CSSのルール
  • セレクター
  • フォント、テキストのスタイリング
  • 疑似クラス
CSSレイアウト
  • CSSレイアウト1
  • CSSレイアウト2
  • デザインのプロパティ
  • 背景とボーダー画像
  • その他スタイル指定
HTML構築(Dreamweaver/VSCode)
  • オーサリングツールとは
  • コーディングに入る前
  • HTMLコードの記述
CSS構築(Dreamweaver/VSCode)
  • CSSコーディング
  • 開発者ツール
  • CSS演習
  • サーバーへのアップロード
メディアクエリ・Webフォント・CSSアニメーション
  • メディアクエリ
  • Webフォント
  • 疑似要素
  • グラデーション
  • trasnsformプロパティー
  • トランジション・アニメーション
JavaScript基礎1
  • JavaScriptの概要と書式
  • JavaScriptの命令
  • 変数・演算子
  • 条件・ループ
  • 関数とイベント
JavaScript基礎2
  • DOMの仕様と要素ノードの操作
  • 属性ノードとテキストノード
  • Googleマップの導入
jQuery
  • jQueryの基本
  • jQueryにおけるイベント処理
  • jQueryの実践
  • jQueryプラグインの利用
Web制作実践
項目 内容
企画・デザインカンプの作成
  • Webサイト制作フロー
  • 企画
  • サイトの構成図の作成
  • ワイヤーフレーム
  • デザインカンプの下準備
  • ファイル管理
モバイルサイトの企画・設計
  • スマートフォンの特徴
  • 企画とワークフロー
  • ワイヤーフレーム
モバイルサイトの構築方法と高速化
  • Webサイトの高速化
  • モバイルサイト構築の方法
  • モバイル専用サイトの製作
レスポンシブWebデザイン1
  • レスポンシブWebデザインの基本
  • レスポンシブWebデザインのHTMLコーディング
レスポンシブWebデザイン2
  • レスポンシブWebデザインのCSSコーディング
制作実践1
  • 画像アセット
  • 制作実践1
制作実践2
  • 制作実践2
  • JavaScriptのプラグイン
ソースコードの検証とモバイル最新技術
  • ソースコードの検証
  • AMP
  • PWA
Photoshop
項目 内容
Photoshopとは
  • Photoshopの特徴
  • インターフェース
  • ツールパネル
  • 解像度
色の選択
  • 描画色と背景色
  • 色の選択
選択範囲
  • 選択ツール
  • 選択範囲の編集
色調補正
  • レベル補正
  • トーンカーブ
  • カラーバランス
  • 明るさ・コントラスト
  • 色相・彩度
レタッチ
  • スタンプツール
  • ぼかしツール
  • 指先ツール
レイヤー
  • レイヤーとは
  • レイヤーパネル
  • レイヤーマスク
  • レイヤー効果
  • レイヤーとは
  • 調整レイヤー
  • 描画モード
  • レイヤースタイル
チャンネル
  • チャンネルとは
  • チャンネルの種類
  • チャンネルパネル
ベクトル画像
  • シェイプレイヤー
  • ツールの利用
  • パスパネル
Webページ作成1
  • レイアウト
  • Webページ作成実践
  • 文字ツール
Webページ作成1
  • レイアウト
  • Webページ作成実践
  • 文字ツール
Webページ作成2
  • 画像の加工1
Webページ作成3
  • 画像の加工2
  • 実践問題
Webページ作成4
  • デザインの応用
  • 保存
UI
項目 内容
デザインの基礎
  • 良いデザインとは
  • UIとUX
  • 色彩
  • タイポグラフィ
ユーザー・情報設計・アクセシビリティ・ユーザビリティ
  • ターゲット設定(カスタマージャーニー)
  • 情報設計
  • ワイヤーフレーム作成
  • アクセシビリティ
  • ユーザビリティ
マルチデバイス対応
  • スマートフォンとPCの違い
  • マルチデバイス対応のためのデザイン
  • サイトを構成する要素
  • レイアウトパターン
  • ナビゲーション
  • 効果測定、分析
さまざまなUI
  • フォームのUI
  • 代表的なUIパーツ
  • スマホサイトに特化したUIパーツ
ディレクション
項目 内容
ディレクターの役割
  • Webサイトの種類
  • Webサイトの仕組み
  • 代表的な職種
  • ヒアリング
  • RFP
プロジェクト計画1
  • 市場調査
  • ターゲット設定
  • 競合分析
プロジェクト計画2
  • アクセシビリティ
  • KPI/KGI
  • 企画におけるアイデアの出し方
  • ワークショップ
プロジェクト計画3
  • 設計
  • セキュリティ対応
  • CMS/マーケティングツール
提案・契約
  • 提案書の作成
  • 見積りの算出
  • プレゼンテーション
  • 契約書と注意事項
設計・仕様策定
  • サーバー選定
  • 開発プロセス
  • 制作のガイドライン
  • 開発環境
進捗管理
  • 指示書の作成
  • タスク管理(WBS)
  • スケジュール作成
  • リスクマネジメント
  • 進捗管理ツール
検証・公開
  • 公開前のテスト
  • 公開作業
  • 運用管理
  • アクセス解析
  • SNS・ブログ運用
WordPress
項目 内容
WordPressの環境設定
  • WordPressとは
  • ローカル環境の構築
  • WordPressの設定
  • 記事の種類
  • 記事を作成しよう
エディターとテーマの設定
  • ブロックエディター
  • テーマ
  • テーマのカスタマイズ
  • PHPの基本
オリジナルテーマの作成1
  • テーマのファイル構成
  • オリジナルテーマの基本設定
  • 共通部分の切り分け
オリジナルテーマの作成2
  • テンプレートファイルの作成
  • ウィジェット
  • プラグインの実装
  • ユーザー管理

受講形式

インターネット・アカデミーの研修は、さまざまな形式に対応しています。「基礎はeラーニングで演習は集合研修」「講師派遣とリモートを組み合わせる」など、複数の形式の併用もできますので、お気軽にご相談ください。

  • リモート集合研修
  • 実地での集合研修
  • 講師派遣
  • eラーニング

Web開発会社の開発・マネジメントのノウハウをカリキュラム化現場の実務が研修で学べる

インターネット・アカデミーのグループ会社ではWeb開発・Saasサービスを手掛けています。実務で用いられている開発ノウハウをカリキュラム化し、研修で還元しています。

理解度チェック・アセスメントなど学習効果を可視化できる学習管理システム(LMS)

インターネット・アカデミーの学習管理システム(LMS)では「研修後の知識定着度を可視化したい」「社内報告のためのアセスメントがほしい」など、研修担当者の悩みにこたえる機能を搭載。学習の進捗管理から、さまざまな角度からの研修効果測定が行えます。

  • 研修テーマごとに受講した社員の理解度をダッシュボードで確認できます。
  • テストの結果を元に社員ごとのスコアをグラフで可視化。社内の平均スコアとの比較もできます。
  • 受講態度や理解度といった講師からのフィードバックによる定性評価にも対応しています。

Web制作系の研修を受けた企業からのコメント

株式会社エイチ・アイ・エス

研修を経てWeb独自の制作の流れを理解することができたので、現在では明確に役割分担をして、制作の精度を高めつつ、チーム全体のスピードアップを図ることまでできるようになりました。それから、これまで社内の企画担当者の希望に近づけること優先でコンテンツ作成していたのが、Webに対する知識が増えたことで、より良いものを素早く作るための提案やリードができるようになりました。
インタビューを見る

株式会社 堀内カラー

研修とITコンサルティングの当面の成果目標としては、弊社のWebサイトを内製化し、リニューアル公開することにありました。まずはWebサイトの制作を行うプロジェクトチームメンバーが、業務を行う上で必要なスキルを身に着けるべくインターネット・アカデミーに通って講座を受講しました。
インタビューを見る

パーソルテクノロジースタッフ株式会社

実際にReactを使ったハンズオンを積極的に行ってくださったことや各受講者のスキルや理解度に応じてカリキュラムを進めてくださることがとてもよかったです。またスキルだけでなく、受講者それぞれの性格も考慮して研修してくださっていたので、質の高い研修でした。
インタビューを見る

デジタル人材育成・研修について相談する

助成金で費用負担を軽減

インターネット・アカデミーのIT研修では、要件を満たすことで厚生労働省の人材開発支援助成金が利用できます。研修費用に対する経費助成と、受講中の賃金に対する賃金助成の両方が支給されます。

この助成金制度ではいくつかのコースが用意されており、研修目的に合わせて使用できる制度をご提案いたします。

経費助成+賃金助成
※eラーニングの場合、賃金助成は支給されません。
DX人材育成の研修で使える
事業展開等リスキリング支援コース
  経費助成 賃金助成 年間限度額
中小企業 75% 960(1人1時間) 1億
大企業 60% 480(1人1時間) 1億
新卒研修など幅広いテーマの研修で使える
人材育成支援コース
  経費助成 賃金助成 年間限度額
中小企業 45% 760(1人1時間) 1000万
大企業 30% 380(1人1時間) 1000万円

助成金を使った研修の事例紹介や、貴社が研修を行った場合に支給される助成額シミュレーションも承っています。お気軽にご相談ください。

助成金について相談する

DX伴走支援サービス・DX人材育成についてのご相談

法人サービスの電話お問合せ窓口
03-3341-3781
受付時間(平日・土日) 10時-21時

IT人材育成に精通したコンサルタントに無料でさまざまな相談をしていただけます。お気軽にご相談ください。

たとえばこんな相談ができます
  • DX伴走支援サービスについて、とりあえず話を聞きたい
  • 人材育成の事例を詳しく知りたい
  • 助成金の使い方や、支給額のシミュレーションを知りたい
会社名必須
部署名必須
お名前必須
ふりがな必須
電話番号必須
メールアドレス必須
受講人数
開始時期
対象者
       
ご相談内容
個人情報の取扱いについて

個人情報の利用目的についてご同意いただいた場合のみ、「同意して進む」を押してください。

プライバシー保護のため暗号化通信を使用しています。
このページの上へ