THE LITTLE ESCAPE

イラストレーターkimixのヨーロッパ旅行記、写真、日々のエッセイ

ユーザーが求めるものを分析し、つくり、届ける「体験設計」の話|ブログデザイン編

f:id:kimix:20190905003527j:plain

先日公開したはてなブログのデザインテーマ「JOURNAL.」がなんと…

告知宣伝もしていないにも関わらず、公開から5日で100個以上のブログにインストールされ、全180個あるデザインテーマのなかからランキングTOP10に入ることができました!わ〜パチパチ

インストールしてくださった皆様、ありがとうございます!

▼インストール先:公式テーマストア
http://blog.hatena.ne.jp/-/store/theme/26006613419561466

▼見本ブログ
https://mooi.hatenablog.jp/


じつはデザインするにあたって、自分なりにターゲット選定やニーズの分析・課題整理をしつつ、仮説を立てながら制作を行いました。

今回はその設計と制作過程を書き記してみたいと思います。

少し固いお話になりますが「こうやって考えてモノづくりをしているよ」という様子をサラリと眺めていただければ嬉しいです。

簡単なアンケートをしています

突然ですがブログの更新内容について簡単なアンケートをしています。

ちょっとロジカルな制作背景のお話って、ちょっと堅苦しいし興味ない方が多いのでは…?と思い、これまで書くことをためらってきました。

読んでみたいと思いますか?ヨーロッパ旅行記のほうがお好きですか?ぜひ「アンケート」にお答えいただけますと幸いです。



それでは制作背景のはじまりはじまり。





◆デザインテーマとは?

はてなブログでは自分で好きなようにブログのデザインをカスタマイズすることができます。

利用方法ははてな公式テーマストア」から好きなデザインを選択し、自分のブログにインストールするだけ。

また、はてなユーザーであれば誰でも公式テーマストアへデザインの投稿を行うことができます。



◆課題とニーズの発見

自分のブログを好きなようにカスタマイズいたところ、以前から「こんなおしゃれなブログにしてみたい」と言及していただくことが多々ありました。

はてなブログは標準デザインでもシンプルで見やすく整っていますし、公式テーマストアには約200個もの無料で使えるデザインテンプレートが揃っています。

そんな中でもわたしのブログへコメントが寄せられるということは

■人とは違うデザインにしたい
■おしゃれなデザインにしたい

というニーズがありつつも、それが達成できていない何かしらの課題があることが想像できます。



◆市場調査と競合分析

なぜユーザーは課題を解決できていないのか?

原因を見つけるため市場調査(と呼べるかは謎ですが)として、はてなブログのデザインが投稿されている「公式テーマストア」を調べてみました。

f:id:kimix:20190912144743p:plain

公式テーマストアを覗いてみると、近年のトレンドであるシンプル・ミニマルさを反映したおしゃれなデザイン、かつ女性向けのデザインがないことに気が付きます。

女性らしくてポップでかわいいデザインや、限りなくシンプルなデザインなどは見受けられます。また、今風のシンプルなデザインはランキング上位を占めていました。

こうした背景から「女性らしさ×シンプルでおしゃれ」なデザインにニーズがあるのではないかと考えました。



◆ターゲットの課題分析

f:id:kimix:20190912144818p:plain

「女性はてなブロガー向けのおしゃれなデザイン」にニーズがあるということがわかってきました。

ここで一旦、課題を整理しつつ、よりターゲットを絞り込んでいきます。

▼ターゲット
・どんな人が求めているのか?
・わたしが提供することで誰が喜ぶのか?

▼やりたいこと
・ターゲットは何がしたいと思っているのか?
・ターゲットが達成したいことは何か?

▼抱えている課題
・今、なぜ実現できていないのか?
・今、なぜ困っているのか?

整理していくと「カスタマイズ方法がわからない」という課題も見えてきます。

そもそも知識がある人ならテーマを使わないでも自分で作っちゃいますもんね。





◆求めているもの・提供できるもの

f:id:kimix:20190912144837p:plain

▼求めているもの
・課題を解決するには何が必要か?

▼提供できるもの
・ターゲットの課題を解決するために、わたしが提供できるものは何か?

ターゲットが抱えているであろう課題「希望のデザインがない」「カスタマイズ方法がわからない」の2点を解決するためにわたしができること…

それは「簡単にブログをカスタマイズできて、おしゃれで女性らしいデザインを提供する」ということがわかりました。



