見出し画像

【STUDIO×Webデザインでフリーランスになる】#01 デイトラwebデザインコースを始める

chico（チコ）

こんにちは。chicoです。
前回、初投稿の記事には、思ったよりたくさんのイイネをいただきありがとうございます！
（できる限り）週一投稿できるようにがんばるぞ〜とやる気になりました！

それでは、一週間を振り返っていきます〜！


今週取り組んだこと

🐯 デイトラwebデザインコース受講開始

8/2よりデイトラのwebデザインコースを始めました！

実はここ数年ずっと「デザインを基礎から学べる＋自主制作できるオンラインのコンテンツ」を探していました。

webデザイン業界に携わって4年・・・今更お金払ってスクールなんてちょっと恥ずかしい・・・と思ったりしましたが、「自主制作が苦手」なわたしはこのまま手探りの独学を続けても永遠に質のいいアウトプットはできない気がしました。
デザイン学習において手も動かさない、実績も貯まらないのでは、フリーランスなんて夢のまた夢。
ここは先行投資が必要と思い立ち、えいや！とデイトラに飛び込んでみました。

ちなみにデイトラに決めた理由はこんな感じです。

  • 他のスクールより価格が安い（更に8月は夏のキャンペーンでお得🍉）

  • 今後、教材がバージョンアップしても追加料金無しでコンテンツが見れる（コスパ◎）

  • twitterやnoteで調べても受講生の口コミがとても良い

  • 自主制作の機会がたくさんある、それをプロのデザイナーさんに添削してもらえる（3回まで）

  • 質問できるサポート期間が1年と長め

  • 完全オンライン、マイペースに進められる

「サポート期間は1年」といっても、わたしの出産予定日まではもう2ヶ月しかないので、スピーディかつ、重要なポイントでは丁寧に進めていきたいと思います。
特にボリュームのある自主制作課題は妥協せず納得のいくものを作りたいです。

今週は、初級編のDAY0〜12まで進めることができました！
初級なので「デザインの基礎」「Figmaの使い方」「トレースの方法」「バナーデザイン」のセクションでした。

デザインの4原則、懐かしい！右も左もわからない駆け出しの頃、「ノンデザイナーズ・デザインブック」でしつこい程、解説されました。（良書です）
また再会できたこの機会にしっかり頭に叩き込んでおきます！

その他、デザインの基礎部分やFigmaの基本操作はすでに学習済みだったので倍速で進めて行きました。

「トレース編」からは実際に手を動かす場面が増えてきました。
今回トレースしたものは、LPデザイン、名刺、バナーです。

実はトレースって途中でどうしても飽きてきちゃってとっても苦手です。学びの多い練習方法なのはわかってるけど、いつもつい無心で模倣するだけの「作業」になってしまうのが悩みでした。

ただ、デイトラでは下記のような意識でトレースすることを推奨していたので、ぼんやりせずに「デザインの感覚掴むぞ〜〜」の意識で進めることができました。

トレースの心得
1、まず要素をフレーム内に作って入れていく（細かい調整は後回し）
2、「自分の感覚」で見本を見ながら真似していく
3、透過した見本を重ねて、「自分の感覚」とどのくらいズレがあるか確認する
4、見本通りとなるよう調整しながら、余白感や文字サイズなどデザインルールを掴んでいく

それから、「バナーデザイン編」ではデザイナーさんが実際にデザインする様子を見ながら、「バナーデザインの手順」を確認していきます。
バナーは数回、仕事で作ったことはあるんですが、「手順」については学んだことも意識したこともなかったです。いつもガッといきなり手を動かして、あーでもないこーでもないと作ってしまっていました・・・反省。

今回は学んだ通り、「何を誰に伝えたいのか？」「要素の優先順位」を意識して、2つのバナーを制作しました。
まだデザイン自体に慣れていないので、すごく時間がかかって苦しかったのですが、やはり興味のあることなのでとても集中できます！
まだまだ実力不足ですが、「やっぱりデザインって楽しい！仕事にしたい！」と改めて思えました。
今回の成果物は、現状の実力をお伝えするために恥ずかしいけど載せておきます！

1、桜まつりバナー

配置する要素は少なめだったので、指示にあった「和風」「落ち着いた」雰囲気が出るように意識しました。
雰囲気に似合うフォントを見つけてもフォントウェイトが限られていたりと、悩ましかったです。う〜ん。

  • 大人の女性に向けて落ち着いた和風で雰囲気を出すため明朝体を採用

  • 画像の上でもテキストの視認性を保つため、透過した白を敷く＋袋文字

