iSara

【iSara5期/Day 10】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デザイナーを目指す者が続出したのは言うまでもありません。笑

5thメンバーリスト

Twitterのメンバーリスト(全21名)を作成しましたので、よかったらフォローお願いします。

そして #iSara5th のタグで追いかけてみてください。

リストはコチラ

5thメンバーブログ

僕以外にもブログで発信しているメンバーがいます。ぜひチェックしてみてください。

ビザを延長したい方へ

せっかくタイに来たのだから、限界まで居たい!という方は我らが同期で世界一周を成し遂げた男・アッキー(@Kurohune13)さんの以下の記事でビザの延長(合計60日間の滞在)がカンタンにできます。2016年の記事ですが、2019年4月でも通用しました。

補足としては、銀行もあるので日本円→タイ・バーツへの換金もここで出来ます。

フードコートやセブンイレブンもあるので食事もできますよ。

おわり

プロフィール

今後の発信予定

  • 毎日の現地講座
  • 事前学習期間まとめ
  • のせっち講座
  • 聖地・iSaraハウス
  • 5thメンバー紹介
  • タイでの生活について

iSaraマニアの視点から発信を継続していきますので、遊びに来てください。

Live A Life You Will Remember!

資料請求はこちら