request: UnoCSSについて書いてほしい

[shinGangan]

概要

UnoCSSについて書いてほしい

詳細

UnoCSSの記事が確かに日本市場に出回ってない。勿体無い

備考欄

きっかけはこちらのツイートです。

https://x.com/ryoppippi/status/1815656280297476527

[kosuke222naito]

@shinGangan

某所でゆる募見てから気になって、勉強目的で記事を書き始めました

https://github.com/kosuke222naito/zenn-contents/blob/main/articles/what_is_unocss_all.md

現状公式ドキュメントの翻訳のような内容になっています。 使用経験が今のところないのですが、こちらアサインいただけないでしょうか？

よろしくお願いします！

[shinGangan]

@kosuke222naito

是非執筆お願いしたいです！ アサインしておきます～🙆‍♀️

[kosuke222naito]

ありがとうございます😭 よろしくお願いします

[shinGangan]

ご要望あればレビューしますのでお気軽にメンションください！

[shinGangan]

@kosuke222naito

ZennのPublicationに招待しました！ Zenn登録のメールアドレスに連絡来ていると思いますのでお手隙の際に確認お願いします〜

[kosuke222naito]

執筆ひと段落しました🙇‍♂️ https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss

だいぶ長くなってしまったので不安です 公開してしまって問題ないでしょうか？

確認お願いします！

[shinGangan]

@kosuke222naito

レビューはマストじゃないのでご自身の判断で公開してもらって大丈夫ですよー🙆‍♀️

不安ということなので、私の方でさくっと見ておきますね！

[kosuke222naito]

ありがとうございます、、、！

[shinGangan]

@kosuke222naito

全体的によく記載されており充実した内容だったなと思いました〜！ 以下はレビューコメントです！

[!NOTE] Qから始まるやつは疑問です。不要だったらスルーしてください。

Sから始まるやつは提案です。採用については一任です。

prefix無しのものはレビュー指摘です

全体通して

Q. 本記事の対象読者はどんな人で、読者にどんな情報を持って帰ってもらうのがゴールになりそうですか？

全体的によくまとまっており充実感がある文章だと思いました。 ただ、対象読者、想定読者が異なった場合、非常に文章が長いなとも感じました。

例えば、読者想定が

・UnoCSSをあまり知らない、少し気になっているから知ってみたい ・普段は他言語や他FWを触っており、流行ってそうだから読んでみるかで記事を読んだ人

などは最後まで読めずに離脱する恐れが高いです。もし私が他言語界隈の人だったら途中で離脱してると思います。 逆に、「UnoCSSについてさらに詳しく知りたいんだ」という読者からすると最後まで読みたいグッドなモノです。

また、「読者にどんな情報を持って帰ってもらうのがゴールになりそうですか？」という質問も想定読者と同様に重要となってくるものです。

例えば「UnoCSSをとにかく知ってほしい」というゴールであれば紹介編と詳細解説編の2本に分けた方がユーザーライク(この場合はユーザビリティかな？)かなと思います。 私が執筆者の場合は記事全体がfatになるのを避けるため、「連載します」と明示した上で記事を分割して読みやすさを向上させるかなと思います(所感)

そのため、「本記事の対象読者はどんな人で、読者にどんな情報を持って帰ってもらうのがゴールになりそうですか？」というのをご教示頂けると幸いです。 せっかく素晴らしいまとめ、素晴らしい記事が多くのユーザーから読まれないということを避けられたらいいなと思ってる次第です。

ドキュメント 項

UnoCSS 作者である Anthony Fu 氏のブログを読むことでより UnoCSS についてのより深い理解や、UnoCSS の背景知識を得ることできます。

この下のリンクは実際にUnoCSSについてのブログリンクの方が良いかと思います。 (私はリンク飛んでからUnoCSS記事をめっちゃ探してしまいました、、、)

S. ドキュメントの下に3行まとめなどのまとめ項を置くのはどうでしょうか？

記事がfatになる場合、ユーザーが途中で離脱する恐れが高まります。 そのため、先に簡単なまとめ (3行まとめみたいなやつ)を用意するのはいかがでしょうか。

途中離脱するユーザーにとって少しでもUnoCSSが有益であると早い段階で明示できると良いですね

S. 別の記事になりますがUnoCSS、Tailwind CSS、Panda CSSの比較記事などいかがでしょうか？

Tailwind CSSユーザーからすると「UnoCSSはTailwind CSSとどういうところが同じで、どういう点が異なるのか」が気になっていると思います。 そのため、実装的な詳細比較記事を切り出して1本執筆しても良いなと感じました。

合わせて、今後Tailwind CSSと並び台頭する恐れのあるPanda CSSも比較対象に入れると対象読者が広がって良いのではないかと考えています。 ( 余談：Panda CSSは以前実装してたので実装方法などについてはお気軽に相談ください〜🙆)

[kosuke222naito]

本当にありがとうございます！！

Q. 本記事の対象読者はどんな人で、読者にどんな情報を持って帰ってもらうのがゴールになりそうですか？

今回ちゃんとした目的は決めれていなかったのですが、公式ドキュメント(英語)を日本語に直す過程で勉強したいと個人的に思っていました。 私自身フロント側に明るくなく、想定読者が見えていませんでした。

