HOME > ブログ開発・収入 > 【冬仕様】PCサイトの色彩を大幅に見直してみた【青を基調】

【冬仕様】PCサイトの色彩を大幅に見直してみた【青を基調】

PCサイトをご覧の皆様はお気づきかと思われますが、この度PCサイトの色彩を大幅に見直すことにしました。
見直しに至った動機、修正後のサイトのデザイン、参考にしたサイト、その他サイトの修正報告などをまとめて紹介します。




見直しに至った動機


以前のサイトのデザインがこちらです。

サイト修正前

このサイトのデザインから、見直しに至った動機は主に以下の3つです。

  • 色彩や装飾がダサすぎ
  • 配色の統一感を出して読みやすくするため
  • 第一印象を良くするため

色彩や装飾がダサすぎ


まず、色彩というか装飾があまりにもダサすぎます。
ユーザーがまた来たいと思うようなデザインじゃありません。
わけの分からない黄っぽい色に、わけの分からない緑っぽい色をあわせています。
ただでさえ、記事の内容がスッカスカなのに、デザインまで最悪だったら誰も記事を読もうとすら思わないでしょう。
殆どが滞在時間15秒以下で直帰されているのは、それが原因ではないかと考えています。


配色の統一感を出して読みやすくするため


修正前のサイトの配色は、統一感がありません。
黄色と緑の組み合わせは一見良さそうに思えますが、てきとうに目分量で決めた黄色と緑には統一感なんてありません。
この配色の統一感の問題は、読み続けるにあたって、人によってはストレスに感じることさえあります。
ストレスフリーで読んでもらうには、しっかり配色の計算を行った上で、決定していかなければいけません。


第一印象を良くするため


なんと言ってもこれが大きいでしょう。第一印象です。
もちろん、記事の内容が重要ですが、記事を読む前に、まずサイトのデザインが目に映ります。
読むかどうかをサイトのデザインで決めている人も、全くいないわけではないと思います。
人間の顔を変えることは難しいですが、ウェブサイトの表向きのデザインを変えることは3時間もあれば十分です。
おまけに自分でやれば無料ですし。


修正後のサイトのデザイン


修正後のサイトのデザインがこちら。

サイト修正後

ご覧の通り、さわやかな青を基調として、構成されております。
青と白で清潔感、冷静さを確保しています。
ところどころ緑がありますが、それは項目を目立たせるために装飾しました。
反転色の赤を使用する手もありますが、あまり目立ちすぎると、サイトの配色のまとまりがなくなります。
そこで緑を選びました。


参考にしたサイト


このサイトのデザインの修正作業で参考にしたサイトはこちらです。

外部サイト
このサイトでは、まずテーマとしたい色を選び、そこから関連する色を紹介してくれるので、デザインの素人でもサイトの色のバランスを維持することができます。
パステルカラーを選べば、同じパステルカラーを関連する色として紹介してくれますし、ソリッドカラーなら同じソリッドカラーをおすすめしてくれます。
ちなみに私がこのサイトの修正にテーマとして選んだのは、クリアな青色(外部サイト)です。


その他修正の報告


その他サイトの修正に関することを報告します。

関連記事を紹介する際に、以前はリンクの範囲を文字列だけとしていましたが、この修正で関連記事を紹介する枠の全てをリンクの範囲としました。
これにより、関連記事にアクセスしてもらいやすくなります。
マウスオーバーで枠内の背景も変わるので、リンクの範囲であることがすぐに分かるでしょう。

また枠の装飾も、シャープな二重線にして、なるべく違和感がないようにしています。
スマホサイトの関連記事紹介も、タップしやすいように、このように修正する予定です。

マウスオーバーで枠内の全てが当たり判定に


まとめと関連記事


まだこれで完成とまでは言えませんが、少なくとも前のサイトよりは見やすくなったのではないかと思います。
タイトルに冬仕様と書きましたが、別に夏場でも涼しげで良さそうです。
特に問題はなさそうなので、しばらくそのままにします。

そして、スマホサイトの修正も年末のメンテナンス作業でなるべく早めに行います。
PCサイトと同じようなデザインにする予定です。

関連記事

スポンサーリンク
シェアする
関連コンテンツ
関連記事

プロフィール

HN:おとうふ

おとうふ


豆腐メンタルですが、ネットの片隅に生きる半端者です。
このブログでは、主に艦これやアズレンなどゲームに関する記事を中心に運営しております。

初めての方、特定の分野に関する記事のリクエスト、詳細なプロフィールなどはこちらから

記事検索

スマホ・携帯で見る

スマホ、携帯で見たい方は、こちらのQRコードを読み取ってください。
QR