Pepro開発ブログ

peproに関することを発信するブログです

Peproのデザイン

こんにちは、sakurawiです。

Peproリリース記事に続いて、Peproのデザインについて書きます。

カラーリング

PeproにはPeproを表すための基本色を2色決めています。 トップのカラーを見ればわかりますね。笑

赤色と緑色です。 エンジニアの方がみればこの2色には思い出深いものがあるかもしれません。

そう、テスト時に現れる2色ですね。(テストに限った話ではありませんが) 赤色はテストが通らなかった時の色。緑色は通った時の色。

Peproでは、「いやーなんだかできないなー」という問題に対して、 一緒に頑張れるもう一人と問題解決に向き合い、クリアしてほしいという思いが込められています。

できない赤色から、できた緑色へ。

そのような思いからこの2色を使うことを決めました。 最初期の頃は、白色と青色を使おうなんて話もでていました。

TOPのデザインは一目でインパクトに残るように、そして直感的にいいなと思ってもらえるように作ったつもりです。

UX

トップから作る部屋の名前を決めて、ワンクッションページを挟んでペアプロのroomへ。

できる限りシンプルに作ろうというコンセプトで作成しています。 URLさえいれちゃえばすぐにペアプロできるぞ!というところをウリにしたくって。 開発を進める上でも最小限から、シンプルに実装するということは大事だなと実感。

コーヒーは用意しましたか?というページは、ペアプロをする前に少しほっこりしながら初めて欲しい思いから挟んでいます。

エディターページもエディターページを大きくとって必要なボタンをサイドにおいてすぐに使えるようにこころがけました。

サイドメニューに関してはまだまだ追加機能などなど実装予定です。