このブログのコンセプトって○○なん、知ってた? 何それ気になる〜

デイトラWebデザインコース実況日記【初級編Day1〜Day7】

目次

デイトラWebデザインコースの幕開け…

Web制作コースでのあの日々…

いきなりつまづく初級編。

たーやま

まって? header から手動かんねんけど…。

たーやま

Bootstrap?こんなんあるんやったら先言うて〜なw

LPの模写でつまづき…

たーやま

できる気せんわ…。とりあえずドライブ行こ…。

遊びに行った。それでも

たーやま

やるって決めて金払ってん。その分は取り返さなあかん。

初級編は無事クリアした。程なくして絶望の中級編…。

たーやま

カード無理。iflame のレスポンシブ無理。ラジオボタンデカいの無理。無理無理無理無理無理。

たーやま

swiper.js 謎すぎw なんで幅合わへんのよ。

実力のなさを棚にあげて…

たーやま

ホンマ『とかく人の世は住みにくい』わ。やかましいわw

1人ノリツッコミまでに発展させる始末。サボったこともあった。それでも…

たーやま

なんかやらなヤバイ気がする。

立ち上がった。

できた!の先に見える数多の分厚い壁を乗り越え、最後の難関である上級編に…。

たーやま

わかんね〜ww もう全部丸写ししたろw

たーやま

とりあえず参考書も買って勉強しよ。

曲がりなりにも TF-30 と参考書を進め、最終課題『マハーバーラタ』に挑む。

たーやま

数ヶ月前は HTML と CSS につまづいてたよな。

成長を実感しながらコードを書く。しかし、テンプレート化につまづいてしまった

たーやま

サブクエリで3日もかかってるやん。

たーやま

みんなすごいな…俺も案件やりたいな…。

後から入った人らにどんどん抜かれ、自分の無力さに打ちひしがれる。

たーやま

やっぱ俺…無理かも…。

今回も諦めることになるか…。やっぱり自分は何をやっても中途半端たいした努力もしてへんもんな…そう思っていた。

たーやま

いや、折れへんかったら中途半端じゃない。

何度も挫け、何度も遊び、何度も現実逃避をした。そしてついに…。

たーやま

終わった…やっと。数学嫌いな俺でもできた…。

Web制作コースを卒業。そこから早10ヶ月目の今、なんやかんやあって宮古島に移住。

そしてとうとうこの時がやってきた…。

たーやま

買うか。デイトラWebデザインコース。

2021年9月12日(日)。豪雨の中で、自宅にてデイトラWebデザインコースをポチった

あのさ、冒頭長すぎw
はよ進めようやww

これにてWebデザインコースの学習ストーリーを開幕します。

なぜWebデザイン日記を書くの?

3つの理由があります。

後世の方の参考になると思った
・繋がりができる可能性がある
・将来のわたしを笑わせる

まず、後世の方への参考になるについて。

この日記は、実際にデイトラWebデザインコースを受けている最中に書いているものです。

そして学習を通しての学びや疑問点、思ったことなどを大体そのまま記述してます。現場を体験している人からの声ほど参考になるものってないですよね。

たーやま

Webライターとかは競合サイトみて、それっぽく書くこと多いからな。

まぁデイトラの評判は、怪しいの少ないと思うけど…(笑)

デイトラWebデザインコースが気になっている方へ、現場からの声をお届けしたいと思って日記をつけることにしました。

次に、繋がりができる可能性があるについてです。冒頭の長い無駄話からもわかるかも知れませんが、わたしは人と話すことが大好きです

世間話でも混み入った話でも、人と思いを共有すると充実感を感じます。

たーやま

宮古島にきてから、より初対面の人と馴染みやすくなりました。

実際に「ブログみましたよ!」という声をいただけたことがちらほらあります。そこから仲良くなったこともあるので、案外ブログはバカにできません。

なので、日記をつけることにしました。

最後に、将来のわたしを笑わせるについて。これは日記をつけている方ならわかるかも知れません。

日記ってふとした時に見返すことが結構あります。例えば、懐かしみたい時、落ち込んだ時など…。日記を見返したら、思い出として湧き出てくるのと、何か笑ってしまうんですよね(笑)

