Adobe XDで初代ポケモン風スライドを作ってみた

この記事はポケットモンスターAdvent Carendar 2016の記事です。

アローラ!!

ポケモンのことが好きすぎてアドベントカレンダー作っちゃいました。
私がいろんな人のポケモン愛に溢れた記事を読みたくて作成しました。今からでも全然遅くないのでなんでもいいから書いてくれる人増えないかな。ゲンガーの可愛らしさについて語るだけでもいいから…

今回は祝20周年！ということで、ポケモンXD 闇の旋風ダーク・ルギア…ではなくって、Adobe XDを使用して、初代ポケモン風UIスライドを作成してみました。

初代ポケモン風UIスライド　ダウンロードはこちら！
http://seahorse-design.net/wp-content/uploads/2016/12/PokemonSlide.zip

サイズはテンプレートにもある1280×800で作成しています。

モンスターや主人公や町並みのドットは作成していません。UI的なところのみです。
文章はwebデザイナーのLTのスライドという想定で作成しています。

それっぽい感じを出すために、ドット風のフリーフォントを使用しています。
・タイトル部分…コーポレート・ロゴ
・本文…美咲ゴシック
またはPixelMplusあたりも良いと思います。

ゲームボーイの画面とは比率が違うので、ちょっと横に伸ばしています。

オープニングタイトル風です。
主人公のところにはご自身の白黒写真などを載せてください（笑）

セリフ部分と、選択アイコンを作成しました。
一番汎用性がある画面かと思います。

トレーナー戦と選択画面を載せています。
ボールの部分はリピートグリッドを使用しています。

一覧はその名の通りもくじなどに使用できます。右側は補足や説明を入れると見やすくなりそうです。
詳細は項目の説明などに使用できます。

おまけです。終わりにご利用ください。

・ダウンロード自由・報告不要です。LTなんかで使用してくださっても大丈夫です。
ただ、居ないとは思いますがあまりにもオフィシャルな場での使用はご遠慮ください。
・再配布はご遠慮ください。

まず開いて最初に思ったことは、UIが直感的ですね。
ペイントツールやパワーポイント感覚で作業できる感じがしました。

まだデザインに使用するにしてはかゆいところに手が届かない！という感じがします。ガイドが引けなかったりグラデーションがなかったりとちょっとムズムズします。
現状のバージョンであればワイヤーフレームやスライドなどに使用するのが良さそうです。

XD→Illustratorという方向であれば、少しだけ互換性があります。PDFで書き出し→イラレで開くという少し強引な方法になりますが…。
ただ文章がぶつ切れになって編集できない状態なので、レイアウト部分だけといったような大雑把なところだけ流用する形になりそうです。逆は無理そうですね。

XDを操作していて思ったのは、「直感で操作できる」ということはこれからの時代にアドバンテージになっていくと思います。視覚から得る情報は大きいし今の人文章読まないですしね…。

本当はXYまでの一通り作ろうかと思っていたけど間に合わなかったのは内緒のお話。
あと最新作サン・ムーンが発売中です。こちらも必ずチェックしてください。