フロントエンドスキル0のデザイナーが2.5ヶ月でポートフォリオを制作してみた

Rabeeデザイナーのsinkaです！

なぜフロントの勉強しようと思ったか

• 案件を通して、フロントメンバーとのやり取りが増え、なるべくそのやり取りを減らす・スムーズにしたい
  • UXを優先しながら、実装を考慮して工数がかからないデザインを最初から提案できるようになりたい
• レスポンシブでどの程度デザインを変えても良いものか知りたい(実装側から考えて、PC,SPでデザインを変える必要が本当にあるのか)
• WEB・アプリでそれぞれ実装できることを知りたい...少し高度かも

どのくらい期間か

• 2020年11月後半から土曜のプログラミング勉強会に参加
• 2021年1月後半に4月までに自分のポートフォリオ制作すると目標を立てた

2.5ヶ月ほどでポートフォリオ制作

実際にやったこと

• Githubの基礎・構造を理解
• HTML & CSS の基礎の勉強
• ゲームでCSS理解
  • Flexbox Froggy マスター
  • flexboxdefense マスター
• 怒涛のmeltlineのキャッチアップ
• Zenn と Githubの連携
  • 今回、実際にZennをVScodeでマークダウンで書いて発表してます！
• WEBサイト、2つトレース
• 1hourトレース
  • 一斉にみんなでスタートして、1時間でどこまでトレースできるか

ここまでを1ヶ月程度で行い、あとは、実際に作りながら学んで行きました!

制作したポートフォリオサイト発表

• sinka_portfolio
  • レスポンシブ対応
  • hover時対応
  • 遷移対応
  • ベーシック認証 ... ユーザー名/パスワードは別途共有します
  • Herokuを使用して、世の中に公開
• Figma_designデータ

フロントのことを学んでみて思ったこと

先読み力

• 時系列で更新していきたいポートフォリオなので、いかに運用しやすいようにデザイン・実装ができるかどうか
  • 最初はひたすら書いていたコードも、eachを指定しておくと、表示/非表示でコンテンツの編集と追加、削除がかなり簡単になりました
  • デザインでいう、Componentがいかに汎用性が高く設定できているかと、デザインの編集のしやすさが変わることと似ているように感じました
  • デザインでも考慮漏れをやってしまうことがあるのですが、色々なケースを先読みしておくことが重要と感じました
  • レスポンシブという点で、SP・PCのどちらのデザインから着手するにも、もう一方も同時に考えながらデザインをすることが必要だと改めて思いました

余計なデザインをしない

• 実装をしてみて初めて、ただかっこいいからイケてるからという理由（世界観の優先度が高い場合を除く）で、意図のないデザインは本当にしないようにしようと改めて思いました。

これからやりたいいこと

• 今回は基本的にHTML＆CSSでのみ制作しました！CSSでできる範囲を多少はわかってきたので、工数に見合った実装依頼ができるように、実装の難易度をより理解していきたい
• デザイナーからの発信。エンジニアさんに向けに、Figmaの使い方等の共有会