ワイヤーフレームエディター

独自の再利用可能なステンシルを作成する方法は次のとおりです。

1. 既存のステンシルを使用したり、独自の要素を描画したりして、必要なものを作成します (ちなみに、強力なベクター編集ツールがあります)。
2. カスタム ステンシルに含める要素をすべて選択します。
3. 右クリックして選択 資産 -> アセットに変換.

ライン ツールを使用すると、次のことができます。 – 線を引きます。

ショートカット: L 鍵.

直線を描くには、Shift キーを押しながら描画します。 次に、ツールが 15 度刻みでスナップして支援します。

長方形ツールを使用すると、... ドラムロール – 長方形を描くことができます。

ショートカット: R 鍵.

図形の縦横比を固定するには、Shift キーを押しながら描画します。

楕円ツールを使用すると、見栄えの良い楕円をプロジェクトに追加できます。

ショートカット: C 鍵.

図形の縦横比を固定するには、Shift キーを押しながら描画します。

ペン ツールを使用すると、あらゆる種類のポリラインとポリゴンを作成できます。

ショートカット: P 鍵.

ペンは、パス編集ツールでベジエ曲線を適用する前に、形状のクイック スケッチを作成する (制御点を追加する) のに役立ちます。 ポイントを追加しながらドラッグするだけで、コントロール ポイントを追加しながらベジエ曲線を追加することもできます。

既存のパスにポイントを追加するには、ペン ツールを選択し、パス上の任意の場所をクリックして別のポイントを追加します。

パスからポイントを削除するには、ペン ツールを選択し、削除する既存のポイントをクリックします。

ポリゴンを閉じるには、最後のポイントを最初のポイントの上に直接追加します。 マウス カーソルが変化し、ポリゴンが閉じられることを示します。

パス編集ツールを使用すると、ペン、鉛筆、またはその他のベクトル編集ツールを使用して作成された方法に関係なく、既存のパスを変更できます。

ショートカット: A 鍵.

パス編集ツールは、ポイントの移動やベジエ曲線の編集など、パスを調整するのに役立ちます。

1. 曲線のコントロール ポイントに変換するパス ポイントにマウスを置きます。
2. Alt キー (Mac の場合は Option キー) を押したまま、マウス カーソルを任意の方向に「引っ張り」、クリックしながら点から離します。
3. カーブ調整ハンドルが表示されます (図の細い線で結ばれた青い点)。 これらのハンドルを使用して、必要に応じて曲線を調整します。
4. コントロール ポイントを Alt キーを押しながらクリックすると、曲線を通常の角度の付いたコーナーに戻すこともできます。

鉛筆ツールを使用すると、フリーハンドの描画を作成できます。

ショートカット: Y 鍵.

手描きのスキルが十分にあることを確認してください:-) 鉛筆ツールを使用する場合は、Wacom ボードまたはその他の描画タブレットが便利です。

手のひらツールを使用して、デザイン サーフェイスをパンできます。 高レベルのズームが適用されており、物事を表示するために微妙なスクロール調整を行う必要がある場合に便利です。

ショートカット: H 鍵. または、スペース キーを押しながらマウスの左ボタンを使用して、手のひらツールを一時的にアクティブにすることもできます。 これは、別のツール (ペンなど) を使用していて、ペンを無効にせずにスクロールする必要がある場合に便利です。 スペース キーを放すと、ペンが再びアクティブなツールになります。

ツールボックスには、より一般的に使用されるベクター シェイプが多数含まれています。

これらの図形は、すべての種類のプロジェクトに表示されます (ツールボックス内の他のステンシルはプロジェクトの種類に固有です)。

すべてのベクター オブジェクトは、共通のプロパティ セット (ストローク ブラシ、ストローク幅、塗りつぶしブラシ (該当する場合)) でサポートされています。

これにより、デザインの残りの部分と一致するスタイルで形状をすばやく描画する柔軟性が得られます。

