バンコクにてノマドエンジニア育成講座のiSara5期に参加中の（@HEBOCHANS）です。
Day 10は2コマを使っての「WEBデザイン知識／実践編 〜XD講座〜」です。
担当講師：ちづみ（@098ra0209）先生
Day 10講義内容
- WEBデザイン知識編
- WEBデザイン実践編 〜XD講座〜
この記事はこんな人にオススメ
- iSaraに興味がある。
- 応募したけど落ちた…。次こそは！
- WEBデザイナーになりたい。
ちづみ先生とデザイン
小学校の教員からフリーランスに転身した、ちづみさんはある程度コーディングを覚えた後、
2日ほど、イラレとフォトショを講座で勉強して、
2〜3週間ほど、デザイナーの元でアシスタントとして修行した後は実践あるのみ。
今までに15件ほどのWEBデザインを担当してきたそうです。
他には名刺・チラシ・バナー・ヘッダー画像などでもデザインを手掛けています。
デザインとアートの違い
- デザイン = 相手のため
- アート = 自分のため
個人的には、このツイートがすべてを物語っていると思います。
私はこれを聞いて、デザインやりたいなって思いました。
アートは恋。
デザインは愛。— haruna🇹🇭旅するデザイナー (@Haruna_F1207) 2019年2月6日
デザイン = センス = 選ばれし者にしかできない。
と思われがちですが、
デザイン = ロジック = 知識なので勉強すればできるようになる、かもしれません。
デザイン4大原則に従う + パクる
- 近接：同じような内容は近く、違う内容は遠く。
- 整列：見えない線を引いて揃える。
- 強弱：目立たせたいものは大きく、そうでないものは小さく。
- 反復：要素を繰り返す。
コーダーが意識すべきは「4大原則 + 余白」
デザインはできる限り再現する（カンプでは余白がバラバラなこともあるので注意！）。
この講座で出てきた「デザインの4大原則」については『ノンデザイナーズ・デザインブック』という書籍に詳しく書かれています😇
私もこれを読んで勉強しました💪
書籍内の参考例は紙のデザインがメインですが、Webにも応用できる内容なのでデザイナー志望の方は必読ですね💪https://t.co/x4KLrpGock— みこ@公務員→海外ノマド夫婦(帰国中) (@mico_salty) 2019年4月21日
非デザイナーも必見！「4大原則」を知るだけで見違えるデザインに | Swings
デザインとは何か デザイナーでなくとも、私たちは「デザイン」という言葉を日常的に使いますが、そもそもデザインとは一体何でしょうか。 SWINGSの過去の記事でもお伝えしてきた通り、デザインとは単に見た目をかっこよく装飾することではありません。 デザインの語源を調べてみると、Wikipediaには下記のように記載されています。
WEBデザインの作り方
ヒアリングが大事
- 目的は何か？
- どんなイメージにしたいか？
デザインを決めるまで
- 参考URLを出す。
- フレームワークを作る。
- デザインカンプを作る。
フレームワーク作成はやらない時もあるが、参考URLだけは必ずやった方が良い。
参考URLの要素をパクって組み合わせれば良い。
ちづみ先生のデザインツール
画像作成ツールは「Figma」一択だそうです。
カンプ作成はもちろん「XD」です。
無料画像作成ツールなら断然figmaをオススメしたい
こんにちは！フリーランスデザイナーのちづみ です！画像作成ツールはfigmaを使っていて、個人的にはすごくオススメなのでその理由を紹介します。画像作成だけでなく、webデザインやアプリデザインにも最近注目されているfigmaの魅力をまとめました！
初心者でもそれなりのデザインを作るには
- 画像にこだわる。
- 今時のデザインにする。
ちづみ先生オススメの画像素材サイトや参考サイト（パクる用）は下にまとめてあります。
ディレクターを介す際に聞くこと
- 目的
- 参考URL
- 色味
- ターゲット
ひみつきち & Bar - PATERS | 人が好き。ワクワクすることが好き。
iSaraの課題にもなっている「ぺーたーず」のサイトはデザインをちづみさん、コーディングをはにわまんさん、プロデュースをショーヘーさんのCLAYが担当しています（ど、ドリームチーム！）。
このサイトを具体例にすると、ぺーたーずには元のサイトがあり、それをリニューアルする案件でした。
- 目的：カフェ以外の活動・歴史・メンバーを紹介したい
- 参考URL：マイフェバ
- 色味：オレンジとピスタチオ
- ターゲット：同世代やぺーたーずの活動に共感してくれる人
クライアントやディレクターが良ければ、それでOKがちづみ先生流。
ちなみにデザインの納期は大体2週間が目安だそうです。
WEBサイトの具体的なpx数
- サイトは1280pxで作る。
- インナーは960pxで作る（8で割り切れるから）。
- headerの高さは50 - 60px
- MVは600 × 1280px
Webデザインをする時のおさえたいポイントと注意点をまとめてみた
こんにちは！ちづみ(@098ra0209)です！私は今カンボジアにいながらこの記事を書いています。ノマドワーカーです。今回はウェブデザインをする時のチェックすべき点と注意点を備忘録としてまとめてみましたので、よかったら活用してください( ^ω^ )
『デザインは8の倍数でできている』
はじめまして。mama&crowdのデザイナー、長谷川彰之介です。今回は、WEBサイトの「余白」や「ブロックサイズ」「WEBサイトの横幅」に対して「最適な値は…
ちづみ先生オススメ！配色参考サイト
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選 - PhotoshopVIP
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。
ちづみ先生オススメ！無料画像素材サイト
写真素材・ストックフォト | 日本最大級の画像素材サイト - PIXTA
ピクスタなら5,330万点以上の高品質の画像素材(写真やイラスト)を定額制プランなら最安1点39円から購入可能！ロイヤリティフリーだから何度でもご利用いただけます。無料のフリー画像も毎週更新！
写真素材なら「写真AC」無料（フリー）ダウンロードOK
無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンクは一切不要です。Web、DTP、動画などの写真素材としてお使いください。
ちづみ先生オススメ！参考サイト (パクる用)
I/O 3000 | Webデザインギャラリー
I/O 3000は、Webデザインに関わる人のためのWebデザインギャラリーサイトです。国内外を問わず、Web制作の参考となるサイトをセレクトしています。
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
縦長のwebデザインをがむしゃらに集めています。
SANKOU! | Webデザインギャラリー･参考サイト集
Webデザイン制作の参考になるステキなWebサイト･LPを集めたギャラリー。業種･テイストなどで絞込検索可能。最新トレンドをチェック！
他には「Pinterest」で"サイト"と検索してみたり、
オシャレなLPを集めたサイト「LPアーカイブ」なんてのもあります。
ちづみ先生のブログ -デザイン編-
デザイン | ずくろぐ
ちづみ先生のブログはイラストが手を振ってくれるんですよ。
ちづみ先生もオススメ！書籍
Webデザイン良質見本帳、この本が出会ったwebデザイン本で一番いいかもしれない・・・！めちゃめちゃ重宝しています。
ジャンルごとやカラーごとで具体的な特徴やカラーコード、カラーの組み合わせが載っていてとにかく再現性がある内容なのがポイントです👍😆https://t.co/EGJNaI3Tp9 pic.twitter.com/Bnz6quvv4G— ちづみ (@098ra0209) 2019年3月16日
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デザイナーを目指す者が続出したのは言うまでもありません。笑
#iSara5th 今日の講座はちづみ先生(@098ra0209)によるWebデザイン講座でした🥰
(Webに限らず)デザインする上で絶対守るべき【4大原則】やAdobeXDの使い方を2時間で分かりやすく解説されていて、本当にすごい✨
知りたかったことを聞けたしWebデザインを独学した私にとっても超有益な講義でした〜🥺✨
— みこ@公務員→海外ノマド夫婦(帰国中) (@mico_salty) 2019年4月20日
ちづみ@098ra0209 さんのXD講座
たった1時間のXDの講座で縦2000pxほどのカンプを完成させられました！
・同じ要素を繰り返す「リピートグリッド」が超便利。
→カードとかリストの繰り返しに重宝。コーダーを極められたら少しずつデザインもやっていきたい。#iSara5th#学びなおすiSara
— Paya@元公務員ノマドフリーランスWebエンジニア (@Paya_Tech) 2019年4月20日