webマーケティング フリーランス

Udemyでwebデザインができるようになるのか【30代未経験が挑戦・Adobe XD編】

☆★5/25(水)まで「初夏のビッグセール」開催★☆
セール対象コースが1,220円~!30日間の返金保証も。
webデザインやプログラミング、会計等、人気のコースもセールになります。
詳細はUdemyのHPをご確認ください。

 

Shiba
chii_、webデザインの勉強始めたんだよね。どんな感じ?
今はAdobe XDを色々使ってみてるよ。
chii_

webデザインをUdemyで学習し、まずはLPを作れるようになるまでの実録シリーズ。

今回は、webデザイン制作のプロセスと、

そこで大活躍する「Adobe XD」についてお話しします。



こんな方におすすめの記事

  • webデザイナーになりたい人
  • 独学でwebデザインの勉強をしたい人
  • Adobe XDやUdemyについて知りたい人

webデザイン初心者でも独学できる。使える教材「Udemy」

諸々の説明の前に。

私がwebデザインの独学で使っているのは

Udemy

というオンライン動画学習サイト。

セール中だと、1講座1,000円ほどで購入できるものもあります。

☆★5/25(水)まで「初夏のビッグセール」開催★☆
セール対象コースが1,220円~!30日間の返金保証も。
webデザインやプログラミング、会計等、人気のコースもセールになります。
詳細はUdemyのHPをご確認ください。

 

Udemyとは

オンライン動画学習プラットフォーム。
1講座〇円、という形で自分で学びたい講座を選んで購入するシステム。

 

現在、Udemyのこちらの講座を履修中。今回の記事もこの講座から紹介します。

 

 

webデザイン制作のプロセス

HP制作やバナーなど、webデザインをするとき

「よし、じゃ―作るぞ~」

と、いきなりイラレを開いて、画像置いて…

というのは、あまり現実的ではなかったりします。

 

絵を描いたり、漫画を書いたりするときと同じく、

「入れる内容」を整理し、

それをもとに「ラフ」と呼ばれるものを作っていくところから始まります。

 

step
1
入れる情報を整理する

まずは、webデザインに入れなければならない情報を整理します。

例えば、カフェのHPを作ることになった場合、

必要な情報はこんな感じ。

カフェのHPで必要になる情報例

  • カフェのロゴ・カフェ名
  • 連絡先
  • 住所・地図(Google MAP)
  • メニュー詳細

 

掲載する情報は、クライアントと話し合って確認することが多いです。

また、競合他社が掲載している情報をチェックすることもあります。

 

step
2
ラフ(ワイヤーフレーム)を起こす

Shiba
ワイヤーフレーム?
いわゆる、ラフ。デザインの前にレイアウトを決めておくのよ。
chii_

 

実際のワイヤーフレームはこんな感じ。

 

こんな感じで、必要な情報をどこに置いていくか、決めていきます。

Shiba
レイアウトを決める上でのコツってあるの?
ユーザーが見たいであろう情報がすぐ見れるように、とか。意識することは色々あるんだけど、webマーケティングの経験も大いに役立ってるよ。
chii_

 

デザインやレイアウトの勉強は、ネットだけではなく、書籍で基本を身に着けるべく勉強中。

美術館に足を運ぶなどとにかく、色々な作品にふれることも大事なことです。

 

 

 

step
3
決めたレイアウト位置に画像や文章を入れてみる

決めた位置に画像や文章を入れていきます。

先程のワイヤーフレームに入れてみると、こんな感じに。

 

 

Shiba
なんか!それっぽくなってきた!!
でしょ~(笑)
chii_

 

こんな感じで画像や文章などを入れて、調整していきます。

要素を入れてみると、

「予想よりもごちゃつくな」

とか

「ここはもっと目立つようにした方がいいな」

といった思いがふつふつ出てくるものでして、

そこを調整していきます。

色や装飾を調整して完成です。

 

 

Adobe XDとは

Adobe XDとは、イラストレーターやフォトショップなどでお馴染みの

Adobe社が出している、「プロトタイピング作成ツール」です。

先程紹介したフレームも、Adobe XDで制作されたものです。


Adobe Creative Cloud コンプリート|12か月版|Windows/Mac対応|オンラインコード版

 

 

Adobe XDを使う理由

chii_
ぶっちゃけ、クライアントさんからの指定だったから(笑)

私の場合は、クライアントさんやwebデザイナーさんから

「フレームはできればXDでお願いします。」

と言われたから使ってます。

 

ワイヤーフレーム自体は、イラストレーターでもパワーポイントでも、

手書きでも作ることができます。

私は、フレームだけなら手書きで作ることが多いんです。

企画書の構成や、webデザインもXDで起こす前に手書きである程度レイアウトを考えます。

 

Shiba
じゃあなんでXDで作って、と指定がくるの?
XDには便利な機能が搭載されているからだよ。
chii_



Adobe XDの便利な機能

Adobe XDの便利な機能をご紹介します。

まずは、「ユーザー招待機能」。

その名の通り、該当のXDデータにユーザーを招待することができます。

招待されたユーザーは、該当のXDデータを閲覧・編集することができます。

 

 

こんな感じで、ユーザーのアドレスを追加して招待します。

 

この機能が、クライアントさんやwebデザイナーさんがXDを指定する理由。

修正したデータを送って指示を出して…

というやり取りの手間が省け、データをそのまま編集してもらえます。

何社かでHP制作をするとき、とっても便利な機能です。

 

Shiba
へぇ~。他におすすめ機能ある?
Adobe XDといえば、「リピートグリッド」だね!
chii_

 

リピートグリッドとは、同じ要素を複数追加するときに便利な機能です。

 

同じ要素が続く場合、いちいち画像とテキストをコピペして~

というのは面倒ですよね。

 

そんなときに、このリピートグリッドをクリックして、

選択している要素をドラッグすると…

 

こんな感じで、ドラッグするだけで同じ要素が「リピート」されるんです。

めっちゃ便利!

リピートグリッドは結構くせになります(笑)

 

このように、Adobe XDにはフレームやwebデザインをする上で

役立つ機能が満載なんです。

 

 

【まとめ】AdobeXDの使い方もwebデザインもUdemyで学べる



今回は、AdobeXDの使い方を中心に

webデザイン独学の進捗を紹介しました。

 

HP制作をする上で役立つAdobe XDや、

webデザインの基礎もUdemy

で、オンラインスクールに通うよりも安く、マイペースに学べます。

 

私は、webデザインの仕事も受注できるようになるためUdemy

で学び始めて、2週間ほどで、HPの簡単な更新依頼であれば自分で対応できるようになりました!

Udemyでwebデザインができるようになるのか【30代未経験が挑戦】

続きを見る

 

今後も

「30代未経験がUdemyでwebデザインができるようになるのか」シリーズ、

LP制作できるようになるまで続けていくので、お楽しみに。

Udemyおすすめwebデザイン・プログラミング講座

続きを見る

☆★5/25(水)まで「初夏のビッグセール」開催★☆
セール対象コースが1,220円~!30日間の返金保証も。
webデザインやプログラミング、会計等、人気のコースもセールになります。
詳細はUdemyのHPをご確認ください。

 

【補足】webデザイン独学に使っているUdemy講座

-webマーケティング, フリーランス

© 2022 Libyard Blog Powered by AFFINGER5