アイコン関連・バナー

[Tooooomo]

• [ ] 動くサーバーアイコン
• [ ] youtubeバナー (2560x1440px)(スマホは1546x423px)
• [ ] twitterバナー (1500x500px)

[N4K4eight]

ラフつくったんで見てもらってもいいですか twitterバナー ？

[Tooooomo]

1stラフのフィードバック

ちょっと気になるところが多いのでせっかく作ってもらったのに申し訳ないけどリテイクでお願いしたいです()

次のラフで修正してほしい点

• あえて狙ったのかもしれないけど ところどころ透過が残ってしまっている →BGレイヤーを置いて対策

• 一番見せたいロゴとサークル名が小さくまとまってしまっている サークル名はフルでほしい→まずロゴ・テキストを配置してから背景考えた方がいいかも

• 中心点を意識して Y座標は問題ないと信じてるけど ロゴとテキストのX座標に意図をもって 左側の帯を配置したせいで右寄りにズラさざるを得なくなったなら減点()

• ロゴの画像は色・透過とかこんなの欲しいっていうのがあればこっちで調整して渡せる 一応リポジトリのsrc/browser/graphics/talk/assetsに透過ありなし・モノクロロゴあるからそれ使ってみて うちのロゴは透過して背景とかぶるとKやSが読みにくくなっちゃうからロゴ周りの背景はしっかり考えないとかも

• 色遣いを絞ったのは統一感が出ていいかんじ テキストにもロゴに使われてる色使ってもいいかも、頭文字だけとか縁取りとかアクセントに

• 今回は大丈夫だったけど左下の一部は実装したときアイコンで隠れちゃうからそれも意識して

[N4K4eight]

@Tooooomo logoの.aiってありますか？

[Tooooomo]

共有します サイズ変えたりして使うときはコピーを作って元のファイルは上書きしないようにしてください https://assets.adobe.com/id/urn:aaid:sc:AP:b972c988-9ff8-4603-a6cd-0dc2b3699b52?view=difile

[N4K4eight]

Twitterバナー　[2ndラフ]

ダメ出しやアドバイスください

[Tooooomo]

良いポイント

要素のバランス・色遣い

中心にロゴ、右にサークル名と略称、左の空いたスペースに琴柱灯篭と要素がまとまりをもって配置されています。 前回感じたアンバランス感が抑えられていていいと思います。 色の数も煩雑に見えない数に抑えられていて〇です。

フォント・文字の色遣い

シンプルなフォントが使われていていいと思います。 ただ略称のeが縦長に見えるのが気になります。 サークル名と略称はフォントサイズを変えただけで同じフォントを使っていると思いますが、 略称の方のフォントをもう少し探してみてください。

背景デザイン

スケルトンのロゴを配置したのは悪くないと思います。 ただ1ptの単線ではかなり心細い印象を受けます。 線の太さ、線の色、ロゴの縮尺などをいじって、表の要素と干渉しないような塩梅を探ってみてください。

良くないポイント

メインとなる要素

このバナーで最も目を引くものは何でしょうか。 おそらく多くの人はまず琴柱灯篭に目が行くと思いますが、それはあまり良くないのではないでしょうか。 ここではまずサークル名・略称が目に行くべきで、それ以外はメインの要素を引き立てる役割に徹すべきです。 何をメインにおいて、それを引き立てるにはどういった要素を配置すべきか、考えてみてください。

背景色

申し訳程度にグラデーションが入っていますが、ほとんどあってないようなレベルです。 背景もメインの要素を引き立てる重要な一パーツであり、今回のは背景の設定し忘れのような印象を受けます。 要素や背景をシンプルにすればするほどスカスカ感との戦いになってくるので難しい部分ですが、もう一度考えてみてください。

サークル名について

細かいことになりますが、色付き文字の縁取り線が残っているのが気になります。 あえて残したのか、消し忘れかは分かりませんが、遠目で見ると違和感を覚えます。 背景に溶け込んでしまうなら、縁取りの色や太さを変える、影をつけるなどの工夫をしてみてください。

