「デザイン」の記事 - Crieit

polcaで支援した代わりにデザインのアドバイスをしてもらった話

2018-12-17T09:02:19+09:00

先日いつもどおりTwitterのTLを見ていると、polcaでmacを買いたいので支援をしてほしい、という企画が立っているのを見つけました。普段はあまり興味は無いので見ないのですが、その時はたまたまリンクをクリックして詳細を見てみました。それが下記です。

https://polca.jp/projects/6i8Waf68fh9

なぜ支援したか

僕はあまりこういう個人が何か買いたいから、というクラウドファインディング系は興味が無いのですが、この企画は見てすぐ「あ、支援しようかな」と思いました。理由は下記のような感じです。

未経験からプログラマになるまでずっと一緒にお勉強してきたPCがついに壊れました。

なんか僕は仕事柄PCが壊れるのに非常に恐怖感を持っているので、この時点で共感してしまいました。辛いなー、と…（一応常時家に開発できるPCが２つあるようにしていますが）。しかも利用用途が僕と同じくプログラミングだったということですし。

プログラミングの他に、デザインの勉強にも力を入れたいので馬力のあるPCが必要です。スキル高めて激安給料のブラック会社からも脱出したい。

なにかこうよく分からないけどPCがほしいという感じではなく、しっかり未来のことをちゃんと考えて先に進みたいんだな、という気持ちが伝わってきました。

デザイン一点その他ご希望あれば伺います

なんかよく「お礼に手紙書きます」とかなんの意味があるかよく分からないお礼が書かれていたりします。そういうのは全く興味が持てないのですが、今回はちゃんと普通に納品物があり完全にお互いWin-Winの関係になれるお礼でした。

このあたりを見て、ほとんど迷うこともなくすぐ支援をしました。

支援の内容

具体的には、デザインも勉強されている方ということだったのですが、僕がデザインがまったく良くわからないので、そのあたりちょっと見てもらえたらありがたいな、と感じました。

そのため、支援額は千円で、その金額の範囲内でよいのでこのCrieitをざっと見てもらって、気になる所があれば教えてほしい、という形にしました。金額もたいしたことがないので、余裕がある時にいつでも大丈夫です、という形にしました。

しばらくして返答があり、６件ほど気になるところと改善したところが良さそうな箇所のアドバイスをいただきました。しかもAdobe XDで簡単なイメージも作ってシェアまでしていただけました。例えば下記のようなアドバイスをいただきました。

トップページのヘッダーが長すぎるのでは　→　たしかに長すぎます…。その他そのあたりのパーツの調整案も頂きました。
Primaryカラー１色しか使っていないのでブルーに合うSecondaryカラーをワンポイントなどで使うようにしてみては？　→　全く考えてなかったので助かりました。今のデフォルトのSecondaryがグレーなのであまり使ってなかったんですよね…。ちゃんと黄色のclassを作ってやってみます。
新規登録/ログインが乱立している　→　たしかに見直したら乱立していました。誘導したい場面ではきっちりわかりやすく表示する、というのは何かで見かけて参考にしていたのですが、なにか勘違いして無駄に大量に配置してしまっていたようです。気づかせてもらえたので良かったです。
余白やフォントを調整したほうが良いのでは

なんにしろ、どれも早く修正したいなーと思うくらいには個人的にはありがたい情報でした。

まとめ

とりあえず僕はケチ＆心が狭い人間なので、あまり支援には興味がありません。でも、今回はすぐ支援しましたし、そういえば以前もコーヒーの購入はほとんど迷わず支援（というか購入）しました。

CODE COFFEEをいくつか飲んでみた

本気で支援が必要な方は、なぜ支援した方がいいのか分かりづらい企画をたてるより、こんな感じで普通にお互いにWin-Winとなるような、あたかも単なる商品の購入のような企画を立てた方が成立しやすいと思いますしみんなが幸せになれる気がします。そしてその人に対して好感が持てて応援したくなると思います。

今回の企画をたてていたのは @qsb3uy さんでした。プログラムとデザインが両方できるというのは素晴らしいことなので、きっとその知識が廻り廻ってより多くの人の役に立つことになるのだろうと思います。

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

2018-10-27T22:34:56+09:00

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

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

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

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

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

具体的にやったこと

ロゴを変えた

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

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

タグのデザインを変えた

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

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

タグ一覧を追加した

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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