Colorful Bullet リニューアルしました!

皆さんこんにちは!コーポレイトIT室(通称:CIT)でブランディングチームに所属しているmaripigです。
2019年からスタートしたこの技術ブログColorfulBulletですが、私たちの所属するバレットグループ株式会社が来年10周年という節目を迎えるにあたりこちらのブログデザインを一新することになりました^^

今回は本ブログのリニューアルを担当した私が、「コンセプト設計」と「はてなブログテーマのカスタマイズ方法」に焦点をあててお話ししたいと思います。

コンセプト設計

今回のリニューアルでは、まずデザインの軸となるコンセプトボードの作成から入りました。
普段デザインをする際は参考イメージやカラー設定などを初めにすることはあっても、コンセプトボードの作成まではなかなかしていませんでしたが今回はいざ始めようと思ったときに方向性で結構悩んでしまい中々作業が進まなかったので、頭の中を整理する意味で作成することにしました。

まずはキーワードを整理

頭の中でぼんやり考えていたことを言語化していきます。

リニューアルの方向性として挙げられていた要望

  • 白を基調とした清潔感のあるデザイン
  • アメリカ西海岸風のテイスト

変更点として意識したいと思ったポイント

  • バレットグループのロゴとの親和性を高めて、以前よりも「バレットグループのテックブログ」であることがデザインからも伝わるようにしたい
  • 愛着のある「カラカバくん」は活かしたい
  • カテゴリとタグの整理をして情報を見つけやすくしたい(余計なものは削ぎ落とす=サイドバーは不要かも)

言葉にして整理するだけで、だいぶ頭の中がスッキリしますよね。
キーワードを抽出しないと、この後のイメージ収集が難航するので大事な工程です。

イメージの収集

キーワードが揃ったらイメージを収集していきます。

画像の収集

イメージ画像の収集は pinterest さんにお世話になってます。
デザイナーにはお馴染みのサービスだと思いますが、近いイメージが見つかったらそこから類似した画像をどんどん辿っていけるので方向性を固めていくのに非常に重宝しますよね。

その他では Shutterstock でキーワード検索してみたり。
画像がある程度集まってきたら、そこからカラー選定とフォント選定を進めていきます。

カラー選定

まず「白が基調であること」「ロゴとの親和性を高めたい」この2点があるのでモノトーンベースは前提として、「西海岸風」「清潔感」のイメージに合うブルーは使いたいと思いました。
ブルーを選定したら、これらにあうアクセントカラーも選定。
今回ブログのカテゴリを3つに絞ろうと考えていたのでプラス2色、オレンジとグリーンを選びました。

フォント選定

デザインの要ともなる英字フォントから選定。
ロゴとの親和性も高く、西海岸風のイメージもあるハンドスクリプト系かつボールド系のフォントをまず探しました。
また、ハンドスクリプト系だけでは視認性で劣る部分があるので、インパクト系のゴシックフォントも。
できればwebフォントとしてあるものを使用したかったのでGoogleフォントで検索。
下記を選びました

  • ハンドスクリプト系:Yellowtail
  • インパクト系:Oswald

数字や記号の見え方もチェックして選ぶと良いと思います!
次にそれらにあう日本語フォントを選定。

  • Zen Kaku Gothic New

※ブログでは使用しませんでしたが、その他のクリエイティブに使用予定

コンセプトボードへ

あとはここまで集めた素材たちを任意のボードに張り付けて、コンセプトボードとしてまとめます。 私はXDで適当なボードを作って、そこに貼り付けて作ってます。
コンセプトボード完成!
やはり、ここまでまとめると方向性が明確になりますね!
これをもとにこのあとデザインを作成しましたが、指標があるのでとても進めやすかったです。
また、チームで作業するときやデザイン経験の少ない依頼者との認識合わせにも役立つのでそういったシチュエーションで制作する際には特におすすめですね。

はてなブログのテーマカスタマイズ

