ヘッダーイラスト
SORARA
CREATIVE BLOG
今日も楽しくクリエイティブ・ライフ!
プロフィール画像

あっちのそらら

趣味で創作活動をしています。
イラスト・グラフィックデザイン・ウェブデザイン・写真撮影など、さまざまなクリエイティブに挑戦中。

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

イラストで作る、上に戻るボタン
こんにちはです。あっちのそららです。

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

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

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

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

acchinosorara.hatenablog.jp



現在のボタン

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

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

ナムナムボタン

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

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

オベちゃんボタン

オベちゃんのページトップに戻るボタン
続いてはうちの看板娘、オベちゃんの可愛らしいイラスト。

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

パンドラボタン

パンドラちゃんのページトップに戻るボタン
最後はもう一人の看板娘、パンドラちゃんのデフォルメイラスト。

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

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

おわりに

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

ビジュアル重視か、キャラクター性重視か、シンプルさ重視か、画像容量重視か。
もしくは、あえてイラストをやめてスタンダードなデザインのボタンにして、メインコンテンツを際立たせる方向性もアリかもしれません。

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

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

©2017 Sorara Creative Blog