◆競合優位性

f:id:kimix:20190912144919p:plain


提供するものが判明しましたが、それって本当に喜んでもらえるのか?を落とし込んでおきます。

こうすることでプロダクトやプロジェクトの売りとなるポイントを整理することができます。

今回は「女性らしさ×おしゃれなデザイン」と「丁寧なインストール方法の解説」を実施することで他テンプレートにはない、お役立ちポイントになるだろうと考えました。




◆提供方法

また「簡単にカスタマイズ」を解決するため単にブログ内でCSSを公開するのではなく、公式テーマストアにブログのデザインテンプレートとして投稿し無料公開することにしました。

こうすることによってより多くの人に届けることができます。

さらに、インストール方法についても細かいステップ説明を取り入れることで、誰でも容易にレスポンシブデザインを実現できるよう解説記事を見本ブログ内に掲載しました。



完成

f:id:kimix:20190905003527j:plain

そうして完成したのが「JOURNAL.」です。

▼インストール先:公式テーマストア
http://blog.hatena.ne.jp/-/store/theme/26006613419561466

▼見本ブログ
https://mooi.hatenablog.jp/

特徴❶ ファーストビューで世界観を表現できる

ブログを開くとブログ名の背景に画像が大きく表示されるようにしました。

同じ雰囲気になりがちなはてなブログですが、ファーストビュー(一番最初に画面に映るデザイン)でそのブログの世界観をひと目で表現することができます。

また、Webフォントを使い、洋書のようなデザインをイメージしてみました。



特徴❷ トレンドを汲んだやわらい雰囲気のカラー

2018年頃からデザインでもファッションでも「ナチュラルカラー」とくに「ベージュ系」が流行っています。今回のデザインでも、色はテラコッタやミルクティのようなベージュを使用し、トレンドに沿ったおしゃれさを意識してみました。






◆デザインする上で意識したこと

スマホファースト

わたしが運営している複数のブログを調べると、訪問者の7割がスマホユーザーだということもあり、スマホファーストでデザイン制作を行いました。


フォント

洋書のようなデザインにしたかったのでGoogle Fontの「Abril Fatface」を起用しました。

また、本文の英数字は細身のサンセリフ体「Overpass」を使用してカジュアルすぎず、スタイリッシュすぎない雰囲気を意識しました。日本語フォントと相性が良いのもお気に入りです。


文字サイズ

日本のwebサイトで最も多く使用されている15pxを指定しています。


どんな写真設定しても馴染むheader

ユーザーがどんな写真をタイトル背景に設定してもデザインに馴染むよう、背景の上に半透明のベージュのベールをCSSでかけています。



◆公式テーマストアで無料公開中

▼インストール先:公式テーマストア
http://blog.hatena.ne.jp/-/store/theme/26006613419561466

▼見本ブログ
https://mooi.hatenablog.jp/

はてなブログの公式テーマストアで無料公開しています。ぜひ上記のサイトからインストールしてお使いください。



◆おわりに

f:id:kimix:20190912145029p:plain

説明するまでもないことだったかもしれませんが、随分長い記事になってしまいました…!

アプリ、Webサービス、デザイン、イラスト、すべてにおいて何かとモノづくりをするときはこういった課題整理をしながら作業していることが多いのすが、なかなか言語化する機会がないので良い練習になりました。

こんなの欲しかった、が最高の褒め言葉

こうやって分析しながら課題やニーズを整理するUXデザインが一番大好きです。(本当は定量分析だけでなく定性分析やユーザーインタビュー/テストなどもできたらもっと良いのですが…)

そして仮説通りに歯車が周り、「多くの人の役に立った!」と実感できたとき、心から幸せな気持ちになります。今回もそうでした。

やっぱり「こんなの欲しかったの〜!」という声が聞けたときが一番嬉しいですね。

ぜひ、課題の整理やUXデザインでご協力できそうなことがあればご相談ください。



おまけ:記事内容に関するアンケート

こういったちょっとロジカルな制作背景のお話ってこのブログ内で需要あるのでしょうか…?

個人的にちょっと堅苦しいし、興味ない人も多いかなあと思い、最近ブログを分けるようにしてみました。。

ぜひ読者の皆さんのお声をお聞かせください。下記の匿名アンケートにお答えいただけると嬉しいです。




それでは〜


● 読者登録・フォローお待ちしております