こんにちは！ProgateAdventCalender2017 9日目を担当します。デザイナーインターン生のミオです😉

この記事は「デザイナーになりたいけど何すればいいかわからない…」方たちに向けて記事を書きました！

私自身も、ちょうど1年前デザイナーになりたいけどどうすればいいかわからなかったです。同じ悩みを持つ方の役にちょっとでも立てたら嬉しいです。

採用面接でも使えるかもしれないオリジナルサイトの作り方を紹介します。本日はよろしくお願いします。

自己紹介

ミオです。煮卵作るのが得意です。

大学休学してにんじゃわんこの元で修行をしています。（休学理由はこちらのブログを読んでね！）

よくにんじゃわんこを作ったの？と聞かれるのですが生みの親はLeadUXDesignerのみっちーさんです！

Progateのデザイナーインターン研修をチラ見せ！

私が正式にインターン生として採用される前に2ヶ月ほどデザイン研修がありました。

その研修では、

🚩基礎的なデザインツールを取得　

🚩プログラミング（HTMLCSSJqueryRuby）の勉強をしました。

プログラミングの勉強は100%Progateのレッスンです。（1ヶ月ほどでにんじゃわんこが100レベル位上がりました。今は306レベルです💪）

そして最終的にインターン生として採用されるか決まる重要な課題が今日ご紹介するオリジナルサイト作成でした。

何もできなかった自分が、1.5ヶ月かけてPC一つで制作物を作れた！

研修を受ける前はプログラミングもデザインも未経験でした。

（Progateではゼロから育てていただいて本当に感謝しています…😭）

この最終課題でデザインから実装まで一通り経験したのですが、とってもいい勉強になりました。

オススメです！

実務にも生きているし、何よりプログラミングを使って自分がデザインしたサイトが動いている時の喜びは言葉にできない！！

最終課題が私の人生初の作品

私が最終課題で約1.5ヶ月かけて作成した作品がこちらです。
諸事情でモザイクをかけています。すいません。。

これは架空の和菓子ECサイトです。わがしzooというサイト名で、動物の形をしたわがしを紹介しています。

空・陸・河はそれぞれの動物の住んでいるところでカテゴリ分けしているという意味です。

HTML・CSS・jQueryで作成しています。

webにもモバイルにも対応してます。（レスポンシブ）

お気に入りボタンも動くしハンバーガーメニューも動くんだよ！！！

次から完成するまでの過程を紹介します！

サイトを短期間で作成できた秘訣

秘訣はズバリ以下の5つです。

🚩 短期集中でProgateレッスンを極めたので実装がスムーズにできた
🚩 デザインをしっかり固めた
🚩 周りの人にすぐ質問、フィードバックをもらえる環境だった
🚩 実務と同じ順序でやったので「デザイナーっぽい！」という気持ちでモチベーションが常に高い状態で保たれた
🚩 最後は気合い！！！

これさえ揃えば1.5ヶ月ほどでサイトが作れるはず…！

初心者の方でもサイトが一つ作れるようなるべく丁寧に話していきます。

勉強編:   実現可能な実装をするために最初はプログラミングの知識をつける

サイトの実装をする前にHTMLCSSの最低限知識はつけておくと◎です。
そうすることで自分ができる範囲のことや、もしかしてできるかも程度の仕様が想像できます。

デザインを考えるときに便利です。

私はこのサイトを作る前にProgateをやり込んでました。

サイトの見た目や動きを作るために役立ったコースを紹介します。
🐕   HTMLCSSの道場・実践編
🐕   jQuery全般

HTMLの道場実践編はかなり難しいです。

でもこれさえやれば一人でサイトは余裕で作れます。

もし判定がうまく通らない場合はProgateのお問い合わせ箱から質問してください！笑

jQueryのコースのおかげでハンバーガーメニューとお気に入りボタンの実装ができました。

デザイン編:  デザイナーっぽいやり方でデザインしたからモチベ上がった

