【番外編】Udemy講座 / 架空LPの完成までに私がやったこと。

Web design

Udemyに関する記事を3部構成にしてお届けしています。

前編 ▶︎ 購入した講座の感想。

後編 ▷ Udemy(動画)で学習するメリット・デメリット。

番外編 ▶︎ Udemy講座 / 架空LPの完成までに私がやったこと。

本記事『Udemy講座 / 架空LPの完成までに私がやったこと。』についてになります。

ざっくりと、プログラミング → デザイン → 実装(実践)

という過程です。

具体的に何をしたのか? を 時系列で書いています。

完全に私のログと化していますが、何か参考になるものがあれば幸いです!

架空LP制作に至るまで(時系列順)

✔️ Progate(5月下旬~6月上旬くらいまで)

HTML / CSS を 基礎編を3周くらい?

なぜか言語設定が英語でして…

3回目の時にChromeの日本語訳を通して

自分の認識はあってるのかチェックをしました。

iPadだからか、すぐに画面が固まってしまって、この作業も大変でした…

「こういうことできるんだ〜」程度しかやってません。

なお、道場編はやっていません。

iPadでやってましたが、課金の部分がアプリ非対応で

ブラウザに移ったものの操作性にイライラしすぎてやめました。

PCが届く前に1か月の課金が終了しました←

✔️ Udemy 紹介講座の購入(6月中旬 頃)

「Webデザインってなんなん?」って疑問が出てきて

当時はまだPCを持ってなかったですが、先走って購入。

購入したのは、前編にて紹介させていただいていた講座です。

