USEFUL TIME

気になったらとにかく記事にしてみる雑記ブログ。

Codomisu Flatを導入して読みやすいデザインになりました。カラー選びに使ったツールも一緒に紹介します。

 

f:id:designlife:20170717153635j:plain

 

どうも鳴神優です。

 

お気付きの方もいると思いますが、USEFUL TIMEのブログテーマと細かい箇所を変更しました。

 

新しいブログテーマは『Codomisu Flat(こどみすフラット)』を導入し、ヘッダー画像や配色についても少し変更しました。

 

ブログテーマをCodomisu Flatに変えた理由、配色に関して気をつけたポイントや効率アップしたツールの紹介をしていきたいと思います。

 

 

Codomisu Flatを導入しました。

 

開設以来、当ブログのブログテーマは『Blank』を使用させていただいていました。最近、少しブログに対して意識が変わったこともあり、Blankに物足りなさを感じていたんですよね。

 

こどみす(id:codomisu)さんが公開した『Codomisu Flat』を導入させていただきました。

 

hitsuzi.hatenablog.com

 

Codomisu Flatを導入した理由

 

今回、Codomisu Flat(こどみすフラット)を導入しようとした理由として…

 

  • フラットなデザイン
  • 記事本文の幅が広い
  • 余計な装飾がない
  • スライダーの導入ができる

 

自分の理想のブログデザインは、読者が読みやすくオシャレなデザインを求めています。Codomisu Flatは、自分が理想とするデザインに近いテーマだったので導入することを決意しました。

 

特に記事本文の幅が広いということが導入を決めた大きなポイントでした。

 

f:id:designlife:20170716154528p:plain

 

今まで使っていた『Blank』のデザインです。せっかくのPCデザインなのに、記事本文の幅に不満を感じていました。

 

f:id:designlife:20170716154540p:plain

 

比べてみるとかなりの差があります。これだけ広い幅で表示されると、画像も見やすくフォントを大きめにしても窮屈にならない。

  

さらに余計な装飾がないので、デザインをするのがめんどくさいって人でも簡単にオシャレなブログを作ることができます。

 

まさに"導入するだけではてなブログをオシャレにできるテーマ"と言うのには、納得がいきますね!

 

ヘッダー画像も変えちゃいました

 

ヘッダー画像と言ったら、『ブログの玄関』ってくらい重要な場所だと考えています。

 

f:id:designlife:20170716160718p:plain

 

今まではヘッダー画像は用意せずにWebFontを利用してヘッダーの設定をしていましたが、少し物足りないと感じていたんですよね。 

 

f:id:designlife:20170716161032p:plain

 

USEFUL TIME=時間→時計→歯車』をイメージして作成してみました。我ながら良い出来だと感じています(笑)

 

グローバルメニューも同色に設定してよりフラット感が出るように変更。

 

メニューの背景色は違う配色にした方が良いのかなっていう印象がありましたが、同色にするとオシャレになりますね。同色にしてみる選択も悪くないと思います!

 

配色も少し意識しました

 

ブログ全体の配色にも少し意識しながらカスタマイズさせていただきました。

 

f:id:designlife:20170716162150p:plain

 

 

カスタマイズする前と基本的にあまり変わらないのですが、サイドバーの色選びには気を使いました。

 

サイドバーの長さは短いのですが、少しでも読者の方に記事本文を読んでもらえるように目立ちすぎないコンテンツカラーを選んでいます。

 

配色選びに使ったツール

 

色見本を眺めているとうまくイメージが掴めなかったり、タブを行き来するのが面倒なんですよね。横並びにカラーパレットを並べて見た方がよりわかりやすいのに…

 

そんな悩みを解決してくれたアプリがありました。

  

Adobe Capture CC
Adobe Capture CC
開発元:Adobe
無料
posted with アプリーチ

 

実際に『Adobe Capture CC』を使用して配色選びをしました。

 

Adobe Capture CCについて簡単に説明すると、撮影した写真からPhotoshopやIllustratorのベクター素材やパターン、シェイプ、カラーテーマ、ブラシを作成できる"デジタルアセット作成アプリ"です。

 

今回は、主にカラーテーマについて書かせていただきます。

 

Adobe Capture CCを使ってカラーパレットを作りました

 

カラーテーマの使い方について簡単に説明させていただきます。

 

f:id:designlife:20170716172609j:plain

 

使い方につきましては、上の画像の通りです。撮影した写真やカメラから簡単にカラーを抽出することができるます。ちょっと色合いを変えたい人はその場で調整すれば簡単に変えることが可能です。

 

例えば空をイメージした配色にしたいと言う方は、写真やカメラからカラーテーマを作成することができるので、「この写真のこの色のコードってなんだろう?」って言う悩みを簡単に解決できちゃう優れもの。

 

カラーパレットが横に並んでくれるので、「どの色の組み合わせが良いのか」を簡単に確認することができます。

 

カラーコードを直接打ち込むことで色の変更もできるので、原色大辞典と組み合わせて使うとかなり効率よく色選びができます。

 

WEB色見本 原色大辞典 - HTMLカラーコード

 

選んだ色が思った以上に合わなかったりして時間がかかってましたが、カラーパレットが近くにあることで直感的にわかりやすく色選びをすることができました。

 

ブログの色選びって何かと時間がかかりますよね…こういうツールを導入するだけでかなり作業効率がアップするので、ぜひとも参考にしてみてください!

 

まとめ

 

ブログデザインの横幅が大きくなってくれたのでとても助かっています。Codomisu Flatのおかげで、かなり理想なブログデザインになりました。

 

こどみすさん、ありがとうございます!

 

ブログテーマを変えたついでにカスタマイズをしたのですが、知識が圧倒的にないことに泣けて来ました…

 

気分転換に細かい修正やカスタマイズをすると楽しいですね!主に修正で時間を取られましたが…笑

 

PCデザインは現状満足なので、時間ができたらスマホデザインも頑張ります。笑

 

それではっ!

 

村田 智明 CCCメディアハウス 2015-09-17