Balsamiq モックアップのインポート
Sketch と Balsamiq の統合
概要
Indigo Studio では Balsamiq® Mockups BMML ファイルのインポートが可能です。Balsamiq の既存のデザインを使用して Balsamiq Mockups の既存ライブラリを使用できます。
Balsamiq は静的なワイヤーフレームおよびその間のナビゲーションを作成します。Indigo Studio も同じ機能がありますが、機能が拡張されています。Balsamiq のモックアップを再利用し、Indigo Studio でインタラクションを追加できます。
Balsamiq Mockups のインポート
Indigo Studio は Balsamiq Mockups のコンテンツをインポートする 2 つの方法を提供します。
- Balsamiq の .bmml ファイルを開く
- Balsamiq のコンテンツをコピーして Indigo Studio に貼り付ける
Balsamiq から .bmml ファイルを取得するには、[プロジェクト] メニューの [BMMLs ZIP にプロジェクトをエクスポート] オプションを使用し、展開されたファイルを Indigo Studio で開きます。Balsamiq 2.2.24 または以前のバージョンを使用する場合、この手順は必要ありません。
Balsamiq の web バージョンを使用する場合、「Mockup」メニューの「Export Mockup」オプションを使用、または Ctrl + E を押してコンテンツをクリップボードにコピーします。
インポート処理
変換処理の目的は、Balsamiq Mockup と同じスクリーンを Indigo Studio で作成することです。ツールが異なるためスクリーンを Balsamiq ファイルに基づいて作成する場合に以下の制限があります。
- Balsamiq は Indigo Studio に比べよりスケッチ スタイルであるため、インポート後にスタイルがが多少異なることがあります。
- Indigo Studio にインポートできない Balsamiq コントロールがいくつかあります。
- 特定のコントロールが別のプロパティをサポートするため結果が異なります。
- Balsamiq ファイルからインポートされないプロパティがあります。
Indigo Studio にインポートされない Balsamiq プロパティ
このプロパティはインポートでサポートされません。
- テキスト フィールドのマークアップ コンテンツ: Balsamiq には簡易マークアップ言語があります。これを使用してテキスト フィールドのテキストを書きます。Indigo Studio がその言語をサポートしないため、変換でマークアップが解除されます。
- ページ間のリンク: Balsamiq はページの間のリンクを指定する方法を提供します。これらは変換できません。
- Balsamiq のフォントは Indigo Studio に存在しません。変換されたモックアップはデフォルトの Indigo フォントを使用します。
- いくつかの Balsamiq コントロールに無効なスタイル設定があります。このスタイルはインポートされません。
- GIF 形式の画像はインポートできません。
Indigo Studio にインポートされない Balsamiq コントロール
以下のコントロールはインポートできません。Indigo Studio で境界線が赤い長方形として表示されます。
- 垂直スライダー
- IPhone デバイス
- IPhone の日付ピッカー
- IPhone のメニュー
- IPhone のキーボード
- コンテキスト メニュー
- 数字のカウンター
- OnOff ボタン
- タグ クラウド
- スクロールバー
- スプリッター
Indigo Studio にインポートされる変更付きの Balsamiq コントロール
以下は変換可能なコントロールの制限事項です。
| コントロール | 制限事項 |
|---|---|
| Arrow | Indigo Studio は曲線付きの矢印または 2 つのポイントを持つ矢印をサポートしません。その矢印は通常の矢印および単一のポイントを持つ矢印に変換されます。 |
| Callout | Indigo Studio のコールアウトは丸みのある図形です。Balsamiq の長方形図形の外観と異なります。 |
| Checkbox | Indigo Studio は、チェックボックスに Icon の設定および Underline のフォント スタイルの設定はできません。 |
| Icon | Balsamiq の Icon が同じような Indigo Studio のアイコンにマップされますが、デザインが多少異なることがあります。 |
| Image | Indigo Studio は画像の URL をサポートしません。画像の Sketchy スタイル設定を作成できません。 |
| ListBox | Indigo Studio の ListBox は行の代替配色およびヘッダー行をサポートしません。 |
| Button | Indigo Studio の Button または PointyButton でアイコンをサポートしません。 |
| RadioButton | Indigo Studio の RadioButton にアイコンまたは下線フォント スタイルを追加できません。 |
| Rectangle | Indigo の Rectangle で破線境界線をサポートしません。 |
| Tab | Indigo Studio のタブ内のテキストの配置、タブの境界線、スクロールバー、および背景色は設定できません。 |
| TreePane | Indigo の TreePane の境界線を解除できません。 |
| Window | Window のアイコンを変換できません。 |
| Grid/Table | Indigo Studio は行でテキストの複数行をサポートしません。列のサイズが正しく変換されません。 |
| Coverflow | Coverflow の画像を含まずにインポートされます。 |
| Label | 回転されたテキストの回転が解除されます。 |
このコントロールは Indigo Studio に存在しませんが、既存のコントロールを使用して正しく変換されます。
- ButtonBar
- Breadcrumbs
- CurlyLines
- Checkbox Groups
- Color Picker
- Fieldset
- Formatting Toolbar
- Geometric Shape – 複数の図形が定義されています。その他の図形は Indigo Studio の Custom Shape コントロールを使用して描画できます。
- LinkBar
- MenuBar
- PlayBack
- RedX
- ScratchOut
- Tooltip
- Accordion