また左右の余白(Kとロゴの間、mと右端の間)に大きく差があるのが気になります。 数値上は中央に配置していても実際にはアンバランスになっている場合があるので、 どこからどこまでの中央に置くべきか、再考してみてください。

Twitter表示の考慮

アプリにしろブラウザにしろ、PCにしろスマホにしろ、バナーの左下部分はある程度アイコンが被ります。 KUeSTのアイコンはロゴなので、それも考慮して要素の選択・配置をしてみてください。

---

感じたのはこれくらいです。 良くないポイントが多く見えますが、前回よりは格段に良くなっていると思います。 それと今回参考にしたものなどがあれば教えてください。 どこからインスピレーションを得たのかとか気になるので。

[N4K4eight]

フィードバックありがとうございます

ロゴの配置等のデザインの参考にしたのは、TSMのバナーです↓

背景デザインの参考にしたのは、Rush gamingのバナーです↓

グラデは正直いらないかなあと思ってます

[N4K4eight]

Twitterバナー　[3rdラフ]

パターンで4つ持ってきました。手直しとちょっとした背景デザインの違いなので、全体でフィードバックをいただければと思います。Twitterに実装したときにアイコンが被ることはありません（検証済み）。

1.CRのバナーイメージ

2.ななめストライプ背景

3.みずたま模様っぽくロゴを背景にいれました

4.ロゴのパスをぐちゃぐちゃにして背景にランダムにぶち込みました

[Tooooomo]

各デザインの評価

1>2>4>3の順で良いと思います。 以下それぞれの評価になります。

1案

ロゴ・テキストのバランスや配置が最もいいと思います。 左上のロゴは不要かもしれません。 背景が真っ白なのは確かに寂しいので2～4案の背景を採用してみてもいいかもしれませんね。

2~4案の琴柱灯篭

正直なところ、必要ではないと思います うちの活動に直接かかわるものではないですし、「なんでコレが？」という疑問を抱かせてしまうように感じます。 確かに不自然に空いたスペースはバランスが悪く見えますし、手抜きに見える場合もあるので埋めるのが吉です。 ただ装飾はそういったスペースを埋める手段になり得ますが、この場合は装飾を置くことが目的になっていませんか？ あくまでここで大事なのはロゴとKUeSTのテキストで、 それを引き立てるものはあっても並ぶものはあってはいけないと考えてください。

2案

シンプルながら背景を設定したことで”見れる”デザインになりました。 ストライプのような単純なパターンもシンプルデザインにおいては非常に効果的に働きます。 他のパターンも試してみて、良い背景を探してみてください。 同じストライプでも角度、幅、色などいじることで大幅に印象が変わってきますので、細かく数値を調整してみてください。

3案

中心のロゴと同じサイズのものを背景に入れるのは悪手だと思います。 メリハリがなくどこに目線を向ければいいか分からなくなりやすいです。 このデザインにするなら中央のカラーのロゴなしでテキストのみにする方がいいかもしれません。 細かいところですが2列目のロゴのX座標は1・3列目のロゴのちょうど中心になるよう配置されていますか？ 少し右に寄っているように見えます。シンプルなデザインほど少しのズレが違和感につながるので設定は厳重に。 それとテキストと背景の被りを避けるために白い四角を配置していますが、 背景が中途半端に切れて設定ミスのように見えてしまっています。 案4も含めて別の対策を考えた方がいいと思われます。

案4

ロゴのパーツを分解するのは悪くないアイデアだと思います。 ただKUeSTのロゴはバラバラにすると文字が成立しなくなってしまうデザインです。 バラバラにしてもアルファベットの形を残しているなら良いのですが、今回は採用を見送ったほうがいいかもしれません。 背景のサイズ感はかなり良いと思います。 パーツはそのまま、角度をいじった上でサイズをこれくらい大きくして配置してみても面白いかもしれません。

---

今回はこれくらいです。フィードバックが遅くなって申し訳ないです。 次はもう少し早めに反応できるようにしますね。