フェイスの作成手順
以下の内容を参考しなからてフェイスエディターを使用し、あなただけのフェイスを作りましょう。
フェイスエディターでフェイスを作成する方法は、以下二つあります。
1. オリジナルキャラクターから修正
2. 新規作成でフェイスを好きな方で作成
2.の操作方法は1.より手間がかかりますが、自由にフェイスを作成できます。以下は2.の操作方法について紹介します。
オリジナルキャラクターのご紹介及び操作方法のご説明
ここでは、以下の内容について説明します。
- オリジナルキャラクター紹介
- デフォルト素材をダウンロード
- 各部位の図面（UV）の説明
💪 オリジナルキャラクター紹介
フェイスエディターは、NUWAのオリジナルキャラクター（ケビー、三毛猫、ハスキー）を提供します。ユーザーはオリジナルキャラクターを参考するだけではなく、素材をダウンロードして修正することも可能です。
オリジナルキャラクターのフェイスの構成とスタイルはそれぞれ特徴があるため、オリジナルの素材を使って、よりかわいいキャラクターを作成しましょう。
以下はキャラクターの特徴について説明します。
ケビー｜いつも元気で話し好き、愛らしい性格！
ケビーロボットのデフォルトフェイスはケビーです。かわいくてシンプルでありながら、ハイテク感も満載であり、表情のバリエーションも豊富です。フェイスを編集するには、カラーブロックまた図形などシンプルのデザインで調整するのがおすすめです。
⚠️️複雑なデザインはおすすめしません。
三毛猫｜完璧な可愛いねこちゃん。性格はとても可愛らしい！
三毛猫はミックス猫です。丸くて大きいな目があり、ふわふわの体で超かわいい！
三毛猫の顔の編集は、複雑なデザインにも違和感がなく、色んな表情を作成できます。
⚠️️目の輪周りにデザインを追加することがおすすめしません
ハスキー｜一見冷たそうに見えるけど実は超天然！
ハスキーは三毛猫と違い、犬のハスキーです。可憐な目で顔がふわふわ！色違いの瞳もとても魅力的！豊富な顔のデザインにおすすめします。
⚠️️目、鼻、口などの位置はケビーと三毛猫より少し低く、まぶたは斜めになっています
NUWAのオリジナルキャラクターの紹介は以上となります。続いては、オリジナルキャラクターの素材をダウンロードし、世界唯一のフェイスを作りましょう！
📔 デフォルト素材をダウンロード
初めてフェイスエディターを使用する、またはNUWAが提供のデフォルト素材をお持ちでない場合は、NUWA アカウント ＞ マイツール ＞ フェイスエディター の画面左側の「デフォルト素材」をクリックし、デフォルト素材をダウンロードしてください。
デフォルト素材 にアクセスし、「すべてをダウンロード」をクリックし、すべてのデフォルト素材を入手するか、各キャラクターの右下隅の「入手」をクリックし、デフォルト素材をダウンロードしてください。
デフォルト素材をダウンロードすると、「OriginalSkin_Materials」圧縮ファイルに三つのキャラクターのフォルダーがあります。
各フォルダーに以下のファイルが入っています。
- 各部位のレイアウト参考図（0_Align_Ref）
- 図面のグリッド線 ×1（0_CleanGrid）
- 表情レビュー ×1（0_Illustrator_Ref）
- キャラクター部位の図面 ×4（UV_F1、UV_M1、UV_M2、UV_VFX01）
✨ 各部位の図面（UV）の説明
キャラクターのフェイスは、以下の各部位の図面（UV）で作成されます。ユーザーが選択した図面を結合すると、フェイスを作成できます。各キャラクターは４つずつの図面ファイルが含まれます。
- UV_F1
- UV_M1
- UV_M2
- UV_VFX01
続いては、三毛猫のフェイスで各図面について説明します。
⚠️️ キャラクターにより一部の図面を使わない場合があります。詳しくはキャラクターの参考図をご確認ください
⚠️️ 図面の埋め込み画像とフィールドの調整、または位置の変更はできません
UV_F1（顔）
．Hair：髪の毛
．Snot：鼻水
．Nose：鼻
．Facial Features：フェイスデザイン
．Cheek：頬
．Face：顔型
．Eyebrow：眉毛
．Eye Closed：瞬き
．Eye：目玉
．Eye pupil：瞳
．Eye pupil – wide open：瞳（びっくりする時）
UV_M1（口型 1）
一つの口型は四つの図面で作成されます。以下のイメージのように、左から右に口を閉じる状態から口を開ける状態まで表示されます。
．Talking 1 – Normal：会話 1（通常）
．Talking 2 – Other：会話 2（その他）
．Talking – Happy：口型（機嫌が良い）
．Talking – Displeased：口型（機嫌が悪い）
⚠ 会話 1（通常）と会話 2（その他）に同じ内容を入力してください
UV_M2（口型 2）
．Talking – Angry：口型（怒り）
．Talking – Uncomfortable：口型（具合が悪い）
．Talking – Unplatable：口型（美味しくない）
．Talking – Excited：口型（びっくり）
👉 使わない図面がある際に、右の参考図のように「🚫」が表示されます
⚠️️ 図面が「🚫」の場合は、内容を入力しても反映されません
UV_VFX01（エフェクト）
．Loved ①：好き（目、左右分別なし）
．Sad_A：悲しみ（目）
．Sad_B：悲しみ（真ん中）
．Angry_A：怒り（真ん中）
．Angry_B：怒り（左上隅）
．Angry_C：怒り（右下隅）
．Sick_A：具合が悪い（真ん中）
．Sick_B：具合が悪い（頬）
．Loved ②：好き（真ん中、ケビーと三毛猫のみ）
．Scared：怖がる（真ん中、ハスキーのみ）
．Blushing：照れる（真ん中）
．EyeLid：まぶた（拡大されますので、顔と同じ色にするのがおすすめ）
．Background：背景（拡大されますので、単色にするのがおすすめ）
#️⃣ 図面（UV）フィールドのファイル（0_Align_Ref）
図面（UV）フィールド「0_Align_Ref」を使用してフェイスを作成すると、各部位がロボット上での表示範囲を確認できます。（.ai、.svg、.psd、.pdf ファイルを提供）
⚠ 各部位の図面（UV）フィールドのレイアウトは概ねの位置であり、実際の表示位置はロボット上で確認する必要があります。
🔲 図面のグリッド線（0_CleanGrid）
グリッド線フォルダーには、黒いグリッド線と部位の名称の記載があるファイルが入っています。
グリッド線と部位の名称を参考すると、作成された部位のオブジェクトを該当フィールドに正しく配置することができます。
フェイスの作成方法
フェイスの作成は以下二つの方法があります。
- デフォルト素材で編集
- イラスト編集ソフトウェアでデザイン
ここでは、2.について詳しく説明します。
方法 1｜デフォルト素材で編集
方法 2｜イラスト編集ソフトウェアを使用
イラスト編集ソフトウェアでフェイスと部位を描いてから、フィールド内に配置します。
この方法は手間がかかるが、自由にお好きなフェイスを作成できます。
📔 イラスト編集ソフトウェア｜必要な機能
フェイスを作成するには、以下の機能があるイラスト編集ソフトウェアを使用することがおすすめです。また、各部位（顔、目、鼻、口、表情など）をぞれぞれ作成してください。
- レイヤー追加機能
- クリッピングマスク機能
- 背景透過画像エクスポート機能
eg. 上記の機能があるイラスト編集ソフトウェア：Adobe Illustrator、Adobe XD、Sketch など
⚠ Photoshopなど画像補正ソフトウェアでの使用はおすすめしません
📔 イラスト編集豆知識
📔 レイヤーとは？
レイヤー（Layer）は、オブジェクトの乗った透明なシートを何層にも重ねて一つのデザインを作ります。 上のレイヤーから順番に表示されていて、レイヤーを分けることで複雑なデザインでも管理・編集しやすくなります。
イラスト編集を操作しやすくために、それぞれ編集、保存する必要があるオブジェクトを各レイヤーで作業することがおすすめです。
すべてのオブジェクトを同じレイヤーで編集すると、オブジェクトを誤って消したり、不要なオブジェクトをエクスポートしてしまったりする可能性があります。
例えば、フィールド、グリッド線、フェイスをそれぞれのレイヤーで作業すると、必要なオブジェクト（フェイス）のレイヤーのみ保存、エクスポートすることができます。
📔 クリッピングマスクとは？
クリッピングマスク（Creat Clipping Mask / Mask）は、レイヤーをグループ化した画像や図形などのオブジェクトを好きな形に切り抜いたように見せることができる機能です。この機能は、プロフィール写真の作成によく運用されます。
例えば、三毛猫のフェイスの画像で円形のプロフィール写真を作成するには、円形のマスクを三毛猫のフェイスの上に配置すると、円形と重複する画像のみが表示領域になります。
クリッピングマスクは、フェイスを作成する段階で画像またはその一部を表示・非表示させ、画像の表示領域を決めることができます。（この機能は必須ではありませんが、よりきれいな画像を作成するにおすすめです）
p.s. クリッピングマスクの使用方法は、ご使用のソフトウェアにより異なります。使用する前に使い方をご確認ください
📔 画像が背景透過処理が必要な理由は？
背景透過のない画像で作成されたフェイスをロボットに送信すると、フェイス画面に反映させたい図形以外のオブジェクトや背景もすべて反映されたり、表示させたいオブジェクトが隠されたりするため、必ず背景透過のPNGファイルを使用してください。
フェイスの作成
以下の手順に従い、フェイスを作成してください。
👉 ここでは、三毛猫の素材で説明します
Step 1：フェイスをデザイン
イラスト編集ソフトウェアを開き、ワークスペースのサイズを1024 × 567px に設定してから作業してください。
すべてのデザインが完了すると以下のようになります。
📔各部位が属するレイヤーの順番は以下となります。
Nose > Mouth > Eyebrow > Hair > Facial > Cheek > Eyelid > Pupil > Eye > Face > Background
（旧バージョンのデフォルト素材を使う場合は、順番が以下となります。
noseA > mouthA_01 > eye_RefA > hairA > Stripe > cheek > eyelid > pupilA > eyeball > faceA > background）
それでは、以下Step2からフェイスの作成について順番で説明します。
Step 2：グループ化したオブジェクトを分解
※お好きなオリジナルキャラクターのデフォルト素材をダウンロードしてから操作してください。素材のダウンロードについては「オリジナルキャラクター及び操作方法の説明 ＞ オリジナルキャラクター」よりご確認ください
作成されたフェイスを図面フィールドの「Face_Position Ref」と中央揃えにすると、以下のようになります。
続いては、以下の手順に従い操作してください。
- グループ化したフェイスを分解します
- 透明フィールドの名称を確認し、該当する部位のオブジェクトとグループ化するか、クリッピングマスクするなど編集をしてください
- 例：顔のオブジェクトをFaceAのフィールドに配置し、鼻のオブジェクトををnoseAのフィールドに入れます。また、髭のオブジェクトは、それぞれをcheek_R（右）とcheek_L（左）配置します。
以下の画像をご参考ください。
⚠⚠⚠ 注意 ⚠⚠⚠
⛔ オブジェクトは必ずフィールドの枠内に入るよう調整してください
⚠️ フィールドの枠線は概ねの位置であり、実際の表示範囲は、フェイス画像をロボットに送信してからご確認ください
Step 3：透明フィールドとグループ化したオブジェクトを色付きのフィールドに配置（図面を作成）
透明フィールドとグループ化したオブジェクトをそれぞれ色付きのフィールドに配置します。配置が完了すると、フェイス上で各部位のオブジェクトの概ねの位置は以下のようになります。（画像の三毛猫のように、顔の部位がそれぞれの位置に配置されます）
このステップが完了すると以下のようになります。
すべての部位のオブジェクトをフィールドに配置されたら、色付きのフィールドの色を外すと、フェイスの作成が完了します。
※使用したいデフォルト素材のオブジェクトがある場合でも、色付きのフィールドの色を外してから編集してください。
フィールドの色を外すと、以下のようになります。
👉 p.s. UV_VFX01を作成する場合は、上記の手順を参考してください。図面のフィールドはデフォルト素材フォルダーにあります。（透明フィールドはRef_VFX01です）。
Step 4：図面をエクスポート
図面の作成が完了すると、2048 × 2048px でエクスポートし、NUWA アカウント ＞ マイツール ＞ フェイスエディター にアップロードしてください。
※図面は計合計4枚あります
⚠️ イラスト編集ソフトウェアにより、デフォルト素材のサイズは多少誤差があります。実際のワークスペースを 2048 × 2048px に設定してください
⚠️ フェイスに反映させたいオブジェクト以外のものは、必ず非表示にしてください
図面をエクスポートする際に、黒いグリッド線を削除するか、非表示にしてください。黒いグリッド線が表示されたままで図面をエクスポートすると、フェイス上で表示される可能性があります。
グリッド線を非表示にすると、以下のようになります。
図面が上記のようになったら、PNG ファイルでエクスポートし、NUWA アカウント ＞ マイツール ＞フェイスエディター にアップロードしてください。
その他：表情プレビュー
フォルダー「0_Illustrator_Ref」には、表情をプレビューするファイルがあります。
Adobe Illustratorを使用すると、こちらのファイルが使用可能となり、スムーズにフェイスを作成できます。
フェイスの作成に保存した四つの図面をコピーし、「0_Illustrator_Ref」に入れてください。四つの図面のファイル名は必ずUV_F1.png」、「UV_M1.png」、「UV_M2.png」、「UV_VFX01.png」にしてください。
上記のファイルをフォルダーに保存すると、キャラクターの表情を確認できます。