企画〜コーディング CSS途中まで2倍速で視聴しました。(実践なし

※PCをお持ちの方は、ぜひ実践しながらやりましょう。

✔️ バナートレース 20本の達成。(6/24 – )

【課題は多い】バナートレース20個達成を振り返る。
実施期間 2020年7月2日 〜 2020年7月12日引き続きiPadのAffinityソフトを使用してバナートレースを行なっています。注意点なぜiPadで始めたのかAffinityシリーズって何?...
【5つの気づき。】iPadでバナートレース10個やってみた。
始めにお読みくださいまず、iPadでの達成であることを強調しておきます。求人では応募要件に「IllustratorやPhotoshopが扱える人」の記載が多くあります。また、実際の現場を見たことがないので全力のオススメは...

7/24で1ヶ月経過して26本目、7/28の本日分で30本です。

バナートレースについては、

web制作において、あまり関係のない勉強手順かと思います。

ただ、webサイト は「情報量が多すぎる、視界範囲が広すぎる

と感じる方にとっては

バナーは、キャンバスが小さいので

バナーをトレースすることを通して “実際に触れていく” という練習

この次におこなった、

ワイヤーフレーム(Webサイトの簡単な枠組み)のトレースをやってみる

きっかけに繋がったので、バナトレを挟んだことは非常に効果的なwebデザインの練習方法でした。

✔️ ワイヤーフレームのトレース10本。(1日1サイトレビューを兼ねて)

1日1サイトレビューについて、詳しくはコチラ ▽

No.00【始める理由。】#1日1サイトレビュー
始めたいと思ったきっかけ昨日、バナートレースが1週間の取り組みで10個達成することができました。先日にはMacBook Airがやっと手元に届きまして、いよいよ「ウェブサイトの作成に取り組んでいきたい…!」と思うよ...
【正直に。】1日1サイトレビュー10こ達成した感想と反省。
期間は7月1日〜7月11日までの10日間です。始めたきっかけについてはこちら▽1. Webサイトを見るようになった。自分興味のある分野にしてもTwitterでサラッと見るだけとか、公式のメー...

まだ、PCを持っていなかったので

iPadのアプリ Adobe comp を使って作業していました。

PCだと、AdobeXD、sketch、figmaのような存在です。

日が経過するごとに

  • ワイヤーフレームを書くこと
  • webサイトを見ること

に対して抵抗が減っていきました。

しかし、最近はやれていないので、また苦手意識を感じ始めました…

継続の重要さを感じています。。

✔️ デザインカンプのトレース 4本。

ここからPCを導入しています。

※私自身はMacBookの操作に慣れることも兼ねていたこともあり

遠回りなことをしていると思うので、

ご自身と相談の上でするべきことをしましょう。

figmaの操作チュートリアルを兼ねて1本(7/9)


「PCも使えるし、いざ実践!」と、いくところが

Udemyの講座がSketchでの操作だったので、動画についていけず

路頭に迷っていたところをYouTubeにてコチラの動画と出会いました。

FigmaでWebカンプを作ろう!①Figmaをインストール&準備をしよう!

この当時のツイートのままで、

  • figmaを導入予定の方
  • 操作方法が分からなくて困ってる方

非常にオススメしたい動画 でした!

これが無償で受けられるのは凄すぎると思う!

さらに、figmaの操作に慣れるために

好きなサイトを3本 


  • AAAの公式サイト(7/10 – 7/11)
  • あつまれどうぶつの森 公式サイト(7/14)
  • ブルーボトルコーヒー 公式サイト(7/15)

例:ブルーボトルコーヒー 公式サイト

1、2本目はchromeのプラグインの使い方に苦戦して

何度もやり直していたので半日とか、かかっていました。

3本目にして、

「あっ、ワイヤーフレームの過程いれていなかった」と気づいて

ちゃんと挟んでやってみた感想は「ワイヤーフレームを挟むの重要。」でした。笑

やり直さなければいけない率を減らしたり、かなりの時間短縮に繋げてくれました。

  • 1日1サイトレビューをするサイト
  • デザインカンプのトレースをするサイト

選ぶ基準が全然違いましたし、戸惑いました。

特に余白少なめの、色付き背景のLPにおいて

「これは背景なのか、写真なのか…?」という難しい感覚が生まれて

コーポレートサイトを選んで行っていました。

検証ツールの存在を知ったことだし

LPにも触れていかなければならないな… と思っております…

PCの環境を整えて、サイトレビューを含めて再開したいですね(n回言う…)

あと、独自のヒアリングシート作成しようとしてすっかり忘れて、

頭の整理のためブログ書き始めたので、それもやらねば…

✔️ いざ、制作!( 7/17 – 7/20 )

ワイヤーフレームとデザインカンプの制作に

特につまづくことはなくサクサク進めることができました♪

(前編の重複になりますが)完成はコチラ!

なお、架空サイトの制作時については

Progateの時と同様に「こういうことできるんだ〜」

と思いながら 丸写しをした のみです。

ちなみに、コーディングについては

しまぶーIT大学さん の HTML講座

と、VScord に プラグイン入れるための動作確認程度で

コーディングの勉強はprogate以来していませんでした。

なので、何かができるようになった というわけではありません。

オリジナルを作成する上で

必要に応じて「使われているタグを導入すればいいんだろうな…」と思いつつ。

要領の良いタイプではないので

「Udemy / 動画 を見返すのは結構手間だなあ…」っていうのが正直、今の心境です。

Next Stage!

昨日、Kindleにて

1冊ですべて身につくHTML & CSSとwebデザイン入門講座』を購入しました。

バナートレースをきっかけにwebデザインに熱中し始めた6/24以降から

ググりながら奮闘し続け得てきた内容が、この書籍にすべて集約されていました。笑

独学でWebデザインの勉強を検討されている方は

一番初めに、この書籍を買っちゃったほうが効率的 なのではないかなと思いました。

しかし、私自身は前もって

Udemyでの動画での学習を挟んでおいてよかった。」と思いました。

私自身は、活字を読むのが苦手なので

  • 最初から懸命に読まなきゃ
  • タグの意味を一語一句暗記しなきゃ

とかそんな思考になっていたことが考えられるので

絶対、挫折していただろうなぁ…と。

ツイートでも書かれているように

  • 逆引き書感覚での使用
  • 2カラム構成などの新しい学び

が得られそうで、

今の段階からでも購入してよかったと充分に思いました♪

前編の時のように、

「また詳しく感想が書けたら良いな〜」って思っています。

そうでもしないと、ちゃんと読まないので。←

いくつかKindleで書籍を購入していて、

目は通したけど、読んでいないのばかりなので

随時、書いていけたら良いなと思っております。

というような感じで

【番外編】Udemy講座 / 架空LPの完成までに私がやったこと。

でした。

【番外編】を読んだだけだよ という方も

【前編】【後編】【番外編】まで全て読んでくださった方 も

ここまで読んでくださりありがとうございました!

何か少しでもお役に立ったことがあれば嬉しく思います!

お疲れ様でした!👏

前編はコチラ ▽

【前編】Udemyで購入した講座が良すぎたのでレビューしました。
UdemyがWebデザインの勉強に良いってのは知ってるけど「どの講座がいいかわからない!」実際受けてみないことにはわかりません。私自身も購入前にたくさんの講座レビューをしているブログ見てみたけど、”...

後編はコチラ ▽

【後編】Udemy / 動画 でWebデザインを学習する5つのメリット・4つのデメリット。
Udemyに関する記事を3部構成にしてお届けしています。前編 ▶︎ 購入した講座の感想。後編 ▷ Udemy(動画)で学習するメリット・デメリット。番外編 ▶︎ 架空LPの完成までに私がやったこと...

最初は 1記事で終わらせるつもりで

当初 6,000文字 だったのが(冒頭は重複させてはいますが、)

前編 6,000 文字超え / 後編 6,000 文字超え / 番外編 5000 文字超え

計 17,000 文字超えでした。笑

コメント

タイトルとURLをコピーしました