column

【第3回】未来ラジオと人工鳩とデザイン

公開日:2018/08/25

どうも、ご無沙汰しております。上都です。
前作ニュートンと林檎の樹で行っていたコラムの評判が良かったので
今作もやろうぜってとこまでは良かったんですが、制作が多忙になりすぎてそれどころじゃなかったです。
いつもどおりの見切り発車で始めてしまうところは本当に進歩がないですね。
更新楽しみにしてくださっていた皆様には深くお詫び致します。


さて、今作もあまり自分の役割は変わっていないので、
関わったセクションごとでの雑文でも書きたいと思います。
以下、項目別です。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
1.コンセプトデザイン
2.ロゴデザイン
3.Webデザイン
4.UIデザイン
5.印刷物のデザイン
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

1.コンセプトデザイン

今回はプロジェクトの序盤にて、コンセプトデザインをある程度しっかり作りきりました。
全体的なデザインの方向性はここで決めてしまいました。
なぜこれを作ったかというと、内部メンバーでない方に何かデザイン要素が必要なクリエイティブをしてもらう際に、
イメージのズレを極力少なくしたかったからです。
ただ、必要になった場面は、ムービー制作の時だけだったのですが、
見られる機会の多いものでもあるので、しっかり活躍してくれたかとは思います。

たらたら長く書くのもアレですので実際に使用したデザインコンセプトシートを貼り付けます。



基本的にこのシートに則って、全体の踏襲は行いました。
カラー、フォント、オブジェクトの3点しか記載がありませんが、
自分自身の指針確認としても、まとめたことで十分に生きていた気がします。

よく見ると、下部にWebサイト見ろと書いてあるので、
Webサイト作りながらこの資料作ったんでしょうね。ありがとう当時のオレ。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

2.ロゴデザイン

ロゴデザインについてですが、
前作と同じく、タイトルに助詞が入る、文章よりのタイトルではあったので、
視認性を損ない過ぎないように、見やすい既存フォントの組み換えで構成することは決めていました。

まずは手書きで各文字の大きさや高さなどのリズム感を決め、それぞれの単語としてのまとまりをもたせました。
そしてフォント選びですが、本タイトルにおいては、漢字・ひらがな・カタカナ・英字すべてが混在しているのですが、
今回は加工や組み換えが最小限なこともあり、単一のフォントを使用するとあまりにロゴ感が損なわれるかと思い、
それぞれ使用フォントを変えて、若干の崩した印象をもたせながらもまとまりを持たせて行きました。
基本的にはモダンな印象になるような真面目で清潔感のある字体を抜粋しながら、
全体にシミやステンシル、ジャギりの加工を加えて、退廃的な印象をもたせました

装飾の部分で言うと、いくつか細かい案もあったので、参考載せます。



今のものがどれほど削ぎ落とされたかわかりますね。
鳩やラジオ、夏雲などを意識してロゴに装飾も行っていたのですが、
比較検討した結果、今の装飾は全く入れない案でFIXさせました。

配色も無駄には行わず、黒と白の2色で割り切っています。
文字の組み方については前作よりもパワーがあるとおもったので、
ビジュアルを損なわさせないためにも、単色で仕上げました。

今回、ロゴ組で失敗したところは、ジャギの加工を繊細にやりすぎた点です。
実は、今作から作業環境がiMacの5Kディスプレイモデルに進化したので、
FullHDでは再現できない細かい加工がはっきりくっきり見えてしまうんですよ。
いざ、Webサイトに組み込んで別画面で見ると全然印象が異なっていて、少し加工具合を調整しました。
よく見えすぎてしまうということでこういう弊害が起こるのだなと、勉強になった一幕でした。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

3.Webデザイン

今回はどんなふうに情報を見せていこうかと悩んだ末、
構成については某ソーシャルゲームのWebサイトをいくつか参考にして、ページの構成を決定していきました。
結果、TOPは必要最低限の情報にして、ビジュアルをより強く見せるレイアウトになっています。

詳細は各個別ページに飛ばす形になっているのですが、
データを見る限りでは直帰率に大きな変動はなかったので、
メニューより目的のページにはしっかりと移動できているのかなとは思いました。

Webに関しては流行りなど参考にしつつ、
ビジュアルがしっかりと見せられるような構成を今後も意識したいとは思います。

あとはワンソース管理でスマホ対応するように切り替えました。
前作、PCとSPで2ソース管理していたのですが、更新が大変だったのでよりシンプルにしました。

デザインに関しては、コンセプトシート通りに行っています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

4.UIデザイン

大きくいじった部分に関しては体験版の次点でまーまーお叱りを受けていた項目だとは実感しています。
特にメッセージウィンドウに関してですが、画面全体の視認性を上げるために、
枠やアイコンを限りなくミニマムにまとめていったのですが、ユーザビリティにおいて不満声があった印象です。
製品版にて、微調整は行いましたが、実感できるかは人それぞれなレベルな気もします。チキンレースです。

お金と時間があればユーザビリティテスト行って、
もうADVはこの配置でええやんってところまで持っていったらそれはそれで面白いのですが、
現状は作風によってデザインの調整は行いたいと思っておりますので、
次作もまだまだなんだかんだごちゃごちゃいじっている気もします。
毎度挑戦項目であり調整項目であり続ける部分になってしまうのかもしれません。

デザインに関しては、コンセプトシート通りに行って(ry

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

5.印刷物のデザイン

今回もメインビジュアルを全キャラ分用意したのですが、
特にかぐやのイメージビジュアルに関してはどのトリミングでもうまく活かせるよう、
キャラクター含めの全体の配置を行ってるので、前作より扱いやすかった気はします。

店舗さんの販促に関しては今回100個以上(多分ニューリンの5,6倍くらい)制作したのですが、
メインビジュアルとデザインコンセプト、マシンスペック向上も相まって増えた割にはスムーズにこなせました。
沢山の店舗様にスペース割いて頂き、おかげさまで多くの方の周知へと繋がりました。
この場を借りてお礼申し上げます。延期して貼り替えの手間生んでしまってごめんなさい。

あと、ビジュアルガイドブック。
今回とても表紙が気に入っております。販売したいくらいいい感じに手に取りたい感じです。
ただ、今回内部に字体が細いものが多かったのですが、使った用紙が前回と同じく上質紙を使っておりまして、
これが思いの他滲んで滲んで……細い箇所が潰れてかなり読みづらい箇所が出てしまっています。
色校正しろやボケって話ですが、スケジュール的にもしんどく、このような結果なっていましました。
読みづらい場合はWebにPDF版も公開されていますので、こちらで勘弁してください。

PC版
スマートフォン版

作品年表があったり本作を知る上ではかなり重要なアイテムですよ奥さん。

また今回、レーベルのデザインを少しテコ入れしました。
単純な4C印刷ではく、白版印刷をうまく使ったデザインにしました。



結構かっこよく仕上がったので気に入ってます。
これも手に取りたい一品になっていれば嬉しいです!

デザインに関しては、コンセプトシ(ry

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

以上で上都のコラムはおしまいです!!

デザイン以外にも自分はあれこれやらなきゃいけない立場なですが、
全部書いてたらキリがないので今回もデザイン分野だけでよろしくお願いしますm(_ _)m

本作、未来ラジオと人工鳩発売まで残すところあと6日。
このあとに制作メンバーやむふふなあの人のコラムまで目白押しですので、
発売まで是非毎日楽しみにお待ち下さいませ!

明日はサウンドディレクターMuu Doggくんからのあれこれです。


ではまたどこかで_(┐「ε:)_