読者です 読者をやめる 読者になる 読者になる

以前作ったTriChatというチャットサービスが検索しても出てこないに気づきました

3ヶ月ほど前にチャットを作って開始したのですが、そもそも検索エンジン上で全く表示されないということが発覚しました。

 

作ったサイト

TriChat - どこかの誰かと3人でおしゃべりできるチャットサービス

 

名前はTriChatです。一応英語で検索するとトップに出てきます。

でも普通検索する時って日本語だよね

しかし人が何かサイトを検索する時って普通どうするでしょうか?多分日本語でgoogleなりyahooなりの検索欄に打ち込むことがほとんどだと思います。

 

なのでこれはもしや、と思い日本語読みで「トライチャット」と検索してみたところ、全く上位に表示されるどころか2ページ目3ページ目にすら表示されていないことが発覚しました。

 

他にも同じ名前のサイトがあるのであれば仕方がないと諦めがつくところなのですが、そんなサイトも特に見当たりませんでした。

 

家庭教師のトライのチャットだとかゼルダトライフォースとか、モンハンのtriのチャットがヒットするという始末です。

 

アルファベットでつけたサイト名がそのまま横文字になってインデックスもされると思ったのですが、どうやら勘違いだったようです。

 

そもそも”チャット”で検索しても出てこない

では”チャット”で検索するとどうだろうか?と思い、ググってみました。

 

いくら新参弱小な私のチャットサイトでも3ページ目か4ページ目くらいには出てくるだろう・・・、そう考えていたのですが認識が甘かったようです。実際には散々な結果でした。ググってもググっても出てきません。

 

単純に他のチャットサイトとの強弱の関係で上位に表示されないのだと思っていたのですが、5ページ目辺りになってチャットという文字がただ散見しているだけのブログなどがヒットした時点で諦めました。諦めると同時にある結論に至ります。

 

それはTriChatがそもそも検索エンジンにチャットとして認識されていないという結論です。

 

チャットを流行らせるのって難しい

チャットという名の実質的には掲示板系のサイトであればコンテンツの蓄積が容易なので時間が経過すれば自然とコンテンツが増え検索エンジンに認められ検索結果への露出を獲得していくことが可能なのですが、私が作ったTriChatはそういうタイプのサービスではありません。

 

その点チャットパッドはチャット自体での(一応掲示板はあるが)コンテンツの蓄積もないにも関わらず、チャットと検索すると1位に出てきます。改めてチャットパッドの強さを再認識しました。

 

ちなみにチャットで検索した時に出てくる他のサイトは基本的に掲示板型です。こちら側のチャットのほうが一般的で利用してもらいやすい形態なのかもしれません。

 

他に出てくる掲示板型でないものの場合はたいてい女性の方をカメラ越しで眺めながら会話を楽しむスタイルのものです。こちらも男性からのアクセスを集めやすい形態でしょう。

 

ここからもチャットパッドが一位に表示していることの凄さが解ると思います。

地道にいきます

一体どうやってチャットパッドがあのポジションにまで到達したのか把握するのが現状の課題のように思えます。

 

今のところギガジン砲の影響がやはり大きいのかな、と思いますがそこまでの資金力もないので地道になにか別の方法でチャットを利用してもらう方法を考えるしかなさそうです。

 

”チャット”のワードで検索して3ページ目辺りに出てくるようになりました。(2016年4月24現在)

当初はサービス名で検索しても全く出てこないという悲惨な状態でしたが、改めて確認したところ3ページ目辺りにはなんとか表示される様になりました。

 

「検索するとでてくるよ〜」と教えてださった方、ありがとうございました。

 

UIいじったりソーシャルボタン外したりしたのが良かったのか、それともチャット付属の掲示板がコンテンツとしてみなされてきたのかはわかりません。しかし現段階で一応チャットとして検索エンジンに認められたことに手応えを感じられたのでこの調子で地道に修正と改善を加えていくつもりでいます。

センス無いやつが透明感のあるwebデザインに憧れると白くなるの法則

以前チャットサイトを作ったのですがデザインのセンスがないせいか様々な問題点が浮上したので修正を加えたところ、画面が白くなりました。

 

