MHWハンター自己紹介カードから学ぶデザイン。リニューアル、リデザインする時のシンプルなワークフローを実例をもって解説します。

みなさんこんにちは。ぜぇれさんです。
前回モンハンワールドの公式アカウントから配布されている「MHWハンター自己紹介カード」のダサいところに文句をつけるだけという生産性の無い電波を発信しました。
今回はその生産性の無い電波を少し生産性のある電波にしてみようと僕は努力します。

というわけで「僕ならこうする」という自己紹介カードを、公式カードを改善する形で作ってゆこうと思います。
キーワードは「Re Set」「Re Think」「Re Design」です。
よろしくお願いします。

ちなみにこれが完成品です、これに至るまでのロジックを記載してゆきます

[amazonjs asin=”404733345X” locale=”JP” title=”新大陸スケッチ紀行 ~モンスターハンター:ワールド 編纂者日誌~”]

Re Set

まずはリセットしましょう。
デザインやサイトをリニューアルする際の考え方やワークフローは沢山あるのでこれも一つの手法と思っておいてください。
リセットでは現在表現されている要素をパーツ毎に分解します。

公式カードの情報を再確認

①タイトル
②ハンターネーム
③性別
④使用武器
⑤プレイ時間帯(平日・休日)
⑥プレイスタイル
⑦コメント

というような形ですね。

Re Think

続いてリシンクしましょう。
まぁもう一度頭をフラットにして考え直そうね、っていう程度の話です。

今回の「MHWハンター自己紹介カード」にしっかりとした目的や機能を持たせるとしたら、何が考えられるでしょうか?

このツールの持つ目的

何か突飛なこと、斬新なソリューションを考えようとしなくていいです。
このカードは「SNSでの拡散を通じて、ハンター同士のめぐり逢いを加速させる」事が目的のはずです。

ではその目的に対して有効な情報は?

ここで先ほどリセットで洗い出したコンテンツをもう一度眺めてみましょう。

①タイトル
②ハンターネーム
③性別
④使用武器
⑤プレイ時間帯(平日・休日)
⑥プレイスタイル
⑦コメント

ここからアイデア出しですね、他に有用なコンテンツは無いのか?頭をひねりましょう。

余談ですが実際問題公式だからこそ載せることがNGになってしまった情報もありますからね、電話番号のような個人情報を載せることを公式が促したらアウトでしょうから。

閑話休題

さてさて何がありそうですか?以下なんていかがですか?

①PSNID
②コミュニケーションツール(ボイチャ可等)

またこういった載せることで機能をより強化できるという視点と合わせ、今回もう一つ別の視点からもコンテンツを検討してみましょう。

ユーザー(プレイヤー)だからこそ伝えたい何か

「SNSでの拡散を通じて、ハンター同士のめぐり逢いを加速させる」という視点とは別に「ユーザーだからこそ、他のユーザーに知ってほしい自分の事」っていう視点からも考えてみようと思います。

遊びが大事ですからね、ゲームですし。

①HR
②キャラクターの性別
③所属サークル
④ハンターの二つ名

ほかにも好きなモンスターやフィールド等、別にあってもなくてもいいんだけど、ちょっと遊びで伝えたいな、というような部分があっても個性が出て良いと思います。

ただあまりにもニッチなところを攻めて記入に困るユーザーが多くなっては本末転倒なので、ある程度標準的な内容が望ましいです。

コンテンツ候補まとめ

①タイトル
②ハンターネーム
③性別
④使用武器
⑤プレイ時間帯(平日・休日)
⑥プレイスタイル
⑦コメント
⑧PSNID
⑨コミュニケーションツール(ボイチャ可等)
⑩HR
⑪キャラクターの性別
⑫所属サークル
⑬ハンターの二つ名

これらすべてを載せようというわけではありません。この中から取捨選択し、必要となるコンテンツを再度設定するところまでがリシンクです。

Re Design

では今回は以下のコンテンツを用いてデザインを組みなおしてみようと思います。

①タイトル
②ハンターネーム
③HR
④性別
⑤PSNID
⑥使用武器
⑦プレイ時間帯(平日・休日)
⑧コミュニケーションツール(ボイチャ可等)
⑨所属サークル
⑩コメント