たーやま

日記はマジでオススメ。

今書いているWebデザイン日記も、半年後、数年後に見返したら多分笑っています。それを期待して、Webデザイン日記をつけることにしました。

以上3点の理由から、わたしはデイトラWebデザインコースの日記をつけることにしています。

記事公開の目安としては、1週間ごとに1記事を作成することができたらいいなって考えています。ただ、無理にするとしんどくなるので、その辺は塩梅をみて行います。

気長に待っていただけると嬉しいです。ということで、早速学習したことを振り返りましょう。

・後世の方の参考になると思った
・繋がりができる可能性がある
・将来のわたしを笑わたい

デイトラWebデザインコース初日

2時間の学習で、Day1 〜 Day5 まで進めることができました。

たーやま

たまに実務で少しだけデザインするときあるし、良い学習になりました。

Day1 〜 Day3 の振り返り

この辺りはデザインを行うにあたっての基礎的な内容の説明でした。

デザインはセンスじゃないことや、デザインスキルを身につけるのに必要なこと、その他予備知識などなど…。

今までデザインはセンスだと思っていたので、救われた感じがしました。

たーやま

自作のクワガタムシのサイトをデザインからコーディングまでやりましたが、何か違う感が否めませんでした。

そんな、デザインスキルなしで挑んだクワガタムシのサイトはこちらです。

BeeSt - クワカブで、ちょっとワク...
BeeSt クワガタムシやカブトムシの情報をメインで発信している、BeeStです。クワガタムシやカブトムシを通じて、毎日が少しでもワクワクできたらなという思いのもと、活動いたし...

まぁこれはこれで愛着湧いてるんですけどね(笑)

さて話が脱線してしまいました。

デザインの基本的な考え方や知識事項を学んだのが、Day1 〜 Day3 です。

たーやま

話している方のスピードが遅いって感じたら、スピードコントロールがおすすめです。

Day4, Day5 は何をした?

Figma をインストールして、基本的な使い方を学びました。

実務でちょくちょく Photoshop とIllustrator を触る機会があるわたしから言わせてもらうと…

Figma 超便利w

え、なんすかこれ。ポチポチするだけで操作できるじゃないですか(笑)

しかもショートカットキーは Photoshop や Illustrator と大差ありません。おまけにチャット機能もあります。

たーやま

え〜!すげぇすげぇ…へぇ〜こんな機能もあるんや。

と、終始感動していました。この辺りはWeb制作コースの時と似ています。

たーやま

Web制作コースも、ヘッダーの固定とか bootstrap に感動してたからなぁ〜

Photoshop や Illustrator を触ったことがある方なら、きっと Figma の使いやすさに感動することでしょう。

そんなに使っていないわたしですら感動したので。笑

たーやま

ただ、Figma にできんくて Photoshop とか Illustrator にできる機能もあるかもやから、今は『便利やな』くらいに留めておきます。

Photoshop と Illustrator を触ってから Figma をするといいかも知れませんね。

最初から簡単な方に慣れると、多分 Photoshop と Illustrator を嫌うかも知れませんので。

次の日は LP のトレースに入ります。引き続き精進していきます。

デイトラWebデザインコース2日目

『100日後に死ぬワニ』に便乗した『100日後に〇〇』的なのが流行っているので、わたしも思いつきました。

『100日後にデイトラWebデザインコースを完了させるワイ』

正直うまくいくような感じがしませんが、Twitter で発言してしまいました。

なので、できる限りやってみます。今のところはいい感じです。

たーやま

いや、公言して初日で辞めるやつおらんやろ。

ということで、今回のアウトプットはこちら…。

ざっくりとしたトレースを

Day6 はデイトラのサイトをトレースする課題です。張り切っていたわたしは

たーやま

一回動画みんと自分でやってみよ

と思い、まずは動画をみずにトレースしていくことにしました。

とりあえずロゴとアイコンは飛ばして、ナビメニューから行いました。ナビメニューは難なく突破。続いてパンくずにさしかかります。そこで…

たーやま

ホームアイコンどないしよ…楽な方法ないん?

と立ち止まってしまいました。しかし、線ツールを使ったら作成できなくもありません。

