個人開発サイトnode-node-nodeに対するご意見とその回答はきっと全てのエンジニアにとって参考になると思う

先日公開した個人開発サイトnode-node-nodeに対するご意見とその回答。全ては掲載できないので一部を抜粋してコメントと、それをいただいた後の対応状況を載せた。

ご意見をお送りいただいた全ての方へ
ありがとうございます！もしこれらのコメントが無ければ、サイトは閉鎖されていたと思います。「ダメだなー」と書かれていたとしても、わりと励みになってますので。

それと同じように個人で開発されている方にとっても参考になるのでは、と思った。ネット上には「すごい人がすごい企画で＊＊億ドルのバリュエーションを得た」とかばっかりでこういうレベルで地味な改善を繰り返す話があまり無い。ショボいと思われようが、こういう地味な情報の方が有用だと思う。特に個人で開発している人にとっては「あーコイツってこんな風にやってんだ」と。それが良くても悪くても。

各ノードを広げていくと、ノードが重なって醜いので、自動で整理するボタン、画面のサイズを拡大縮小できる機能などがあるとわかりやすいかなと思いました。

開いた時と閉じた時にノードが重ならないように当たり判定を入れました。ノードが当たったら避ける仕組みです。ただ、これだけで全てが解決できた訳でもなく、ノードの重なりと見やすさは継続的に解決するべき課題と思ってます。

あとブログを読まないと何をするサイトなのかわからなかったので、ちょっとした使いかたのヒントなどもあると嬉しいです。私自身も個人開発を始めたので、とても参考になりました！

「使い方」ページを作りました。無いよりはマシとは思いますが、「使い方」ページにアクセスが集まっている訳ではないので、「何をするサイトなのか」はトップページを見ただけで一瞬で誰でも理解できるようにしたい、と思います。その方法は模索中。ここ本当に難しい。。。
私にとってトップページを見ただけで一瞬で誰でも理解できるページの代表は Google。

今はモバイルで見る人の方が多いかもしれません。
私はいいサービスだと思います。

今のところモバイルは非対応です。いろいろ考えたのですが、モバイルの小さな画面内でもノードの広がりを表現するアイデアがまだ浮かんでおりません。一度そのまま小さくレスポンシブにしてみたのですが、とても人様にお見せできる状態ではなかったので、閉じました。

iPhone、iPad で閲覧できない

はい。できないです。

スクロールして「ドラッグしてください」とメッセージが出て、スクロールできないのはわかったのですが、習慣なのか、スクロールで何も起こらないのは違和感あり。拡大縮小とかができるともっと俯瞰で見れて嬉しいです。

スクロールで視点が移動するように変更しました。おっしゃるような「違和感」は私も抱いていましたので、変更してよかったと思っています。こんなに明らかでやった方がいい事でもまーまー悩んで実装しました。なのでこのコメントとてもありがたかったです。拡大縮小も今実装中ですので、でき次第公開いたします。

こういうアニメーションでスムーズに動くのは技術的にすごいなぁと思います。しいて言うなら、たくさん展開すると見づらいのと、マウスで動かすのは面倒な気もします。それにしても創造的ですごい

このサイトは「たくさん展開してから」が本領を発揮すべきなので、そこを改良するようにします。まずは拡大縮小機能かな、と。

アプリ単体で見たとき何ができるかがわかりません。このアプリは何をしてくれるのかがトップを開いたときにすぐわかるようなキャッチフレーズでもあればいい気がします。また、ログインについてもそうしたいと思わせるものがないです。現状ではノードを追加してもそれが誰が追加したものかわからず、「自分は情報収集能力に優れている」とドヤることもできないので、せめて誰が登録したとかどのカテゴリはどのユーザーが強い(詳しい)とかの情報が欲しいです(ゲーミフィケーション的な感じで例えばモードを切り替えると記事や書籍のノードではなくそのカテゴリにノードを追加した人が見えて、件数に応じた大きさのノードで表示されるような)。閲覧についてはある程度ノードが登録されている状態であればそれを見たいという欲求が湧くので、その欲求を満たすためには XX をしてくださいねというデザインにしてユーザーを集めるほうがよさそうに思います。SNS はコンテンツを生産するアクティブユーザーの数がサービスの質に直結するので、現状のユーザーがとどまってなんか書いていこうと思えない状況では育たないと思います。

