BitPumpkinのUIのリニューアルとテーマカラーを設定できるようにアップデートしました

スポンサーリンク
Pocket
LINEで送る

BitPumpkinのUIのリニューアル作業をしていて本日やっと完了しました。

SPAなので改修がなかなかめんどくさかった…

とりあえずこんな感じ

 

UIリニューアルの内容

白背景からグレー背景に変更

僕がプライベートで使うパソコンはDellでそれにubuntuを入れているんですが、白背景は眩しいんですよね。

Macで見ると白背景の眩しさは全然気にならないないのですが、一応プログラマ向けサービスということなのでMac使いの他に僕みたいにmac以外のパソコンにlinux入れてる人もいると思ったので白背景から薄いグレーに変更しました。

 

コンテンツごとにブロックで分ける

以前はfeedlyを参考にしていたのでコンテンツごとの境目を枠線などでは作らず余白を大きくとって分けていたのですがやっぱりデザインの知識が少ないのでなかなかうまく配置ができなくて仕方がなしにコンテンツごとに影をつけて領域の境目をつけることにしました。

 

floatからflexへ

横並びをfloatで実装していたのですが、開発者やプログラミングを覚えたい人が使うサービスなのでモダンな環境であると思ったのでflexを使って横並びを実装しています。

flexの実装が楽過ぎてかなり便利です。

floatだと横に隙間を開けて3つ並ぶデザインをそのまま実装すると3つ目のmargin-rightの対策をしないいけないんですが、flexだとそれが必要なくなります。

 

 

追加機能

ストック数を表示する用に変更

今まで使っていて気づかなかったんですが、自分のストック数をメニューの横に表示するように変更しました。

 

テーマ編集機能

これが今回のアップデートで追加された新機能

テーマを設定することでサイドバーのカラーを変更することができます。

これで飽きずにBitPumpkinを使うことができます。

スポンサーリンク

 

テーマの設定の仕方

1.設定ページへ

右上のメニュー設定からページに移動します。

 

2.設定したいテーマをクリック

現状テーマ数はこんな感じ

 

これで左のサイドバーの背景が変更されます。

 

まとめ

個人サービスで宣伝らしい宣伝はあまりしていないが、以外にも何人かのユーザーが使ってくれています。

やっぱり個人でWebサービスを作ることはとても勉強になります。

使う技術もデザインも自分で自由に選べるので最高に楽しい。

 

BitPumpkinのUIもかなり変わりました。ちなみにこれが初期デザインですごいダサい笑

今のデザインを見るとは昔に比べたらなかなかデザイン力がレベルアップしたのかなと思います。

ひとまず、こんな感じでアップデートの報国でした。