Open

👶バックエンドエンジニアのデザインよちよち歩き

13

結論:やっと next.js + tailwindcss で進捗が出せる構成になった。ふりかえったら「なんでこんなに選定に苦労したんだ」と思うが、やってみないと分からなかった。

背景:バックエンドエンジニア。React/Flutter/TSなどFrontend界隈は、要素を限定してキャッチアップすれば動くものはつくれる。デザインはど素人。

データを可視化して提供したい個人開発サービスがあり、データの準備、JSON API、ソート・フィルタ機能の選定まではできた。だが、実際に「人に使ってもらえるまでのデザイン」が遠い。。

Material UIのようなフレームワークを学んだ方がいいのか、もうちょっとデザインの要素から足腰鍛えた方がいいのか。。それとも学ぼうとしているレイヤーそのものが違うのか。

「機能するUIに最短でたどりつく」という目標設定でググり続けて、時間が無為にすぎていった。

  1. 機能実装
  2. デザインの類似例を探す
  3. UXユーザーストーリーを文書で記述する

あたりで泥沼にはまる自分。

そんな中で、Next.js(これはまぁダイナミックな挙動はないのでこれで良いかなと)+ TailwindCSSが自分を救ってくれた。
https://tailwindcss.com/docs/utility-first この説明をぜひ読んでほしい。

HTML/CSSの基礎、という枯れた技術のアブストラクトを崩さないで、モダンなフロント開発ができるという安心感がある。

あとは、実際に機能を提供するコンポーネントと、CSSをつなげていけばいいと思う。

機能を提供する:https://material-app.bootlab.io/orders https://material-ui.com/components/data-grid/ あたり
あとは普通にReactの書き方まったく最近触っていなかったのでおさらい :) https://reactjs.org/tutorial/tutorial.html

https://react-super-responsive-table.netlify.app/ こんなのも気にはなっている。

UIとしては、同じようなUXを提供しようとしている既存サービスを「UIを眺めてUXに因数分解する作業」が大事。

https://www.producthunt.com/

Mobile first なリストビュー。tableではなく div / list を使って柔軟に組んだ方がいいのかな。

とにかく大事なのは、Call to Actionがしっかりしていること。「この場所で何をしてもらいたいか」がちゃんと伝わること。

https://tailwindui.com/components/marketing/sections/heroes

などを見て、勉強中。
小さな単位のコンポーネントからつくっていったが、おそらく大枠からせめていったほうがよかった気がする。

並行して、(おそらく 3rd-partyの)サイトもみて、使えそうなものがないか物色している。

https://tailwindcomponents.com/component/question-listing-item-card
当たり外れが大きくても、 tailwindCSSを学ぶという意味では役に立つところが嬉しい。

調べていること。
TailwindCSSで、幅をモバイルまで狭めたときに、何を出して何を出さないのかどうやって決めているのか。

今日は、Responsive / Breakpoint と、Flex/Gridの使い方を TailwindCSSで学んだ・思い出した。

Responsive / Breakpoint

<div class="w-10 md:w-20"></div> と書くと、
mobile first で、width 10 (1rem だったかな) で、mdの breakpoint (デフォルトだと640pxだったかな)で w-20が上書きされて適用される。

Flex/Grid

Gridは、現在のwidth/heightの中で一番大きなものをグリッドの幅・高さとし、それを当分で区切る形でGridが形成される(Heightに関してはまだ未確認)。

Container(そもそもの Max-Width)と併用して、比較的理解しやすいレイアウト設計。

Flexは、コンセプトを理解していることが重要。

providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

なので、例えば縦に二つの要素を均等に並べたい(でも、文字や画像がどれだけ幅・高さとるか未定)の場合は、Flexでやるとけっこう良い感じに端的に記述できるはず。

Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

これは知らなかった。メモメモ。

ref

ログインするとコメントできます