色々Crieitのデザインをいじってみた

Crieitはデザインをなんとかした方が良いのでは、及びWebサービスはジャンルによってはデザインはきちっとした方が良い、という話があがったため、Crieitのデザインをちょこちょこいじってみました。

そもそもなぜデザインをちゃんとした方が良いのか

とにかく機能重視で機能だけちゃんとすれば良い、というWebサービスもあると思います。それはそれで問題ないと思いますし、そういうものは機能や使い勝手にとことんこだわるべきだと思います。

ただCrieitのように記事を投稿するようなサービスの場合、投稿した記事や自分のプロフィール、それらが集まったサービス自体に対してある意味ブログのように「自分のスペース」感を感じる部分が出てくると思います。

そのためそこのデザインが微妙だとサービス自体に滞在する心地よさがないですし、出来上がったスペースに対する満足感も薄れてしまい、最悪の場合継続して使おうという気持ちも薄れてしまう恐れがあります。そのためサービスによってはやはりデザインはある程度きちっとこだわった方が良いようです。確かに自分の居場所が変、もしくは普通のデザインのところと、見ていて美しい、綺麗…と思う場所だったら確実に後者の方がいいですよね。

具体的にやったこと

ロゴを変えた

上部ナビ及びTwitterカードに表示されるロゴを変更しました。変更したというか、そもそも元々単にテキストを入れていただけのためロゴですら無かったのですが…。

ちなみに今のものも適当なフォントでCrieitと書いたものを単に画像にしただけなのでそもそもロゴなのか？　という気持ちにはなります。でもまあ前よりはマシになった気がします。とはいえ他の部分との統一感とかを考えるとちょっとよく分からなくはなってきます。

タグのデザインを変えた

元々タグ表示はBootstrapの黒丸のようなbadgeを使っていました。ただこれはサービス内全体の中でも移植の黒さを誇っており、且つ中の文字もつぶれて見えないという諸悪の根源のようなデザインでした。

Qiitaのようなスッキリとしたタグのデザインにし、全体との統一感を増して自然に見えるように調整してみました。

新着一覧の最初に大きな画像を表示するようにした

これは完全にdev.toを参考にしたのですが、新着一覧の最初の記事には、その新着記事の中で画像を持つもの且つ一番アクセスの多いものを、大きな画像つきで表示するようにしました。

元々全部同じカードで一覧していただけで味気なかったため、ワンポイントとしてちょっとしたデザインになれば、と考えてそのようにしてみました。（というかdev.toがやっているので確実でしょう、多分…）

その他、Mediumのトップページのように他の記事にも画像を表示しようかと思いましたが、そもそもMediumのデザインは枠無しでうまく作られており、且つしっかり画像を表示できるほどたくさんの画像あり記事があるということで、簡単には真似できそうではなかったためやむなくやめにしました。（実際ちょっと画像を試しに入れてみたのですが微妙でした）

タグ一覧を追加した

トップページの右列（スマホの場合は投稿一覧の下部）に最近記事が投稿されたタグの一覧を表示しました。元々は新着投稿一覧のみの表示でした。

Crieitを公開してだいたい５ヶ月目くらいになると思うのですが、さすがにだんだんと埋もれていく記事が出てくるようになりました。僕の投稿だけならまだしも、他の方が書いてくださった記事なども埋もれるようになり、非常に申し訳ない気持ちともったいない気持ちが出てくるようになりました。

せっかくなので埋もれてしまった記事にもなるべく容易にアクセスできる機会を増やしたい、と思いこのタグ一覧を追加しました。あとは回遊率もこの方が上がるのではないかと思っています。

この一覧を追加する前は、大量のボタンを置いてクリックすると非同期で記事一覧を読み込む、という機能を作っていました。ただ、ボタンが集まっているとあまり気持ちの良いものではなく、人によっては見ていられないのではないかという気がしたので完全に取り払いました。回遊目的であればわざわざそこをSPA的にする必要もないと考え現在のような単なるリンクにしています。

あと、もう一つの大きな目的として、右列のファーストビューにいきなり広告があり、かなりデザインを乱していて汚く見えたので、それを画面外に追い払いたいという目的もありました。

アクセスの多い記事一覧を追加した

左列に過去１週間、１ヶ月でアクセスの多い記事一覧を追加しました。集計データはないのでGoogle AnalyticsのAPIで取得しています。

真ん中に大きく新着一覧、右側にタグ一覧となったことで、左側に大きくスペースができてしまいました。そこを何かで埋めてバランスを整えたいと思いアクセスの多い記事一覧を追加しました。スマホの場合は新着一覧とタブで切り替えられるようにしています。

これも見た目を整えるだけでなく、埋もれた投稿をすくいあげる意味もあります。

バランス的には良くなったかもしれませんが、デザイン的にはまだちょっと新着一覧とトレンドとどっちに目を行かせばよいか迷いそうな感じがするのでブラッシュアップは必要かもしれません。

まとめ

とりあえずこのような感じで色々とデザインをいじってみました。元々よりは多少マシ、且つ使いやすくはなっているのではないかと思います。

とはいえはっきり言って僕は良いデザインがどういうものかが全く分からず完全に想像でやっているだけなので、正直他の人にどう見えているのかというところが全くわかりません。もしもっとこうした方が良いよ、という部分などがあれば是非アドバイスをお願いします…！

あとは、タグ一覧やトレンドの様に、他にも埋もれた投稿にアクセスしやすくなる仕組みを色々と導入したいと考えています。ただ、現在の投稿の数やタグの種類だとあまり設置しても意味が薄い機能などもあったりするため、そのあたりは徐々に様子を見ながらブラッシュアップしていくしかなさそうですので引き続き考えていきたいと思います。

しかしデザイン関連の記事なのに画像が一つも入っていない…。