UIデザイン – kenjisugimoto.com

バリュー・プロポジション・デザインオンライン版支援ツールの入手方法

バリュー・プロポジション・デザインの書籍の中に、オンライン版の支援ツールとしてビジネルモデルキャンバス、バリュー・プロポジションキャンバスが記載されているのですが、入手までの情報がわかりにくかったので記載しておきます。

公式サイトへアクセス
 https://www.strategyzer.com/canvas
Download Business Model Canvas または、Download Value Proposition Canvasをクリック
アカウント作成のフォームを入力
登録したメールアドレスにaccounts@strategyzer.comからアドレス確認メールが届いているので、メール文のconfirm your account.をクリック
ログインした後に、左メニューのResourcesをクリック
The Business Model Canvas、The Value Proposition CanvasのPDFをダウンロード

バリュー・プロポジション　キャンバス

他にもmiroやFigmaにテンプレートデータがあるので、そちらを活用する方がPDFよりも便利ですね。

Figma :

Value Proposition Canvas

Miro :

Business Model Canvas Template

Lean Canvas Template

[SVG]円グラフのアニメーションをするカウントダウンタイマーのサンプル

SVGで円グラフを描画し、動きはCSSアニメーションを利用しています。
カウントダウン部分はJSですね。

実装サンプル

See the Pen SVG Timer by sugimo (@sugimo) on CodePen.

コードのサンプルはcodepenから確認し、ご自由にお使いください。
カウントダウンする時間を変更したい時は、setTimeの値を変更してください。
ex:秒数で設定するので、1分なら60。3分なら180です。

illustratorCCでプラグインを使わず@2x,@3xのRetinaサイズなどを書き出す方法

Sketchだと画像UIパーツの解像度別（@2xや@3xなど）の書き出しがとても便利にできますよね。しかしSketchはモリサワなどの日本語フォントの対応状況を考えると、決してUIデザインにはillustratorは不要とまではいかないです。

でも、Sketchのスライス機能は便利。せめて解像度別で@2xや@3x用それぞれの画像UIパーツを別に作らずに、1個のベクターデータからそれぞれの解像度別サイズで書き出したいので試してみました。※illustrator CC 2015を使用しています

結論としては、プラグインを使わなくても「Web用に保存」からできます。

画面サイズウィンドウで「%指定を200」にすると@2xのサイズで書き出しができます。@3xの場合は300%ですね。