iSara

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

WEBデザイン知識/実践編 〜XD講座〜

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

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

担当講師:ちづみ (@098ra0209)先生

TOTO

アートは恋

GIGLIO

デザインは愛

Day 10講義内容

  • WEBデザイン知識編
  • WEBデザイン実践編 ~XD講座~

この記事は以下のような方にオススメです。

  • iSaraに興味がある。
  • 応募したけど落ちた…。次こそは!
  • WEBデザイナーになりたい。

ちづみ先生とデザイン

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

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

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

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

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

デザインとアートの違い

  • デザイン = 相手のため
  • アート = 自分のため

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

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

と思われがちですが、

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

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

  1. 近接: 同じような内容は近く、違う内容は遠く。
  2. 整列: 見えない線を引いて揃える。
  3. 強弱: 目立たせたいものは大きく、そうでないものは小さく。
  4. 反復: 要素を繰り返す。

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

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

WEBデザインの作り方

ヒアリングが大事

  • 目的は何か?
  • どんなイメージにしたいか?

デザインを決めるまで

  1. 参考URLを出す。
  2. フレームワークを作る。
  3. デザインカンプを作る。

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

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

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

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

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

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

  • 画像にこだわる。
  • 今時のデザインにする。

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

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

  • 目的
  • 参考URL
  • 色味
  • ターゲット

ひみつきち & Bar – PATERS | 人が好き。ワクワクすることが好き。

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

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

  • 目的:カフェ以外の活動・歴史・メンバーを紹介したい
  • 参考URL:マイフェバ
  • 色味:オレンジとピスタチオ
  • ターゲット:同世代やぺーたーずの活動に共感してくれる人

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

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

WEBサイトの具体的なpx数

  • サイトは1280pxで作る。
  • インナーは960pxで作る。(8で割り切れるから)
  • headerの高さは50 – 60px
  • MVは600 × 1280px

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

ColorDrop – New colors

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

写真素材・ストックフォト – 画像素材ならPIXTA(ピクスタ)
写真素材なら「写真AC」無料(フリー)ダウンロードOK

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

I/O 3000 | Webデザインギャラリー
縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
SANKOU! | Webデザインの参考サイト集

他にはPinterestで「サイト」と検索してみる。

LPアーカイブ等があります。

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

デザイン | ずくろぐ

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

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

XD講座

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

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

成果物

まとめ

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

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

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

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

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


>> プログラミングスクール「iSara」に興味のある人が最初に見るべきブログ

おわり

プロフィール

Live A Life You Will Remember!

資料請求はこちら