デザインが完成したらいよいよテーマのカスタマイズへ。
ブログ立ち上げ当初のデザイン&実装も自分が担当したのですが、当時はまだコーディング学びたてだったのでカスタマイズするほどの自信はなく既存テーマを使って背景画像などの変更を行うまででした。
あれから3年、ある程度のコーディング経験も積みましたので今回はテーマのカスタマイズに挑戦しました!

はじめに

まずは公式のデザインテーマ制作の手引きにもあるとおり、公開範囲を自分のみにしたブログを新たに作成しサンプル記事を作成します。 help.hatenablog.com ある程度スタイルの入った状態からカスタマイズしたかったので、公式でカスタマイズ用に公開しているBoilerplateテーマをダウンロードするところからスタートしました。
ダウンロードしたCSSをまずは適用して表示を確認し、いよいよカスタマイズスタートです!

デザインカスタマイズページで設定したこと

cssをカスタマイズする前に、まずはカスタマイズページで設定できるところから行っていきます。 今回変更したのは以下の項目です。

ヘッダ

  • ロゴ画像をアップロード
  • 表示設定を画像のみにする

サイドバー

  • モジュールの削除

モジュールを選択して挿入することもできますが、カテゴリなどはオリジナルのフッターに入れようと思っていたのであらかじめ入っていたものは全て削除しました

フッタ

  • HTMLコード貼り付け

今回オリジナルのフッタを作成しているので、HTMLコードをここに貼り付けています。

管理画面で設定したこと

ついでに管理画面で設定できることも変更しておきましょう。
今回設定したのは以下の項目です。

ブログアイコン

設定>基本設定 の中にあります。

アイキャッチ画像

設定>詳細設定 の中にあります。
アイキャッチのない記事での自動設定もチェックを入れておきました!

トップページでの表示形式<PRO>

設定>詳細設定 の中にあります。PRO版のみ設定可能のようです。

  • 一覧表示 に設定

ヘッダとフッタ<PRO>

設定>詳細設定 の中にあります。PRO版のみ設定可能のようです。

  • ブログにヘッダを表示しない に設定
  • ブログにフッタを表示しない に設定

ここでいうフッタは↓この部分↓のようです。

webフォントの読み込み

設定>詳細設定>head内タグ という項目の中の図の部分にGooglefontの読み込みタグを設置しました。

デザインCSS

cssのカスタマイズについて詳細をここで書いても仕方ないかとは思うので、ここはちょっと戸惑ったな・・・というポイントを解説しておきます。

一覧画面:カードデザインの要素の順番変更

HTMLを変更できない場合、要素の順番変更って「どうするんだ。。。」ってなりました・・・が、こういった場合便利なのが flexbox ですよね!

  • flex-direction で順番をHTML要素の並びとは逆順に変更
    flex-direction: column-reverse;

また、サムネイルは一番上にしたかったので order を使って並べ替えも行っています。

  • サムネイルは order: 1;
  • サムネイル以外はorder: 0;

フッタに画像を入れたい

今回作成したオリジナルのフッタには画像がいくつか配置されています。
はじめは「どこに画像をアップロードすれば・・・」と戸惑いましたが、はてなフォトライフというサービスで画像をアップロードすれば良いようです。 この存在に気づいたものの、貼り付けるURLがわからない・・・orz
結局サンプル記事に貼り付けて、公開した記事のURLを確認してコピペしました。(もしかしたらもっとちゃんとした方法があるのかも?)
おそらくURLはこんな感じです↓

https://cdn-ak.f.st-hatena.com/images/fotolife/アカウントの頭文字?/アカウント名/年月日/ファイル名(記事に貼り付けた時に出る14桁の数字).拡張子

まとめ

ブログリニューアルについてざっと書いてみましたがいかがでしたでしょうか。
今後記事をあげていく中でまた気になる点も出てくるだろうと思うので、ちょこちょこアップデートしていこうと思います。
今回の記事が少しでもどなたかの参考になれば嬉しいです。
最後まで読んでいただきありがとうございました!それではまた٩( ᐛ )و