一度想定読者について考えてみて、記事の分割をする方向でいきたいなと思っています。

ドキュメント 項

UnoCSS 作者である Anthony Fu 氏のブログを読むことでより UnoCSS についてのより深い理解や、UnoCSS の背景知識を得ることできます。

この下のリンクは実際にUnoCSSについてのブログリンクの方が良いかと思います。 (私はリンク飛んでからUnoCSS記事をめっちゃ探してしまいました、、、)

指摘ありがとうございます🙇‍♂️ UnoCSS の記事のリンクにしてしまうように直したいと思います。

S. ドキュメントの下に3行まとめなどのまとめ項を置くのはどうでしょうか？

ありがとうございます、まとめ項とか何も用意できてなかったです、、、 全体を見直してみて、長くなってしまった場合はまとめを記述したいと思います！！

S. 別の記事になりますがUnoCSS、Tailwind CSS、Panda CSSの比較記事などいかがでしょうか？

こちらもゆくゆくは書いてみたいです！ 今回 Tailwind CSS と Windi CSS の比較を記述できたのは、公式ドキュメントで記載があり、それを翻訳 & 整理したためです。 Panda CSS について言及するためにはどちらもより理解する必要がありそうです。 今回は難しそうなので、別 issue などにしていただけるとありがたいです🙇‍♂️

改めて、レビューありがとうございます！！ 雰囲気で記事を書きすぎていたのがわかりました、少し時間かかってしまうかもしれませんがよろしくお願いいたします。

[shinGangan]

@kosuke222naito

読者の話

私自身フロント側に明るくなく、想定読者が見えていませんでした。

一度想定読者について考えてみて、記事の分割をする方向でいきたいなと思っています。

ご自身がフロントに明るくないという点は非常に読者視点に立ちやすい利点かなと思ってます！ 「フロントを普段実施していない自分がもし読者だった場合、この記事は読みたいのか？どんな点が読み応えあり、どんな点が読みにくいのか？」という客観的視点に立てて、対象読者を想像しやすいです🙆

執筆者は書き手であると同時に読み手なので、読み手である自分が客観的に読みやすいか、興味を引くかどうかというのも1つの執筆指針になりやすいです(参考までに)

他CSSとの比較について

S. 別の記事になりますがUnoCSS、Tailwind CSS、Panda CSSの比較記事などいかがでしょうか？

こちらもゆくゆくは書いてみたいです！ 今回 Tailwind CSS と Windi CSS の比較を記述できたのは、公式ドキュメントで記載があり、それを翻訳 & 整理したためです。 Panda CSS について言及するためにはどちらもより理解する必要がありそうです。 今回は難しそうなので、別 issue などにしていただけるとありがたいです🙇‍♂️

本件は優先度低めなのでもし執筆モチベと執筆余裕が高まった際にご自身で起票頂けると助かります〜！ その際に、私をmention頂ければ引き続きレビューやります〜

先行優位性の観点から早めに出したほうが評価を全部拾いやすい vs 中途半端なものを出して埋もれることを避けたいだと思いますので、柔軟にいきましょう💪

ohter

改めて、レビューありがとうございます！！ 雰囲気で記事を書きすぎていたのがわかりました、少し時間かかってしまうかもしれませんがよろしくお願いいたします。

全然問題ないですよ〜🙆 最初の方は執筆のハードルあると思いますので、納得いくものをどんどん執筆して積み上げていきましょう💪 お力添えできる範囲で全然お手伝いしますので！

[kosuke222naito]

@shinGangan 時間空いてしまいました、、、

https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss

指摘いただいた事項をもとに、書き直しました！ 何かご意見あればいただきたいです🙇‍♂️

よろしくお願いします

[shinGangan]

@kosuke222naito

前回よりも読みやすかったです！各章のまとめを適宜挟んでいる点がグッドでした🙆 1点だけ質問です。

Q1. 上記スレッドでは記事を分割して連載するという話が出ていましたが、本記事は1本で完結する方針って感じで合ってますか？

本文構成を見る限りだと分割しないのかなーと感じたので、念のため質問しています！

[kosuke222naito]

@shinGangan ありがとうございます😭

分割について、 紹介編と詳細解説編 の2つのことを考えていました🙇‍♂️

[shinGangan]

@kosuke222naito

分割について、 紹介編と詳細解説編 の2つのことを考えていました🙇‍♂️

こちら承知ですー🙆 もう一本書き上がったら引き続きメンションください〜 メンション来たらレビューします。

イシューも分けてもらって大丈夫ですので、柔軟にやりやすいようにイシュー分割してください⭕️ (1記事1イシューくらいでいいと思ってる派です)

[kosuke222naito]

@shinGangan

わかりました！ 公開も2記事揃えた方がいいですよね？👀

[shinGangan]

公開も2記事揃えた方がいいですよね？👀

まとめてでもいいですし、2週連続で投稿して連載感を出すのもいいかなと思ってます。 こちらは一任しますー！お好みでお決めくださいませ

[shinGangan]

記事公開済み

https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss

[shinGangan]

@kosuke222naito

LGTM🎉