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

Shiba

chii_、webデザインの勉強始めたんだよね。どんな感じ？

今はAdobe XDを色々使ってみてるよ。

chii_

webデザインをUdemyやAdobeのチュートリアル、本を使って学習スタート。

未経験&30代でもwebデザインができるようになるのか、をシリーズでお届けしています。

今回は、webデザイン制作のプロセスと、そこで大活躍する「Adobe XD」についてお話しします。

webデザイン初心者でも始めることが大事。

諸々の説明の前に。

私がwebデザインの独学で使っている教材についてはこちらを参考にしてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

step
2ラフ（ワイヤーフレーム）を起こす

Shiba

ワイヤーフレーム？

いわゆる、ラフ。デザインの前にレイアウトを決めておくのよ。

chii_

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

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

Shiba

レイアウトを決める上でのコツってあるの？

ユーザーが見たいであろう情報がすぐ見れるように、とか。意識することは色々あるんだけど、webマーケティングの経験も大いに役立ってるよ。

chii_

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

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

Webデザイン良質見本帳

posted with ヨメレバ

久保田 涼子 SBクリエイティブ 2017年06月17日頃

楽天ブックス

Amazon

Kindle

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デザインも独学からスタートできる

今回は、AdobeXDの使い方を中心にwebデザイン独学の進捗を紹介しました。

HP制作をする上で役立つAdobe XDや、webデザインの基礎もUdemyなどでマイペースに学べる時代です。

私は、webデザインの仕事も受注できるようになるためUdemyやデザイン書籍で学び始めて、2週間ほどで、HPの簡単な更新依頼であれば自分で対応できるようになりました！

今後も

「30代未経験が独学でwebデザインができるようになるのか」シリーズを続けていくので、お楽しみに。