修正前のデザインの問題点を挙げると

  • ボタンが多すぎてどれをクリックしたらいいかわからない
  • 必要な情報とどうでもいい情報が区別されておらずとっちらかった印象
  • 無駄にカラフル!目がチカチカする
  • 不必要な装飾
  • スマホで見ると画面がグラグラする

などなど、ニールセン博士の10原則をことごとく破りまくっています。

 

修正前のデザイン

まずwebサービスの顔、トップページです。

修正前トップページ

f:id:FRISKER:20151121001859p:plain

*1

 

シンプルイズベストをモットーに訪問者が迷わないデザインを意識してbootstrapをいじっていたのですが、公開後しばらくして落ち着いてから見るとありえない配置と配色になっていることに気づきました。

 

今こうしてスクリーンショットを眺めていても無駄な情報が多く、優先順位がわからず、目がチカチカします。ごちゃごちゃしててわけがわかりません。中学生の時ドン・キホーテに初めて行った時も同じような気持ちになったのを覚えています。

 

修正前チャットページ

f:id:FRISKER:20151121002818p:plain

緑色が本人、青と赤が相手です。細かいことが気になる人には見ていてムカムカする画面ですね。

 

ちょっとクイズです。この画面中に会話の内容以外で問題が4つあります。当ててみて下さい。

 

 

答えは

  • 開発時のside、head、footの文字がそのまま
  • テキストボックスとボタンの高さが合っていない
  • 長いテキスト(赤の「ああああああああああ」)の改行がなぜか右
  • チャット相手の位置もなぜか右

です。

 

今トップページとチャットの2つを載せましたがこれらのページは特にひどかったので真っ先にデザインを見なおしました。

修正の方針

  • 訪問者が迷わないこと優先、説明なしでもすぐに使えるように
  • シンプルかつ透明感のあるデザインにしたいので無駄な色、ボタン、テキストは削る

無駄な装飾を削って必要なものだけにすれば勝手に機能美由来のシンプルな美しさは実現できる(はず)という前提に立ち、シンプルさと相性のいい透明感のあるwebデザインを求めていじることにしました。

 

修正後のデザイン

主な修正点は

  • ヘッダフッタの無駄な黒いナビゲーションを白く、脇役であるナビゲーションは文字を薄い灰色に
  • 情報は必要なポイントに絞って箇条書き
  • コンテンツが説明と開始ボタンで左右に分かれていたのをまとめた
  • 赤青緑黄色と意味不明なカラーバリエーションを廃止、色をしぼった
  • 枠を薄く

などです。

 

とにかく無駄なテキストと装飾を削り、シンプルかつ清潔感あふれるデザインを目指しました。

 

そしてついに透明感のあるwebデザインのサイトが出来上がりました。

修正後トップページ

PC

f:id:FRISKER:20160103211955p:plain

スマホ

f:id:FRISKER:20160103213607p:plain

 

修正後チャットページ

pc

f:id:FRISKER:20160103220054p:plain

スマホ

f:id:FRISKER:20160103220143p:plain

 

白いです。

 

どこからが画像でブログ背景なのかわからないくらい白いです。今記事を書いている私にもわかりません。

 

導線の確保と見ただけでわかるシンプルさはある程度実現できたと思うのですが、 これが透明感なのでしょうか?

 

もしかすると透明感=白さなのでしょうか?

 

実際「透明感 webデザイン」で検索すると、白ベースで青が差し色の様に入っているサイトが主流です。

 

私のセンスが欠落しているせいかもしれませんが、「白ベースで青が入っててシンプル=透明感」という思い込みもあった気がします。

 

おそらく透明感はデザインの基礎力がそこそこある人でないと実現できないのでしょう。「背景が白い」とか「ボタンが青い」ではなく、そうしたひとつひとつのパーツの色や形やレイアウトが作用しあって生まれるものなのかもしれません。

 

色や形自体が透明感を放つのであれば話は別ですが、それがありえない以上センスのない人間が透明感を創りだそうとすると私のように「白い背景」や「青色」といった表層的な特徴だけを切り取ってシンプルな作りにするのが関の山なのかもしれません。

 

自分しかサンプルがいないので、もし私以外にも「センスがないのに透明感目指して白くなった」人を知っている方がいれば教えていただけると幸いです。

*1:初期画面。訪問者の注意力を分散させる色とりどりのボタンと導線を破壊する無駄なテキスト達

