サイト(wArally! - お笑いライブ検索)のヘッダーにロゴを追加しました。
デザイン変更の経緯
現行サイトの問題点
・トップページを見るだけでは「お笑いライブの検索サイト」であることがぱっと見わからない
解決できてなかった原因
・元々「wArally! - お笑いライブ検索」と表示したかったのだが、文字数が長すぎて、ヘッダに入りきらなかった（デザインが崩れてしまった）
・既存のTumblrテーマを使っているため、レスポンシブなCSSの改変方法がわからずそのまま放置
今回の解決法
・文字ではなく、画像にしてヘッダに組み込む
・ついでにサイト内容を表すアイコンを作る
アイコンのアイデアを考える
「お笑いライブ」を扱うサイトであることがわかりやすいアイコンを考えます。
まず、「お笑いライブ」にまつわる要素を洗い出していきます。
- 劇場
- 人が笑ってる顔
- 漫才師の「もうええわ」の手
- サンパチマイク
- 漫才師のシルエット（人型） etc
アイコンを探す
- オリジナルのアイコンを発注する
Twitterアイコンなどであればココナラで500円〜で発注できる
クラウドワークスでも発注可能(1万〜7万）
相場より高めに設定した方がたくさんアイデアをもらえる（らしい） - Web素材を使う
フリーアイコン、買い切りのWeb素材などを使用(0円〜数1000円）
※広告を置いている場合は、商用利用OKのものを使うこと
※その他、改変OKか、クレジットが必要かなど要確認
今回はいったんアイコンを置いてみた場合のイメージを確認したかったので、②のWeb素材で探します。
アイコンをあてはめてみる
Webで見つけた素材をもとに、ペイントソフトなどで色や角度などを調整します。(※加工OKな素材の場合)
今回はCLIP STUDIO EXを使用。(プロの間ではIllustratorが一般的ですが、月額制で2180円〜と金額が高いのと、操作が難しいのが初心者にはネック。）
調整したアイコンをcanva.comにアップロードし、プロトタイプを作ります。
アイデア案① 劇場
⇨人のアイコンが無機質になってしまい、なんだか楽しそうな感じがしない
アイデア案② 漫才師の「もうええわ」の手
⇨腕だけだとなんのマークなのかよくわからない…
アイデア案③ サンパチマイク
⇨こちらも無機質な感じ。にぎやかな感じがしない。
アイデア案④ 拍手笑い
⇨効果線があることで、なんだか賑やかな感じがする
今回は「ユーザーの体験」「楽しさ」を強調するため、アイデア案④の「拍手」のアイコンを採用しました。
文字の大きさ・余白の調整
実際に上記のアイコンをサイトに当てはめてみると、「お笑いライブ検索」の文字が小さく読みづらかったので、再度調整して読みやすいようにします。
Tumblr上で「Arquitecta」というフォントを使ってしまっていたため、今回は
1. Tumblrで表示したものを画像で保存
2. Canva.comにアップロード
という方式でヘッダ画像を作っています。
文字が潰れないよう解像度おおきめで最初の画像を保存します。
※本来はCanva.com上でも文字入れが可能です
アイコン完成！
ひとまずわかりやすいものになったかなと思います。
サイトのアイコン（拍手のアイコン）は確定ではないですが、いつかもう少し人が集まるようになったら、オリジナルのサイトアイコンを作ろうかと考えています。