【イモっぽいデザインから脱却したい!】細部の調整でテーマに説得力を!【その8】

【イモっぽいデザインから脱却したい!】ということでデザインの改修をしていく中で、今回は細部のちょっとしたデザインを調整してみました。当ブログは、テーマをオリジナルで作っております。公開されているテーマのような完成度の高さにするには、ちょっとした部分にこだわることが重要なのかなと考えます。そうすることで、“説得力のある”テーマとして仕上がるのではないかぁと思います。

現段階で、作りこみが甘いなぁと思っている部分を、本記事でまとめて調整してみました。

ブログ全体の主要なパーツの
角の形を統一する

当ブログを構成する主要なパーツ、
例えばヘッダーやサイドバー、カード(トップページの記事のリンク)や検索バーなど、の角のデザインが「直角」か「かどまる」でバラバラになっていて、「かどまる」も曲がり具合も統一されていない状態でしたので、そちらを直してみました。

角の形から伝わるイメージ

角の形を変えることで、ユーザーに伝えたい内容の
自分が思うイメージ実現に近づけることができると思います。

例えば、
角を丸めると、やわらかく、優しいイメージだったり、
逆に直角だと、クールだったり、真面目なイメージにしやすいですよね。

どちらにせよ、場合によってはマイナスイメージにもなりうるので、上手にデザインのバランス調整することが大切ですね。本ブログでは今回、ほどほどの「かどまる」で調整することにしました。


「かどまる」で統一してみた

当ブログは、初心者向けの内容を目指しているので、より親しみやすいデザインにしたいと思っています。ただし、まがいなりにもハウツー系でやっているので、幼稚になりすぎないようにほどほどな角丸具合で統一することにしました。具体的には半径 8px に設定してみました。

理由は、『ハウツー系なのである程度の権威感を保ちたい』、『初心者向けなのでやわらかさも入れたい』というどっちつかずのコンセプトを実現するためです。

ブログカード(トップページの記事リンク)を「かどまる」に

まずはブログカード(トップページの記事リンク)を
「かどまる」で統一してみました。

「かどまる」したはいいですが、
下地の色(ホワイト)と背景(薄い黄色っぽいテクスチャ)との境目が分かりづらく、「かどまる」なのかどうか分からなかったので、背景色を若干濃くし調整してみました。

結果的にすごくパキッとしたと思います!

リンク先のページも「かどまる」なので、見えているエリアをつかさどるパーツは「かどまる」で統一することができて、だいぶ整った気がします。

メリハリが無くなるというのと、更新が面倒になりそうという理由で、ひとまず記事内の要素のアイキャッチ画像や添付画像などの記事に内包される要素は「直角」のままにしています。全部が「かどまる」だとかえってメリハリが無くなってしまうので、都度見ながら調整するのがいいような気がします。。

「かどまる」にするための CSS は border-radius

「かどまる」にするためには CSS の border-radius プロパティで指定することができます。

border-radius: 8px;

このコードを任意のボックスに指定してあげればOKです!
特に何も難しいことはないですね。

角を丸くすることでカード内のアイコンが格好悪くなってしまった

いきなりボックスの角を丸くすることで、内包する要素のマージンに余裕がない場合、場合によってはいまいちな見た目になってしまいます。

なんというか、、、素人感ありますよね。。。

クオリティが低いとは、まさにこういうことですよね。

このようなちょっとした部分
いかに丁寧に仕上げるかがデザイナーさんの腕の見せ所なのかなぁと思ったり思わなかったり……。

いろいろな解決策があると思いますが、
今回は、マージンを広めに取ってうまくバランス調整することにしました。

どうでしょう?ちょっとはよくなった気がしませんか?
少なくとも“やってる感”は出てるような気はします。

また、カラーは半透明のブラックで、外枠に白いラインを入れてみました。イメージは透明なプラスチックのチップみたいな感じ。

これにより、背景色に左右されずに、汎用的なアイコンとしての最低限の役割を持たせることができそうです!

投稿日の位置調整

ついでに、投稿日の位置も気になっていたので調整しました。
元々はサムネイルの右下にありましたが、タイトルの下に移動させました。

こちらのほうが圧倒的に見やすくなったと思います!
当ブログの場合は、サムネイルに文字が多いため、文字が被ったり、ドロップシャドウが美しくなかったり、なんだかごちゃごちゃしてしまうという問題を感じていましたが、無事に解決することができました。

サムネイルに文字を入れないという方針のブログであれば、元のサムネイルの上に投稿日を表示させるやり方もありだと思います。適材適所ですね。

マウスオーバー時、上にずれるアニメーションへ変更

以前はマウスオーバー時は、半透明になるアニメーションに設定していたのですが、
なんとも安っぽく感じていたので、せっかくなのでこちらも変えてみました。

今回はマウスオーバーで、上にずれるアニメーションに変更してみました。

副次的な影響でドロップシャドウを入れることで、若干見づらかった境界線がもっとくっきり見えるようになり、丁寧なデザインを感じることができるようになったと自負しております。

あと、こちらのほうがなんというか、“いまふう”ですよね!

ちょっとトリッキーなデザインも入れてみた

いろいろな改修をしているうちに
記事下の「この記事を書いた人」のデザインも何気に崩れてしまっていたので、こちらの修正もしました。

つい調子に乗って、遊び心を入れた形にしてみたのですが、意外としっくり来て、これはこれでアリなのかなぁと思いました。

なんとなく個人的に、“フッター”は、遊び心を入れるのに丁度よいエリアなのではないかと思っています。

まとめ

今回は、「かどまる」メインで調整しましたが、細部のデザインを整えることで、テーマの完成度がグッと上がったような気がします。

なんだかデザインがカチッと決まらない方は特に細部ほど手を抜かずにキチッと作りこんでみてはいかがでしょうか!

トップへ戻る