はてなブログのデザインテーマ「JOURNAL.」の特徴と制作背景
こんにちは、ひさびさにお知らせをします📢
嬉しいことに以前から運営していた別ブログに対して「こんなデザインにしたいなぁ」という声をいただくことがありまして…
今回、一念発起してそのブログに近いデザインのテーマを作成してみました。
▼インストールは公式テーマストアよりどうぞ
見本ブログはこちらからどうぞ
制作背景
なぜデザインテーマ「JOURNAL.」を作ったのか
文章を書くだけなら最近は「note」がとても人気です。このサービスはデザインも削ぎ落とされていて、読むこと・書くことに特化されています。
そんな文字書きさんたちに最適化されたweb時代に、それでも「はてなブログ」を使う人が思うメリットとは…
- 昔から使っていて愛着がある
- 他にはない利便性の高さを感じている
- 広告収入が得られる
- ブログのデザインで個性を表現できる
- ユーザー同士で気軽に交流できる
こんな特徴があるのかなと考えました。
その中でも母数が多いのは「昔から使っていて愛着がある」「広告収入を得たい」の2つだろうなあと思います。
ただ、今回は母数は少ないかもしれませんが一定数はいるだろうと考えられる「ブログのデザインで個性を表現できる」ことにメリットを感じている人に照準を当ててデザインを制作しました。
女性×おしゃれ×デザインで個性を表現
はてなブログは標準デザインでもシンプルで見やすく整っています。
そんな環境下でもわざわざPCからデザインテーマを選択して設定をしたいという方は「ブログのデザインで個性を表現したい」というニーズがあることが考えられます。
また、わたしの別ブログでデザインに対する反応は「このデザインおしゃれ！」というワードがよく使われていました。
よって、はてなブログのユーザーの中に
- おしゃれな（トレンドを取り入れた）デザインにしたい
- 人とはちょっと違ったデザインにしたい
という気持ち抱えた人がいるのだろうという仮説を立てました。
そして、トレンドの方向性として性別を特定したほうがデザインしやすいので、今回のデザインのターゲットは「女性」に絞りました。（わたしの得意な分野は女性向けデザインなので）
どんな人向けのデザイン？
- 落ち着いた雰囲気が好きな女性
- 20代〜30代
- ブログ書くことが好き
- おしゃれな写真が好き
- シンプルで洗練されたものが好き
といった方に使っていただきたいなあと妄想しながら作ってみました。（というかこれほぼ自分ですね！）
「はてなブログに愛着を持っていて、文章を書くだけではなく、せっかくなら自分の世界観も表現できるデザインにこだわりたい。」そんな思いを持った方におすすめです。
特徴❶ ファーストビューで世界観を表現できる
ブログを開くとブログ名の背景に画像が大きく表示されるようにしました。
同じ雰囲気になりがちなはてなブログですが、ファーストビュー（一番最初に画面に映るデザイン）でそのブログの世界観をひと目で表現することができます。
特徴❷ トレンドを汲んだやわらい雰囲気のカラー
2018年頃からデザインでもファッションでも「ナチュラルカラー」とくに「ベージュ系」が流行っています。
そういったトレンドに沿ったおしゃれさを意識して、制作してみました。
今回のデザインでも、色はテラコッタやミルクティのようなベージュを使用しています。
デザインする上で意識したこと
フォント・文字
洋書のようなデザインにしたかったのでGoogle Fontの「Abril Fatface」を起用しました。
また、本文の英数字は細身のサンセリフ体「Overpass」を使用してシックな雰囲気を出しています。
文字サイズは日本のwebサイトで最も多く使用されている15pxを指定しています。
どんな写真をタイトル背景に設定しても馴染むheader
ユーザーがどんな写真をタイトル背景に設定してもデザインに馴染むよう、写真の上に半透明のベージュのベールをCSSでかけています。
見本はある？
見本・DEMOブログは「JOURNAL.」でご確認いただけます。
おわりに
いやはや理想のデザインを構築する過程がとても楽しくて楽しくて。コーディングは正解があるし、創造力が要らないので良い息抜きになります。
今回は女性向けを意識したカラーリングでしたが次は男女兼用をテーマに作ってみようと思います。
ぜひ「JOURNAL.」を使ってみてくださいね。
それでは〜