なので、線ツールで作成しましたw

たーやま

自分コーディングしてるんやから、『Figma アイコン』とかでググれよ。笑

パンクズが終わり、MVにさしかかります。ここでもまた頭を抱え出す自分。

たーやま

いや、『東』のやつは流石に無理やぞ?スライスツールとかかな。

しばらく考えた結果、自力解決を断念。とりあえず40分間お疲れさま。

大人しく動画をみることにしました。そこから進むスピードが格段に上がりました。この時にアイコンのプラグインがあることを初めて知ります。

たーやま

初めから教えとけやw

いや、初めから動画みとけやw

と読者の方は思うでしょう。大丈夫、わたしもそう思っています。動画をみて進めてはいましたが、全てはみていません。

理解できている箇所もあるので、マジでつまづいた時だけ動画をみていました。

そこで思ったのが…

Tidy Up マジで神w ということ。

あと、枠を文字数に合わせて自動調整してくれるのも凄かったです。Figma をもっと知りたくなりました。

何とか2時間かけて、ざっくりとしたトレースが完成。気がついたら 22:30 になっていました。

たーやま

寝る時間削りたくないから、続きは明日しよう。

ということで、2日目はこんな感じの日になりました。

デイトラWebデザインコース3日目

早くも3日目に突入。とりあえず3日は取り組んだので、3日坊主は卒業できました。

今回行ったアウトプットはこちらです。

LPのトレース完了!

Day6 を完了させました。余白やガイド線に揃えることなどを意識することが重要です。

そして、マスクのかけ方も学べました

たーやま

重ねてワンクリック。超簡単やで。

LPのトレース以外に、名刺のトレースも行いました。これは動画をみずに実践。

30分程度で完了させました。

たーやま

swiper.js 謎すぎw なんで幅合わへんのよ。

「Udemy で学習した甲斐があったわ…。」

そして答え合わせのために動画で確認。今回は使ってませんが、半円の作り方って3パターンもあるんですね。

頭の片隅にでも入れておこうと思います。

Day7, Day8はサクッと終了

Figma の便利機能や、その他のデザインソフトについて学びました。個人的には Figma の便利機能が特に役立ったように思います。

たーやま

フォトショとイラレ、XDは触ったことあるからのう。

Sketch も耳にしていたことはあったので、Day8 についてはサラッと流す程度にしておきました。

Figma が出始めたときは

たーやま

Adobe のシェア率高いねんからまだええやろ。

程度に思っていましたが、今では Figma 信者になりつつあります。

超便利やからなw

慣れない部分もありますが、Photoshop や Illustrator を覚えたスピードよりは断然早いです。

何ならまだ Photoshop と Illustrator を完璧には使えませんw

たーやま

いうてもコーディングする立場やしな〜。

あまりデザインソフトを使わない立場から見ても使いやすいと思います。

明日からは、バナー制作について学習します。Twitter でよくみる、ひまわりのやつですね。めっちゃワクワクしています。某社長の従業員なんやらスピーチのように。

ということで、3日目はこんな感じの日になりました。

デイトラWebデザインコース4日目

本日は、筋トレとランニング、坂道ダッシュ3本を行ったので取り組む時間が少なかったです。

たーやま

5日くらい運動サボってたからな…。

しかし、わずかでもデザインに触れる機会がありました。そんな今回のアウトプット&感想はこちらです。

Day9 をサクッと終わらせた

バナー制作について学習しました

バナーの役割はある程度予想できていましたが、実際に作成するなら、割と考え抜く必要があるなと思います。

視覚的にわかりやすく、興味をそそる必要があるからです。

たーやま

難ない?笑 企業サイトとかできるん…?

というイメージがあります。考えながらトレースやりまくったら見えてくるものなんでしょうか?

たーやま

まぁでも、やるしかないわな。Web制作コースは最後までやったわけやし。

何だかんだ、できるようになるんでしょうね。Web制作コースやっていた頃も…

たーやま

手ぇ動かん…どないしよ。ホンマにできるようになるん?

って何回も思っていたのでw

さて、明日はバナーのトレースです。どんどん進んで、100日後に無事完走できるように精進します。

