■［学習動画］ 一覧
※学習の閲覧や質問の際にご利用ください。閲覧が終了した動画をチェックして、学習の進行状況を確認しましょう！ 時間 ( 計22時33分 ) 約 56分 デザインコンセプト説明 約 04分 01 新規ファイル作成（1） 約 08分 01 新規ファイル作成（2） 約 10分 02 名刺のおもて面（ロゴとURL）の作成 約 13分 03 名刺のうら面（名前・連絡先）の作成 約 11分 04 文字の調整と完成 約 10分 約 31分 デジハリのロゴをトレースしてみよう(1) ペンツール 約 13分 デジハリのロゴをトレースしてみよう(2) クリッピングマスク 約 07分 デジハリのロゴをトレースしてみよう(3) パスファインダ 約 11分 約 34分 デザインコンセプト説明 約 03分 05 新規ファイル作成と画像の配置 約 07分 06 文字を見やすくする演出 約 10分 07 文字の配置と仕上げ 約 14分 01-01. 名刺 グラフィック ワーク 閲覧 チェック 動画タイトル 01-02. ミニワーク（ロゴトレース） 02. バナー（アプリサイト）時間 ( 計22時33分 ) グラフィック ワーク 閲覧 チェック 動画タイトル 約 04分 デザインコンセプト説明 約 04分 約 184分 01 完成データの確認、ファイル新規作成 約 12分 02 ガイドの引き方、12カラム 約 14分 03 画像の配置① 約 08分 04 画像の配置② 約 09分 05 アプリ名、キャッチ、アプリストアアイコンの配置 約 11分 06 文字やアイコンの幅を整える（スペーサー活用） 約 11分 07 アプリ説明部分の作成① 約 15分 08 アプリ説明部分の作成② 約 09分 09 機能の説明部分の作成 画像のクリッピングマスク 約 11分 10 画像の上に3つのポイントをのせる（1） 約 12分 10 画像の上に3つのポイントをのせる（2） 約 06分 11 画面上の気候の変化の表示説明部分の作成 約 10分 12 アラーム説明部分（その1）の作成 約 10分 13 アラーム説明部分（その2）の作成 約 14分 14 アラーム説明部分の幅などの調整 約 09分 15 フッターの作成① 約 11分 16 フッターの作成② 約 12分 約 151分 17 新規ファイルの作成 約 09分 18 ガイドを引く 約 08分 19 メインビジュアルの配置 約 07分 20 アプリ名の配置 約 05分 21 スマホイメージ 約 12分 22 スペーサーの整理 約 02分 23 アプリボタンの配置 約 10分 24 スマホイメージの配置 約 04分
25 What's temp Wave? 部分のレイアウト 約 09分
26 説明・イメージグラフの入力 約 05分 27 アプリのポイント部分のレイアウト 約 08分 28 ポイント1 気温の配置 約 08分 29 ポイント1をコピーして他のポイントも配置 約 05分 30 カスタマイズ紹介部分のレイアウト 約 10分 31 カスタマイズイメージ写真の配置 約 04分 32 アラーム紹介部分のレイアウト 約 09分 33 アラーム設定紹介部分のレイアウト 約 08分 34 テキストやアイコンの大きさの調整 約 10分 35 フッター部分のレイアウト（1） 約 08分 35 フッター部分のレイアウト（2） 約 10分 約 39分 画像の書き出し(1) 画像形式について 約 08分 画像の書き出し(2) スライス 約 12分 画像の書き出し(3) アセット① 約 09分 画像の書き出し(4) アセット② 約 10分 03-02. 1ページサイト（アプリサイト）SP 03-01. 1ページサイト（アプリサイト）PC 03. 1ページサイト（アプリサイト） 03-03.画像の書き出し 2 / 5 ページ
時間 ( 計22時33分 ) グラフィック ワーク 閲覧 チェック 動画タイトル 約 05分 デザインコンセプト説明 約 05分 約 328分 01 企業サイト制作の準備 約 06分 02 Photoshop起動 新規ドキュメント説明(1) 約 08分 02 Photoshop起動 新規ドキュメント説明(2) 約 08分 03 画面操作①・グリッド 約 16分 04 レイアウトのための12カラム分け・ガイド 約 07分 05 埋め込み配置 ライブラリ スウォッチ(1) 約 11分 05 埋め込み配置 ライブラリ スウォッチ(2) 約 12分 05 埋め込み配置 ライブラリ スウォッチ(3) 約 04分 06 キーエリア 画像配置の準備（1） 約 09分 06 キーエリア 画像配置の準備（2） 約 14分 07 画像のクリッピングマスク メイン画像配置 約 06分 08 メイン画像にロゴを配置 約 09分 09 レイヤーのグループ化 ナビゲーションを作る 約 15分 10 ナビゲーションへのロゴいれ スナップ 約 10分 11 ナビゲーションへのテキストボタン設定とフォント(1) 約 12分 11 ナビゲーションへのテキストボタン設定とフォント(2) 約 09分 12 ナビゲーションへのSNSボタン追加 約 09分 13 メイン① WORKS スペーシングの活用 約 18分 14 メイン① WORKS 画像の配置 約 18分 15 メイン① WORKS 画像に文字を載せる ボタン（1） 約 06分 15 メイン① WORKS 画像に文字を載せる ボタン（2） 約 13分 15 メイン① WORKS 画像に文字を載せる ボタン（3） 約 04分 16 メイン② NEWS 情報ボックス作成① 約 13分 17 メイン② NEWS 情報ボックス作成②長方形配置 約 13分 18 メイン② NEWS 情報ボックス作成③テキスト流し込み 約 14分 19 メイン② NEWS 情報ボックス作成④文字調整 約 11分 20 メイン② NEWS 情報ボックス作成⑤複製で他を作る 約 08分 21 メイン② NEWS 情報ボックス作成⑥ VIEWMOREボタン 約 06分 22 フッターを作る 約 11分 23 フッターに住所を入れる トップページボタン 約 13分 24 フッターの共通パーツ化のための書き出し 約 15分 約 131分 25 ヘッダーのベースの作成 約 16分 26 ヘッダーの完成 書き出し（共有ファイル化）(1) 約 04分 26 ヘッダーの完成 書き出し（共有ファイル化）(2) 約 12分 26 ヘッダーの完成 書き出し（共有ファイル化）(3) 約 04分 27 ヘッダーの各文字ボタンのON-OFFの色の設定 約 10分 28 レイヤーカンプでボタンのON-OFF切り替え 約 07分 29 メインビジュアルの作成①画像の配置 約 10分 30 文字情報の配置（1） 約 13分 30 文字情報の配置（2） 約 12分 31 メインビジュアルの作成②文字情報の配置 約 04分 32 企業情報の配置 約 12分 33 アクセスエリアの作成 約 12分 34 住所テキスト、マップボタン、フッターの配置 約 15分 04-01. 企業サイトPC-home 04.（ワーク）企業サイト 04-02. 企業サイトPC-about
時間 ( 計22時33分 ) グラフィック ワーク 閲覧 チェック 動画タイトル 約 39分 35 新規ドキュメント作成（1） 約 06分 35 新規ドキュメント作成（2） 約 13分 36 ギャラリー部分を作成 約 14分 37 レイヤー効果のオン/オフ フッター配置 最後の仕上げ 約 06分 約 48分 38 新規ファイルの作成 ヘッダーの配置 約 12分 39 スペーサー作成 文字の配置 約 09分 40 入力フォーム作成① 必須アイコン 入力ボックス作成 約 15分 41 プライバシーポリシーチェックボックス・確認ボタンの作成 約 12分 約 127分 42 homeのスマホページ作成 アートボードの並列作例 約 12分 43 スマホページのヘッダー・メニューの作成（1） 約 13分 43 スマホページのヘッダー・メニューの作成（2） 約 08分 44 キービジュアルの配置 ロゴの配置 約 09分 45 WORKSタイトル作成 約 10分 46 WORKSイメージ配置 約 09分 47 VIEWMOREボタン配置 約 12分 48 NEWSの写真・文章・アイコンを配置（1） 約 09分 48 NEWSの写真・文章・アイコンを配置（2） 約 12分 49 NEWSのVIEWMOREボタン配置 約 09分 50 フッターの作成（1） 約 10分 50 フッターの作成（2） 約 07分 51 スマホ版フッターの書き出し 約 07分 04-03. 企業サイトPC-works 04-04. 企業サイトPC-contact 04-05. 企業サイトSP-home 4 / 5 ページ
時間 ( 計22時33分 ) グラフィック ワーク 閲覧 チェック 動画タイトル 約 53分 52 aboutのスマホページ作成 ヘッダーのリンク配置 約 06分 53 メインビジュアル配置 トーンカーブで色調整 約 09分 54 タイトル等の配置 約 10分 55 下部イメージ画像配置 約 06分 56 企業情報を追加 約 07分 57 access情報を追加 約 12分 58 フッターを追加 約 03分 約 53分 59 worksのスマホページ作成 ヘッダーのリンク配置 約 10分 60 コンテンツ作成 タイトル等の配置（1） 約 10分 60 コンテンツ作成 タイトル等の配置（2） 約 06分 61 ロールオーバーしたときの文字ボタンの色変化を作成（1） 約 09分 61 ロールオーバーしたときの文字ボタンの色変化を作成（2） 約 11分 62 コンテンツごとの背景を設定 フッターを配置 約 07分 約 70分 63 contactのスマホページ作成 ヘッダーのリンク配置 約 06分 64 タイトル等の配置 約 09分 65 入力フォームの作成 約 15分 66 プライバシーポリシーチェックと確認ボタンの配置 約 13分 67 フッターの読み込み 約 02分 68 ナビゲーションの作成① 約 11分 69 ナビゲーションの作成② 約 14分 04-07. 企業サイトSP-works 04-08. 企業サイトSP-contact 04-06. 企業サイトSP-about
■［学習動画］ 一覧
※学習の閲覧や質問の際にご利用ください。閲覧が終了した動画をチェックして、学習の進行状況を確認しましょう！ 時間 ( 計30時03分 ) 約 178分 01 完成形と支給データの確認 約 09分 02 全体の流れと仕様の確認 約 09分 03 作業フォルダの設定 約 11分 04 テキストファイルの貼り付けと全体の骨組みの構成- 約 15分 05 HTMLを学ぶ上でのポイント 約 16分 06 header・main・footerの区切り 約 10分 07 sectionと見出しの付け方 約 14分 08 HTML5 Outliner 約 08分 09 ヘッダー部分のマークアップ(1) 約 10分 09 ヘッダー部分のマークアップ(2) 約 10分 10 フッター部分のマークアップ 約 07分11 What's temp wave? のマークアップ 約 08分
12 アプリの特徴部分のマークアップ(1) 約 03分 12 アプリの特徴部分のマークアップ(2) 約 11分 13 アプリの機能説明部分のマークアップ(1) 約 07分 13 アプリの機能説明部分のマークアップ(2) 約 08分 14 headタグの中に入れるもの 約 13分 15 スマホ画面のデバック方法 約 09分 約 241分 16 CSSとは？ 約 10分 17 リセットCSS 約 10分 18 CSSの適用をしてみよう CSSのClassについて 約 01分 19 ブロックレベルボックスとインラインレベルボックス 約 07分 20 marginとpadding 約 09分 21 marginを設定する際の注意点 約 03分 22 Webフォントの設定 約 11分 23 全体のフォントサイズの指定 約 08分 24 ヘッダーの背景画像の指定（1） 約 11分 24 ヘッダーの背景画像の指定（2） 約 05分 25 ヘッダーの文字部分の調整 約 10分 26 retinaディスプレイ対応の注意点 約 11分 27 ヘッダーの中央寄せ 約 06分 28 アプリダウンロードボタンのレイアウト(1) 約 09分 28 アプリダウンロードボタンのレイアウト(2) 約 08分 29 フッターのレイアウト設定(1) 約 14分 29 フッターのレイアウト設定(2) 約 09分 29 フッターのレイアウト設定(3) 約 07分 30 コンテンツ部分のタイトルと文章の設定 約 12分
31 What's temp wave? のレイアウト設定 約 10分
32 アプリの特徴部分のレイアウト設定(1) 約 11分 32 アプリの特徴部分のレイアウト設定(2) 約 16分 33 アプリの操作部分のレイアウト(1) 約 09分 33 アプリの操作部分のレイアウト(2) 約 16分 33 アプリの操作部分のレイアウト(3) 約 11分 34 全体の文字回りの調整 約 07分 01-02. アプリサイト - CSS - SP 01-01. アプリサイト - HTML HTML／CSS ワーク 閲覧 チェック 動画タイトル 1 / 6 ページ
時間 ( 計30時03分 ) HTML／CSS ワーク 閲覧 チェック 動画タイトル 約 192分 35 レスポンシブWebデザインについて 約 07分 36 ヘッダーのレイアウト調整(1) 約 10分 36 ヘッダーのレイアウト調整(2) 約 12分 36 ヘッダーのレイアウト調整(3) 約 07分 37 アプリの特徴部分のレイアウト調整（1） 約 07分 37 アプリの特徴部分のレイアウト調整（2） 約 04分 38 アプリの操作部分のレイアウト調整(1) 約 07分 38 アプリの操作部分のレイアウト調整(2) 約 11分 38 アプリの操作部分のレイアウト調整(3) 約 10分 38 アプリの操作部分のレイアウト調整(4) 約 08分 38 アプリの操作部分のレイアウト調整(5) 約 07分 39 フッターのレイアウト調整 約 08分
40 What's temp wave? の調整(1) 約 12分
40 What's temp wave? の調整(2) 約 13分
40 What's temp wave? の調整(3) 約 11分
40 What's temp wave? の調整(4) 約 08分
41 全体の調整(1) 約 08分 41 全体の調整(2) 約 10分 41 全体の調整(3) 約 08分 41 全体の調整(4) 約 09分 41 全体の調整(5) 約 15分 約 41分 42 Google Chromeの検証ツールの使い方 約 18分 43 CSSが効かない時に確認したいこと(1) 約 12分 43 CSSが効かない時に確認したいこと(2) 約 11分 01-04. 番外編 01-03. アプリサイト - CSS - PC
時間 ( 計30時03分 ) HTML／CSS ワーク 閲覧 チェック 動画タイトル 約 292分 01 完成形の確認 約 10分 02 支給データの確認 約 10分 03 仕様書の確認 約 07分 04 コードエディタの環境設定について 約 11分 05 EmmetとSnippets 約 13分 06 ディレクトリ構成の考え方 約 14分 07 全体の骨組みを作る(1) 約 07分 07 全体の骨組みを作る(2) 約 08分 08 ヘッダー部分のコーディング 約 06分 09 パスの考え方について（1） 約 08分 09 パスの考え方について（2） 約 09分 10 font-awesome 約 12分 11 buttonタグ 約 06分 12 フッター部分のコーディング 約 10分 13 ヒーローイメージのコーディング 約 07分 14 Works部分のコーディング 約 10分 15 News部分のコーディング 約 09分 16 headタグの中に入れるもの（1） 約 08分 16 headタグの中に入れるもの（2） 約 09分 17 about 骨組み 約 16分 18 about ヒーローイメージ 約 06分 19 about コンセプト 約 05分 20 about company 約 09分 21 about access 約 07分 22 works 骨組み 約 14分 23 works カテゴリーナビゲーション 約 03分 24 contact 骨組み 約 07分 25 contact インプットタイプテキスト 約 11分 26 contact テキストエリア 約 10分 27 contact ラベル 約 11分 28 HTMLを学習する上での注意点 約 12分 29 検証ツールの使い方 HTML編 約 07分 02-01. 企業サイト - HTML 3 / 6 ページ
時間 ( 計30時03分 ) HTML／CSS ワーク 閲覧 チェック 動画タイトル 約 271分 30 CSSとは 約 10分 31 リセットCSS 約 09分 32 CSSの書き方の基本 約 09分 33 classの命名規則 約 06分 34 スマートフォンでのデバッグ方法 約 06分 35 CSS適用の流れ 約 07分 36 line-heightについて 約 07分 37 font-familyについて 約 12分 38 フルードイメージ 約 07分 39 ヘッダー部分のスタイル(1) 約 13分 39 ヘッダー部分のスタイル(2) 約 06分 39 ヘッダー部分のスタイル(3) SVG画像① 約 08分 39 ヘッダー部分のスタイル(3) SVG画像② 約 10分 40 スマホメニューの実装(1) 約 10分 40 スマホメニューの実装(2) 約 06分 40 スマホメニューの実装(3) 約 07分 40 スマホメニューの実装(4) 約 02分 41 メインビジュアルの実装(1) 約 09分 41 メインビジュアルの実装(2) 約 13分 42 フッターの実装(1) 約 11分 42 フッターの実装(2) 約 10分 43 メインコンテンツの実装(1) 約 12分 43 メインコンテンツの実装(2) 約 07分 43 メインコンテンツの実装(3) 約 13分 43 メインコンテンツの実装(4) 約 10分 44 ワークス部分の実装 約 12分 45 ニュースエリアの実装(1) 約 11分 45 ニュースエリアの実装(2) 約 09分 45 ニュースエリアの実装(3) 約 08分 45 ニュースエリアの実装(4) 約 11分 約 117分 46 下層ページ共通部分 約 15分 47 ヒーローイメージ部分 約 06分 48 リード部分(1) 約 08分 48 リード部分(2) 約 13分 48 リード部分(3) 約 08分 49 会社概要(1) 約 06分 49 会社概要(2) 約 07分 49 会社概要(3) 約 09分 49 会社概要(4) 約 13分 50 アクセス(1) 約 10分 50 アクセス(2) 約 09分 50 アクセス(3) 約 03分 50 アクセス(4) 約 10分 02-02. 企業サイト - CSS -SP-home 02-03. 企業サイト - CSS -SP-About
時間 ( 計30時03分 ) HTML／CSS ワーク 閲覧 チェック 動画タイトル 約 45分 51 下層ページ共通部分 約 10分 52 カテゴリーナビゲーション 約 11分 53 作品リストの実装 約 10分 54 仕上げ 約 14分 約 71分 55 下層ページ共通部分 約 08分 56 フォーム部分(1) 約 12分 56 フォーム部分(2) 約 06分 56 フォーム部分(3) 約 09分 56 フォーム部分(4) 約 14分 57 全体の補足 約 08分 58 文字周りの調整 約 14分 約 138分 59 レスポンシブWebデザイン 約 10分 60 ヘッダー実装(1) CSSでの非表示の方法 約 12分 60 ヘッダー実装(2) グローバルナビゲーションの表示 約 11分 60 ヘッダー実装(3) Flexboxによる横並びの実装 約 09分 60 ヘッダー実装(4) Flexboxを適用する際の注意点 約 09分 60 ヘッダー実装(5) justify-content 約 06分 60 ヘッダー実装(6) ナビゲーション間の余白の設定① 約 04分 60 ヘッダー実装(6) ナビゲーション間の余白の設定② 約 14分 60 ヘッダー実装(7) ナビゲーションの上下中央配置 約 14分 60 ヘッダー実装(8) 全体の中央寄せ 約 11分 61 フッター実装(1) 約 05分 61 フッター実装(2) 約 11分 62 トップページのタイトル部分 約 03分 63 トップページのボタン部分 約 04分 64 トップページのWorks部分の実装 約 04分 65 トップページのNews部分の実装 約 11分 約 54分 66 About部分の共通部分とヒーローイメージの設定 約 09分 67 About部分の設定 約 07分 68 理念部分の設定 約 07分 69 Company部分の設定 約 04分 70 Access部分の設定(1) 地図の表示設定 約 04分 70 Access部分の設定(2) アクセス情報の表示設定① 約 08分 70 Access部分の設定(2) アクセス情報の表示設定② 約 15分 02-06. 企業サイト - CSS -PC-home 02-07. 企業サイト - CSS -PC-About 02-04. 企業サイト - CSS -SP-Works 02-05. 企業サイト - CSS -SP-Contact 5 / 6 ページ
時間 ( 計30時03分 ) HTML／CSS ワーク 閲覧 チェック 動画タイトル 約 35分 71 設定(1) flex-wrap 約 10分 71 設定(2) カテゴリーナビゲーションの設定 約 05分 71 設定(3) 余白の調整 約 06分 71 設定(4) 作品リストのデザイン調整 約 14分 約 90分 72 設定(1) 余白の調整 約 06分 72 設定(2) フォームの幅調整 約 04分 72 設定(3) フォームのレイアウト調整① 約 07分 72 設定(3) フォームのレイアウト調整② 約 03分 73 全体の調整(1) 約 06分 73 全体の調整(2) マウスオーバーの設定 約 04分 73 全体の調整(3) CSSトランジション 約 08分 73 全体の調整(4) ページトップボタン① 約 12分 73 全体の調整(4) ページトップボタン② 約 09分 73 全体の調整(4) ページトップボタン③ 約 12分 73 全体の調整(5) 約 05分 73 全体の調整(6) 約 14分 約 38分 74 FTPについて(1) 約 10分 74 FTPについて(2) 約 10分 75 サイトの公開方法(1) 約 06分 75 サイトの公開方法(2) 約 12分 02-10. サーバーへのアップロード 02-08. 企業サイト - CSS -PC-Works 02-09. 企業サイト - CSS -PC-Contact
