iSara WEB制作

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

投稿日:2019年4月20日 更新日:

バンコクにてノマドエンジニア育成講座の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メンバーリスト

講義にもありましたが、もしあなたがWEB制作やフリーランス・ノマドエンジニアを目指しているなら追いかけるべきは少し前を走っている人達です。そう、我々iSara5thメンバーですw!

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

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

リストはコチラ

5thメンバーブログ

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

ビザを延長したい方へ

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

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

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

おわり

プロフィール

今後の発信予定

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

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

Live A Life You Will Remember!

資料請求はこちら

-iSara, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

【iSara5期/Day 2】はにわまんのWordPress講座 「準備編」と「テーマ作成編」

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 2より本格的に講義が始まります。 前期では事前学習の一環だった「WordPress」が5期では「現 …

【iSara5期/Day 11】ノマドの生き方とビジネスマナー

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 11-1コマ目は「ノマドの生き方とビジネスマナー」です。 テーマはスキルを身に着け、ノマドとして自 …

【iSara5期/Day 15】フリーランスになる為に覚えておくべき10の心構え

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 15-1コマ目は「フリーランスになる為に覚えておくべき10の心構え」です。 テーマはフリーランスと …

【iSara5期/Day 13】マイクロビジネス起業術

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 13-1コマ目は「マイクロビジネス起業術」です。(2コマ目はグループワークのため記事はありません。 …

【初心者向け】ポートフォリオサイト制作の完全ロードマップ!

TOTO ポートフォリオサイトが完成したので、ロードマップをまとめてみました! GIGLIO 勉強になったな~ 【Day 128】 \ ポートフォリオサイト公開 / 何のアイデアもないまま作り始めたの …

プロフィール

HEBOCHANS

いつも犬と一緒にいるために
プログラミングを右手に、
ブログを左手に。

爆遅でも止まらない36歳ミニマリストが
フリーランスを目指す全記録。

TwitterのFollowボタン

Twitterのタイムライン