[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! グラフィックワーク ( 計 22 時 33 分 ) 01-01. 名刺 約 56 分 デザインコンセプト説明 約 04 分 01 新規ファイル作成 (1) 約 08 分 01 新規ファイル作成 (2) 約 10 分 02 名刺のおもて面 ( ロゴとURL) の作成 約 13 分 03 名刺のうら面 ( 名前 連絡先 ) の作成 約 11 分 04 文字の調整と完成 約 10 分 01-02. ミニワーク ( ロゴトレース ) デジハリのロゴをトレースしてみよう (1) ペンツールデジハリのロゴをトレースしてみよう (2) クリッピングマスクデジハリのロゴをトレースしてみよう (3) パスファインダ 約 31 分約 13 分約 07 分約 11 分 02. バナー ( アプリサイト ) 約 34 分 デザインコンセプト説明 約 03 分 05 新規ファイル作成と画像の配置 約 07 分 06 文字を見やすくする演出 約 10 分 07 文字の配置と仕上げ 約 14 分 1 / 5 ページ
グラフィックワーク ( 計 22 時 33 分 ) 03. 1 ページサイト ( アプリサイト ) デザインコンセプト説明 約 04 分 約 04 分 03-01. 1 ページサイト ( アプリサイト )PC 約 184 分 01 完成データの確認 ファイル新規作成 約 12 分 02 ガイドの引き方 12カラム 約 14 分 03 画像の配置 1 約 08 分 04 画像の配置 2 約 09 分 05 アプリ名 キャッチ アプリストアアイコンの配置 約 11 分 06 文字やアイコンの幅を整える ( スペーサー活用 ) 約 11 分 07 アプリ説明部分の作成 1 約 15 分 08 アプリ説明部分の作成 2 約 09 分 09 機能の説明部分の作成画像のクリッピングマスク 約 11 分 10 画像の上に3つのポイントをのせる (1) 約 12 分 10 画像の上に3つのポイントをのせる (2) 約 06 分 11 画面上の気候の変化の表示説明部分の作成 約 10 分 12 アラーム説明部分 ( その1) の作成 約 10 分 13 アラーム説明部分 ( その2) の作成 約 14 分 14 アラーム説明部分の幅などの調整 約 09 分 15 フッターの作成 1 約 11 分 16 フッターの作成 2 約 12 分 03-02. 1 ページサイト ( アプリサイト )SP 約 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 分 03-03. 画像の書き出し画像の書き出し (1) 画像形式について画像の書き出し (2) スライス画像の書き出し (3) アセット1 画像の書き出し (4) アセット2 約 39 分約 08 分約 12 分約 09 分約 10 分 2 / 5 ページ
グラフィックワーク ( 計 22 時 33 分 ) 04.( ワーク ) 企業サイト デザインコンセプト説明 約 05 分 約 05 分 04-01. 企業サイト PC-home 約 328 分 01 企業サイト制作の準備 約 06 分 02 Photoshop 起動新規ドキュメント説明 (1) 約 08 分 02 Photoshop 起動新規ドキュメント説明 (2) 約 08 分 03 画面操作 1 グリッド 約 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 メイン1 WORKS スペーシングの活用 約 18 分 14 メイン1 WORKS 画像の配置 約 18 分 15 メイン1 WORKS 画像に文字を載せるボタン (1) 約 06 分 15 メイン1 WORKS 画像に文字を載せるボタン (2) 約 13 分 15 メイン1 WORKS 画像に文字を載せるボタン (3) 約 04 分 16 メイン2 NEWS 情報ボックス作成 1 約 13 分 17 メイン2 NEWS 情報ボックス作成 2 長方形配置 約 13 分 18 メイン2 NEWS 情報ボックス作成 3テキスト流し込み 約 14 分 19 メイン2 NEWS 情報ボックス作成 4 文字調整 約 11 分 20 メイン2 NEWS 情報ボックス作成 5 複製で他を作る 約 08 分 21 メイン2 NEWS 情報ボックス作成 6 VIEWMOREボタン 約 06 分 22 フッターを作る 約 11 分 23 フッターに住所を入れるトップページボタン 約 13 分 24 フッターの共通パーツ化のための書き出し 約 15 分 04-02. 企業サイト PC-about 約 131 分 25 ヘッダーのベースの作成 約 16 分 26 ヘッダーの完成書き出し ( 共有ファイル化 )(1) 約 04 分 26 ヘッダーの完成書き出し ( 共有ファイル化 )(2) 約 12 分 26 ヘッダーの完成書き出し ( 共有ファイル化 )(3) 約 04 分 27 ヘッダーの各文字ボタンのON-OFFの色の設定 約 10 分 28 レイヤーカンプでボタンのON-OFF 切り替え 約 07 分 29 メインビジュアルの作成 1 画像の配置 約 10 分 30 文字情報の配置 (1) 約 13 分 30 文字情報の配置 (2) 約 12 分 31 メインビジュアルの作成 2 文字情報の配置 約 04 分 32 企業情報の配置 約 12 分 33 アクセスエリアの作成 約 12 分 34 住所テキスト マップボタン フッターの配置 約 15 分 3 / 5 ページ
グラフィックワーク ( 計 22 時 33 分 ) 04-03. 企業サイト PC-works 約 39 分 35 新規ドキュメント作成 (1) 約 06 分 35 新規ドキュメント作成 (2) 約 13 分 36 ギャラリー部分を作成 約 14 分 37 レイヤー効果のオン / オフフッター配置最後の仕上げ 約 06 分 04-04. 企業サイト PC-contact 約 48 分 38 新規ファイルの作成ヘッダーの配置 約 12 分 39 スペーサー作成文字の配置 約 09 分 40 入力フォーム作成 1 必須アイコン入力ボックス作成 約 15 分 41 プライバシーポリシーチェックボックス 確認ボタンの作成 約 12 分 04-05. 企業サイト SP-home 約 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 分 4 / 5 ページ
グラフィックワーク ( 計 22 時 33 分 ) 04-06. 企業サイト SP-about 約 53 分 52 aboutのスマホページ作成ヘッダーのリンク配置 約 06 分 53 メインビジュアル配置トーンカーブで色調整 約 09 分 54 タイトル等の配置 約 10 分 55 下部イメージ画像配置 約 06 分 56 企業情報を追加 約 07 分 57 access 情報を追加 約 12 分 58 フッターを追加 約 03 分 04-07. 企業サイト SP-works 約 53 分 59 worksのスマホページ作成ヘッダーのリンク配置 約 10 分 60 コンテンツ作成タイトル等の配置 (1) 約 10 分 60 コンテンツ作成タイトル等の配置 (2) 約 06 分 61 ロールオーバーしたときの文字ボタンの色変化を作成 (1) 約 09 分 61 ロールオーバーしたときの文字ボタンの色変化を作成 (2) 約 11 分 62 コンテンツごとの背景を設定フッターを配置 約 07 分 04-08. 企業サイト SP-contact 約 70 分 63 contactのスマホページ作成ヘッダーのリンク配置 約 06 分 64 タイトル等の配置 約 09 分 65 入力フォームの作成 約 15 分 66 プライバシーポリシーチェックと確認ボタンの配置 約 13 分 67 フッターの読み込み 約 02 分 68 ナビゲーションの作成 1 約 11 分 69 ナビゲーションの作成 2 約 14 分 5 / 5 ページ
[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 01-01. アプリサイト - HTML 約 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 分 01-02. アプリサイト - CSS - SP 約 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 分 1 / 6 ページ
01-03. アプリサイト - CSS - PC 01-04. 番外編 約 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 分 2 / 6 ページ
02-01. 企業サイト - HTML 約 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 分 3 / 6 ページ
02-02. 企業サイト - CSS -SP-home 約 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 画像 1 約 08 分 39 ヘッダー部分のスタイル (3) SVG 画像 2 約 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 分 02-03. 企業サイト - CSS -SP-About 約 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 分 4 / 6 ページ
02-04. 企業サイト - CSS -SP-Works 約 45 分 51 下層ページ共通部分 約 10 分 52 カテゴリーナビゲーション 約 11 分 53 作品リストの実装 約 10 分 54 仕上げ 約 14 分 02-05. 企業サイト - CSS -SP-Contact 約 71 分 55 下層ページ共通部分 約 08 分 56 フォーム部分 (1) 約 12 分 56 フォーム部分 (2) 約 06 分 56 フォーム部分 (3) 約 09 分 56 フォーム部分 (4) 約 14 分 57 全体の補足 約 08 分 58 文字周りの調整 約 14 分 02-06. 企業サイト - CSS -PC-home 約 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) ナビゲーション間の余白の設定 1 約 04 分 60 ヘッダー実装 (6) ナビゲーション間の余白の設定 2 約 14 分 60 ヘッダー実装 (7) ナビゲーションの上下中央配置 約 14 分 60 ヘッダー実装 (8) 全体の中央寄せ 約 11 分 61 フッター実装 (1) 約 05 分 61 フッター実装 (2) 約 11 分 62 トップページのタイトル部分 約 03 分 63 トップページのボタン部分 約 04 分 64 トップページのWorks 部分の実装 約 04 分 65 トップページのNews 部分の実装 約 11 分 02-07. 企業サイト - CSS -PC-About 約 54 分 66 About 部分の共通部分とヒーローイメージの設定 約 09 分 67 About 部分の設定 約 07 分 68 理念部分の設定 約 07 分 69 Company 部分の設定 約 04 分 70 Access 部分の設定 (1) 地図の表示設定 約 04 分 70 Access 部分の設定 (2) アクセス情報の表示設定 1 約 08 分 70 Access 部分の設定 (2) アクセス情報の表示設定 2 約 15 分 5 / 6 ページ
02-08. 企業サイト - CSS -PC-Works 約 35 分 71 設定 (1) flex-wrap 約 10 分 71 設定 (2) カテゴリーナビゲーションの設定 約 05 分 71 設定 (3) 余白の調整 約 06 分 71 設定 (4) 作品リストのデザイン調整 約 14 分 02-09. 企業サイト - CSS -PC-Contact 約 90 分 72 設定 (1) 余白の調整 約 06 分 72 設定 (2) フォームの幅調整 約 04 分 72 設定 (3) フォームのレイアウト調整 1 約 07 分 72 設定 (3) フォームのレイアウト調整 2 約 03 分 73 全体の調整 (1) 約 06 分 73 全体の調整 (2) マウスオーバーの設定 約 04 分 73 全体の調整 (3) CSSトランジション 約 08 分 73 全体の調整 (4) ページトップボタン1 約 12 分 73 全体の調整 (4) ページトップボタン2 約 09 分 73 全体の調整 (4) ページトップボタン3 約 12 分 73 全体の調整 (5) 約 05 分 73 全体の調整 (6) 約 14 分 02-10. サーバーへのアップロード 約 38 分 74 FTPについて (1) 約 10 分 74 FTPについて (2) 約 10 分 75 サイトの公開方法 (1) 約 06 分 75 サイトの公開方法 (2) 約 12 分 6 / 6 ページ