デイトラ デザイン 初級編 ToDoリスト

デイトラ デザイン 初級編のTo Do（やること）を
整理した一覧リストです

※Webデザイナーとして成長する上で
特に重要だと思われるリスト項目は大文字にしています

Day1

★Slackへ登録する
★Google Chromeをインストールする
★デザインとアートの違いを理解しよう（動画学習）
★4原則を理解しよう（動画学習）
★配色の基礎を理解しよう（動画学習）

★普段から色への意識を高めるトレーニング

※普段からデザイナー目線で見る習慣をつけることでデザイン脳を作る

色への意識を高めるトレーニング方法
・キャラクター・ブランドなどがなぜその配色をしているか考える
・色の理論を意識しながら街中を歩く


参考リンク
ロゴを作る前に知っておくべき有名企業のロゴで使われる「色」とその理由

Day2

★以下のサイトに登録して情報収集する
・Twitter
・Instagram
・Pinterest
・Mobbin
・Dribbble
・bookma!
・Goodpatch Blog
・note
・LP ARCHIVE
・PhotoshopVIP
・レトロバナー
・Cocoda!

★「デザイン入門教室」を学ぶ（書籍学習）

※これからWebデザイナーになる上での最低限の基礎知識は学習が必要

★「ノンデザイナーズ・デザインブック」を学ぶ（書籍学習）

※これからWebデザイナーになる上での最低限の基礎知識は学習が必要

★トレースする（実際のサイトやモバイルアプリの画面を模写）
★自主作成する（自分でお題を考えて作成）
★Cocoda！を学ぶ（トレーニングコーナー）

★日常のデザインに目を凝らす

・電車の広告
・商品パッケージ
・飲食店のメニュー
・飲食店のタブレット端末
・雑誌

チェック項目
・どうしてこのデザイン？
・何を訴求したい？
・誰に向けたデザイン？
・デザイン4原則は守られている？
・パッと見て見やすい？
・ターゲットに合ったデザインとは？

Day3

★タイポグラフィーの基礎を理解する（動画学習）
★画像の基礎知識を身につける（動画学習）
★余白の基礎知識を身につける（動画学習）

★PhotoshopVIPとGoogle Fontsをブックマークする

★「けっきょく、よはく。」を学ぶ（書籍学習）

※これからWebデザイナーになる上での最低限の基礎知識は学習が必要
※「ほんとに、フォント。」「あたらしい、あしらい。」もオススメ

Day4

★Figmaに登録する
★Figmaの基本操作を理解する
・上部メニューバーの各機能
・右部サイドバーの各機能

Day5

★Figmaの基本操作を理解する
・オブジェクト操作

★WEB色見本 原色大辞典を確認する
★デザインチェックシートを確認する
★よくある質問集を確認する

Day6

★素材をダウンロードしてLPをトレースする
★初心者向けWebサイトの基礎知識を確認する
★名刺をトレースする

Day7

★Figmaの便利な機能を知る
・コンポーネント化
・リンク共有/ 書き出し

Day8

★Figma以外のデザインツールについて知る
・イラストレーター
・フォトショップ
・XD
・Sketch

Day9

★Pinterest、レトロバナー、バナーまとめをブックマークする

★質の良いバナーを探してストックする

※pinやファイル保存など引き出しを増やす

Day10

★素材をダウンロードしてバナーをトレースする

Day11

★お題に沿ってバナーを作成する

Day12

★Day11で作成したデザインを【デザインで使用できる4つのテクニック】を用いてブラッシュアップする

★デザインテクニックについてネット検索や書籍購入で深い知識を得る

★【クオリティをあげるデザインルール】（動画学習）

Day13

★バナーを作成し以下をアートボードに追加する
・バナー制作依頼の要件を理解する
・テキストの優先順位を決める
・画像を3つ探す

Day14

★引き続きバナーを作成を進める
・モノクロでレイアウトパターンを出す
※初心者はギャラリーサイトで同サイズでコンテンツ量も似ている作品を見つけて参考にする

・配色する
※迷ったらPALETTABLEで配色を探す

・一番良いと思うデザインを決める
※お客様に選んでもらう

Day15

★以下のバナーサイズを追加作成する
・横長バナーサイズ： 横320px 縦 100px
※作成手順は前回と同じ

Day16

★バナーを完成させる
・配色をする
※迷ったらギャラリーサイトを参考にする

Day17

★Day16で作成した自作のデザインを改めて見返してみる
※デザインは1日寝かすと見え方が変わってくることがある

Day18

★Webサイトの種類を知る（動画学習）
・コーポレートサイト
・採用サイト
・ブランドサイト
・LP
・ECサイト

★Webデザインで頻出の単語を理解する（動画学習）
・コンバージョン
・ナビゲーション
・ファーストビュー
・モバイルファースト
・レスポンシブデザイン
・ワイヤーフレーム

★PC版Webデザインについて知る（動画学習）
★SP版Webデザインについて知る（動画学習）

Day19

★LPについて理解する（動画学習）
★LPデザインのネタ収集をする

Day20

★SP版トレースのFigmaファイルを準備する

Day21

★LP（SP版）のトレースとブラッシュアップを行う

Day22

★LPを制作しよう～PC編～（動画学習）

LPの基本構成6つ
ファーストビュー
アクション導線
サービスの説明
利用者の声
使い方
よくある質問

Day23

★LPを制作しよう~SP編~（動画学習）

Day24

★FVのポイントを知る
・ロゴ
・キャッチコピー
・サブテキスト
・コンバージョンボタン
・メイン画像

★ギャラリーサイトのチェックを日課にする

→ピンタレストでKiyomiさんをフォロー

※何百何千というサイトを見て自分なりの引き出しを作り、
制作時にあしらいや工夫に組み込んでパターンにする

ギャラリーサイト
・Web Design Clip
・Pinterest
・MUUUUU
・LP ARCHIVE

Day25

★LP制作依頼の要件を理解する（動画学習）

Day26

★参考サイトを5つ集める
★WFを作成する

Day27

★全体に配色をしていこう（動画学習）

Day28

★SP版のデザインを作成しよう（動画学習）

Day29

★レイヤーの整理をする
★LP（PC版、SP版）を作成する

Day30

★figmaのプラグインをインストールする
・Unsplash
・Iconify
・Nisa Text Splitter
・HTML to Figma

★クラウドワークスや友人の紹介など、身近な仕事を探す

※練習や学習は大切だが、実際に仕事をしてみて
はじめて分かる事や学べる事の方が多い

Day31

★あしらい見本帳を確認する

★あしらいの引き出しを増やす

※ファッション雑誌やカルチャー誌を見て
カテゴリーごとにどんなあしらいが施されているか注目する

Day32

★Photoshopの操作方法を学習する（動画学習）

Day33

★過去のデザインコンテストまとめ

…ここまで学んだら

★トレース＆自主制作100本ノック

※基礎力や自信を付けると同時にポートフォリオも充実させる

★仕事を探す

※練習や学習は大切だが、実際に仕事をしてみて
はじめて分かる事や学べる事の方が多い