くっそきついけど確実にWEBデザイン力が爆上がりするトレーニング方法

はじめに

皆様はじめまして
現在東京デザインプレック研究所というUIUXとWEBデザインを専攻するコースに在籍しているれんさんです💐

今回は、MUUUUU.TV様の「デザイン力を最速で高める高負荷訓練「トレース訓練」の正しいやり方を経験15年が紹介します」を参考に自分なりにアレンジしたWEBデザイントレーニングメニューを作成したので皆様に共有していきます！

本記事は、この動画を見た方向けに作成しておりますのでまずはこの動画を閲覧してください👀

どんな人に向いているか

今回のトレーニング内容を一言でまとめると
「他社のWEBサイトのアイディアをコピーして自分自身でリデザインする」内容となっております。

ですので
WEBデザインの基礎を本やスクール等で学習したけども次なんの学習すればわからない方からWEBデザイン歴1-3年目のジュニアデザイナーの方が適正レベルかなと考えております。（Photoshop等のデザインツールを使用できる前提です）

WEBデザイントレーニングメニュー概要

本トレーニングメニューのゴールは、リデザインを通じて自分自身の知らなかった表現の引き出しを増やす事となっております。

トレーニング方法は、参考にするWEBサイトデザインを決定しサイトリサーチを実施します。その後ルールを遵守しサイトのアイディアをコピーして自分自身でリデザインを行います。最後に自分自身で作成したサイトと見本サイトを比較して相違点を探します。

恐らく初めの方は、１回のワークに3時間以上かかってしまうと思うのでこのノートを見た方で実際にやる方いましたら励まし合っていきましょう…。

トレーニングルール

①ファーストビューは横幅1360px,高さを700pxで作る

②丁寧にやる（見た目のサイトとほぼ同じにする）

③写真も見本から持ってこないで自分で探す

④アイコンやイラストも自分自身で作成する

何故このルールを設定したのかは動画内で解説されているのでそちらをご覧ください（この記事は自分用なので省略します）

トレーニングフロー

①サイトリサーチ編

【サイト種別共通】
参照するサイト名：
サイトURL：
運営企業：
企業理念：

【EC,LP,PR,サービス,ブランドサイトの場合】
事業（サービス名）：
事業理念（あれば）：
価格帯（複数ある場合は可能な限り記載）：
顧客像（自分自身が分析し考案）：

【リクルーティングサイトの場合】
採用形態（新卒,中途等）
募集職種：
募集年収帯：
欲しい人材像：

②デザインリサーチ編

【ロゴ】
・ロゴのカラー
・何故そのロゴの形なのかを考察


【サイト全体】
・サイトで使われているカラー（カラーコードとトーンも調べる）何故そのカラーなのかを考察
・使用されているフォントは何か,また何故そのフォントを使用しているのかを考察
・サイトで使用されている表現について何故その表現をしているのかを考察
・使用されてる写真はどんな効果をもたらしているのかを考察
・モジュールデザインは何を使用しているのか,また意匠的なポイントはどこか

【WEBサイトで自身がGoodと感じた事】
・Goodポイント
・何故Goodと感じたのか
・そのGoodな表現を他で使用するとしたらどんなシーンか

Goodの定義とは、自分自身が好きだと感じた表現や自分自身が知らなかった表現を指します。

③リデザイン終了振り返り

・自分自身が作成したデザイン物と見本サイトを比較してダサいと思う箇所はどこか
・何故ダサいのかを考察

最後に

明日から毎日実施し自分はNotionで管理していきます。ポートフォリオに掲載できるよう頑張るぞー！