Utatane.Asia

このページをシェア

Utatane.Asia

このページをシェア

「デザインの必殺技」を身につけるため自主練をしてみる

「デザインの必殺技」を身につけるため自主練をしてみる

グラレコ

昨年7月に、コピーライターの阿部広太郎さんのTwitterにこんな面白そうなイベントが案内されていたので、すぐに申し込んで視聴しました。

なんたって、私、

  • 今はほとんど休止中やけど、オンライン市役所ゲーム推進課長です
  • デザインすることを諦めない公務員です

なので、めちゃめちゃ好物なんですよ、こういうの。

で、このカードゲーム「Desig-win」、CAMPFIREでクラウドファンディングされたんですが、なんとその日のうちにあっという間に支援者が集まって瞬殺！

クラファンを紹介しようと思っていたんですが、紹介しても手に入れることができないので、結局そのまんまになってしまっていました。

デザインを題材にしたゲームなので、ゲーム推進課長としてゲームをプレイする様子を紹介を……とも思ったのですが、純粋にゲームで取り上げている「デザインの必殺技」が興味深く、これをきちんと身につけたいなぁと思った訳です。

……前置き長っ!!

と、いっても「デザインの必殺技」を単純に紹介するのは芸が無いので、私がデザインの必殺技を自主練、しかもゲーム要素も入れてということでやっていこうと思います。

記事の目次

自主練はソリティア

「デザインの必殺技」を学ぶための自主練……一人で遊ぶゲームを「ソリティア」と言います。

「ソリティア」というとWindows3.1でバンドルされていたトランプゲームを思い出しますが、一人遊びの総称なので、ゲーム好きの私は何かをするときに一人遊び(ソリティア)の要素を入れたら面白そうと思ってやっています。

「Desig-win」を使って自主練するなら、やっぱり実際に手を動かしてデザインをしていくのが一番です。

私が参加している全国公務員のオンラインコミュニティ「オンライン市役所」のグループ「生活保護CW課」。

生活保護CW課バナー

グループページのバナー画像はこんな画像を使っているんですが、元々1:1の比率でパワーポイントで使うために作成した画像を使っていただいていて、ちゃんとしたもの作らないとなぁと思っていました。写真に写っている生活保護手帳も2019年度版だし。

と、いうことで今回は、Facebookのグループページのバナーを作ることにします。

ちなみに、画像サイズはこちらを参考にしています。

[blogcard url=https://www.comnico.jp/we-love-social/social-media-image-sizes-guide]

さて、自主練なので、単にバナー画像を作るだけでは練習になりません。

そこで登場するのが、「Desig-win」です。

Desig-win外装

結構大きめのカード「デザインの必殺技」が100枚入っています。

デザインの必殺技

カードは4ジャンル×25枚。カラー、レイアウト、タイポグラフィ、フィルターの4ジャンルが多数のデザイナーの実際の作例とともにカード化されています。

シンプルに見ているだけでもめっちゃ勉強になるんですが、また必殺技名がいいんですよねぇ。

「ここはスリットカッターでデザインしよう」

口にするだけでなんか格好いい(これ大事)。

これをソリティア(一人遊び)的に自主練に取り入れるなら、そりゃ「ランダムでカードを引いてやる縛りプレイ」でしょ。

ルールですが、暫定版で

  • カードを4枚引いて、そのカードに書かれた必殺技を2種類以上使ってデザインする

で、いってみたいと思います。まぁ、一回目なので後出しでルールをまた考えよう。ルールを考えるのもソリティアの楽しみなので。

では、カードを引いてみましょう。

デザインの必殺技

この4枚が出ました。

スタンパー[フォント]決定版、権威づけ、「これぞ！」といった印象を与えることができる
ランダムマキビシ[レイアウト]オブジェクトの大きさを調整することで、にぎやかな印象を与えることができる。
ホーガンドロップ[フォント]設計図のように実験的な雰囲気を醸し出すことができる。
スプリングカラーリング[カラー]春の陽気を感じるような晴々とした雰囲気を生み出すことができる。
おぅ。これはどうしたものか。
「スタンパー」はスタンプ部分の画像を作るのが意外と面倒そう(やったことない)。他のものとあわせるのが難しそうだな。
「ランダムマキビシ」はコミュニティに賑やかさが表現できそうだけど、題材が題材なのでちょっと頃合いが難しそう。
ということで、今回は「ホーガンドロップ」と「スプリングカラーリング」を使います。カードの作例が似たような色合いなので。
生活保護手帳とダンボー
ということでカバー画像用の写真も撮影。
背景部分(グリーンバック買ってこようかな……)を抜いて、「ホーガンドロップ」で、課名を入れます。
バナー作成中使っているアプリはAffinityDesignerです。
背景を抜いて、「スプリングカラーリング」らしい、桜吹雪の画像を探していたらイイ感じの色合いの背景が見つかったのでそれを使ってみました。透明度を75%にして淡い色味に変えました。
方眼
そこに、4ピクセル間隔で0.1ポイントの線を入れて行きます。10本ごとに少し太めに線を変更して方眼用紙を作ります。
タイトル部分
作成した方眼枠をベースに文字を入れます。一からデザインする元気はない。(ダメやん)
できる限り定規で書いたようなフォントで、ウエイト(太さ)の大きなものをということで、大好きな「やさしさゴシックボールド」を使用しました。
文字の詰めを若干調整。本当は1マス(10×10)に一文字と思ったけれど、CWと漢字に差が出すぎるので、高さだけ1マスに収めることにしました。この辺りは悩みどころ。
文字の色は「スプリングカラーリング」ということで、グリーン系とピンク系の色を選んで、設計図感を出すために、グレーで直線部分に下書き風の線を入れました。
曲線とかも下書き線を入れると、いいんだけど、元のフォントが正円と直線だけでデザインされていないので、やり過ぎにならないように、この辺で留めておこう。
生活保護CW課 新バナー
別冊問答集に、課の目標？「みんなで支え、みんなで笑う」を入れて、今回は完成。
課名部分の下書き風の線を入れるのに意外と時間がかかったので、撮影も含めて制作時間は2.5時間。慣れれば、もう少し早い時間で作れるかな。
実際に、グループページでアップしてみたら、
【PCで閲覧】
PC版……うーむ。「オンライン市役所」の文字が若干切れてる？あれま。
【スマホで閲覧】
スマホ版
……うーむ。通知が重なるのか……
ということで、振り返り(反省)。
  • 適切な画像サイズを確認したところまでは良かったけれど、実際に使用したときに通知欄が上にくるのは当たり前なので、それを意図して文字位置を考えるべきでした。
  • 「スプリングカラーリング」だから、淡い色合いでと思ったらちょっと薄すぎました。
    画像を作成している時ではなく、実際の使用サイズにしたときの可読性の認識が甘いですね。
  • 生活保護手帳とダンボーは、前回から引き継いだモチーフなんですが、前回同様冷や汗のミニダンボーを使った方がテーマにあった画像になったなぁ、と。
  • 「ホーガンドロップ」を使うんだったら、背景部分は水平で切り取った方がよかったかも。

個人的には自主練に「Desg-win」を使うのはいい練習になるので、これからも隔週に一回くらいのペースでやれればいいな。

私がこの記事を書いたよ！

アバター画像

があ

大阪生まれ･育ち･勤めの雑食系公務員。 福祉職だと勘違いしている人が大多数ですが下っ端事務職。濃い顔付きから沖縄人やらトルコ人やら間違える人大多数。違う、違うんだよ～

私のの記事一覧へ

関連記事 関連性が高いおすすめ記事

トップへ