ということで、4日目はこんな感じの日になりました。

デイトラWebデザインコース5日目

バナーのトレースと実践演習を行いました。

ちゃちゃっと終わったDay10

所要時間は20分。大人しく動画見ながら学習するとかいいながらほとんど動画をみずにできました。

たーやま

唯一、円形の線みたいなとこだけがっつりみたけど。

トレースと操作方法の動画のおかげで、大分 Figma に慣れてきたように感じます

たーやま

イラレとフォトショに慣れた時よりおもろいです。トレースとかなかったからなぁ…。

トレースが終わった後に動画で確認。半円の作り方が、自分の方法とは違ったので勉強になりました。

少し実践的なDay11

『東フリさくらまつり』のバナーを作成しました。Twitter でよく見るやつですね。

今回は動画を確認しつつ作業しようと思ったのですが…。

たーやま

まって。これ絶対見本あるやつや。

見本を見ながらやりたくなかったので、バナーのペルソナあたりでいったん動画を止めました。そこからは Pinterest や他のお花見のバナーを見ながら考えることに。

たーやま

初めてがっつり Pinterest をみました(笑)

見れば見るほど「こうしたい」、「ああしたい」が思い浮かびます。そして沼にハマりました。

考えすぎて埒が明かないので、とりあえず手を動かすことにしました。1時間半ほど試行錯誤して作成したバナーがこちらです。

案外よくね?笑

型のくり抜きができなかったので、さくらのアイコンは Illustrator で作成しました。

たーやま

個人的に『詳しくはこちら』の枠がええ案思いつきませんでした…。

作成後に動画で確認。やっぱりプロの人が作るバナーは凄いです。シンプルなのに一手間かけている感じがありました。

あっという間に2時間が過ぎ、今日のアウトプットは終了。5日目はこんな感じでした。

たーやま

おもろかったし気が向いたらまたやろ〜。

デイトラWebデザインコース6日目

6日目は筆者の誕生日。少しでも学習時間を取ろうと試みましたが、シェアハウスのメンバーがお祝いしてくれました。

なので、(良い意味で)時間を確保できなかったので、この日はお休みとしました。

デイトラWebデザインコース7日目

予定があったためこの日も時間の確保が難しいと思われましたが、何とか1時間半の学習することに成功。

しかし外出していたため、思ったように動画コンテンツを確認できませんでした。

たーやま

Free スポットの Wi-fi め。

今回アウトプットしたのはこちらです。

デザインテクニックを習得したDay12

個人的に勉強になったと感じたところは以下の箇所です。

・視線誘導
・NGデザインを修正する様

特にNGデザインについては、「割と自分やってまうかも…」が結構ありました

たーやま

チェックシートをベースに説明してくれています。

ベースカラーやフォントなどは、意識しておかないと忘れてしまう可能性もあります。本日の動画は将来的に何回か見直すことになるでしょう。

知らんけど。笑

という感じで1時間半が過ぎ去ってしまい、予定の時刻になりました。

7日目はこれにて締めくくらせていただきます。

デイトラWebデザインコース初日〜7日目のまとめ

この記事でお話ししたことはこんな感じでした。

・コテコテの序章
・Webデザイン日記を書く理由
・Day1〜Day12までのアウトプット

センスがなくてもデザインはできること、Figmaの操作、トレース練習、バナー制作などを学習することができました。

今となってはコーディングに慣れましたが、Web制作コースをしていたときは結構嫌々行っていた節もありました。

しかし、デザインに関しては「やらなあかん」みたいな義務感は感じていません。割と楽しみながらできています。

今だけかも知れませんがw

この調子で、無事に100日目に終わらせられたら嬉しいです。どうせやるなら、楽しみながらしたいので。

来週は、ひまわりのバナーやSPのトレースなどの様子を執筆予定です。ということで最後までご覧いただきまして、ありがとうございました!

また遊びに来てくれることを、心よりお待ちしております。

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

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

この記事を書いた人

大阪出身26歳。宮古島の制作会社に勤めています。
コーディングとデザインにシバかれてます。

生き物や自然が好きやけど、特にクワガタムシが好き。
他、チャリとか釣りとか筋トレとかも好き。

目次
閉じる