react-carousel-banner-ui

https://react-carousel-banner-ui.web.app

制作期間

2/15 ~ 2/21

Technology

• React
• Typescript
• styled-components

UI設計について

前提

カルーセルバナーのみのページではなく、ページの中の１つのUIとして機能するカルーセルバナーを想定しています。

• mobile
  • mobileユーザーはカルーセル移動はスワイプとの共通意識があるので、カルーセル移動はスワイプのみに

• tablet
  • tabletの場合指での操作が多いためバナーを下に移動
  • スワイプの共通意識もあるためprev-btn, next-btn非表示

• desktop

工夫したポイント

• マネーフォワードのreactプロジェクト参考に。
  • React Componentの実装ルールを決めてみた
    • スタイルの管理としてstyled-components
    • Functional Componentで実装する
    • export defaultを使用しない
  • https://github.com/moneyforward/cloud-react-ui
    • commitlint + husky
    • eslint(eslint-config-moneyforward) + prettier
    • fontawsome
• UXを意識
  • 指を乗せる or MouseDown時にカルーセルを一旦止める、また離す時にカルーセルを必ず戻るか進めるかにするとただ止めて見たかった場合も意図しない方向に行ってしまう可能性があるので、指の動きが画面幅の10分の1未満だった場合は現在のカルーセルから変わらないようにしています。
  • 無限カルーセルを綺麗に見せるための工夫 無限カルーセルの実装
• imgはdummyImgをurlでとってくる形だと実際の実装と異なるのでpublicの中のimgを使用