【iSara5期/Day 10】WEBデザイン知識／実践編 〜XD講座〜

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の（@HEBOCHANS）です。

Day 10は2コマを使っての「WEBデザイン知識／実践編 〜XD講座〜」です。

担当講師：ちづみ（@098ra0209）先生

TOTO

アートは恋

GIGLIO

デザインは愛

ちづみ先生とデザイン

小学校の教員からフリーランスに転身した、ちづみさんはある程度コーディングを覚えた後、

2日ほど、イラレとフォトショを講座で勉強して、

2〜3週間ほど、デザイナーの元でアシスタントとして修行した後は実践あるのみ。

今までに15件ほどのWEBデザインを担当してきたそうです。

他には名刺・チラシ・バナー・ヘッダー画像などでもデザインを手掛けています。

デザインとアートの違い

個人的には、このツイートがすべてを物語っていると思います。

私はこれを聞いて、デザインやりたいなって思いました。

アートは恋。
デザインは愛。

って。 https://t.co/isn2GjEUa5

— haruna🇹🇭旅するデザイナー (@Haruna_F1207) 2019年2月6日

デザイン = センス = 選ばれし者にしかできない。

と思われがちですが、

デザイン = ロジック = 知識なので勉強すればできるようになる、かもしれません。

デザイン4大原則に従う + パクる

コーダーが意識すべきは「4大原則 + 余白」

デザインはできる限り再現する（カンプでは余白がバラバラなこともあるので注意！）。

この講座で出てきた「デザインの4大原則」については『ノンデザイナーズ・デザインブック』という書籍に詳しく書かれています😇

私もこれを読んで勉強しました💪
書籍内の参考例は紙のデザインがメインですが、Webにも応用できる内容なのでデザイナー志望の方は必読ですね💪https://t.co/x4KLrpGock

— みこ@公務員→海外ノマド夫婦(帰国中) (@mico_salty) 2019年4月21日

ノンデザイナーズ・デザインブック ［第4版］

posted with ヨメレバ

RobinWilliams/吉川典秀 マイナビ出版 2016年06月30日

楽天ブックス

Amazon

Kindle

WEBデザインの作り方

ヒアリングが大事

デザインを決めるまで

フレームワーク作成はやらない時もあるが、参考URLだけは必ずやった方が良い。

参考URLの要素をパクって組み合わせれば良い。

ちづみ先生のデザインツール

画像作成ツールは「Figma」一択だそうです。

カンプ作成はもちろん「XD」です。

初心者でもそれなりのデザインを作るには

ちづみ先生オススメの画像素材サイトや参考サイト（パクる用）は下にまとめてあります。

ディレクターを介す際に聞くこと

iSaraの課題にもなっている「ぺーたーず」のサイトはデザインをちづみさん、コーディングをはにわまんさん、プロデュースをショーヘーさんのCLAYが担当しています（ど、ドリームチーム！）。

このサイトを具体例にすると、ぺーたーずには元のサイトがあり、それをリニューアルする案件でした。

クライアントやディレクターが良ければ、それでOKがちづみ先生流。

ちなみにデザインの納期は大体2週間が目安だそうです。

WEBサイトの具体的なpx数

ちづみ先生オススメ！配色参考サイト

» ColorDrop - New colors

ちづみ先生オススメ！無料画像素材サイト

ちづみ先生オススメ！参考サイト (パクる用)

他には「Pinterest」で"サイト"と検索してみたり、

オシャレなLPを集めたサイト「LPアーカイブ」なんてのもあります。

ちづみ先生のブログ -デザイン編-

ちづみ先生のブログはイラストが手を振ってくれるんですよ。

ちづみ先生もオススメ！書籍

Webデザイン良質見本帳、この本が出会ったwebデザイン本で一番いいかもしれない・・・！めちゃめちゃ重宝しています。
ジャンルごとやカラーごとで具体的な特徴やカラーコード、カラーの組み合わせが載っていてとにかく再現性がある内容なのがポイントです👍😆https://t.co/EGJNaI3Tp9 pic.twitter.com/Bnz6quvv4G

— ちづみ (@098ra0209) 2019年3月16日

Webデザイン良質見本帳

posted with ヨメレバ

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

楽天ブックス

Amazon

Kindle

ノンデザイナーズ・デザインブック ［第4版］

posted with ヨメレバ

RobinWilliams/吉川典秀 マイナビ出版 2016年06月30日

楽天ブックス

Amazon

Kindle

やってはいけないデザイン

posted with ヨメレバ

平本 久美子 翔泳社 2016年12月16日

楽天ブックス

Amazon

Kindle

なるほどデザイン

posted with ヨメレバ

筒井美希 エムディエヌコーポレーション 2015年08月

楽天ブックス

Amazon

Kindle

けっきょく、よはく。

posted with ヨメレバ

ingectar-e ソシム 2018年07月19日

楽天ブックス

Amazon

Kindle

ほんとに、フォント。

posted with ヨメレバ

ingectar-e ソシム 2019年02月19日

楽天ブックス

Amazon

Kindle

XD講座

2コマ目は実際にXDを触ってデザインカンプを作成します。

下のツイートの「XD講座 in タイ」という感じでしょうか。

✅0から始めるXD講座
3月26日に都内でイベントやります！爆速かつわかりやすく楽しく教えるXD超入門講座です！
簡単なwebサイトを作るのをゴールにワークショップを行ないます！XDを始めたいけど何から学べばいいかわからない方、ぜひ一緒に楽しみながらトライしましょう！😊https://t.co/yb1KxSWYGc pic.twitter.com/wKyYgP7scW

— ちづみ (@098ra0209) 2019年3月10日

成果物

まとめ

XD自体の使いやすさにも感動しましたが、なんといってもWEBデザインの基礎知識からXDでの実践〜デザインカンプを作るまでが2時間でできたことが神です！

そして相変わらず笑いの絶えない授業。

ちづみ先生は最後まで僕たちの先生でした。

講座後Slack内に「デザイン道場」という、ちづみ先生のお題に対してデザインカンプを納品するチャンネルが作られました。

WEBデザイナーを目指す者が続出したのは言うまでもありません。笑

人気記事【全４６本】プログラミングスクール『ISARA』ブログまとめ