2、アイスクリーム屋さんキャンペーンバナー（ウィークリーデザイン）

こちらは、週に一度運営さんからバナーお題が提供される「ウィークリーデザイン」の企画で制作しました。
配置するべきテキスト要素が多かったので、優先順位を意識しました。

  • 10〜20代に向けたポップな配色にドット柄

  • 「NEW OPEN」が一番目立たせたいと思ったのでインパクトのあるフォントに

  • こちらも白い帯を敷いて読みやすくなるよう工夫

数時間、悩みに悩んで「もうこれ以上無理！（泣）」となって終了。
難しかったのは、日本語フォント選び。どれ選んでもなんかダサくなっちゃって・・・若者にウケそうなポップで手書きっぽいフォントが最後まで見つかりませんでした。フォントの重要性を実感。

苦しい制作でしたが、おかげでFigmaの操作にずいぶん慣れることができました。
写真の被写体だけ切り抜いたり、フォント選びを楽にしたり、パスに合わせてテキストを配置する、などの便利プラグインを調べながら使ってみました。
Figmaは使えば使うほど、慣れて使いやすくなりそうです！

🔍 STUDIO製サイトのデザインレビュー

これは7月の終わりから、毎日やるルーティーンとして設定しています。

STUDIO showcaseから気になるサイトを選んで、自分なりに分析しながら考えたことを言語化していきます。（Notionに書き溜めています）

やっぱり、何気なくデザインを眺めるよりも、言語化を前提とすることで見方や感じ方などインプットする姿勢が180度変わってくる気がします。

素晴らしきクリエイターによる、魅力的なアニメーション、フォント、配色・・・「こんなアイデアがあったなんて！」「STUDIOでこんなのできるん？」と毎回椅子から落ちそうになる程、衝撃を受けています。
せっせと言語化して、myデザインアイデアの引き出しに入れていく日々です。

👶 命名書デザインの制作開始

これはデザインというかイラストなんですが、10月に生まれてくるであろう我が子の命名書を自作したくて、8月頭に着手しました。

わたしが今回の妊娠に至るには、2年間の不妊治療を経ていて、これは人生の中でもトップクラスで苦しいものでした。
決して順調ではない道のりを経て生まれてくる子どもには特別な想いがあって、名前は「これだ！」と思った一択で決めました。

たくさんの願いを込めた名前の由来を、将来子どもにも伝えられるようにオリジナルのイラストで命名書を作りたいと思いました。

（制作にはipadとadobe frescoを使ってデジタルイラストにします。）

まずはデザイン同様、いきなり手を動かすことはせず「どんな想いを込めるか？」を考えながら必要な要素を書き出していきます。

このプロジェクトについては、出産までの完成を目標としてぼちぼち進めていきます。完成したら、制作過程などまとめてnoteで公開してもいいな〜と考え中！

🎈 その他の活動

その他のちょっとした活動としては、8/4にSTUDIO公式のバージョンアップ解説のウェビナーに参加しました。

ありがたいことに、頻繁にバージョンアップされてどんどんできることが増えていくSTUDIOです！
今回は「シンボル」機能が「コンポーネント」としてグレードアップして生まれ変わるらしく、開発者自らが変更点や使い方を解説してくれました。
「実はこれがこう変わっててこっそり便利になってます（ドヤ！）」などの小ネタや裏話が聞けて、個人的にとっても面白いのです！
（ウェビナー中、ユーザーから寄せられるコメントによって思わぬバグの発見もあり・・・！ユーザーの声にしっかり耳を傾け、アイデアや要望を手早く取り入れてくれるSTUDIOさんの姿勢にいつも感謝です。）

これまでやや融通が利きにくかった「シンボル」ですが、今後はさらに効率よく似たようなデザインエリアをシステム的に管理することができそうです。（考え方は、Figmaのvariablesっぽいみたいです。）

ノーコードとはいえ、STUDIOも結構できることが増え、その恩恵を受けようと思えばなかなか複雑な仕組みを理解しなければいけなくなりました。プログラミングをコードで書く代わりに、管理画面で視覚的にやっているような感じなので、WordPressのCPTや、JavaScript、PHPに触れていた知識が役に立ちそうです。

ぼけっとしてたら、あっという間にSTUDIOの進化に置いていかれそうなので、大幅なアップデートはざっくりとでもタイムリーに把握しておきたいところです。

早く実践で使ってみたいな〜！

ということで今週の活動報告でした！
来週もデイトラを中心に進めていきます！（息切れしないように）楽しみながらがんばります〜！

この記事が気に入ったらサポートをしてみませんか？