そららのクリエイティブログ ヘッダーイラスト

イラストを使ったページトップに戻るボタンのデザインを新しく考える

イラストで作る上に戻るボタン



こんにちはです。あっちのそららです。

ちょこちょこっとブログのカスタマイズやデザイン調整を進めてます。
開設当初に比べるとブログ全体の質が向上してきており、日々刺激と感情の高ぶりを味わいながらの作業です。


しかし「現状に満足しない」のがモットーなので、次なるレベルアップを求めて前進したり迷子になったり壁にぶち当たったりしています。



今日は、多くのサイトで見かける「ページトップに戻るボタン」を一新したいと思ったので、新しくボタン用のイラストを考えていきます。


※当記事ではイラストをメインに紹介しており、コードに関しては触れていません。HTMLなどの情報を知りたい方は、下記記事をご覧ください。

acchinosorara.hatenablog.jp






現在のボタン

髪の毛が矢印になったナムナムのボタン


現在ブログで動作しているページトップに戻るボタン。
うちのマスコットキャラ、ナムナムくんのちょっとおバカなイラストです。長い間採用していて飽きてきたのと、色が薄いと感じていたので、そろそろ替え時かなぁと。


このボタンを上回るデザインにするのが前提です。
まずは今日まで当ブログを陰ながら支えてくれたナムナムくんボタンに感謝。



ナムナムボタン

新ページトップに戻るボタン コンパクトになったナムナム


新しく描いたページトップに戻るボタン用イラスト。
まずはナムナムくんをよりボタンらしくコンパクトなデザインにしてみました。色も濃くなって視認性アップ!

シルエットにするとサクランボみたいになります。



オベちゃんボタン

新ページトップに戻るボタン アホ毛が伸びたオベちゃんのイラスト


続いてはうちの看板娘、オベちゃんの可愛らしいイラスト。

オベちゃんは触角みたいに大きなアホ毛が特徴なので、ピーンと伸びたアホ毛とページトップに戻るというコンセプトがリンクしたデザインに。
「上へ」の文字も良い感じにフィットして、見ていて楽しめそうなイラストボタンになりました。



パンドラボタン

新ページトップに戻るボタン ヒートアップしたパンドラちゃんのイラスト


最後はもう一人の看板娘、パンドラちゃんのデフォルメイラスト。

おでこにあからさまな矢印を描いて、「ページトップに戻る」と「頭に血が上る」を掛けてみました。怒った顔もキュートで気に入ってます。

リサイズしてボタン表示させた時に、おそらく矢印が小さく見えて目立たなくなるのが難点かなと思います。



終わりに



自分の看板キャラクター達を使ってページトップに戻るボタンのイラストを色々と描いてみましたが、どれを採用するか迷います。

ビジュアル重視か、キャラクター性重視か、シンプルさ重視か、画像容量重視か。

もしくは、敢えてイラストをやめてスタンダードなデザインのボタンにして、メインコンテンツを際立たせる方向性もアリかもしれません。



近々、デザインをどうするか決定して実行に移します。


Twitterも見てね!

 

前回のカスタマイズ記事

acchinosorara.hatenablog.jp

 

前回のオベちゃん記事

acchinosorara.hatenablog.jp




(Twitterもイラストで賑やかになった。)