デザインをしっかり固めることで実装がスムーズになります。

完成後の作品も一貫したものを作ることができます。

1.  オリジナルサイトのテーマを決める（自分の興味で決めてOK）
2.  情報設計を始める（ここでは割愛します。）
3.  紙ベースで情報の配置を決める。この時点でどんなサイトを作るか想像できると◎
4.  デザインツール（photoshop・sketch・XDなど）で落とし込む。
5.  この時カラーパレットを決めておくといいかも。色の決め方はこちらのサイトを参考にどうぞ。

私の和菓子サイトはデザインも実装もモバイルから始めました。

ECサイトだからモバイルから訪れる人が多いかなという理由です。

ここまでくるとデザインが固まり、残すは実装のみ！！

実装編: 汚いコードでもいいから書くんだ！！！

さあ実装をしましょう！
Progateはブラウザ上で環境が用意されていますが実際コードを書く時はローカルで書きます。（ローカル＝自分のPC上で）

ローカルでコードを描く時の私が使っているエディタを載せておきます。

(ファイルの作り方はドットインストールのHTMLコース一番最初をみるといいかも…）

ProgateのブログではSublimeText紹介してました。どっちでも大丈夫です。

初心者だから見るに堪えないコードを書いてしまうのは仕方ないですよね。

と言うか何が見るに堪えないコードなのかわからないのが初心者。

私が作った和菓子サイト、本当にコードがひどい、汚い。笑

私は本当に初心者だったので、
<div class =”usagisan”>~</div>
のようなかわいいクラス名をつけていました。これをProgateのみなさんが見ていると思うととっても恥ずかしいです。

本当は命名規則たるものがあり、命名規則通り書かなかったりインデント（字下げ）がめちゃ汚いとくそコードと言われてしまいます。

でも今は気にしないで！！気にしてたら作りきれないから！！
初心者は表面ができればいい、とにかく作りきらなくては！！

あ、ちなみにインデントはしたほうが自分のためなので最低限インデントは初心者でもしましょう。

実装編2: できれば誰かにコードレビューをしてもらう

コードがかけたら、周りのエンジニアさんやデザイナーさんに自分のコードのフィードバックをお願いしてみましょう！

実はいかにシンプルにコードをかけるかが実務では重要になってきます…。

この書き方省略していいんだ！とかもっといいクラス名があるのか！みたいな驚きがあります。周りに頼れる人がいたら是非！

フィードバックを求める時にgithubを使ってみるのもいいですね!

私はgithubを使いながらLeadUXデザイナーのみっちーさんに見ていただきました、本当にずっとお世話になっています 😎

まとめ: 人間頑張れば初心者でも2ヶ月くらいでサイト作れる

デザイナーになりたい！と思っても初心者で採用してくれるところは少ないのかなと思います。

ポートフォリオを作れと言われても「どうしよう…。」って感じですよね。(わたしは作ったけど採用されるレベルではなかった）

でも、Progateで勉強し見よう見まねで作ってみると案外形になりました。何より楽しかった！

お気に入りボタンが実装できた時は本当に嬉しかったのを覚えています。

みなさんも悩んでいたら実際に手を動かしてみてください！

Progateでもいいし、デザインツールでpinterest・dribbbleの作品などをトレースしてみてもいいし！

とにかく一つ何か作ることで自分の自信になります！

おまけ: 和菓子サイトの実装をどのレッスンで学んだかを紹介します。

私はProgateでしかプログラミングを勉強していないのでこのサイトはほぼProgateの知識で作っています。
どこのレッスンを参考にしたかリンクを貼っておきます！

1.  Topのカルーセルスライダー：bootstrapのレッスン

2.  headerのスクロール時の色変化：jqueryのどこかのれっすん…

3.  hover時のボタンの色が変わる

4. ハンバーガーメニューとお気に入りボタンの実装：このページの応用

5. モバイル対応

6.  ページ内リンク