本コメントは何度も何度も読み返しました。投稿型 SNS の本質をついたコメントだと思います。本当にありがとうございます。全てに同意します。
今はとにかく投稿いただける「書き手ユーザー満足度」に全ての照準を合わせて改良中です。
今まで変更したこととしては、投稿したユーザー名を表示し、ユーザー名リンクをクリックすることでその人の作成ノード一覧に飛ぶようにしました。それと「ホットユーザーランキング」ノードを追加しました。これだけで「自分は情報収集能力に優れている」とドヤることまではできませんが、少なくとも強化していく窓口は実装しました。
ゲーミフィケーションのアイデアが素晴らしので、同じ発想で順次実装していくつもりです。それにしてもこのコメント本当に深い。コメントされた方はかなりの SNS サイト運営のご経験があるのでは？SNS の本質についてしっかり考えていなければこんなコメントできる訳がないし。

トップページを開いてみたけど、何をするものなのか全くわからなかった。95%のユーザはここで脱落すると思う。ただ、中央の文字列をクリックしたあとはやりたいことがすぐ分かったので、それをもっとクリックしたくなるような見た目にすべきかと思う。それこそ「クリックしてください」って出すとか(「スクロールではなくドラッグしてください」は分かりやすくて良かった)

トップページを開いたと同時にノードも開くようにしました。ひとつでもユーザーがクリックしなければならない回数を減らすようにします。こうして改良した後のページを見ているとなぜ最初はトップページで文字列をクリックしないとスタートしない仕様にしたのか、自分でも不可解です。コメントに助けれれました。ありがとうございます。

数クリックですぐ Amazon 関連のアフィリ広告が出て来たので、本当に集合知のようなものを作りたいのかと思ってしまった。ブログ記事は参考にさせていただくことが多いのですが、最終的に広告に結びつくことが多くて、いつもモヤっとした気分になることがあり、それが node-node-
node に対しても起きました。
集合知作るんじゃなくて広告収入が目的ですよねっていうのが率直な感想です。

本サイトのユーザーはエンジニア志望の方たちなのでリテラシーは高めと思ってます。したがって誤クリックで広告を押すなんてことはほぼ無いか、と。それとハッキリと本の画像が出ているので、本当にその本に興味がある人にだけに向けています。実際私も新しい技術を習得する際にまーまー書籍を購入するのでそういう意味で有用かな、と思ってます。初期段階のあまりノードが充実していない段階では、本の画像がパラっと拡がるのは演出効果がありますし。という風にユーザーさんに思っていただけませんかね？

Mac15pro の firefox で見るとノードが見切れる
狭い画面なので、複数のノードをドラッグするとそれだけで
ノードそれぞれがかぶりまくりなので見づらくなる。
画面の左右上下にスクロールが増えていくわけではないので、小さい画面で完結させるのがしんどい。

ノードが重複するのは当たり判定と重なったノードが避ける処理を入れました。まーまー見やすくなったと思います。いかがでしょうか？

言語をクリックした時に 2-3 のリンクしか出ない(参加者が少ないせい？)
とにかく狭い画面内で少しの関係リンクしかでないのでノードを見るよりググった方が早いという状態です。各技術をクリックした際に出るリンクは後ろで関係性を web などからクロールして出力しているなどではなく、作者様の DB に登録されたものでしょうか
だとすると初期は参加者が少ないだろうということで、ノードが少なく利用が難しいとなるのではないか。ノードの種類を最初からたくさんあった方がありがたいです。
こういったサービスは使いやすければありがたいものになりそうなので頑張ってください！

基本は投稿型 SNS なのでユーザーさんからの投稿リンクで成り立っています。おっしゃるようにノードの数をできるだけ増やすことが当面の課題です。とにかく今は「書き手ユーザー満足度」に全ての照準を合わせて改良中です。

・結局本の紹介がしたいのか？
ノードを開いた先は amazon のリンク。
アフィ誘導用のサービスなのかと勘ぐってしまいます。
・ノードが被ってみづらくなる
いくつかノードを開くとノードが被ります。
なんとなく開こうとしたノードが amazon リンクのノードと被っていて、ノードを開くつもりが amazon リンクにクリック暴発。
これで何度かブラウザを閉じました
・ユーザ登録めんどくさい
上記問題点を堪えて+ボタンを押下した先には「ユーザ登録」。
きれいになったらまた見てみようかと思いながらブラウザを閉じました

「ノードと被っていて、ノードを開くつもりが amazon リンクにクリック暴発。」これは本当にすみません。ノードが被らないようにしました。これが私だったら２度とこのサイトには帰ってこない、と思ってゾッとしました。当たり判定を入れて被ったノードは自動的にスルっと移動するので、もうクリック暴発は無いと思います。いかがでしょうか？

スクロールできたほうがよい。情報が偏っている。

