Read Article

ブログを装飾するボタンを作成するにあたり配色で悩んだという話

スポンサーリンク

モバイルファーストという言葉をモットーとして、少しでもスマホからの見た目をよくしたいといろいろと模索してきました。

今回、その一環としてスマホから見た画面(モバイル)の最下部にある「このサイトについて」という箇所に「ブログランキング」系のボタンを作成し設置してみました。

作成する過程は、様々なブログで紹介されているため省きますが、実際に作成してみると色でとても悩みました。もちろん、わたしはプロではありませんので配色の技術等は持ち合わせていません。また、生来のファッションリーダーでもありませんので、とても困ったことになりました(笑)

そのあたりの試行錯誤っぷりを共有できたらと思ったことと、いつかやり直す際の備忘録代りに記事を書こうと思った次第です。

2個赤のボタン
こちらが最初に作ったボタンです。なんともどぎつい印象になりました。ちなみに、これらは真っ赤ではなくエンジっぽい赤なのですが、背景が黒のグラデーションなのでより締まった赤として見えるようです。キツ過ぎるので却下しました。

赤と紫ボタン
赤だとキツクなるので、紫ではどうかと色見本をみながら選んだのがこちらの色(darkmagenta)です。同じエンジ系ですが、より紫に近くなった感じですね。さきほどのエンジと並べるとキツさが少し緩和された感じがします。

上薄い下濃いボタン
darkmagentaと比較するために更に明るめの紫系の色(slateblue)を選んでみました。背景の黒のグラデーションと合わせてもどぎつい印象は消えてきたかと思います。

また、こういった色を比べる過程を経ることで、いっそのこと単色のボタンではなく、それぞれ違う色のボタンでもいいのではないかと思うようになりました。すると次は、濃いめを上にするか薄めを上にするかで悩みました。

上濃い下薄いボタン
このあたりになってくると、自分でもだんだんわからなくなってきていたのですが(笑)ボタンの大きさを考慮して大きい方を薄い色、小さい方を濃い色にした方がバランスがいいかと考え、コチラを最終案として採用しました。最後は理屈です。

「紫?趣味悪いよ!」という意見もあるかもしれませんが、紫が好きなのです(笑)

グッチはこう思う
ブログに手を入れたいと思いつつ幾星霜(笑)何かをやり遂げるというのは、なかなか億劫なものです。「仕事が忙しい。」「付合いがある。」「眠い。」「お腹が空いた。」などいろいろな言い訳を考えては作業から遠ざかってしまうものです。

「今日こそはやろう!」と覚悟を決め、あとは「えいやっ!」ととにかく手を動かしてみることがコツだと思います。ボタンを作ったこと、それはとても小さな一歩ですが、なんだかとても嬉しい達成感を味わっています。

<参考リンク>
WEB色見本 原色大辞典 – HTML Color Names

Return Top