とうとうデイトラデザインコースの最終章です。
Figmaとも少しずつ仲良くなれてきました。上級編ではECサイトのデザインが中心となります。
今回も僕の制作した作品も公開しているので是非見ていってください！
それでは、いってみましょう〜！
プログラミングを学習開始して、1年後にShopify Experts企業に入社。愛知県の田舎からフルリモートで働いています。（21年2月入社予定）
Twitter( https://twitter.com/oka_jumboworld )
DAY1 より単価の高い案件を獲得するデザイナーのマインド
デザインの必要性について考える日です。
お客さんがWebサイトを作る理由ってなんでしょうか？
悩んでいる人サイトをお洒落にしたいから？
悩んでいる人とりあえず作ればいいかなって
趣味でサイトを作っている人は、どんなサイトでもいいかもしれませんが企業がサイトを作るのはしっかりと理由があるはずです。
何十万・何百万円の投資をしてまで作る理由って、ホームページからその投資以上の価値を生むためですよね。
そのあたりの話を丁寧に解説しております。
また、お客さんも実はサイトを作る理由が曖昧だったりするので、デザイナーが主導権を握ってお客さんの真の目的を導いてあげられるとかなり価値が高いデザイナーになれると思いました。
オカデザイン とアートの違いだなこれが。
DAY2 UIデザインついて理解しよう
UIUXってよく聞く言葉ですが、どんな意味かみてみましょう。
UIはユーザーインターフェイスの略。
UIは「人とモノ（製品やサービス）をつなぐ窓口のようなもの」のことです。
WebサイトでいうところのUIは、サイトの見た目や、使いやすさのことを指します。
UXはユーザーエクスペリエンスの略。
UXは「人がモノやサービスに触れて得られる体験や経験」のことです。
例えばあなたが見たサイトの、見た目や使いやすさが非常によかったとなった場合。
あなたが感じた全てがUXとなります。
ようするに、人が使いやすいことが大切だということです
オカ適当にまとめすぎかな…？
デザインの学習と合わせてこちらの本も購入してみました。
まだ、ほんのちょっとしか読んでいないのですが、UIUXについても学べそうです。
DAY3 ECサイトについて理解しよう1
今、ECサイトが非常に盛り上がっています。（特にShopify）
上級編は、今盛り上がりを見せているEC市場のデザインを中心に学習していくのですが、DAY3では、実際のオンラインサイトをみながらECサイトに必須ページなどをみていきます。
コーポレートサイトとは違って、購入画面や決済画面があるのが特徴ですね。
DAY4 ECサイトについて理解しよう2
DAY4では、これから制作するECサイト制作の準備を始めます。
ECサイト制作の時に参考になるギャラリーサイトが4つご紹介されているんですが、めちゃくちゃいいですね。
こういうのって自分で、勉強しているだけだとなかなかたどり着けないところだったりすので、こうやってまとめて頂けると非常にありがたいです。
オカDAY5からは、プロテインのECサイトを制作するので、ギャラリーサイトなどを使ってサンプルを集めておくか。
DAY5 実践編！ECサイトを作成しよう1-1
DAY5から、実際にECサイトを制作します。
まずは、要件定義の確認です。中級編で要件定義の重要性について理解したので、ここはしっかり抑えておきましょう。
DAY6 実践編！ECサイトを作成しよう1-2
参考サイト集めていきます。
今回制作するのは、プロテインのECサイトなので検索で「プロテイン」とかで検索すると競合サイトを集めることができますね。
せっかくなので、僕が集めたECサイトをこちらで紹介しておきます。
・マイプロテイン(https://www.myprotein.jp/)
・DNS ZONE(https://www.dnszone.jp/protein/)
・SAVAS(https://www.meiji.co.jp/sports/savas/)
・iHerb(https://jp.iherb.com/)
オカ趣味で筋トレをしているので、結構集められたぜ。
あとは、今回のターゲット層が20~30代の女性なので、ターゲットに合わせたサイトも集めておくとよさそうですね。
DAY7 実践編！ECサイトを作成しよう1-3
DAY７ではワイヤーフレームを制作していきます。
ゼロから作っていくのではなく、教材内でオススメされているサービスからワイヤーフレームをダウンロードして制作していくのでかなり工数が削減できます。
正直ゼロから自分で作るって思っていたので助かりました。
オカゼロから生み出すことに価値があるのではなくて、お客さんが喜んでくれるころに価値があるんだな。
（ゼロから作品を作れない言い訳…）
DAY8 実践編！ECサイトを作成しよう1-4
DAY8では配色をして仕上げていきます。
配色の際にはやっぱりPalettableで色を合わせていくのが非常に便利ですね。
実際に、配色したデザインがこちらになります。
非常にシンプルですが、よくあるECサイトっぽくなりましたね。
DAY9 実践編！ECサイトを作成しよう1-5
スマホサイズの作成をします。
ここでの注意としては、素人（駆け出し）がいきなり我流のデザインをすべきではないと。
基本をしっかりと見につけて、それからオリジナリティをだすようにすべきである。
確かに、僕もちょっとデザインがあっけなくてもう少しつけたそうかなと思って付け足すと一気にダサくなる経験がありました…。
DAY10 実践編！ECサイトを作成しよう1-6
DAY9までで制作は完了したので、納品前のレイヤー整理を行います。
めんどくさくてもここができると実装者に感謝されるはずなので、必ずレイヤー整理は行うようにしましょうね。
最終的に上記のようなレイヤーになってます。
最終的に作成したデザインはこちらです。
↓
↓
↓
↓こちら改めてデザインしたものになります。
Figmaで作成したデザインを見る(Before)
↓こちらがメンターさんからレビュー頂いたあとのデザインです。
Figmaで作成したデザインを見る（After）
今回もめちゃくちゃ丁寧なレビューを頂き自分なりに改善しました。
特に重要だと思ったポイントは
・ ECサイトの目的は購入してもらうこと！購入ボタンは目立つようにする！
・全て均一にするのではなく、グループを意識。
・必要な情報・載せたい情報・ユーザーが欲しい情報を整理してどうやってサイトで見せるかを考える。
オカ確かに、購入ボタンが全く目立っていなかったな。
これからは気をつけねば、、
ということでECサイトはこれで完成となります。
DAY11 LPのデザイン改善に役立つ知識を身につけよう
LPO(ランディングページ最適化)を行います。
初級編で作成したLPを改善するためにどのようなことが必要なのかを学んでいきます。
① 既存LPのデザインを確認
② 既存LPの目的を理解しよう
③ 既存LPの課題を確認しよう
DAY11では① と②を行います。
スケジュールどおり進めていれば、約２ヶ月まえに作成したLPとなるのでここで一度復習をしておきましょう。
ちなみに、初級編でデザインしたものはこちらです。
DAY12 既存LPの改善をしよう
LPOの基本は下記となります。
課題の抽出 → 改善 → 検証 → 課題の抽出 → 改善 → 検証… （繰り返し）
一般的に言われるPDCAサイクルと似ていますね。
DAY11では、Webデザインにおいての課題の抽出から改善の仕方・どのようなアプローチを行えるのかについてわかりやすく解説されています。
DAY13 実践編！既存LPの改善版を制作してみよう！1-1
現在のLPのデザインを見ながら、改善できそうなところを考えていきます。
ざっと自分で改善できそうなところを考えてみました。
特に気になったのは、イラストと写真が混在しているところでしょうかね？
もう少し統一感を持たせるために写真に統一しようと思いました。
DAY14 実践編！既存LPの改善版を制作してみよう！1-2
DAY14では、改善のための参考サイトを集めていきます。
今回僕が集めた参考サイトはこちらになります。
DAY15 実践編！既存LPの改善版を制作してみよう！1-3
実際に手を動かして改善をしていきます。
今回は、動画も参考にしてちょっと真似しながら改善していきました。
毎回マスクの方法が分からなくなるので、いい加減しっかりと身につけたいと思い記事にしました。
DAY16 実践編！既存LPの改善版を制作してみよう！1-4
DAY16では、ワイヤーフレームに色を乗せていきます。
参考サイトや、このような便利なツールを使いながら色を合わせます。
また出てきましたpallatable。
palettableは非常に便利で、サイトのメインカラーに対してコンピューターがいい感じの色を提案してくれます。
同系の色だけでなく、反対色も提案してくれるのが非常にありがたいです。
DAY17 実践編！既存LPの改善版を制作してみよう！1-5
スマホサイズをデザインしていきます。
こういうメッセージあると嬉しいですよね。
あと、デザイナーとしての大切なマインドなんかも教えてくれるのもありがたい。
オカ実務でデザインやるのが楽しみであり、恐ろしくもあります。。
DAY18 実践編！既存LPの改善版を制作してみよう！1-6
レイヤーやグルーピングの整理を行います。
オカ自分は実装側なので、ここの工程の大切さがよくわかります。
共通のコンポーネントとかには、同じ名前をつけておくとかの心遣いが大切だなと思いました。
改善したデザインはこちらから見えます。
DAY19 復習とチェック
デザイナーとしての心構えについて5分ほどの動画で解説されています。
- デザインで迷ったときに立ち返る場所を作っておく。
- トンマナ・ターゲット・サイトの目的を明確にしておく。
- トンマナ →トーンアンドマナーの略でデザインの一貫性をもたせること。
- デザインしたものを作って壊す（改善）、作って壊す（改善）を恐れない。
一度自分のデザインについて「なぜこのデザインにしたのか」っていうのをまとめてみました。
DAY20 バナーデザインの超効率アップツール
デザインを効率よく行っていくための効率アップの紹介となります。
ただ便利なデザインツールを使う場合でも、まずはベースの力が大切だと動画でもおっしゃっています。
僕も、もう少しFigmaを使いこなせるようになってからこのあたりのツールは使っていきたいなと考えています。
オカ最近、Instagramに投稿する画像は練習も兼ねて、Figmaで作成しています。
結構いい練習になるし、誰かに見てもらうのでアウトプットの場としてはいいですよInstagram。
DAY21 1時間バナー制作チャレンジ
Canvaを使ってバナー作成をします。
今回のテーマはこんな感じです。
10分ぐらいでちゃちゃっと下記のようなものが作れました。
学習コストも高くないので、趣味でちょっとデザインをやってみたいという人にはいいかもしれないですね！
DAY22 デザインを10倍かっこよく見せるモックアップ
オカモックアップとは…？
お恥ずかしながら初めて聞きました。
カンタンにいうとiPhoneなどの枠にはめてきれいに見せてあげることをいうそうです。
DAY22では、今まで作成したデザインを使ってモックアップを作成します。
DAY23 コーディング不要！Wixでポートフォリオサイトを作る1
ノーコードでサイトが作れるサービスWixを使ってサイトを作成します。
いくつかの質問に答えていくとこんな感じのページになります。
とりあえずカンタンにサイトを作りたいって人にはいいかもしれないですね！
オカ完全未経験だけど、チャレンジしてみたいって人にはいいぐらいの難易度な気がします。
DAY24 コーディング不要！Wixでポートフォリオサイトを作る2
DAY24では、テンプレート選びと構成を考えます。
今回は行いませんでしたが、カンタンにどんなワイヤーフレームにするかをFigmaで作ると良さそうですね！
DAY25 コーディング不要！Wixでポートフォリオサイトを作る3
画像の入れ替えや、テキストを変更していきます。
画像の入れ替えもかなりカンタンでしたね。
WordPressをカンタンになら使えるよって人であれば、全く問題ないですね。
オカカンタンなWebサイトであれば本当にノーコードでOKな時代ですね。
DAY26 コーディング不要！Wixでポートフォリオサイトを作る4
DAY26ではスマホ版を作成していきます。
スクラッチ開発だとレスポンシブ対応って結構めんどくさいんですが、Wixめちゃくちゃカンタンでびっくりしました。
作業画面はこんな感じです。
URLも公開できているので、実機での確認も一瞬でできました。
とりあえず完成したサイトがこちらですね。
オカかなりカンタンにWebサイトが作ることができました。
DAY27 エンジニアとのコミュニケーションで最低限知っておくべきエンジニア知識
デザイナーは、エンジニアとのコミュニケーションが必要不可欠です。
僕は、実装をする側なんですが結構不明点についてはデザイナーさんに聞くこともあります。
そのときにデザイナーさんが最低限知っておいてほしい用語について解説しています。
DAY28 デザイン改善 営業の極意①
デザインを学んでいる理由って人ぞれぞれかなと思うんですが、デイトラでは「案件受注」にフォーカスしています。
DAY28では、どのように営業をしていくのかについて解説されています。
オススメなのは、改善案件を取ることとおっしゃています。
オカ確かにサイトを作って満足している人って多いもんなぁ
具体的なことは控えますが、かなり有益な動画になってます。
- 改善案件を取る際の、提案方法
- デザイナーにオススメのパートナー
この辺りは非常に勉強になりました。
DAY29 デザイン改善 営業の極意②
DAY29では、ECに特化した営業方法です。
コーポレートサイトに比べて、ECサイトを運営している企業はより売上げアップについて考えているはずです。
ECサイトというのは、常に改善をしていく必要があるのでかなり営業チャンスがあるなと思いました。
また、ECサイトは売れるデザインの型がある程度決まっているので、自分の中でテンプレートを持っておけるというのは強いなと思いました。
DAY30 これから成長し続けるためのマインド
上級編の最終日です。
一番驚いたのが、船越さんが昔はエンジニアだったということです！ｗ
やっぱり成長する人はガンガン新しいことにチャレンジしていますね。
継続 × 新しいことへのチャレンジは非常に大切だなと思います。
自分ができることを同じようにやっているだけではダメだなと改めて思いました。
自分に置き換えて考えてみました。
HTML / CSS で静的サイトが作れる
↓
WordPressで動的サイトが作れる（イマココ）
↓
WordPress案件のデザインまで担当
↓
Shopify案件を担当
↓
Web開発にシフト
ある程度できるようになったら、自分が今まで担当していた工程は別の人に流していくとかの仕組みを作っていければかなり良さそうだなと思いました。
まとめ
約4ヶ月かけてデイトラデザインコース完走しました。
学習前は、デザインへの抵抗がかなりあったんですが多少はなくなりましたね。
今回デザインを学んでよかったことをまとめておきました。
- カンタンなWebデザインができるようになった。
- Figmaの使い方を知ることができた。
- デザインに更に興味を持つことができた。
来月(2021年2月)からは、正社員としてデザインもやっていくことになるかなと思うので無事に終わらすことができて一安心です…。
今後もアンテナをはってデザインも勉強していこうと思います！
コメント