スクロールで視点が移動できるようにしました。情報の偏りは数を増やすことで解決するつもりです。

エンジニア歴 2 年のひよっこですが、自分の知識の土台不足からか、いまいち使い所がわからなかったです。ブログを読んでちょっとわかりましたが、それでもよくわからなかったです。UI はとても気持ちいいです。

できれば説明無しに「何をするサイトなのか」を分かってもらえるようにしたいと思ってます。「UI が気持ちいい」とのコメントありがとうございます。

ブログ読みました。好きかっていうのをお許し下さい、、、、
ノードのゆらゆら感が気持ちいいのと、一番最初にスクロールしたら「スクロールじゃなくでドラッグや！」みたいなの出てきてなんかちょっと笑いました。
面白いと思います。すごい面白いと思うんですが、ググったほうが周辺知識込で情報を入れられるのでわざわざみないかなあと、、初歩的な情報が多いのもこう、登録して継続的に使うイメージがわきませんでした。

ノードのゆらゆら感は機能的には合っても無くてもいいモノだったのですが、苦労して実装してよかったと思ってます。おっしゃるようにググっても出ない情報提供を考えなければと思ってます。とっても難しいことだけど、それをしなければユーザーを満足させることはできないので。

作ってみましたブログを見る -> (特に説明読まずに) アクセス -> 何していいかわからない -> とりあえず「データベース」-> 「PostgreSQL」 -> 何もコンテンツがでない -> そっ閉じ

まずはコンテンツの充実と「何をするサイトなのか」を明確にします。「使い方」ページを開設して、何するかは説明しましたがそれだけではまだまだですよね。

面白そうな気配はするもののどうしていいかわからない
ドラッグ禁止つらい
最低 5 階層ぐらいはコンテンツ欲しい

「最低 5 階層」おっしゃる通りと思います。そのためには各ユーザーさんにリンクを貼っていただく必要があり、「書き手ユーザー満足度」に全ての照準を合わせて改良中です。ちょっとしたコメントでもガンガン入れていただきたいのですが、なかなか数が貯まらないです。なんででしょうかね？

特定の技術にあるていど詳しくなってから、関連する技術でそんなのあるんだーと気がつくことが多いので
事前周辺に知っておくことで習得がはやくなると思うのでコンテンツ量が増えたらもっと使いたいなと思いました！
各ノードの＞＞と＜＜をおすと表示される画面の意味がよくわかんないです。
唐突に遷移するだけなので、今の画面がどのモードなのかの
表示と背景色変更とか合ったら嬉しいかもしれないです。
（見づらくなるかもだけど。）

＞＞と＜＜は同じ階層ノードにおいて次ページもしくは前ページへ進むボタンです。って文章で説明している時点でダメなのは分かってます。こんな説明無しに直感的にご理解いただけるようにしなければ。

まずファーストページで何のサイトなのか分かりませんでした
このサイトについてに記載されている内容をトップにも記載してはいかがでしょうか?
またログイン後何ができるかわからないのでスクショ付きの How to ページを用意するのも良いかと
正直に申しますとよくわからないのでユーザ登録したくないって人が大半な気がします

「使い方」ページを作成しました。「よくわからないのでユーザ登録したくない」ってお気持ちはよく分かります。これが「使い方」ページひとつで解決できるとは思えないので、もっと改良するつもりです。

サイトの目的と軽い使い方を記載したランディングページがあると安心すると思いました
ノードが増えていったときに、どれが良質なノードなのか判断するのをどういった仕組みでやっていくのか気になりました。表示するノードをある程度厳選しないと、表示上見にくくなると思うので。現状はいいね数で判断する予定ですかね？
あと、ノードに画像は追加できないのでしょうか。Markdown を書いても反映されませんでした。
あと、一度いいねしたノードはいいねのキャンセルができない仕様ですかね？キャンセルできると嬉しいです。

「サイトの目的と軽い使い方」作りました。これだけみなさんに「何するのか分からん」とコメントいただいて作らない訳にはいかないと思ってスグに作りました。

初めまして。
パズル問題などでも楽しませていただいています、いちエンジニアです。
ログインして数分触ってみての感想になります。
知識をビジュアライズする試みはすごいと思います！
ただノードがパブリックだと、root に近いノードの追加は心理的ハードルが高そうな感じがします。
あとリンク先があるノードから先のアクションが思いつきづらいのが個人的にはもったいないように思いました。
（リンク先があるノードの動作、設計が難しいとは思いますが。。）
今後の開発楽しみにしています！

