かしいさんのProgateでは教えてくれないコト

お笑いライブ検索サイト「ワラリー!」を運営しているフリーWEBエンジニアです。超ド初心者がミスりがちなあれこれを書いていきます。

サイトのアイコン・ロゴを作る

f:id:warallyinfo:20180223043214p:plain

サイト(wArally! - お笑いライブ検索)のヘッダーにロゴを追加しました。

デザイン変更の経緯

現行サイトの問題点

・トップページを見るだけでは「お笑いライブの検索サイト」であることがぱっと見わからない

解決できてなかった原因

・元々「wArally! - お笑いライブ検索」と表示したかったのだが、文字数が長すぎて、ヘッダに入りきらなかった(デザインが崩れてしまった)
・既存のTumblrテーマを使っているため、レスポンシブなCSSの改変方法がわからずそのまま放置

今回の解決法

・文字ではなく、画像にしてヘッダに組み込む
・ついでにサイト内容を表すアイコンを作る 

アイコンのアイデアを考える

「お笑いライブ」を扱うサイトであることがわかりやすいアイコンを考えます。
まず、「お笑いライブ」にまつわる要素を洗い出していきます。

  • 劇場
  • 人が笑ってる顔
  • 漫才師の「もうええわ」の手
  • サンパチマイク
  • 漫才師のシルエット(人型) etc

アイコンを探す

  1. オリジナルのアイコンを発注する
    Twitterアイコンなどであればココナラで500円〜で発注できる
    クラウドワークスでも発注可能(1万〜7万)
    相場より高めに設定した方がたくさんアイデアをもらえる(らしい)
  2. Web素材を使う
    フリーアイコン、買い切りのWeb素材などを使用(0円〜数1000円)
    ※広告を置いている場合は、商用利用OKのものを使うこと
    ※その他、改変OKか、クレジットが必要かなど要確認

今回はいったんアイコンを置いてみた場合のイメージを確認したかったので、②のWeb素材で探します。 

アイコンをあてはめてみる

Webで見つけた素材をもとに、ペイントソフトなどで色や角度などを調整します。(※加工OKな素材の場合)
今回はCLIP STUDIO EXを使用。(プロの間ではIllustratorが一般的ですが、月額制で2180円〜と金額が高いのと、操作が難しいのが初心者にはネック。)
調整したアイコンをcanva.comにアップロードし、プロトタイプを作ります。

www.canva.com

アイデア案① 劇場

f:id:warallyinfo:20180223032017p:plain

人のアイコンが無機質になってしまい、なんだか楽しそうな感じがしない

アイデア案② 漫才師の「もうええわ」の手

f:id:warallyinfo:20180223031847p:plain

腕だけだとなんのマークなのかよくわからない…

アイデア案③ サンパチマイク

f:id:warallyinfo:20180223031835p:plain

こちらも無機質な感じ。にぎやかな感じがしない。

アイデア案④ 拍手笑い

f:id:warallyinfo:20180223032232p:plain

効果線があることで、なんだか賑やかな感じがする

今回は「ユーザーの体験」「楽しさ」を強調するため、アイデア案④の「拍手」のアイコンを採用しました。

文字の大きさ・余白の調整

実際に上記のアイコンをサイトに当てはめてみると、「お笑いライブ検索」の文字が小さく読みづらかったので、再度調整して読みやすいようにします。
Tumblr上で「Arquitecta」というフォントを使ってしまっていたため、今回は

1. Tumblrで表示したものを画像で保存
2. Canva.comにアップロード

という方式でヘッダ画像を作っています。
文字が潰れないよう解像度おおきめで最初の画像を保存します。
※本来はCanva.com上でも文字入れが可能です

アイコン完成!

f:id:warallyinfo:20180222211340p:plain

ひとまずわかりやすいものになったかなと思います。
サイトのアイコン(拍手のアイコン)は確定ではないですが、いつかもう少し人が集まるようになったら、オリジナルのサイトアイコンを作ろうかと考えています。