【デイトラWebデザイン】新カリキュラム初級編Figmaの使い方・フォント・デザインーDAY1~4

こんにちは。まほ|Studio鈴苺(@Studio_Rinberry)です。
Webデザインを学ぶなら「デイトラ Webデザインコース」がおすすめです。
未経験でもWebデザイナーを目指せるカリキュラムが組まれており、デザインの基礎から実践的なスキルまで幅広く学べます。
現役デザイナーの添削や1年間の質問し放題サポート体制で、初心者でも安心して学習を進められます。

デザインの経験がないから、私には無理かも…



私もそう思っていました
そこで!気になっていたデイトラのWebデザインコースの受講をはじめました!
- あしらいの基本
- あしらい実践編①
- あしらい実践編②
- 学習の感想やつまづいた点
この記事の執筆者


まほ|Studio鈴苺
- 個人ブログ運営歴20年以上
- ココナラ登録3か月でプラチナ達成
- 2021年6月ココナラPRO認定
- 記事執筆数1000件以上
- サイト制作実績多数
この記事がデイトラWebデザインコース受講を考えている皆さんの参考になれば幸いです!
Webデザインをはじめようと思った理由
私が今年の目標とするのは、以下のとおり。
- デイトラWeb制作コースを卒業する
- Web制作を仕事として軌道に乗せる
とはいえ私の場合、デザインを基礎から勉強したことが実はないのですよ。
現在私は名刺代わりになるWebサイト制作をココナラで請け負っています。
お客様にとってどのようなホームページが最適なのか、そんなことを考えるうちに



アレもしてあげたい、コレも付け加えたい
こんな思いで溢れてしまいました。
ただアレもしてあげたいコレも付け加えたいとなると、デザイン的にどうなのかと。
新年ですし事始めするには今しかないと思い、Webデザインの勉強をはじめてみようと思ったのでした。
デイトラWebデザインコースを選んだ理由
デイトラWebデザインコースを選んだ理由は単純です。



一番安心できるから。
- 動画編集
- Web制作
新年で1万円割引というのも大きな理由ですが、動画編集とWeb制作をデイトラで学んできた中で、



デイトラなら安心してポチれる。
何よりも初学者にサポートが手厚いんですよね。わからないことがあれば親身になってくれる、これだけで初学者は安心できるんです。
DAY0:はじめに
学習をはじめるにあたってのチュートリアルですね。
サポートの受け方や学習の受け方はもちろん、後々大切になってくる「上手に質問するためのポイント」などを学習します。
デイトラではその道のプロとして活動をしている方が、メンターとして1年間サポートをして下さいます。
自分で調べてもわからないことはそのままにせず、適切なタイミングでメンターに質問することが大切。
ですが、上手に質問ができないと、質問の内容をメンターが把握できずリソースを無駄にしてしまいます。



それってお互いに損しちゃいますよね。
上手に質問するためのポイントを押さえておきましょう!
DAY1:Figmaの基本的な使い方について理解しよう①
はじめにFigmaのインストールや、言語の設定をします。
Figmaを実際に触ってみて、簡単な図形を描きましたよ!
私の場合はWeb制作コースで何度もFigmaを触っているので、操作自体はすんなりできました。
ただFigmaのショートカットキーはすべて覚えていたわけではないので、触りながらモノにしたいと思います!



他アプリのショートカット使って「違う!」ってたまーになりますね。
間違えないようにTourBoxに設定しちゃおうと思います。
DAY2:Figmaの基本的な使い方について理解しよう②
テキストについて学びます。
フォントや文字装飾についてや、画像について確認しました。
行間調整(line-height)や操作しづらかったですね。



慣れたら上手にサクサク操作できるようになると思います!
ゴシック体と明朝体の違いや、サンセリフ体とセリフ体の違いなども学べます。
他には文字の装飾も楽しく学べました~。
DAY3:配色・余白・レイヤー構造・フォントについて学ぼう!
余白と色
デザインの重要な要素である、余白と色について学びました。
余白はついあまったスペースではなく、意図的に作るものでグルーピングが大切なんですね。
視線誘導にも繋がる重要な要素です。
色の基本
色の持っているイメージをポジティブな面、ネガティブな面から学べます。
お客様がどんなサイトを作りたいのか、どのようにして欲しいのか、サイト訪問者に何をしてもらいたいのか、色って重要だなと思いました。
色の組合わせで与えられる印象のコントロールも可能なので、
- 爽やかさ
- 信頼感
- 知的
- モダン
など、組み合わせる色や明るさによってイメージをコントロールするのもデザインなんですね。



奥深いですわ。
整頓・ガイド機能
デザインツールで余白を扱うためには、整列や整頓・Figmaのガイド機能を使いこなそうというセクション。
以下について細かく学べました!
- レイヤーの整列
- 複数要素を整列
- Figmaのガイドを利用する
デバイスフォントとWebフォントについて
デザインでフォントは欠かせないですよね。



私もフリーのフォントやAdobeフォント、Googleフォントをよく利用します。
何気なく使っていたフォントにも、種類があることを学べました。
DAY4:デザインの種類を確認しよう
デザインの種類
デザインには種類があり、具体的には以下の3種類に分類できると学習します。
- グラフィックデザイン
- Webデザイン
- プロダクトデザイン



私が目指しているのはWebデザインで、Webサイトのデザインをしたいのです!
デザインの勉強方法
デザインの勉強方法について大切なのは以下の3つ。
- デザインの原則(ルール)
- 情報収集
- 手を動かす



私は困ったらInstagramやPinterestをよく見ます。
パクリと参考の違い
デザインを参考するに当たり、「正しい参考の仕方」はとても大切ですよね!
日々実務の中で、お客様のご要望を聞いてみると、



このサイトのこの部分、丸っと同じにして!
という場面が本当に多いです。
デザインは全くの真っさら、ゼロから新しいアイデアを思いつくのは、ほぼ不可能と言われてます。
だからといって、パクっていいかと聞かれたらNGですよね。
パクられた側から最悪の場合、「著作権侵害で訴えられる」可能性がゼロではないからです。
それでも大丈夫という人はいませんよね?
クライアントに迷惑がかかってしまえば、「損害賠償を請求される」場合もあるんです。
デザインの要素や考え方を参考にすべし!見る力と言語化する力を養うべし!
葉を見て、木を見て、森を見るを意識しよう!



上記をキモに銘じて頑張りたいと思います。
まとめ
デイトラのWebデザインコースをはじめてみたら、「楽しかった。もっと早くはじめたらよかった。」と、今のところは思える内容でした。
動画制作やWeb制作でそうだったように、中級・上級と進むにつれ課題をこなしていきながらため息がでるのは間違いないのを知っています。
でもそのため息が実務にどーんと効いてくるのも知っています。
DAY5はバナー制作です。



私はどんなバナーをこの世に生み出しちゃうんでしょうか!?