いくつかのアクティブなリンクのみをワイヤーフレームに追加することを選択する場合があります。 このような場合、閲覧者は、デザイン内のどの要素が実際にクリック可能であるかを知るのが難しい場合があります。 このため、共有モードまたはプレビュー モードでプロジェクトを表示するときに、いくつかの微妙なページ リンク インジケーターをオンまたはオフにする機能が含まれています。 これらの手がかりは、デザインのすべてのページに存在するクリック可能な要素を視覚的に示します。

デザイン モードで任意の要素にページ リンクを割り当てた場合、共有モードまたはプレビュー モードでプロジェクトを表示すると、対応するページ リンク インジケーターがその要素に表示されます。

ページ リンク インジケーターは、プレビュー モードまたは共有モードではデフォルトでオンになっていますが、ページの右上隅にある [リンク] トグルをクリックして簡単にオフにすることができます。

ページ間またはプロジェクト間で要素を簡単にコピーして貼り付けることができます。 同じワイヤーフレーム プロジェクト内でコピーして貼り付けたり、あるプロジェクトからコピーして、別のタブ、ウィンドウ、または別のブラウザーで開いている別のプロジェクトに貼り付けたりすることができます。

コピーするデザイン内の要素を選択し、キーボードで Ctrl+C (Mac では Cmd+C) キーの組み合わせを使用して、要素をクリップボードにコピーするだけです。

クリップボードにある要素を貼り付けるには、コピー先のプロジェクトのページを参照し、キーボードの Ctrl+V (Mac では Cmd+V) ボタンを押します。 それでおしまい！ 貼り付けた要素が新しい場所にコピーされます。

プロジェクトの共有を開始する方法:

1. 上部のナビゲーション バーで、[共有] ボタンをクリックします。
2. 「共有を開始」ボタンをクリックします。
3. 自動生成されたリンクを希望する相手に送信します。

プロジェクトの共有を停止するには、同じダイアログで [共有を停止] ボタンをクリックします。 共有を再開するまで、秘密のリンクは機能しなくなります。

プロジェクトのワークスペースの共有は、これまでになく簡単になりました。プロジェクト エディター内の [チーム] オプションをクリックするだけです。

誰かがプロジェクト ワークスペースをあなたと共有すると、プロジェクトにアクセスするためのリンクが記載されたメールが届きます。 NinjaMock アカウントをまだお持ちでない場合は、アカウントを作成するよう求められます。 これには数秒しかかかりません！

プロジェクトへのアクセスとともに、管理者、デザイナー、レビュー担当者などの特定の権限が与えられます。 これらの権限は、アカウント所有者によって付与されます。

すべてのプロジェクトのワークスペース (自分の、または自分と共有されているもの) に 1 か所 (マイ プロジェクト) からアクセスできます。 アカウントを切り替えてプロジェクトにアクセスします。

プロジェクトへのアクセスとは別に、フォルダーまたはアカウント レベルへのアクセスが許可される場合があります。 こうすることで、フォルダー内のすべてのプロジェクトまたはアカウント全体に対して同じ権限を持つことができます。

NinjaMock ワイヤーフレーム エディターは、個々のワイヤーフレームにコメントを残し、そのステータスを追跡するための直感的で使い慣れた方法を備えています。

コメントは、それらが残されたページに固有のものです。 ページが削除されると、対応するコメントが表示されなくなります。

コメントはリアルタイムで同期されるため、最新のコメントを取得するためにプロジェクトを再度開いたり更新したりする必要はありません!

新しいコメントは、デザイン サーフェイスの右側にある [コメント] ペインから追加するか、ワイヤフレームの任意の場所を右クリックして、ポップアップ メニューから [コメントの追加] を選択するだけで追加できます。

誰がコメントを残したり編集したりできるかについて、制限はありません。 プロジェクトを開いた人は誰でも、コメントを追加、編集、または削除することさえできます。

各コメントは、デザイン サーフェイス上の青い「吹き出し」アイコンで表されます。 ふきだし内には、固有のコメント番号が表示されます。

