もりた 
前回の続きで、Webサービス「ShankStream」の裏話になります。
前回までのリンク
リアルタイム
Webサイトを軸にしようと決めてからは、拡張機能でいかにうまく連携できるかを考えていきました。
できるだけ密接に、そしてシームレスに導線が張れると使う敷居がグッと低くなるので。
テーマというか、キーワードを「リアルタイム」にしていたので、どうしても入れたかったのが拡張機能のアイコンに表示できるシャンク数の表示。
↓こういうやつですね。
これがあることによって、より「今」を感じることが出来るように。
件数が増えたらその瞬間数字が上がるようにしています。
人が増えたら、きっとたまたま見ていたページでシャンクの件数が上がる瞬間を目の当たりに出来るかと思います。
UI＆UX
WebサイトのUIやUXは基本的にシンプルにしようと決めました。
よくあるチャットアプリケーションの形とあんまり変わりません。
下に行くほど新しく、入力エリアも下にある。といった感じです。
デザインは敢えてグレースケールな色合いにしています。
このサイトはあくまで「どこかのWebサイト」ありきで初めて存在意義が出るという特徴があるので。
このサイト自体がメインコンテンツとなることはありません。
なので、このサイトが自我を出してグイグイ前に出るというのはちょっと違うかなと。
ストリームがどのサイトのものなのかはその時によって変わります。
すごいポップなサイトについてシャンクしてるかもしれませんし、悲しい記事についてシャンクしているかもしれません。
それぞれのサイトに対し適度な距離感が保てるように。
そんな意味があったりします。
あとは、今はわりと普通だとおもいますが、画面幅によってレイアウトが変化する「レスポンシブ」という概念を入れています。
こういうのは基本的に必要なければ入れる意味はないのですが、今回は拡張機能で小さなポップアップでの表示が必須だったので入れています。
パターンは、画面幅によって3段階変化します。
CSSだけでなく、Javascript側でも制御しています。
なので、スマートフォンとかでもそれなりに見えますが、こちらはちょっとパフォーマンスがよろしくないので改善予定です。(2014/02/12時点)
開発環境＆インフラ
仕様や設計周りはだいたいこんな感じです。
次回は実際の開発環境やインフラ構成、使用している技術的な部分に触れていきたいと思います。
以上です。
関連リンク
※本サービスのTOPページへ遷移します
※Chrome ウェブストアへ遷移します。
