どうも鳴神 優です。
この度、USEFUL TIMEのブログテーマを『Under Shirt』に変更しました。ブログデザインの方も一新したので、配色やカスタマイズをする上で参考にしたサイトを一緒に紹介していきます。
自分のスキルアップのために2週間ほど時間がかかってしまいましたが、時間をかけてよかったと思っております。ブログの紹介と協力してくれた方々の感謝も兼ねて書かせていただきます！
『Under Shirt』にした理由
Under Shirtを導入するまでに、「Haruni」と「Under Shirt」のどちらブログテーマに変えるか迷っていました。
Haruniはグラデーション、シェアボタン、スマホデザインのドロワーメニューを簡単に導入できる点。
Under Shirtは、トップページをカード型での記事表示、スマホでは1カラムでカード型表示に魅力を感じていました。
トップページをカード型で表示させること、スマホで1カラムカード型で表示されること、この2点がUnder Shirtを選んだ大きな理由です。
Haruniの配色も参考に…
Under ShirtをベースにHaruniのエッセンスを散りばめながら作りたいと思い、シェアボタンや配色はHaruniベースで作っていきました。
シェアボタンにつきまして、作者のminimalgreen（id:minimalgreen）さんから使用許可をいただいております。素敵なシェアボタンを使わせていただき、ありがとうございます！
トレンドでもある鮮やかなグラデーションを使ったデザインではないですが、少しでも読みに来ていただいた人が「このブログかっこいい…」「配色が好き…」と感じてもらえるように、自分が持てる力を出し尽くしたつもりでいます。（デザイン力はまだまだですが…）
もしグラデーションを使ったおしゃれなはてなブログテーマを使いたいという人は、Haruniをオススメします。
横長カード型のトップッページも可愛らしく、スマホデザインでは横からスライドして出てくるドロワーメニューもデモサイトで用意されているものを使えば簡単に実装できます。
「CSSとか書けないけどおしゃれなテーマを使いたい」って人にめちゃくちゃオススメなので、是非ともチェックしていただきたいはてなブログテーマです！
ブログの全体像
今回はレスポンシブに対応したブログカスタマイズをしたので、ブレイクポイントだったりPCとスマホでロゴの見え方が違ったりとかなり苦戦しました…
できる限りシンプルで読みやすく、アクセントにグラデーションを使ってデザインしました。
今まで導入していたものをベースにデザインを調整しながら変えたぐらいで、これだけ印象が変わるとは思いませんでした…
当ブログのカスタマイズが気になっている方は、こちらの記事にまとめてあるので参考にしてみてください。
PCブログデザインを大幅に変更しました！おしゃれなブログカスタマイズまとめ。 - USEFUL TIME
私が参考にさせていただいたサイトを紹介していきたいと思います。
好きな色は画像から
配色関連で悩んでいる方は、マチョログさんのこの記事が参考になります。
写真からブログカラーを抽出するカラーの選び方が書かれているのですが、めちゃくちゃ参考になりました。
自分の場合はメインカラーはブルーと決めていたのですが、グラデーションの使い方に悩んでいるときは、上の写真の様にぼかしを入れてグラデーションを作ったりしていました。
グラデーションの組み合わせって、少し色を変えただけで印象が変わってきます。正直、カラーコードを眺めていてもグラデのイメージがしにくかったんですよね…
「グラデーションの使い方がわからない」と言う人は、色んな写真の明度あげたり彩度下げたりしながらぼかしを入れて、写真からカラーを抽出するのもありだとも思います。
写真からのカラーコードの抽出は、こちらのサイトが使いやすかったので参考にしてみてください。
写真の色情報を調べよう！カラー成分測定「色とりどり」：画像のカラーデータ分析
おしゃれなグラデボタン
FOXISMさんのアイキャッチを使ったフォローボタンを記事下に設置していたのですが、もう少し大きく画像を目立たせたかったので縦並びに変更しました。
もしフォローカードについて気になる方は、FOXISMさんの記事を参考にして導入してみてください！
宇宙魚さんには、スマホのヘッダーメニューのカスタマイズをお手伝いをしていただきました。その節はマジでありがとうございました…
またFOXISMさんのフォローカードのカスタマイズにアレンジを加え、グラデを使っためちゃくちゃおしゃれなフォローカードのカスタマイズも参考になりました！
参考にさせていただいて出来たフォローカードはこちら…
こんな感じで出来ました！
もちろんレスポンシブ対応ですので、気になる方は紹介した記事を参考にしてカスタマイズしてください。少し調整する必要がありますが、試行錯誤する時間を大切にしてくださいね！（もしわからないところがありましたらご連絡ください。）
調整することが大事
ヘッダーもグラデーションを使った背景に変更しました。
今回のデザインでは「きたろぐ」を運営している、あいまいみー（id:imyme_999）さんのツイートだったりシェアしていただいた記事を参考にさせていただいております。たくさんの記事をシェアしてくれて頭が上がりません…
メインブログにテーマとデザインを移行して公開したところ…
本当にこういうアドバイスをいただけるのって恵まれているなと実感します。本当にありがとうございます、みーさん！
デザインのセンスも抜群に良いので、「デザイン力ないんだよなぁ」「誰かにお願いしようかな」って人はデザインのご依頼をしてみてはいかがでしょうか！
アドバイスをいただいた通りに、修正したらめっちゃ良い感じに…！
自作した砂時計のロゴが光り輝いているみたいでカッコいい…少し修正するだけでこれだけ変わるんですね。本当にデザインは奥が深い…
私がデザインの教科書にしている本に〝神は細部に宿る〟という言葉があります。「近くで見たり離れて見たりする」ことってすごい大切なことなんだなぁーってしみじみ…
まとめ
今回のカスタマイズで学んだこと、配色一つで印象がガラリと変わる、調整することの大切さ、Twitterは暖かい…以上！
本当にTwitterでは「デザイン悩んでます」ツイートばかりですみませんでした…本当に「こっちが良いよー」「これ参考にしてみると良いよー」とか色々とお声かけていただいてありがとうございました！
自分自身で言うのも何ですが、素敵なブログデザインが出来たと思っております。このブログデザインを武器にどんどん記事を書いていくのでよろしくお願いします！
今回の記事で紹介しきれなかった配色関連の記事はPinterestにまとめてあるので、興味があったらのぞいて見てください！
こんなにも素敵なブログテーマ「Under Shirt」を作成したrokuzeudon（id:rokuzeudon）さん、ありがとうございます。末長く使わせていただきます!
今回は、はてなブログテーマとブログデザインを変えた自己満記事でした！やはりブログデザインが変わる気持ちも引きしまりますね！
皆さんも、自分に合うブログテーマが見つかると良いですね！カスタマイズでわからない所がありましたらご連絡ください！
それではっ！