ieのjavascript全角スペース問題

ie(インターネットエクスプローラ)で全角の空白 (←これ)をjavascriptで表示しようとすると潰れてしまう。

実態参照で&emspとしても無駄だった。

 

chromefirefoxではきちんと表示できるのにieでだけ全角スペースが半角スペースになってしまう。機能的には問題ないもののデザインが崩れるのがよろしくない。

 

どうしたものか

LINEはなぜ自分が右で相手が左なのか考えた

LINEに限らずメッセージアプリは基本的に自分は右側で相手は左側に表示されていると思います。

 

感覚的には自分は左で相手は右という気がしますが、一体なぜ感覚とは逆の配置になっているのでしょうか?

 

これは言語について考えてみるとわかります。

 

言語は左から読むのが世界のスタンダード

英語もフランス語もドイツ語も日本語も中国語も韓国語も、どっちから読むのか?といえば左からです。

 

世界では言葉は左から読むのがオーソドックスなのです。

 

右側から読む言語として有名なのはアラビア語ですが、他の例といえばGHQに指導される前の戦前の日本語くらいしか普通は思い浮かばないと思います。

 

相手のメッセージが読みやすいように自分は右になっている

私達が読まなければならないのは自分の言葉でしょうか?それとも相手の言葉でしょうか?そうです、もちろん相手の言葉です。

 

そして言語は左から始まるものがスタンダードなので、最も読むべき相手のメッセージを左に配置したほうが合理的なのです。

 

脳みそって左から始めるようにできてる?

話がそれますが、商品の陳列や広告などの世界でも左は王様です。

 

自動販売機の配置や広告の世界で「左上の法則」「Fの法則」という言葉がありますが、基本的に人の目線は左から右、上から下に移動します。

 

素人考えでさらにこじつけるのであれば、他にも根拠になりそうなものがあります。「心臓の位置」です。

 

人は心臓のある左側を守るには、目線が自然と左側に吸い寄せられるようにできているほうが効率的です。人間を設計するエンジニアがいれば右と左であれば自然と左を意識するように設計するでしょう。

 

これだけ数多くの言語がありながらそれらのほとんどが示し合わせたかのように左から読むようにできています。これは人間の脳が左優先というベースを人類で共有しているからこそ起きていることなのではないでしょうか?

 

なんだか信じ込みやすい人相手であればイスラム文化圏と西洋文化圏との対立の原因を言語の左と右を当てはめて説明すれば騙せそう気がしてきました。

 

格闘ゲームでは左が自分

子供の頃、格闘ゲームで左は特等席でした。負けている方に左を譲るという謎ルールまで生まれたことがありました。キャラクターをピョンピョンはねさせて位置を入れ替えたものです。

 

感覚的にはやはり相手は右で自分は左なんです、きっと。

 

シューティングゲームグラディウスダライアスなども機体が左から右に向かっていスクロールするようにできています。そしてシューティングゲームでも基本的に左にいたほうが安全です。

 

少し脱線しました。

 

「脳が左優先だから言語は左から読む、だからメッセージアプリでも読べき相手のメッセージは左」だとここまで書きなぐってきましたが、私個人的にはメッセージアプリは自分を左で相手を右に配置した方が感覚的に違和感がないと思います。

 

きっと凄腕のエンジニアとかディレクターの人たちが頭をひねって利便性を考えた結果、相手からのメッセージを読みやすいようにあえて相手を左で自分は右に配置したのだと思います。

 

メッセージアプリである以上言葉の読みやすさ中心主義の考え方を貫けば相手を左に配置するのは正しく感じられます。

 

ですが感覚的には自分は左です。初めてLINEを使った人が感じる若干の違和感は自分が左であるという感覚に逆らって自分が右に配置されていることが引き起こしているのでしょう。

 

やっぱり「自分」は左配置がいいと思う

iPhoneしかりタブレットしかり、直感的な操作がもてはやされている現在でも自分のメッセージは右配置になっています。

 

しかし今の感覚を優先する流れが続いていけば、LINEの自分が左配置になる日も来るのではないでしょうか?

 

