【デザイナー編】UIデザインのお話【みやこそふとブログリレー】
やっぱり、屋上と煙草とひらひら服が好きなルナです。
『生命の栞』のデザイナーをやってます。
自分のサークルでもUIとか作ってるんですが、デザインもちょっと楽しくてレベルアップ兼、illustratorにも挑戦したく『生命の栞』でデザイナーを始めました。
ついでにAfterEffectsもちょと触ったりしてるんですが、プロってすげぇなってなりました。
誰か僕を全知全能の神とかゼノンとかにしてくださいって気持ちで今回はデザインの話を書けたらなと。
ロゴ
実はこのロゴは3日でつくりました。
発注書
真面目な話をすると、打ち合わせの時点でイメージは結構絞れていたので、迷走する事はなく一本道で制作できました。イメージ固まってたYoujyoさんに感謝感謝美味しいヤミー。
オーダーもシンプルで感動と美しさ、陰鬱な雰囲気だったのであまり作字はせずに、細かく一角一角の長さとかバランス調整、他のものに置き換えたりといった感じで作業を行った感じです。
例えば、”命”の右の払いは他の文字を合わせたり、”の”の上の突き抜けてるのは同文字の右の払いを流用したり、”生”の払いを伸ばしたり、横棒の▲を消したりって感じです。
個人的には”栞”の”木”の部分を少し潰して”干”の位置を下げつつサイズを大きくしたりもしてるんですが、これが結構気に入ってたりもします。うん、やっぱり綺麗だな。
没案だとデータはもうないんですが、”栞”の左の”干”に蝶を置こうかとも考えてたりも。
折角タイトルロゴを作ったので、タイトルロゴムービーも作ってるのでそれも随時公開できたらなとか思ってたり。
ところで”命”の一部が消えたりしてるのはなんでなんですかねぇ〜(伏線)。
UI
選択肢
個人的には選択肢が気に入ってますね。
やりたかったのは、最近ハマってたDetroitの選択肢。
透過度の高い、マウスオーバーで発光するやつ。
これが気に入ってるけど、気合が入りましたね。その分苦戦もしましたが……。
透過度が高いって事は視認性が背景依存してしまう訳ですが、かといって透明感が関係ないデザインは使いたくなかった。一応関係ないパターンも作りはしたが、現行のものでいきたかったので、視認性担保の為色々とレイヤーを追加したりとかで対応しました。
これが曲者で背景が白よりになった時用に黒長方形レイヤーを透過度30とかでいれれば、背景が黒よりになった時に暗くなりすぎるし、かといって……って感じで。
結果、黒長方形と白長方形を噛ませて、それぞれ透過度、カラー調整を繰り返してつくりました。
テキストウィンドウ
これも割と気に入ってます。
テキストウィンドウの栞は背景の居ないさん作なので、僕が作ったのはアイコン周りなのですが、これはillustratorでつくりました。Photoshopに限界を感じて。
そして自サークルの方もillustratorで作り直すという選択肢で作業量アップ！！
やったね、たえちゃん。タスクが増えるよ。
そんな話はさておいて、特にいいなと感じるのはQUICKセーブ周りですね。
こいつ
アイコンの為に色んなノベルゲームのUIを見て、セーブ周りのアイコンって同じ様なデザインが多いなと感じてる時にQと矢印合わせたいなと天啓が降りてきまして。このデザインにいきついたんですけど、中々いいんじゃないかな。
一目でQUICK機能なのも分かるし。
後、Qのフォントもおしゃれで主張しすぎない感じ。Adobeフォント様々ですね。
タイトル画面
これは流石に乗っけられないんですが、ちょっと拘って一部にモーションを付けました。
AE使ってみたいってのもあったんですが、とあるサークルさんの作品のティザーが同じようにモーションを付けてて、「これすげぇ」と感銘を受けて、その発想を安易にパクらせて頂きました。
いつか、もっとなんかすげぇの作りたいですね。
モーショングラフィックに興味が湧いたワイ君でした。
他にもコンフィグやら、セーブやらでもシンプルなデザインと白を基調として雰囲気を作りながら、単調にならないように各画面でそれぞれ違う花のグラフィックをいれたりして『生命の栞』のUIを制作したりしてます。
この辺りは全体的に”ヒラヒラヒヒル”を参考にしてます。
”ヒラヒラヒヒル”のUIは長岡建蔵先生が作られてるんですが、長岡氏は天才だなと。
”サクラノ刻”とかのUIも長岡氏なのですが、作品の雰囲気にマッチしててデザインも綺麗でいろんなタイプのものを作られてる。
しかも、”さよならを教えて”のライターであり、イラストレーターでもあられる。
スペックが控え目にいっておかしい。
僕も長岡先生や、すかぢ先生みたいにつよつよクリエイターになりたい。
まぁ僕はイラストは描けないので、シナリオとデザインと最近興味があるモーショングラフィックとかかな？
とりあえず、メインのシナリオを極めたい所存(自サークルへの華麗な誘導)。
閑話休題。
話を戻すと、UIは個人的には割と納得いくものになっているので製品版にて実際に触って頂けると思います。
心残りと言えば、立ち絵鑑賞機能を実装出来なかった事くらい。
UIは禿げるほど面倒くさい画面だけど、やっぱり作り甲斐があるっていうか、やってみて経験値が欲しかったなと。
『生命の栞』だとどんな風に作ったんだろうか？
そんな所で僕のブログはそろそろ幕引きかな。
それでは本ブログに掛けまして、我らがみやこそふとは、リリースにむけて努力する事を誓いま、す。
どんどんドーナツどーんと行こう！
SIROBAKOはいいぞぉ～。創作意欲が湧いてくる。
