Affinity Publisher | プロトタイピング ①

Affinity PublisheをWebサイトのカンプを作るプロトタイピングツールとして使ってみました！。
手順を説明していきます。

操作手順

1. 今回作るもの

ポートフォリオサイトのデザインカンプとプロトタイプを作ります。ページ構成は、トップページとFAQページの合計２ページになります。

▼デザインカンプ

▼プレゼン用プロトタイプ

▼プロトタイプを使って作ったサイト

2. 事前に用意しておくもの

任意のフォルダを作り、ポートフォリオに使う画像一式を入れておきます。

3. トップページのワイヤーフレーム作成

AffinityPublisherを起動し、W1920px H4080pxの新規ドキュメントを作成します。

今回作るワイヤーフレームは、W1920px、Hはどの端末で見ても画面の高さになるようにします。ワイヤーフレームでマルチの高さを表現するのは難しいため、ここではH1020pxとします。
コンテンツはトップ、サービス、ワークス、問い合わせの4つになりますので、W1920px x H1020pxを縦に4つ並べます。

左のパネルから「マスターページ」を開き、「マスター追加」でマスターページを新規作成し、上記レイアウトのワイヤーフレームを作っていきます。

ワイヤーフレームに配置する図形は「長方形ツール」と「楕円ツール」を用います。

4. フレームの配置

画面の左上の座標をX0、Y0として、フレームを配置していきます。

フレームとフレームの間の距離は、フレームの辺の座標を測ることで設定します。「変形ツール」を使いますので、画面に「変形ツール」が表示されていない場合は、上部メニューの「ウィンドウ」から「変形ツール」を選択して表示しておいてください。

ナビゲーションから260px下にプロフ画像用の正円を配置する場合、まず、ヘッダーの底辺の座標を求めます。

ナビゲーションの底辺の座標は、「変形ツール」の正方形の底辺の中点を選択するとわかります。
・X　960px
・Y　70px

このY座標に260ox足した座標が正円の頂点になります。

正円の頂点の座標は以下になります。

・X　960px
・Y　330px

同様に他のフレームも設置し、ワイヤーフレームを完成させます。

5. FAQページのワイヤーフレーム作成

トップページのワイヤフレームができたので、次はFAQページのワイヤーフレームを作っていきます。

トップページのワイヤーフレームのある「マスターA」を複製して「マスターB」を作ります。

トップページとFAQページの共通部分であるコンテンツ幅、ヘッダー、フッターはそのまま使い、残りのフレームは削除します。高さはFAQで必要な長さに調整します。

6. デザインカンプの作成

ワイヤーフレームの作成が終わったので、いよいよデザインカンプの作り込みに入ります。
左のパネルから「ページ」を選択し、「マスターA」を反映したページを新規作成します。

マスターは、ページ作成時に表示される「ページを追加」画面で選択することができます。

トップページのナビゲーションとキービジュアルのコンテンツを作っていきます。フレームに収まるように作るため、レイヤーの順番を変えてマスターレイヤーを一番上に移動し、ロックしておきます。

7. ベクター画像の編集

キービジュアルとして女性の画像を配置します。
女性の画像はベクター画像で、一旦AffinityDesignerで読み込んで保存し、その後このafdesignファイルをPublisherに配置します。

AffinityPublisherでは、Affinity Designerのafdesignファイルを編集することができます。

まず、円でマスキングされているprofile.afdesign（女性の画像）のレイヤーを円の上に移動させ、マスキングを解除します。profile.afdesignのレイヤーを選択した状態でダブルクリックします。

タブが＜埋め込み＞になっていることを確認し、パスを選択して編集を行います。

頭の上の検索バーは不要なので削除し、絵の位置を現在より少し中央に移動させます。

画像の編集が終わったら、＜埋め込み＞タブを閉じます。

画面は元のPublisherタブに戻り、profile.afdesignが編集されていることが確認できます。

profile.afdesignの位置も元に戻します。

この続きのステップ