Lean DiagramをWebで書きたい！ので10plateでテンプレート作った
あけましておめでとうございます。
新年早々、初詣もそこそこにサブプロジェクトとして開発中のプロダクトの要件定義やコンセプトメイキングをしていました。
Lean Startupのやり方を参考に進めていたところ、Problem/Solution Fitを達成するために使うLean Diagramというものを知りました。
このLean Diagramの図を作成する良さげなツールがなかったので、10madoさんが最近リリースした10plateを使ってLean Diagramのテンプレートを作ってみました。
Lean Diagramテンプレートの使い方
使い方は至って簡単で、Lean Diagramを開いて、以下のGIFのように右サイドバーのテキストエリアに入力するとLean Diagramの各項目にテキストが入力されます。以上。
10plateを使ってみた感想
1. シンプルで使いやすい
htmlとcssでbodyタグの中身のみ記載してあげることでデザインができあがります。
そこにテンプレート化したい箇所を{{ラベル名}}のように囲ってあげると上記GIFのように右サイドバーに入力欄が表示されます。
特に説明を見ずとも作ることができ、またドキュメントもしっかり用意されているので使いやすかったです。
作ろうと思ってからだいたい1時間で作成できました。
2. テンプレート化する際の表現力が豊富
テンプレート化する際のオプションが豊富に用意されており、デフォルト値を入力しておいたり、プルダウンの選択式にしたりとかゆいところに手が届いています。
APIもすでに用意されているので使い方は色々ありそうです。
詳細はドキュメントをご参照ください。
まとめ
表現力が豊富でAPIも用意されているので応用範囲の広いサービスだなという所感です。
こういうテンプレート作成サービスはキラーコンテンツ(キラーテンプレート)があるとどんどんテンプレートが増えていきそうなので、誰かバズるやつを作ってくれないかな〜って思ってます。
canvaやcacooは作図ツールなので、こういう人によって図が変わらないものを作ったり共有する場合には不向きです。
そのため、Lean Diagramなどのフレームワークには10plateを使った方が便利だと思いました。
今回作ったテンプレートは高さが伸びたときにデザインが少し崩れたり細部を表現できていなかったりするので、svgとcssでデザイン修正をしようと思います。
ソースコードは↓です。普段cssを書かないのでかなり適当です。そのあたり詳しい人レビューコメントとか書いていただけるとめっちゃうれしいです。
あとはリーンキャンバスのテンプレートなんかもあると便利そうなので作ろうと思います。