私自身無理やり3ショットチャットのwebサービスを作った時も、チャット画面では自分が左になるように配置しました右配置に変更しました、長いものにまかry)がLINEなどのような右配置がスタンダードなので、最後までどちらにするか迷ったことをよく覚えています。

 

 

 

(左の緑色が自分、相手二人が右)

f:id:FRISKER:20151121002535p:plain

 

結局感覚中心主義の考え方に則って左に配置しましたが、もしかすると他にもスタンダードにならっているだけで感覚とは相反するようなデザインになっているところも多いかもしれません。

 

おそらく本職のクリエーターさんほど失敗できないので、余計にLINEとかiPhoneのメッセージとかの大御所のデザインに習う形になる傾向が強いと思います。きっと大御所が左に切り替えたりしない限りは今のままのデザインが続くのでしょう。

 

ブランド物のカバンや服のデザインが大衆品に落ちてくる様にUIの世界も似たようなことが起きている様に感じます。

 

こっちもついで読みしてくれると私が喜びます

↑のチャットを作った時の記事です。

frisker.hatenablog.com

 

 

 

 

チャットパッドみたいなランダムチャットサイト「TriChat」のコンセプト

チャットパッドみたいにランダムにテキストチャットが楽しめるサイトを作ろうと思い、TriChatというwebサービスを立ち上げた経緯を綴っていきます。

 

作ったチャットサイトについて

作ったのがこちらです

tri-chat.net

 

簡単に説明すると「登録なしでランダムな3人でテキストチャットできる」サービスです。

 

2ショットではチャットパッドを超えるサイトはできないと思うので、TriChatは3ショットチャットにして違う方向性を目指してみました。

 

3ショットにした理由は「3人になると最小単位の社会ができあがる」という一般論をコンセプトとした上でサービスという形にするためです。

 

TriChatを3人制にした狙い

より具体的なポイントを挙げると、2ショットチャットにありがちないくつかの問題が改善されるか軽減することも狙っています。

 

3ショットにして実現できると考えたメリットは以下のとおりです。

  • 「一対一では通用するけど攻撃的で粗暴な振る舞い」が抑制される
  • 出会い厨への対策(人目があるとナンパは難しいよね理論で)
  • 集団の空気を読むという要素

などが実現できるのではないかと考えました。

 

逆に3ショットチャットを採用したことでこのようなデメリットもあると考えています。

  • 二人でない分ユーザ同士の距離感が遠くなる
  • 「空気読め」と「仲間はずれ」が起きる可能性
  • 本音が語りづらい

 

チャットパッドが好きだった

以前からチャットが好きで以前から様々なサイトを利用していました。その中でもレスポンスの早さや使い勝手の良さなどの面でチャットパッドを特によく利用していました。

 

chatpad.jp

 

私がこのサイトに惹かれた理由は「登録なしで匿名で気軽にコミュニケーションが楽しめる」からです。

 

チャットパッドは「登録なしで匿名で気軽に掲示板が楽しめる」という2chを性質をそのまま2ショットチャットにしたような使い勝手で、時には他愛のない会話、時にはマニアックな話題で盛り上がったりしていました。

 

もし友人に進めるチャットサイトを1つ選べと言われればチャットパッドをすすめるでしょう。

不満もあった

 ただ、チャットパッドには不満も感じていました。特に一番大きかったのが「一対一では通用するけど攻撃的で粗暴な振る舞い」です。

 

知恵袋などの環境でも、説教か攻撃をするためだけにアカウントを作って荒らしまわっているような悪質なユーザが一定数いますが、彼又は彼女たちはチャットにおいてはよりアグレッシブに活動しているように見受けられます。

 

悪質なユーザと被る層の人たちが2ショットの環境に来ると周囲の監視が無いことが、より一層エスカレートした行動をとっているのでしょう。

 

3ショットにすれば一対一にならないので悪質なユーザでも知恵袋の荒らしレベルの民度が保てるのではないかと考えています。

 

TriChatの試しかた

まずこちらをクリック後、サイト中段右のチャットを始めるボタンを押してください。

tri-chat.net

 

※TriChatは現在(2015/12)ユーザが少ないのでチャット自体が成立していません。

チャットの使用感を見てみたい時は、別のタブかブラウザで3つチャットを開いてください。

 

おまけ(後で読んでね):実際に作ってる記事

frisker.hatenablog.com

 

