[ 学習動画 ] 一覧学習の閲覧や質問の際にご利用ください閲覧が終了した動画をチェックして学習の進行状況を確認しましょう! グラフィックワーク閲覧チェック動画タイトル時間 ( 計 22 時 33 分 ) 名刺約 56 分デザインコンセプト説明約 04 分 01 新規フ

Size: px

Start display at page:

Download "[ 学習動画 ] 一覧学習の閲覧や質問の際にご利用ください閲覧が終了した動画をチェックして学習の進行状況を確認しましょう! グラフィックワーク閲覧チェック動画タイトル時間 ( 計 22 時 33 分 ) 名刺約 56 分デザインコンセプト説明約 04 分 01 新規フ"

なおみそめや
5 years ago
Views:

1 [ 学習動画 ] 一覧学習の閲覧や質問の際にご利用ください閲覧が終了した動画をチェックして学習の進行状況を確認しましょう! グラフィックワーク ( 計 22 時 33 分 ) 名刺約 56 分デザインコンセプト説明約 04 分 01 新規ファイル作成 (1) 約 08 分 01 新規ファイル作成 (2) 約 10 分 02 名刺のおもて面 ( ロゴとURL) の作成約 13 分 03 名刺のうら面 ( 名前連絡先 ) の作成約 11 分 04 文字の調整と完成約 10 分ミニワーク ( ロゴトレース ) デジハリのロゴをトレースしてみよう (1) ペンツールデジハリのロゴをトレースしてみよう (2) クリッピングマスクデジハリのロゴをトレースしてみよう (3) パスファインダ約 31 分約 13 分約 07 分約 11 分 02. バナー ( アプリサイト ) 約 34 分デザインコンセプト説明約 03 分 05 新規ファイル作成と画像の配置約 07 分 06 文字を見やすくする演出約 10 分 07 文字の配置と仕上げ約 14 分 1 / 5 ページ

2 グラフィックワーク ( 計 22 時 33 分 ) ページサイト ( アプリサイト ) デザインコンセプト説明約 04 分約 04 分ページサイト ( アプリサイト )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 分ページサイト ( アプリサイト )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 分画像の書き出し画像の書き出し (1) 画像形式について画像の書き出し (2) スライス画像の書き出し (3) アセット1 画像の書き出し (4) アセット2 約 39 分約 08 分約 12 分約 09 分約 10 分 2 / 5 ページ

3 グラフィックワーク ( 計 22 時 33 分 ) 04.( ワーク ) 企業サイトデザインコンセプト説明約 05 分約 05 分企業サイト 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 分企業サイト 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 ページ

4 グラフィックワーク ( 計 22 時 33 分 ) 企業サイト PC-works 約 39 分 35 新規ドキュメント作成 (1) 約 06 分 35 新規ドキュメント作成 (2) 約 13 分 36 ギャラリー部分を作成約 14 分 37 レイヤー効果のオン / オフフッター配置最後の仕上げ約 06 分企業サイト PC-contact 約 48 分 38 新規ファイルの作成ヘッダーの配置約 12 分 39 スペーサー作成文字の配置約 09 分 40 入力フォーム作成 1 必須アイコン入力ボックス作成約 15 分 41 プライバシーポリシーチェックボックス確認ボタンの作成約 12 分企業サイト 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 ページ

5 グラフィックワーク ( 計 22 時 33 分 ) 企業サイト SP-about 約 53 分 52 aboutのスマホページ作成ヘッダーのリンク配置約 06 分 53 メインビジュアル配置トーンカーブで色調整約 09 分 54 タイトル等の配置約 10 分 55 下部イメージ画像配置約 06 分 56 企業情報を追加約 07 分 57 access 情報を追加約 12 分 58 フッターを追加約 03 分企業サイト SP-works 約 53 分 59 worksのスマホページ作成ヘッダーのリンク配置約 10 分 60 コンテンツ作成タイトル等の配置 (1) 約 10 分 60 コンテンツ作成タイトル等の配置 (2) 約 06 分 61 ロールオーバーしたときの文字ボタンの色変化を作成 (1) 約 09 分 61 ロールオーバーしたときの文字ボタンの色変化を作成 (2) 約 11 分 62 コンテンツごとの背景を設定フッターを配置約 07 分企業サイト SP-contact 約 70 分 63 contactのスマホページ作成ヘッダーのリンク配置約 06 分 64 タイトル等の配置約 09 分 65 入力フォームの作成約 15 分 66 プライバシーポリシーチェックと確認ボタンの配置約 13 分 67 フッターの読み込み約 02 分 68 ナビゲーションの作成 1 約 11 分 69 ナビゲーションの作成 2 約 14 分 5 / 5 ページ

6 [ 学習動画 ] 一覧学習の閲覧や質問の際にご利用ください閲覧が終了した動画をチェックして学習の進行状況を確認しましょう! アプリサイト - 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 分アプリサイト - 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 ページ

7 アプリサイト - CSS - PC 番外編約 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 ページ

8 企業サイト - 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 ページ

9 企業サイト - 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 分企業サイト - 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 ページ

10 企業サイト - CSS -SP-Works 約 45 分 51 下層ページ共通部分約 10 分 52 カテゴリーナビゲーション約 11 分 53 作品リストの実装約 10 分 54 仕上げ約 14 分企業サイト - CSS -SP-Contact 約 71 分 55 下層ページ共通部分約 08 分 56 フォーム部分 (1) 約 12 分 56 フォーム部分 (2) 約 06 分 56 フォーム部分 (3) 約 09 分 56 フォーム部分 (4) 約 14 分 57 全体の補足約 08 分 58 文字周りの調整約 14 分企業サイト - 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 分企業サイト - 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 ページ

11 企業サイト - CSS -PC-Works 約 35 分 71 設定 (1) flex-wrap 約 10 分 71 設定 (2) カテゴリーナビゲーションの設定約 05 分 71 設定 (3) 余白の調整約 06 分 71 設定 (4) 作品リストのデザイン調整約 14 分企業サイト - 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 分サーバーへのアップロード約 38 分 74 FTPについて (1) 約 10 分 74 FTPについて (2) 約 10 分 75 サイトの公開方法 (1) 約 06 分 75 サイトの公開方法 (2) 約 12 分 6 / 6 ページ

[ 学習動画 ] 一覧学習の閲覧や質問の際にご利用ください閲覧が終了した動画をチェックして学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス動画タイトル時間 ( 計 10 時 57 分 ) Chapter01

[ 学習動画 ] 一覧学習の閲覧や質問の際にご利用ください閲覧が終了した動画をチェックして学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス動画タイトル時間 ( 計 10 時 57 分 ) Chapter01 [ 学習動画 ] 一覧学習の閲覧や質問の際にご利用ください閲覧が終了した動画をチェックして学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス動画タイトル時間 ( 計 10 時 57 分 ) Chapter01 オリエンテーション約 40 分 01_ 学習の進め方 02_ リファレンスの紹介約 09 分 03_