「root に近いノードの追加は心理的ハードルが高そうな感じ」ですか？うーん。有用なノードが上にくるアルゴリズムは入ってますので、思いついたらどんどんノードを加えていただきたいです。その心理的なハードルを下げる方法を考えます。リンクやコメントの挿入が気持ちよくサクサクできる方法を実装中です。ぶっちゃけプログラミング言語ノードの下に「オレこれ嫌い」とかの一言コメントのノードでも Ok と思ってます。
どうやったら２ちゃんねる級にコメントがガンガン入るようになるんでしょうかね？

色々手を出していますが、今は rails 初学者でこれから参考になりそうです。ありがとうございます。

ありがとうございます。ターゲットはまさに技術の初学者だったので、とてもうれしいです。

アクティブ（選択したノード）と、非アクティブ（選択されていないノード）の違いが、分かりづらくなっています。 
選択したノードから伸びるリンクは、線を太く・濃くする
選択したノードと直接つながるノードは、文字を大きくする
選択したノードと直接の繋がりが無いノード画像を透過させる
等の工夫があれば、可読性が上がるのではないかと思います。

たしかに言われてみるとアクティブと非アクティブの区別がイケてないですね。ここはこれから改良します。このコメントが無ければあまり気に留めていなかったと思います。本当にありがたいです。

全体表示
ノードを広げていくと、全体の見通しが悪くなっていきます。  全体図を拡大/縮小できる機能があればと思いました。（俯瞰した視点でも見てみたい）

私も俯瞰した視点で見てみたいです。初期段階でノード数が少ないのに拡大縮小しても、少ないノードが余計に少なく見えるだけ、と思って実装しませんでした。そろそろ良さそうなので近日中に実装して公開しようと思います。
理想は Google マップみたいに近所の道から世界地図までギュイーンとスムーズに拡大縮小できたらいいのですが、まずは原寸大と 1/10 スケールぐらいの２パターンだけにして、その後異なるスケールを加えていく予定です。

検索機能
例えば、「Webpack」という単語は、フロント以外は、「そもそもどのノードと関係あるのかが分からない。」といった状態があるかと思います。  単語を検索し、それと関連のあるノードが広がる、という機能があればと思います。

ノードの数が充実した段階で、検索しても何もヒットしないということが無くなったら実装しようと思います。

ノード間の繋がり
例えば、『Xamarin』というキーワードは、「Android」「iOS」「C#」といったノードとの結びつきが考えられます。  複数ノードとの繋がりを表現できれば、もっと素晴らしいサービスになると思っています。

これはまさにおっしゃる通り。バックエンドのデータベースやモデル層は簡単に実装できますが、フロントエンド（React+Redux）がネックになってまだ実装できていません。結局は私のフロントエンドの技術力がネックになってしまっている訳です。
ただやっぱりご指摘の通り、必要な機能なので実装するつもりです。だいたい Xamarin が「Android」と「iOS」に繋がっていないのはどう考えてもおかしいですし。

UI の見た目は今後整えていく予定ですかね？余裕があればボタンが背景同色なのと、フォーカスされているノードアイコンとそれ以外のノードアイコンが同じ見た目なところを対応してもらえると少し見やすくなると思います。
あとはどんどんコンテンツを追加していく人がいるといいですね（他人任せ）

フォーカスされているノードを浮かび上がるようにしました。おっしゃるように UI にはまだまだ課題がありますので、改良していきます。

知識の表現として面白いなぁと思いつつ、微妙にしっくりこない感じです。なんででしょう。ちょっと様子見。

そうですね。私も微妙にしっくりこない感じはあります。まずは割れ窓理論にのとって、小さなバグや不具合から改善していきます。

情報が増えてきて、整理もされてきたのでいい感じにはなったような感じはします。
ただ、何をしたいときにこれを使うかがまだ思いつかないですね。既存の検索方法を超える何かが特にないというか

これから技術を学ぼうとする初学者向けのサービスと思ってます。どんなベテラン技術者でも新しい技術を学ぶ機会はたくさんあるはずなので、その際に周辺技術との関連を把握するために使っていただければ、と。打倒 Google とまでは言わないけど、既存の検索方法を超える何かを創ろうと思ってます。

この他にもたくさんコメントいただいてその全てに目を通して、できるだけコメントの行間まで読み込もうとしている。サイトについてはちょっとは改良もしたので改良後のコメントやご意見も随時募集中です。ぜひお送りください。

エンジニアの集合知をノードグラフにして図解する SNS。
「node-node-node（ノードノードノード）」
https://node-node-node.netlify.com/

関連記事