ついに憧れのArduinoの入門キットを購入したので勢いで写真を貼る

Arduinoとは何か?一言で行ってしまえば「入出力ポート付きマイコン」であり、はんだ付けいらずで気軽にポートにピンを差し込んで電子工作が楽しめてしまうというすぐれものだ。

 

プログラミングもPC上でC言語風のオリジナル言語で簡単に処理が記述でき、それをArduino、に書き込むだけである。書き込み後のプログラムの消去と修正も何度でもできる。

 

電子工作といえば一昔前は、分厚いグラスをかけて指先を震わせながら半田ゴテを部品に押し当てヤニ臭い匂いに耐えながら神経を集中して行わなければならないものだった。

 

挑戦するにあたってもパーツ以外に電子工作をするために揃えなければならない道具が多かった。環境づくり自体の敷居がとても高かったのだ。

 

それがArduinoの登場によって変わった。

 

パソコンとポーツだけですぐに始められる。ヤニ臭さにもやけどの心配もいらない。子供が電子工作をしたがっても安心だ。

 

 電子工作の敷居を一気に低くし、手軽にチャレンジできる土壌を作り上げたArduinoは日曜大工ならぬ日曜電子工作を普及させるにあたって大きな役割を果たしているのである。

 

というわけで長々とArduinoについて説明しましたが、そのArduinoを私は本日Arduinoを購入いたしました。

 

Arduinoのスターターキットを購入いたしました

今回私が購入したのはArduinoスターターキットV2です。千石電商で5,500円で購入しました。Arduinoの最も有名な入門書である「Arduinoをはじめよう」にも対応してるキットです。

 

キット内容は以下のとおりです。

  • Arduino Uno R3(本体)
  • Seeedstudio社のArduino Sidekick Basic Kit V2(パーツ一式)

普通に「Arduinoをはじめようキット」をネットで買おうか迷ったものの、迷っているうちに面倒くさくなる質なのでふらりと立ち寄った店頭でこちらのスターターキットを購入しました。

 

写真撮りました

 まずはArduinoスターターキットの外観(サイズ比較用にMONO置きました)

f:id:FRISKER:20151130000041j:plain

見てわかるようにかなり小さい。かさばるコテやゴーグルは必要ありません。

 

続いてArduino(本体)の中身を開封。

f:id:FRISKER:20151130000147j:plain

わかる人にはわかるミニ四駆の懐かしい匂いです。この消しゴムサイズのマイコンにすべての機能が詰まっています。

 

最後にArduino Sidekick Basic Kit V2(パーツ一式)を開封、並べて撮影。

f:id:FRISKER:20151130000103j:plain

電子工作を行うためのひと通りパーツが全て揃っています。

 

これらだけで電子工作が始められるとは便利なものです。便利すぎて苦労せずに済むため、保守系の電子工作マニアからArduinoユーザは迫害されるらしいのですがそれにも納得できます。

 

さてこれで何を作ろうか?キッチンタイマーならAndroidで作ったことがあるので、名前の似ているArduinoで作ってみるのもいいかもしれない。

 

とりあえずなんか面白いものできたらまたアップします。

 

そして今気づいたこと

ArduinoとPCの接続に必要なBケーブルがなかった・・・どうしよう・・・

 

引き出しのケーブルを探れば(たぶん)どこの家にでもあると思います。私も最悪プリンタのケーブルで・・・

 

 

webサービスを開発した素人が実際に設計で使ったメモを晒す

つい先日webサービスを公開しました。「素人だけど作ってみた」系記事に触発されてwebサービスを作ろうと思い立ち、実際にランダムチャットをなんとか形にして公開までこぎつけることに成功しました。

 

こちらの記事の話です。

frisker.hatenablog.com

 

そして実際に作ったサービスがこちらです。

TriChat - どこかの誰かと3人でおしゃべりできるチャットサービス

 

メモ書きでもこれくらいのなら頑張ればこぎつけるんだ!ということを伝えるために恥を偲んで設計に使ったメモを晒してみたいと思います。

 

ではここから。

 

最初はちゃんとUMLで設計しようという志があった

まずは必要最低限のメモを書いた。そこからUMLでクラス図やらユースケース図やらと結構気合入れてきちんと設計しようとしていたのだが、わざわざUMLを理解するのが面倒くさすぎたために挫折した。

 

