アドカレ7日目！折り返し！ということでこんにちは、もしくはこんばんは！55代CG研のMaiなと申します。
折り返しといえば、もうすぐ年末年始で箱根駅伝の時期ですね～
東京に来てようやく少しは出歩けるようになって、「あ！ 箱根駅伝でやったところだ！」っていうヤツができて嬉しかったですね。
どうせ今年も観戦は控えめに！って感じだろうし、ぬくぬくしながらTVで応援しようと思います。
それはさておき、今回はデザインのお話をしたいと思います！
はじめに
今年はイラストに並んで、結構デザインというものに挑戦した年でもありました。 本当にセンスのセの字もなく、しかも各種デザインには締切があるという状況でも、とりあえず「見れるデザイン」というものを完成させることはできたのかな…と勝手に思っているので、備忘録も兼ねていろいろまとめていこうかな、と思います。
これをこうすればできる！ みたいな講座っぽいものではなく、ここをこうしたら上手くいった！ とか、この本/サイトがめっちゃ役に立った！ みたいな体験談っぽいものになりますが、なにかの参考になればうれしいです！
目次
デザイン、まずは何をすればいい？
Web/UIデザイン
キャラクターデザイン
めっちゃ参考にした本やサイト
デザイン、まずは何をすればいい？
Web、UI、キャラクターデザインをやりたい！ といっても、何からすればいいのか……というのが初めの壁になるのだそうです（適当なHPを見た感想）。
ただ私はあんまり初めの一歩には悩んだことはなくて、おそらく作るものに「明確な目的」があったからだと思うんですよね。
例えば、Webだったら新入生にMIS.Wの活動や入会方法をわかりやすく伝えるとか、UIだったらどのボタンが何を示しているかわかりやすくするとか、キャラクターならきちんとした1モチーフがあったりだとかしましたね。
目的さえあれば、あとはそれをもっと明確にしたり資料を集めたりと次何をすればいいかが自ずとわかってくると思います。そうすれば無駄に時間を使うこともないはず。個人の感想です。
次からは、媒体別にいろいろまとめていきます↓
Web/UIデザイン
先ほど目的の話をしましたが、それらがより大事になってくるのがWeb/UIデザインだと思っています。
というのも何のサイトなのか、どういったゲームのどの機能のボタンなのか、といった情報がないとデザインはできませんからね…
例えば早稲田祭サイトだとしたら、まず開いたら「何のためのサイトか？」というのが一番重要な情報だから、「MIS.Wが早稲田祭に出る」「日付」さえあれば、見る人は「MIS.Wってのが早稲田祭で何かするんだな～」ってことはわかってくれるわけです（実際は最初にオープニングアニメーションみたいなのでMIS.Wの文字+テーマがど真ん中に出てくるので、何かの団体かな？っていのもわかりやすくなっているはず）。
あとは創作サークルで、今年のテーマが「ともに、創る」だったから、アニメ調のキャラを何人か書いて…といった感じで組み立てています。
この子たちも、フラットデザインに合うように色数を絞っていますね。
あと、一番悩むのが配色と構成だと思います。これは私もまだまだ勉強中です……
ただ経験上、これを抑えてれば失敗しない！ ってのはある気がしてて、
色を絞る！！
余白は思ったよりとる！！
情報の優先順位を忘れない！！
です。多分どんな指南書でも言われてそうなことですが、本当に最低限これを覚えておけば失敗することはないです。
ただやっぱり、それだけではいい感じのデザインって言うのは難しいので、付け加えるとすれば…
WebならCSSやJS(アニメーション)、UIならモーションやエフェクトで豪華っぽく見せる！
フォント色々探してみる！ ただし使うのは1～2個にすること！
色のバランス見るには一旦モノクロにしてみると良い、特に文字の可読性がわかりやすくなる！
全体的な質感は統一させる！
といった感じでしょうか…。
個別のケースでこういうのは良い！良くない！というのはあるのですが、それらをいちいち書いているときりがないので、本当にユーザー目線に立って考えるとしか言いようがないですね…（例えば、ボタンはモノクロだと無効っぽいイメージになってしまうから薄くでも色を付けるとか）
あと、他の人に見てもらうのもめちゃくちゃ大事です！ 一人だとなかなか自分のものに目が慣れてしまって、客観的に見れないので。たくさんフィードバックをもらおう！
WebとUIデザインはあと、「新しい」ことを重視しました。いわゆる今のトレンドに沿う……ってコト！？
サイトもゲームも、デザイン面で古さを感じてしまうと、中身まで全部古く見えてしまうので、それは本当に良くないと。（逆に、全然更新されない研究室のサイトとかも、デザインさえ新しければめっちゃ最近できたみたいな錯覚を起こすことができる）
そのためには新しいデザインをたくさん見て眼を慣らすのだ！！ この記事の下のほうに、いい感じのサイトをたくさんまとめてくれているサイトさんを紹介していますが、私はそれらを開いては参考になりそうなものを何個もタブに開いて眺めていました。眼を慣らすのってプラシーボなのかもだけど、結構大事なように思っています。イラスト描くときもよくやる。
という感じで、次はキャラクターの場合。
キャラクターデザイン
キャラデザに関しては、いろんなイラスト指南系のサイトやYoutubeでも詳しい解説が見れるので、結構そういうのを見るだけでも方針が立てやすくなるように思います。じゃあ、この項目要らないのでは…？
まあまあ、経験してみて思ったことを中心に書いていこうかな！
まず今年最初に経験したキャラデザのほうが、鳥企画、バードルマーチでの鳥の擬人化キャラクターだったので（企画長藤汐さんのアドカレも見てね！！）、モチーフとしては鳥1種類と、明確に決まっていました。
その鳥の外見、生息地、活動時期、習性etcを調べ、それらを人間の特徴に置き換えるところからスタート。擬人化だとこの作業が明確で楽ですね。
擬人化じゃないとしても、明確な性格、外見的特徴、モチーフ等々がないと何も始まらんので、下手したらWebの数倍下準備に時間がかかる。逆に、準備をきちんとすればするほどちゃんとデザインに軸ができて、後の作業が格段にやりやすくなります。やらないとぶれっぶれで後々めっちゃ悩む（失敗経験者並感）
それが終わってようやくデザインに入る……とはいえ、下準備ができていれば特徴を具体的なものに描き起こすだけなので、実質細部を詰める作業ですね。
デザインとして最低限気を付ける点は、Web/UIでまとめたこととほぼ同じなのですが、キャラデザ特有のものがあるとしたら
まず低頭身で全体のシルエットや構成を考える
キャラクターのシルエットだけでも特徴を出す
一見無意味でも少し情報量を増やす
情報量についてですが、凹凸を付けたりレース、網、アクセサリーなどちょっとした装飾を付けていけばそれっぽくなります。もちろんキャラにあうものを選ぶ！
鳥企画の描かせてもらった2人のうち、ウグイスちゃん（緑の方）を結構ほめてもらっている印象があるので、何が良かったんだろう？と思って考えてみたのですが、やっぱり衣装の情報量の違いかな、という結論。 ウグイスは引算というより、パーツの大きさを調整した記憶があります。ベニマシコちゃんは肌を見せたかったのと、紅色を前面に出しだデザインだったので、他の色を混ぜるのがちょっと難しかったかも。
めっちゃ参考にした本やサイト
配色アイデア手帳
この本は配色でめっちゃお世話になりまくりました.......！！
見開き1ページの左ページに「そのパレットのテーマ」と9色のカラーパレット、もう片方に「それらうち何色かを使ったデザイン例」が載っている、という構成なのですが、とにかくカラーパレットの種類が多い。見やすい。例がめっちゃありがたい。
Adobe Colorなどのツールで色の組み合わせを試したりとかっていうのもできますが、それらとの違いは「パレットにテーマがある」ということ。色の組み合わせによるイメージを本当に的確にとらえて言語化してくれているのがホントにすごい。テーマ隠されて9色パレットだけ見せられても何のイメージなのか当てられる気がする。
実際、色の微妙な違いって初心者に使い分けるのが難しくて、思ったより少し淡すぎたり濃すぎたりするものです。ただ見る側は、それだけで「あれ？ちょっと違うな…」ってなってしまいがちなので、本当にプロのものをそのまま参考にできる資料があるとマジで違うんですよね…
これなしで配色を考えるのは結構きびしいってくらい重宝してしまっています。激おすすめ。
配色アイデア手帖 めくって見つける新しいデザインの本［完全保存版］
あたらしい、あしらい。
先ほどが色に関する本だったのに対して、こちらは構成に重きを置く本です。
それぞれの目的に対して、初心者がやってしまいがちなデザインとプロの例を比べ、どこが違うのかを丁寧に添削・解説していくという形式。なんだか参考書を読んでいるみたいな気持ちになる…（実際たすかる）
WebやUIの参考にしていましたが、チラシやポスター等の例が結構充実している印象です。あと初心者の例が「あっこれやったことある…」って感じで心えぐられますが、大丈夫…君だけじゃないよ…大丈夫…
あたらしい、あしらい。あしらいに着目したデザインレイアウトの本
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
こちらは、名前の通りWebデザインの参考になるサイトを集めているサイトさんです。Webデザイン考えるときに漁っています。
カテゴリも細かく分かれていてめっちゃ見やすい。ありがて～
Webサイトって、ここどうやってるんだろ？ってときはコードみれるからめっちゃありがたいんですよね。世の中のすべてのサイトを参考にできる。素晴らしい。
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
言わずと知れた神サイト。モチーフとか適当な言葉入力するだけでもそれっぽい画像を探し当ててくれるので超賢い子です。
同じような目的の人も結構いるので、他人のボード（音楽でいうプレイリストみたいなの）もありがたい。
PC版もありますが、アプリを入れてサクサク片手に検索するのがおすすめ。
おわりに
駄文長文、お読みいただきありがとうございました！
結構とりとめのない文章になってしまった気がする…実際は便利本とサイトの紹介だけにしようと思ってt
.......でも、センスも時間も無くてもこれくらいはできるのか～っていう感じで楽観的にとらえてもらえれば！！
と、3DCG班大盛況(3日目さらちよさんのアドカレもいいぞ)の陰でWebデザ班にも人が来ないかな～～と抜かしているMaiなでした！
明日のアドカレは、54代Sysadのtosukeさんです！！またみてね！！
55代 Maiな
