ワークフロー

GarminウォッチのスクリーンショットモックアップをConnect IQアプリ向けに作成する方法

Garminウォッチの生のスクリーンショットを、Connect IQアプリ、ウォッチフェイス、プロダクトページ、ローンチ投稿向けの洗練されたデバイスフレーム付きモックアップに変換する実践的なワークフロー。

JiaKe Garminウォッチスクリーンショットモックアップジェネレーター:インポートしたGarminスクリーンショット、ウォッチフレームプレビュー、バッチPNGエクスポートコントロールを表示
完全なJiaKeワークフロー:インポートしたGarmin BMPスクリーンショット、フレーム付きウォッチプレビュー、エクスポート設定、バッチPNG出力。

生のGarminスクリーンショットはデバッグには便利ですが、プロダクトページにそのまま使える状態にはほとんどなりません。画像には通常、デバイスフレーム、クリーンな背景、一貫したスペーシング、そしてストア掲載、ウェブサイト、ローンチ投稿で機能するエクスポートサイズといったコンテキストが必要です。

時間がかかるのはスクリーンショットを撮ることだけではありません。本当の手間は、BMPファイルがMacに転送された後に始まります。ファイルを見つけ、デザインツールに移動し、適切なフレームを探し、画面の形に切り抜き、レイヤーを整列させ、最終画像を手動でエクスポートする。この一連の作業です。

ここで、専用のGarminウォッチスクリーンショットモックアップジェネレーターが役立ちます。リリースのたびにデザインツールで同じフレームを再構築する代わりに、転送、プレビュー、フレーミング、プリセット、エクスポートの各ステップを1つの反復可能なワークフローにまとめられます。

手動の方法には、一見した以上に多くの手間が潜んでいます

従来のGarminスクリーンショットワークフローは、通常USBケーブルから始まります。ウォッチをコンピューターに接続し、Android File Transferを開き、GARMIN\ScreenShotにたどり着くまでフォルダーを掘り下げ、BMPキャプチャを選択し、ローカルフォルダーにドラッグします。

これは最初の段階にすぎません。エクスポート後も、スクリーンショットはまだ使いやすいプロダクト画像になる必要があります。それらをFigma、Sketch、Photoshopなどのデザインツールにドラッグし、適切なデバイスフレームを探し、そのフレームファイルを調整し、スクリーンショットを丸型または角型の画面形状に切り抜き、正しいレイヤーの下に配置し、整列させ、完成したアセットをエクスポートします。

  • USB接続とファイル転送は、デザイン作業が始まる前に行われます。
  • スクリーンショットフォルダーはGARMIN\ScreenShotの下にあるため、忘れがちです。
  • デザインツールでの作業は、画面ごと、リリースサイズごとに繰り返されます。
  • 手動で作業すると、わずかな位置ずれ、トリミング、レイヤー順序のミスがよく発生します。

実際のスクリーンショットを使用し、繰り返しの処理を排除する

可能な限り、Garminデバイスからの実際の画面を使用してください。実際のキャプチャは、再現されたモックアップでは見落としがちな小さなレイアウトの詳細(ステータスアイコン、フォントの太さ、エッジのスペーシング、コントラスト、データフィールドやウォッチフェイスがデバイス上で実際にどのように表示されるか)を保持します。

より良いワークフローは、それらの画面を再描画することではありません。実際のBMPキャプチャを保持し、インポート、フレーミング、トリミング、整列、スタイル選択、PNGエクスポートに関する繰り返しの処理を排除することです。

  • フレーム内に配置されるまで、スクリーンショットは変更しないでください。
  • 1つのリリースでは、すべてのスクリーンショットに同じフレームスタイルを使用してください。
  • ストアページ、ドキュメント、ソーシャル投稿用に、一貫したPNGサイズでエクスポートしてください。
  • 新しいスクリーンショットごとに同じフレーム設定を再構築するのは避けてください。

3ステップのJiaKeワークフロー

JiaKeは、ワークフローのGarmin固有の部分に焦点を当てています。まず、ケーブルでウォッチをMacに接続します。次に、JiaKeがウォッチのスクリーンショットを自動的にローカルディレクトリにコピーします。3番目に、スクリーンショットを選択し、希望するウォッチフレームに配置し、プリセットスタイルから選択し、最終画像をエクスポートします。

手動の方法と比較すると、コストのかかるステップ(フォルダーを探し回る、BMPファイルをドラッグする、フレームアセットを探す、画面形状を切り抜く、レイヤー順序を調整する、目視でスクリーンショットを整列させる、エクスポートレイアウトを再構築する)がなくなります。

  • ステップ1:Garminウォッチをコンピューターに接続します。
  • ステップ2:アプリがウォッチからローカルフォルダーにスクリーンショットをコピーします。
  • ステップ3:画像、フレーム、プリセットスタイルを選択し、エクスポートします。

時間の節約が重要な理由

1つの画像で数分節約しても、リリース全体を準備するとなると小さく感じるかもしれません。Connect IQアプリの掲載、ウェブサイトのセクション、サポート記事、ローンチ投稿では、同じスクリーンショットの複数のバージョンが必要になることがよくあります。

すべての画像で手動のフレーム設定、トリミング作業、整列、レイヤー順序付け、繰り返しのエクスポートチェックを回避できれば、節約できる時間は画像1枚あたり数分から、1つのアセットセット全体で数十分にまで拡大します。時間は実際の制作コストであり、このワークフローを自動化することで、公開のたびにそのコストを削減できます。

エクスポートチェックリスト

公開する前に、実際にユーザーが目にするサイズで画像を確認してください。デスクトップの全幅で見栄えのするスクリーンショットでも、モバイルアプリストアの掲載やソーシャルプレビューでは情報が詰まりすぎている可能性があります。

エクスポートする各モックアップについて、以下のチェックリストを使用してください。

  • スクリーンショットの内容がサムネイルサイズでも読み取れること。
  • デバイスフレームが重要な画面コンテンツを切り取っていないこと。
  • 背景がプロダクトを引き立て、競合していないこと。
  • エクスポートファイル名が画面や機能を明確に説明していること。
  • 最終的なPNGがストア、ドキュメント、ローンチ投稿ですぐに使用できること。

FAQ

JiaKeとは何ですか?

JiaKeは、生のGarminウォッチスクリーンショットを、プロダクトページ、Connect IQ掲載、ドキュメント、ローンチ投稿用のフレーム付きPNG画像に変換するmacOSアプリです。

GarminスクリーンショットのモックアップにPhotoshopやFigmaは必要ですか?

デザインツールは1回限りの画像には使えますが、Garminスクリーンショットに繰り返しフレームを適用し、同じレイアウトでエクスポートする場合は、専用のワークフローの方が高速です。

JiaKeをウォッチフェイスやConnect IQアプリに使用できますか?

はい。JiaKeは、アプリ、データフィールド、ウィジェット、ウォッチフェイスからのGarminスクリーンショット向けに設計されています。

公式リファレンス