そもそも入門書に「開発者同士の意思疎通のため」とか「統一された記述により意見の食い違いが抑えられる」などがメリットとして挙げられていたため、UMLを使わない方針に参考書から太鼓判を押された形になった。

 

誰かと協力するのならまだしも「どうせ一人で作るのだからオレだけのオレオレ設計書でいいじゃないか!!」とUMLを放り投げるスタイルで行くことに決定。

 

必要最低限のメモを元にいきなり作り始めることにした。

 

素人が実際にwebサービス開発に使った「必要最低限のメモ」がこちらです

 

3ショットチャット

3人揃った辞典でチャットスタート
同時に3人でチャットができる
一人がいなくなっても二人で継続する
退出ボタン、発言ボタン、メッセージボードがある

本人は左側、自分以外は右側にメッセージが表示される
3人はそれぞれ違う色で表示される
名前を入力できる
画像を表示できる

ログは必要な場合以外残さない方向で
一応掲示板もつけておく

画面遷移:
1:スタート画面(掲示板、チャットする)
2:チャット(終了、発言、メッセージ入力、プロフコメント欄、画像欄)
3:チャット終了後(またチャットする、掲示板へ)

4:掲示板一覧(板、次へ、前へ)
5:板(発言ボタン、削除キー、削除ボタン、次へ、前へ)

 

スーパーに向かうおばちゃんの買い物メモみたい・・・誤字もあるし・・
 

このメモを作っているときはまだ作る気はなかった

たしかこのメモを作ったのはどこかしら別の「webサービス作ってみた」系の記事を読んだ直後だった。

 

実は普段から自分はネットをぼーっとブラウジングしていてメモる癖がある。

 

人付き合い関係の心理学記事やら自己啓発系記事やらライフハック系の記事を読んでは思い浮かんだアイデアや教訓をデスクトップ上にメモを貼り付け、一週間ほどたってから「あ〜こんなんメモしたな」を思いながらゴミ箱に捨てる癖である。

 

この3ショットチャットのメモもいつもの「あ〜こんなんメモしたな」シリーズと同じように実行されることはなくゴミ箱に捨てられる運命なのだろうと思いながらメモをしていたが、作ってみた系記事に影響されて開発者気分に浸っていたため、軽い気持ちで簡単に設計までしてしまおうと思い立った。

 

次にメモの一部としてUMLを書こうとした

メモを書き上げた後、思い立ったが吉日と今度は紙にペンでUMLで設計図を書こうとした。本棚の積み本の中からUMLの入門書を引っ張りだしたが、そこで手が止まった。前述したとおりわざわざUMLを書くのが面倒くさ過ぎたのだ。

 

そこまで複雑でもないし、簡単なモックアップ作って直していけばそれでいいじゃんと方向転換することにした。

 

「そう、これは・・・あれだ、アジャイルだ!!」」「プロトタイピングだっけ!?」などと言い訳しつつ、最低限のガワだけを作った。

 

このガワだけ作った瞬間が開発のスタートだった。

 

欲しい機能と画面遷移だけをメモして、とりあえずガワだけ作るスタイル

自分の場合問題点が一つだけあって、それは開発中盤からソースがスパゲッティ化していくことだった。

 

ソースの上段で処理したと思ったら似たような処理を下段で行い、しかもセッション変数として持ち回しているのでエラーの発生時点がコロコロ変わる。同じ変数が至るところで、しかもバラバラな目的(計算に使ったり、フラグ代わりだったり)に使われるなどなど。どこに手を付ければ良いかわからない状態になってしまった。

 

多分いきなり作り始める問題はこれくらいだと思う。

 

メモから始めれば挑戦前の「めんどくせ〜の谷」は超えられる。中盤の「スパゲッティの谷」には捕まるかもだけど・・・

 

中盤以降のこの「スパゲッティの谷」と序盤の「めんどくせ〜の谷」であれば、序盤のほうがはるかに飛び越えるのに失敗する可能性が高いのでいきなり作り始めるのはかなりおすすめである。

 

多分自分が何か次に挑戦するときも同じやり方で作ると思う。作らないかもしれないけど。

 

最後まで読んでくれてありがとうございました。