SEOワードの有効性と関係性を視覚化してみる

SEOワードの有効性と関係性を視覚化してみる

SEOワードの有効性と関係性を視覚化してみる

自作したWebShopCreatorですが、数名の方に見て頂いたところ「わかりずらい」との評価を頂いてしまいました。
どうやら『ビジュアル面』がネックの様で、反省しきりです。
まぁね、最近グラフ系の記事が多いのはそんな理由からなんですけど、今回は数字ではなく【文字列の視覚化】についてです。

文字列の視覚化の目的

まずは判断したい事を明確にしてみます。

  • キーワードの繋がり ※サジェストとか
  • キーワードの有効性 ※集客数とか

ECにおいてどころか、どんなサイトでもSEO対策はこの2つに集約されていると思います。
その上で上手に文章を書くと言うね。

文字列の関係性を表現するネットワーク図

 <= こんなヤツ ※D3.jsで描いてみた

ネットワーク図を描くライブラリは結構色んなものがありました。
代表格は『NetworkX』『D3js』の2つ。個人的にはD3jsの方が理解しやすかったです。

多分今後もいろいろ弄って行くと思うので、備忘録リンク大量投下しておきます。

NetworkXでQiitaのタグ関係図を描く
Pythonのnetworkxで簡単にネットワーク分析
グラフの探索※大東文化大学
Pythonでネットワークを分析・可視化しよう!必要手順まとめ(NetworkX)
D3.jsを使ってかっこいい相関図を書きたい

ビジュアルで有効キーワードわかるWordCloud

 <=こんなヤツ

単語の有効性をポイント化しそのポイントを文字の大きさとして表現します。
この表現方法もD3.jsライブラリにある。うん、D3.jsは凄い。

NetworkXでのWeb出力とD3.jsのWeb出力

リンクを見て頂くと解るかもしれませんが、私はNetworkXでネットワーク図描こうと思ってました。
Python=NetworkX みたいなイメージが先行したからなんですけど、私の表現したい場所はWEBのページ内。
これが課題となり最終的にはD3.jsで表現しようとこちらに落ち着きました。

NetworkXにはWEB側への表現方法がない

具体的にはHTML化の方法です。描写した後に画像化して読み込むと言う流れで表現する事になります。
これを「JavaScriptで描写してしまえ」と言うのがD3.jsになります。

ネットワーク図に利用したスクリプト(具体例)

現状の課題は【散らばり】と【まとまり】をうまく操作出来ていない事。上の画像が見難いのはこれが原因です。
45行目~48行目辺りを調整していくと関係の強さや塊のコントロールが出来るみたいです。

ワードクラウドに利用したスクリプト(具体例)

まとめ

表現方法としてはビジュアルでぱっと見で判断できるというのはとても面白いし理解に易いのだと思います。
私はプログラム作る側なので、どうしても「これをどうすんの?」が先行してしまうのですが、それが見やすさ/判り易さの足を引っ張っているのでしょう。

実際に商品名生成を自動化しようとしたらこんな描写よりも「必要なものと不要なもの、絶対つけてはいけないモノの篩分けルール」の方が重要なので、私の脳みそはそっち側にばかり捉えられていたようです。
人に意見聞くと言うのは、やっぱり絶対に必要な事ですね。