【デイトラ】デザイン初級編を終えた感想

最近は、Web制作で主にコーディングをして生計を立てています。
ただ、もっとやれることの幅を広げたくデザインについてもオンラインスクール「デイトラ」で学習をしております。9月の中旬から受講しはじめたのですが、初級編がおわりそうなので一度振り返ってみます。

この記事を書いている人

プログラミングを学習開始して、7ヶ月でフリーランスになりました。
Twitter( https://twitter.com/oka_jumboworld )

実は、8月にWeb制作コースを卒業したのですが、現在はメンター【講師】として一緒に働かせて頂いてます

オカのアイコン画像オカ

毎日山のように質問が来て、必死こいてるんだぜ。
みんなの学習意欲の高さすごすぎる。。

目次

デイトラデザインコースとは

デイトラデザインコースとは、東京フリーランスが行っている事業のオンラインスクールのコースの一つです。

もともとWeb制作コース(LP制作やWordPress制作)からはじまったのですが、現在では「Web制作コース」「Webデザインコース」「Ruby/Railsコース」「Shopify構築コース」の4つがあります。

オカのアイコン画像オカ

毎月の勢いでコースが増えているので、目が離せません。

デザインコースでは、プロのデザイナーさんから添削をうけることができたり、デザインを学ぶだけではなくいかにしてお仕事に繋げるかというTipsなんかも紹介していたり、まぁかなり実践向きのスクールなんです。

Web制作コースを受講して、しっかり身につけることができれば仕事ができるというのが分かったのでさらに仕事の幅を広めるためにデザインコースを受講することにしました。

初級編・中級編・上級編とあり合計90日間で終わらすプログラム(自分のペースで進めることができます)なんですが、現在初級編が終わったところなので一区切りとして初級編を終えた感想を書いていきます。

著作権の関係上あまり詳細については書けないですが、どんなことを学ぶのかの概要と感想について書いていきます!

オカのアイコン画像オカ

購入すれば動画で詳しく説明してくれるぞ〜!

DAY1~3 デザインの考え方・基礎知識

初日では、この90日間でどんなことを学ぶのか・どんなことができるようになるのかを確認します。

これって非常に大切なんですが、何が最終的にできるようになるのかを明確にすることで迷うことなく学習できるんですね。

デザインコースでは、このようなことを90日間で学んでいきます。

あとは、受講生限定の専用Slackを使用することができるようになります。

ここでは、複数の部屋が存在し有益なウェビナーの情報だったり、メンターへの質問(Figmaの使い方)、また課題レビューをしてもらったりすることができます。

オカのアイコン画像オカ

おぉ!この情報だけでお金払う価値があるのでは、、

Web制作コースでは、Slackでの質問部屋をかなり使っていましたね。

優秀なメンターが速攻返信くれるし、受講生同士で教え合いもあり教室みたいな雰囲気ですね。

デザインコースでも、他のひとの質問から自分の悩みが解決したこともあるので暇なときにSlackを覗くだけでも結構学びがあったりしますね。

ちなみに、Web制作コースには2,464人、デザインコースには380人が参加しています。(20年10月時点)
デザインコースは、Web制作コースよりもあとでリリースされているんですが、既に380人が⋯恐るべし。

ここから具体的な、学習内容に入っていきます。

デザインには「4原則」と呼ばれる決まりがあります。

近接・整列・強弱・反復

こちらの4つを意識してデザインすることで、いいデザインになっていくようです。

あとは、配色の大切さであったりタイポグラフィーの重要性を解説しています。
お恥ずかしい話ですが、タイポグラフィーって初めて聞いた言葉だったんですね。

受講いただければ、動画でわかりやすく解説しているんですが、こちらの記事でも非常にわかりやすく解説されているので興味があれば是非!

サルワカ | サルでも分かる図解説明マガジン
タイポグラフィとは?基本ルールと作り方 37の要点
タイポグラフィとは?基本ルールと作り方 37の要点タイポグラフィとは?からはじまり「基本ルール」と「デザインテクニック」をまとめました。事例と作り方のコツについてもまとめています。

DAY4~7 Figmaの使い方

Figmaとはブラウザ上で簡単にデザインえきるツールです。

すごいのが無料なんですよね。しかも、複数の人と簡単に共有ができるし、めちゃくちゃ使いやすいんですね。

XDやイラストレーターなどもあるんですが、デイトラではFigmaを使ってデザインを学んでいきます。

簡単に使えるとはいっても、わたしのように完全素人ですと

オカのアイコン画像オカ

???

なんですよ。笑

しかも日本語設定がないので英語なんですよね。

それがこの3日間で最低限使えるようになります。
どのように使い方を学んでいいくかというと、こちらのLPのトレースをしながら使い方を学んでいきます。

実際に、デザイナーさんのトレースの作業・解説を動画でみながら、自分も真似してトレースします。

独学だとプロの作業みることできないと思うので非常に助かりますね。

また、難しい部分はこのように別動画で解説もしてくれます。

オンラインスクールのよさってあとから、コンテンツを追加できることありますよね。もしかしたら、受講生から

考える人のアイコン画像考える人

どうやって良いのかがわからないなぁ

とかって声がでて、後から追加したのかもしれないですね。オンラインスクールの良さですよね。

あとは、紙媒体のトレースも行います。ここでは名刺のトレースを行いました。

実は、僕も名刺をまだ持っていないので、デザインを学んでから自分でデザインして作ろうとかと考えています。

DAY8 デザインツールについて知る

デザインツールっていっぱいあって、イマイチ住み分けがわかっていなかったが、DAY8ではその辺りを丁寧に解説してくれます。

コーディング案件では、Photo shopもillustratorもXDの3つでデザインカンプからコーディング経験があります。

オカのアイコン画像オカ

XDが簡単で好きです。無料ですしね。

ただ、デザイナーとして使うのであれば、Photo shopやillustratorは機能が豊富なのでできるようになると幅が広がるかと思います。

DAY9~17 バナーの作り方

まず、バナーとはどんなものなのかをいうことについて学びます。

サービスやサイトの入り口ということを意識して、何を訴求したいのかをしっかりと考えることが大切ですね。

このあたりはPinterestなどで「バナー デザイン」と調べるとよいサンプルを見ることができます。

具体的に手を動かしてつくる成果物です。

制作課題
  • 課題1(さくら公園)
  • 課題2(ひまわり)

実際に自分で作ってみると今まで見ていたデザインがいかに素晴らしいかがわかりますね。

素晴らしいデザインをPinterestなどから集めて参考にしながら、自分でオリジナルを作っていきます。

最初は、全く手が動かなかったんですが「えいやー」っととりあえず配置していくとこうしたほうがいいんじゃないかなっていうのが出てきます。

課題1で意識したこと
  • 日にちの文字サイズを大きくすることで、開催日をわかりやすくする。
  • 色合いをピンク・黄色・白色だけをしようする。
初回デザイン

また、1日寝かして、デザインを改善してみました。
黒枠つけると重たい感じがしたので、黒枠を取り払い文字サイズを変えました。

1日寝かしたデザインを修正
課題2で意識したこと
  • 3種類なるべく雰囲気が異なるように作成
  • 爽やかな印象をだすため、青っぽい色(#0B968F)を使用。

またバナーサイズの異なるデザインの依頼を受けることも多いそうですね。

オカのアイコン画像オカ

サイズが異なるデザインで別途費用が頂ける、、、

320px * 100px で作成したバナー

DAY18 Webデザインについて知る

どんな風にLPのデザインを作っていくのかを解説しています。

詳細については、書けませんがデザインをするときに横幅の設定はPC版とSP版でこのように設定すると良さそうですね!

PC版 :1080px~ 1440px
SP版 :375px

これは、主に使用されている端末に合わせていますね。
SP版の375pxはiPhone8とかの画面幅ですね。

あとはinnerを設定してデザインをつくっていきましょう!
初期設定だと測りが表示されていないので、表示設定を行ってからinnerの設定ですね。

あとは、フォントサイズは下記のようにしておくと良さそうですね。

オススメの文字サイズ

【PCサイズ】

  • タイトル 24px~64px
  • 本文 14px~16px
  • フォントは14px以下にはしない

【SPサイズ】

  • タイトル 18px~24px
  • 本文 12px~16px
  • フォントは10px以下にはしない

DAY19~30 LPの作り方

  1. 用件の確認
  2. 5W1Hでコンセプトを決める
  3. 参考サイトを5つ決める
  4. ワイヤーフレームの作成
  5. PCデザイン
  6. SPデザイン

の流れで行っていきます。

用件をお客様からしっかりと聞き出し、5W1Hでコンセプトを決めるっていうのが非常に大切だなと思いました。

あとから

考える人のアイコン画像考える人

いやーこうじゃないんだよなぁ

ってなったらゾッとしますよね。

最初のすり合わせをしっかりと行い、二度手間になるのを回避しましょう!

では、実際に僕がつくったワイヤーフレームとデザインを見ていきます。

どうですかね?

1ヶ月前はFigmaの使い方もわからなかったですが、とりあえずここまでは作ることができました。

もっと色々なデザインをみて勉強していきます。

あと、忘れていけないのはレイヤーやグループわけです。

コーディングする人のことを考えて、レイヤーは上からみてすぐ理解できるようにしておきましょう!
どっちがみやすいかは一目瞭然ですよね。

悪い例
良い例

また、デイトラでは3回メンターさんからレビューをもらえる機会があります。

初級・中級・上級の最終課題のタイミングで使うとよいということでしたので僕もレビューして頂きました。

オカのアイコン画像オカ

こ・ん・な・に・丁・寧・に・‼︎

いや〜、人気なだけありますね。

会社だと上司がレビューしてくれるのかもしれませんが、フリーランスだとレビューを頂く機会って多くないので非常にうれしいですね。

良いところは良いと褒めていただき、もっとよくなる点についてコメントつきで丁寧にレビューしてもらえるのは本当にありがたいですね。

そして、めちゃくちゃ驚いたのがプロのデザイナーさんがわたしのデザインベースで見本を制作してくれました。
神ですね。

詳細については、また別の記事で書きたいと思います。

まとめ

著作権の関係もあり、お見せすることができない部分が多くあったのですが、学習する内容はわかったのではないでしょうか?

初級編終わった段階ですが、わたしは早速クラウドソーシングで受注活動をしています。

Web制作で学んだのは実務に勝る学習はないということです。

お金をもらいながら、プロフェッショナルの意識をもちデザインをしていくことでより成長すると考えます。

また副効果として、Web制作との相性が非常によいと感じます。
コーダー目線でデザインを考えることができるのはプラスだとめちゃくちゃ感じますね。

営業活動と並行して、中級・上級でスキルを高めていきたいと思います。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次
閉じる