Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CyberAgent 2days Webフロント向け 開発型インターンシップ ONLINE 発表資料

E35bd9b771ae8ca2658385aefea0b442?s=47 togami2864
April 02, 2021
13

CyberAgent 2days Webフロント向け 開発型インターンシップ ONLINE 発表資料

E35bd9b771ae8ca2658385aefea0b442?s=128

togami2864

April 02, 2021
Tweet

Transcript

  1. 成果発表 togami2864

  2. 事前に決めていた挑戦 技術面 ・設計にターゲットユーザーやストーリーを織り込もう ・フロントエンドテストをかこう - Jest とtesting-library ・a11yを意識しよう - Eslint-plugin,

    react-spectrum
  3. 事前に決めていた挑戦 技術以外 ・何をしないか/切り捨てるかの判断 - “予測不可能”なことを予測して対処はできない => 開発中に判断してコントロールをしなければならない “どんなトラブルがあったとしても最後に最低要件を満たしている状態が保たれている” 参加前から特大フラグを立てていた。。。。

  4. 市場調査 Pinterestを用い、“EC design fashion”のキーワードで調査 ・主な共通点 - Topにカルーセルがある。 - Headerに検索・ログインなどへの導線がある -

    女性向けが圧倒的に多い ・各社どこで差異をつけてるか? - カラーパターン - 商品・写真の配置
  5. ターゲットの選定 ユーザー:20 - 30代前半の社会人の男女 ファッションへの興味: あまりこだわっておらず、むしろ安く・無難に済ませてきた。 ITリテラシー: 特段詳しいわけでは無いが、日用品をAmazonや楽天で購入する。 ブランド・着こなし・トレンドはわからない。でも、 デートやお出かけのための決めの1枚・1足・1アイテムがほしい。

  6. デザインモック

  7. 使用した技術 ・Front : Next.js ・style: styled-components ・CI/CD: AWS Amplify (app本体&

    storybook 双方とも) github-actions(new) ・テスト: jest storybook react-testing-library(new) ・その他新しいライブラリ: react-spectrum(new)
  8. 間に合わない🤬 小さいミスも重なる。。。。

  9. “後は任せた作戦”に変更!!

  10. ・最低要件と購入までのUIは確保 ・コードの拡張性・保守のしやすさを重視

  11. 切り捨てたとこ ・ログインとカートなどの機能 - なんでログインが当たり前になってるか考えた。 => 決済情報の登録・カート機能・郵送先の情報を保持 => 今回はFormを作ってむりやり対処(UX的にかなり悪い....) ・デザイン -

    むりぽよ...... レスポンシブもきつい
  12. None
  13. そこそこ上手く行ったこと ・ターゲットユーザーを決めたこと - どういう人に向けて作っているという感覚を常に持てた。 - (間に合わないのに)これあるといいなというアイデアは浮かんできて楽しかった。 ・おれおれatomicデザインの採用/ロジックとUIの分離 - Presentationalな部分にドメインロジックは組み込みたくない -

    変化・変更に強い作りに
  14. StoryBookによるコンポーネントカタログ

  15. だめだったこと ・見積もりの甘さ - デザイン考えたのだれだよ...... - 調査の情報やターゲットをUI/UXに落とし込むことにこだわりすぎて肥大化。 - もっとUIライブラリと仲良くしようと思った ・EC(作品)としての体の成立を優先するか自分の学習したいことを重視するか迷った。 -

    共倒れに・・・・ - ECとしてはかなり物足りない - テストを書きたかった....
  16. 得たこと ・開発しながら舵をにぎってコントロールすること - 不確定要素は起きるかもしれない・起きないかもしれない - わかっているつもりでも難しい..... ・ターゲットから決めて設計するのもおもしろい!!!