カードのサイズ

今回は使用・閲覧ユーザーをスマホでツイッターを見ているシーンにほぼ限定します。そのうえでPCでも閲覧に耐える解像度とサイズを設定します。
最近発売された「XS Max」はえぐくて、高解像度で鮮明に表示させようと思ったら「1242px × 2688px」というPCよりもでかい画像が必要になってきます。

さすがにそこまで大きいのは現実的ではないので今回は「I Phone 6・6s・7・8」のPlusにサイズのターゲットを絞ります。

「1080px × 1920px」です。
数値もキッチリしてて美しいです。

文字サイズ

現在公式から配布されている「自己紹介カード」の文字サイズに見づらいという感想は無いと思います。
これを基準に横幅1080pxで作成する場合を想定します。
文字サイズは「26px」前後を基準に使用してゆきます。

コンテンツサイズ

今回10個の項目を盛り込むことになりますが、各要素に対して必要になってくるサイズをある程度想定してコンテンツサイズの枠組みを考えてゆきます。

①タイトル
1行

②ハンターネーム
③HR
二つで1行

④性別
⑤PSNID
二つで1行

⑥使用武器
2行

⑦プレイ時間帯(平日・休日)
⑧コミュニケーションツール(ボイチャ可等)
二つで1行

⑨所属サークル
1行

⑩コメント
残りのスペース(3行を想定)

というような形で、縦を10で割る形でコンテンツのサイズを想定してゆきます。

上記画像は実寸サイズ(1080px × 1920px)です。綺麗に仮配置できたと思います。

色等

今回はMHWの世界観に寄せていこうと思うので、若干暗めのカラーを選択しようと思います。
公式サイトのキーカラーや導虫の色である明るい緑をアクセントで取り入れるのもいいかもしれません。

まだデザインに入らねぇのか?

ですよね、ここまででまだ前提条件の整理、情報設計しか出来てませんよね。でもこれ考えないとゴミが生まれますから。考えないで生まれたごみが公式の

はいドーン!!!!

これが完成品です。

いかがでしょう?スマホでもデバイスサイズを無駄にせず、きれいに表示されているかと思います。

解説

というわけで出来上がったデザインの解説に移ります。

タイトル

タイトル部分はシンプルに「ギルドカード、自己紹介カード、MHW用のカード」であることを伝えています。
MHWのロゴなども入れたくなりますが、情報過多をまとめ切るほどのスペースは無く、とりあえず並べた産物が出来上がるよりもこちらの方がよいと判断しました。

また背景で引いている画像も、中央がテキストと美しく重なるように意識しています。

カラー

出来る限り世界観を近づけたく、暗めの配色とMHWのキーカラーに当たる明るい緑を挿入しています。

あしらい

古紙の質感、紙の境界質感、飾りのオーナメントなど細部に気を使っています。

余白(マージン)

公式のカードで全く実現できていなかった部分で、正直ここだけ直すだけでもだいぶ変わるというところです。

カードの外側からコンテンツまでは40px

コンテンツ毎のマージンは20px

コンテンツ内の要素や武器アイコンの間に設けた等も、それぞれの属性に合わせたマージンを設定しています。

というような形で、マージンには徹底的にこだわってリデザインをさせていただきました。

いかがでしたか?今回以下のような内容でお話させていただきました。

若干一方的なクレーマー的なサムシング自己満足な記事で申し訳ありますんすん。
好きだからこそちょっと言いたくなることってあるよね?いいよね?

今回作ったカード以外にも実は何種類かモンハンワールドの自己紹介カード作ってるので、またどっかのタイミングで一覧をまとめようと思います。
ぜぇれさんでした。

“MHWハンター自己紹介カードから学ぶデザイン。リニューアル、リデザインする時のシンプルなワークフローを実例をもって解説します。” への4件の返信

  1. 前回の記事を読んで、アレ?終わり?じゃあ自分ならこうするってのは無いのかい!
    って思ったらきました!しかも、時間帯、コミュニケーションツール!それそれ!
    わかってる!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です