kazu22002の技術覚書

PHPer, Golang, AWS エンジニアの日々

canvasを利用したカードプレビューを作成してみた

card-design-preview.com

作ってみたかったものを作ってみたので、公開してみる。

カードデザインのサンプルを簡単にwebで試せたらいいな。と実際にできたデザインをwebで参考にしてもらえたらと思って考えていたシステムです。

現在は「簡単にwebで試せたらいいな」の部分を作ったものです。

デザインは決まりごとを守るだけで大まかに作れる

デザイナーの方がカードデザインを作成しているときに、よく言っていたことです。

カードデザインについても基本的な内容は同じため、企業ごとの依頼がある場合にテンプレートの内容を作成し提示している作業がはじめにあり、同じことばかりやるのが辛い。という話を聞いていました。

じゃあ、最初にイメージを持ってもらい、そこから細かい部分を直して提示するようにしてはどうか?と思っており、テンプレート版をみせれるサイトを作りたいと思っていた経緯を思い出し作りました。

やってみれば2,3日でできました。早めにやっておけばよかったなー

やったことと記録

  • netlifyで動作
  • domain取得
  • nuxtjsで作成
  • githubで管理

canvasで色々とやっているためchromeで動作確認しています。

その他ブラウザは未確認のため、動作していない場合は、適宜修正していこうと思います。

canvas cheat sheetを作りたい

意外と情報がないためhtml canvas自体が使い勝手が悪いのか活躍する場面がないのか、不安になりました。

作った内容からcheat sheetでも作りたいと思っています。

需要があるのかわからないけど、迷うことが多かったから記録のために作りたいですねー