コメントがどのワイヤーフレーム要素を参照しているかを視聴者が理解できるように、バブルをデザイン サーフェイスの任意の場所に自由に移動できます。

吹き出しアイコンをダブルクリックして、コメントを表示または編集します。

コメントが解決されると、吹き出しアイコンがグレー表示になり、コメントは [コメント] ウィンドウのリストの一番下に移動します。 これにより、コメント リストの上部に表示されるアクティブな (未解決の) コメントに集中することができます。

プロジェクト全体に未解決のコメントがあるかどうかを確認するには、 全て コメントペインの上部にあるスイッチ。 この方法では、現在のページだけのコメントではなく、すべてのページのコメントが表示されます。

コメントの吹き出しアイコンをクリックすると、そのコメントが残されたページに直接移動します。 この吹き出しアイコンが画面の中央に配置されるように、スクロール位置も調整されます。

特定のページではなく、ワイヤーフレームまたはモックアップ プロジェクト全体のステータスを表示するには、プロジェクトの概要 Web ページを使用できます。 「概要」をクリックするとアクセスできます。

PDF へのエクスポートと紙への印刷は、今でもワイヤーフレームの重要な部分です。 多くのアイデア クリエイターは、ワイヤーフレームを印刷してオフィスの壁に貼ります。 インスピレーションのためにそれらを使用する人もいれば、グループとしてデザインについて議論し、壁にコメントを追加する人もいます.

NinjaMock ワイヤーフレーム エディターでは、ページ リンクとページ コメントを含むワイヤーフレームをエクスポートする機会を提供することで、このプラクティスをサポートしています。 このようにして、紙の上であっても、デザインの相互作用をナビゲートできます。

エクスポートしてコメントを含めることを選択すると、ワイヤフレーム ページの横にすべてのページ コメントが追加されます。

コメントには、NinjaMock のデザイン サーフェイスと同じ一意のコメント番号があります。

プロジェクトを HTML としてエクスポートすることもできます。 HTML としてエクスポートすると、ファイルをコンピューターにダウンロードしたり、独自の Web サーバーに追加したりして、アクセスと保存を簡単に行うことができます。 これは、プロジェクトをパートナーやクライアントと共有するのに便利です。

HTML プロトタイプは、たとえば、テキストを入力してチェックボックスをマークできるようにすることで、作品をプレビューする際によりインタラクティブなエクスペリエンスを提供します。

プロジェクトが大きくなり、ナビゲートが難しくなってきたら、ページをグループに分けるとよいでしょう。 たとえば、アプリケーション設計のそれぞれの領域ごとにグループ化できます。 例えば ログインページ、設定ページなど、またはその他の方法で。

ページ グループは、単に名前を付けた一連のページです (ページは一度に 1 つのグループにのみ属することができます)。 必要な数のグループを作成したり、グループ間でページを移動したり、グループ内でページを並べ替えたりできます。

ページ グループを作成するには、ペインの右上隅にある対応するアイコンをクリックして、ページ ペインを展開します。

コンピューター上のファイルについて少し考えてみてください。 ファイルが多すぎて探し物が見つからないときは、フォルダを作成してその中にファイルを移動するだけですよね？

NinjaMock で同じエクスペリエンスを再現しました。 プロジェクト フォルダを作成したり、さまざまなワイヤフレーム プロジェクトやモックアップ プロジェクトをフォルダに入れたり、フォルダを他のフォルダに移動したりできます。これは、作業を整理するための便利で使い慣れた方法です。

プロジェクト (またはフォルダー) をフォルダーに移動するには:

1. プロジェクト リストのアイテムを強調表示 (ホバー) します。
2. [移動...] テキスト リンクをクリックします。
3. 移動先のフォルダを選択し、[移動] ボタンをクリックして終了します。

ポップアップでフォルダを展開または折りたたむには、灰色のフォルダ アイコンをクリックします。