コードノート

コードノートはwebを中心にテクノロジー・クリエイティブを伝えるWebメディアです。コードリンク代表、片岡亮が執筆しています。

今時のSEO対策知識のまとめ。被リンクなのかコンテンツなのか。

気がつけばweb業界に関わり始めて10年ほど経ち、一時はSEOを教えることをしていた身ですので、今の自分のSEOに関する考えをココにまとめていきます。気が向いた時に随時加筆中。

被リンクなのか、サイトの質なのか。

数年前まで、SEOというと如何に被リンクを集めるか一辺倒になっていました。とにかくサイトにリンクをたくさん集めれば、順位は上がっていたということです。そんなわけで多くのSEO対策を行う人達は、リンクの自作自演をするようになりました。当たり前ですね。

そんな世界にペンギンアップデートという、人工的でSEO目的だけの質が低いリンクは無視するよ、というアルゴリズムをGoogleさんが加えてきました。

それにより「もう被リンクの時代は終わった!これからはサイトの中身(コンテンツ)が大事だ!」みたいな話が主流になってきました。

とはいえ、世の中そんなことはなく結局今も変わらずリンクが無ければ順位は上がりませんし、人工的とはいえ質が高い自作自演リンクを作るような流れができました。人工だろうがなんだろうが良いものは良いので今でも上位表示されます。

ただ一つ確実なのは、そういった人工的な施策をするリスクというのは著しく上がっているということです。そのリスクを考えると、時間はかかってもコンテンツを作る方が長期的には得だよね、というのがここ最近の感覚です。

というわけで、この記事では基本的にサイトの質を上げるとは具体的にどんなことなのかという話をしていきます。

その前に:被リンク施策はもう不要なのか

被リンクはもうダメ!じゃあどんなコンテンツを作るか、という話が主流になると誤解しがちなのですが前記したとおり被リンクは絶対必要です。

結局コンテンツもリンクも両方必要で、そのバランスが都度調整されているだけなので、両方しっかりしていればSEOなんて考えなくても順位はついてきます。

良いコンテンツを作れば被リンクは集まるみたいな性善説的な考えもありますが、それってもう完全にサイトが軌道に乗った状態です。

そうなるためにまず、リスクのない本来あるべき形の被リンク施策が必要となります。

自分のブログやSNSからリンクを貼るのも、会社概要サイトからサービス紹介としてリンクを貼るのも、自分の姉妹サイトからリンク貼るのも、知人のサイトからリンク貼ってもらうのも当然被リンクなわけです。

これからはコンテンツの時代だ!といってこれらを疎かにするのは違うんですよね。

「何を書くか」と同様に、「何を書いてきたか」を重視する

そんな前提のことをした上で、いざサイトの質を上げよう!というと、じゃあこんな企画ページを…!とか今流行の○○について書こうという話になりがちで、その点に関しては皆様色々と考えていることでしょうし、それだけで話がいっぱいになってしまうのでここでは省きます。まとめれば頑張って良いページを作りましょうって話です(笑)

ではここでは何を軸に話すかというと、すでに作ってきたページの見直しについてです。

もちろんこれから何を書くかも当然大事です。でも仮にすでに30ページ書いているとして、そこに何か一つ足らないことを見つけ全部直すだけで、サイトの中にプラス要素が30個増えるんですよね。

しかもGoogleはサイトの総合力を見てきます。「総合力」の考え方の例を一つ示しましょう。例えば同じテーマについて2サイトが別々にページを作成したとします。そのページのクオリティも同じとしましょう。

そんな時に、Googleは下記のどちらのサイトのページを上位に表示するでしょうか。

  • サイトA : そのサイト平均でユーザーが5分間滞在しているサイトの、新規ページ。
  • サイトB : そのサイト平均でユーザーは1分間滞在しているサイトの新規ページ。

(滞在時間は一つの指標にしか過ぎませんが、わかりやすい指標として。)

そりゃ前者のサイトAのページですよね。

もちろん新規に作成するページのクオリティも重要ですが、過去の実績として良いページが多いサイトであれば、新規で作成されたページも良いものであろう、というバイアスがかかってくるのです。

その判定基準は滞在時間などだけでは測れないでしょうから、大ざっぱではありますがそれら指標をまとめて「品質」としておきます。

品質の低いページを探す

GoogleAnalyticsを使って既存ページの洗い出しをするには、この記事がオススメです。

www.similar-web.jp

すごく簡単に言うと、

  • アクセスが少ないページ
  • 滞在時間が短いページ
  • 直帰率が高いページ

を見つけだしましょう、という話です。

もちろん、記事一覧ページだったり滞在時間が低くて当たり前のページはあるので、色々中身を書いているのに品質が低いページを、という話ですね。

では、それら品質の低いサイトをどう手直ししていけば良いのでしょうか。

そのポイントをみんな大好きWikipediaを例に「Wikipediaメソッド」して話をしていきます。流れはこんなかんじ。

  • 【Wikipediaメソッド : webとして基本的な構造の見直し】
    • 1.ページのボリューム
    • 2.更新性
    • 3.捨てる勇気
    • 4.正しいhtml構造
    • 5.内部リンクの充実
    • 6.引用・外部リンク

Wikipediaメソッドはじめに : 質の高いページを作るために

f:id:moba13:20161113180414j:plain

誰もが検索すれば、Wikipediaは上位に表示されているでしょう。それだけWikipediaはGoogle的に正しいことをしていると言って良いでしょう。

Wikipediaは内容がボリューミーだし、重要なページはガンガン更新されるし、無駄なページはガンガン削除されるし、html構造はちゃんとしているし、関連ページへのリンクがしっかり貼られているし、情報ソースのリンクがちゃんと貼られている。

一行にまとめれば以上がWikipediaの良さなのですが、いざ自分事になると忘れがちな大事なことがここに詰まっているので、一つ一つ振り返っていきます。

SEOと言うとただテクニックに陥りがちなので、今自分がやろうとしていることはWikipedia的なのかを考えていくと考えやすくなっていくはずです。

Wikipediaメソッド1 : ページのボリューム

やっぱり情報量は大切です。他の強豪ページと比べて情報量が少ないのに、「なぜうちのページが上に来ないんだ!」って疑問を持つのはおかしいですよね。

他のサイトよりも網羅性であったり、具体性を持ったページを作り込んでいくことがまず一つポイントになります。

ボリュームを増やす時にありがちな誤解

ただボリュームを増やす時にありがちなことがあります。

  • (◯) ボリュームを増やそう→ではさらに役立つ情報・項目を加えよう!
  • (×) ボリュームを増やそう→とにかく文章を長くしよう(情報量は増えておらず、ただ文章を冗長にしただけ。)

解説するまでもない話なのですが、わかっているつもりが、後者になってることが割とあるのですよね。

そこまでひどくないにしても、情報量は増えたけれどそのキーワードで検索してくるユーザーはそんな情報を求めていない、というケースもあります。

「ユーザー目線で情報量を増やす。」基本でありながらも一番難しく、一番大切なことです。

正直既存ページの修正って、中々すぐ成果が目に見えないことも多く、それこそ分業制だったとしたら、偉い人から「情報量を増やすんだ!」などと言われてもそんなにやる気でないのですよね。そんな時も全員がユーザーに愛を持って接せられるよう、ハンドリング頑張ってください。大事です。

カテゴリ・タグなど、一覧ページにも情報は欲しい

また、情報を書くとなると、たくさんページを増やす!ページの文章量を増やす!とまず考えますが、同様に考えて欲しいのが、カテゴリ・タグページにも文書を加えることです。

これら一覧ページは通常、記事のタイトルとその内容の一部がズラッと並んでいるだけかと思います。ただそれだけでなく、そのカテゴリの説明みたいな文章だったりを書き加えると良いのですよね。

webサイトを立ち上げると最初はとにかく各個別記事の順位を上げることに集中することになりますが、ある程度サイトが整ってくると、このカテゴリページ・タグページ自体を上位表示させる戦略はとても有効です。

傾向的に、一覧ページが上位表示するとユーザーが複数の記事を見てくれることも多く、記事ページが上位にくるよりもPV的に嬉しいというメリットもあります。

そのためにも、一覧ページをただ自動で生成されたページにするのでなく、ユーザーをその一覧ページにある各個別ページを見ることでどんな情報を得ることができるのか伝える文章をぜひ加えてみてください。

ただwordpressだとこの一覧ページに文章を入れるのがデザイン的な整合性がとれない場合もあるので、その辺は要カスタマイズなことが多いかと思います。

一覧ページの重要性についてはこちらの記事の下記部分も参考になります。

課題2.タグページが適切に評価されていない→タグページを精査&ページの評価を高めるために内部リンク構造を修正

ferret-plus.com

Wikipediaメソッド2 : 更新性

ボリュームと近い話ですがまたちょっと別視点の話です。ちなみにここでいう「更新」とはどんどん新しいページを作ることでなく、既存のページの情報を増やすということを指しています。

Wikipediaの良いところって、常に最新の情報に更新されているところですよね。やっぱり更新性って大事です。

なのに自分のサイトになると「更新?なら定期的に何でも良いから文章量増やせば良いんだね。」となにも考えず文章を増やしがちです。

でもユーザーのためになる更新というのは、ただ文章を増やすことでなく「新しい時事ネタをキャッチして、その情報をこれまでの情報と比較しながら紹介すること」です。

iPhoneに関する総合的なページを作成しているとしたら「iPhone7が発売したので、これまでのiPhoneのスペック表一覧にiPhone7に関する情報も加えました。」が更新であって、iPhone7が発売したのにiPhone6に関する項目を書き足すのはちょっと違うと思います。(もちろんそもそも情報量が少なかったのなら、過去の情報を書き足すのも正しいですけどね。)

Googleだって同ジャンルの他サイト等をすべて見てこれは新しい固有名詞だ!そしてこのサイトはこの新しい固有名詞に関しての情報が多い!ぐらいの検知は当然していると思うのですよね。

Wikipediaメソッド3 : 捨てる勇気

サイトを作りこむ中で一番難しいのは、アクセスがなく重要度も低いページを削除することです。人間自分が作ったものを削除するというのは、かなり心理的障壁があります。仮にそのページを作った人が別だとその人にも気を使うことになります。笑

でもそのページがまったくアクセスがなく、かつそれが主要なコンテンツでなかったり、古くて不要またはそれどころか今の時代にやると逆効果な情報であれば、削除した方が良いですよね。

Googleはサイトの総合力を見ていきますので、評価の低いページが多いと、サイト全体の評価も落としてきます。

なので、アクセスもなく直したり追記するだけのリソースを割り当てる気にもならないような重要度が低いページなら、サクッと消しましょう。

d.hatena.ne.jp

実は大手のブログサービスでもこのように質の低いブログを検索エンジンから除外することで全体の順位向上を図っていたりします。それだけ大事なことなのです。

僕の場合は月に一度、作成から半年以上経っていて、月間に検索エンジンから5アクセス以下のページを対象に、加筆などする気も起きず重要度が低いものと判断したら一律削除(または非公開)する方針で運営しているサイトもあります。

今アクセスが少なくても伸ばしたいページについて

ライバルが多いキーワードのページについては、加筆をしたりしても簡単には順位が上がりませんので、アクセス数も中々増えません。

そういったページに関しては、削除する必要はありません。淡々と育てていきましょう。

このようなページに対して出てくる議題は

  • サイト全体の評価が上がってから、そのようなライバルが多いワードを攻めるか
  • サイト全体の評価が上がる前から、将来のためにそのワードに関するページを育てるか。

です。

基本的に正解は後者なのですが、中々それも実際の現場ではうまくいきません。その理由は簡単で、そのページを作る人が達成感がなく疲弊するからです。そうすると時事ネタなどライバルも少なくアクセスも稼ぎやすいネタにだけ逃げることになります。(時事ネタがダメでなく、それだけに偏っちゃダメだよねって話。)

それでも逃げずに、最初から後者のようなライバルが多いキーワードに関する記事を書くのが大事な理由は、新規のポッと出のページより、過去からじっくりコトコト加筆等繰り替えし育てられたページの方がGoogleに評価されるという点です。

一度その体験があれば、育てることに抵抗がないのですが、それがないとたくさん書いても順位のつかないテーマより、サクッと書いても順位がついてアクセスが集まるテーマにリソースが寄りがちです。

どっちも大切なのですが、管理していないとそのような時事系に寄っていくのが摂理なのでその辺のバランス感覚を大切にしましょう。

Wikipediaメソッド4 : 正しいhtml構造

htmlというと難しい技術のように感じるかもしれませんがここで言いたいのは、ざっくり言えばちゃんと見出しを作るの大事だよ、ということです。

ブログサービスでも大見出し・小見出しみたいな機能がありますが、これを正しく振っていくことは大切です。最近はFacebookの投稿の延長のような形で、見出しなどつけずただつらつらと文章を書く方も増えていますが、SEO的な視点でみるとせっかく良いこと書いているのにこれだとあまり順位は付かないだろうなーもったいない、と思うことが多々あります。

Googleさんから見ると、この見出しというのは本の目次のようなものなのですよね。僕らも本を見る時にまず目次を見ますが、Googleも同様にまずそこを見るわけですし、そこで内容の大筋を把握します。

Wikipediaの場合、この見出しの部分は割と簡素ですが、見出しは本の目次という比喩になぞらえると、Wikipediaは辞書であって、あなたの作っているサイトは辞書というより雑誌などに近い、とイメージしてもらえると良いでしょう。

例えば雑誌のiPhone7特集ページの見出しが以下のようになっていてそそられるでしょうか。

  • はじめに
  • 比較
  • 新機能について
  • 最後に

これよりは、こう見出しに書いてくれていた方が読みたいですね。

  • 今回iPhone7に買い変えた理由
  • 過去の端末との機能比較。CPUが爆速に。
  • 新機能「◯◯」は△△が便利
  • 最後に今買い換えるか迷っている人にアドバイス

他に悪い例だとこんなのもあります。

  • 今回iPhone7に買い替えた理由
  • iPhone7とこれまでのiPhoneの機能比較
  • iPhone7の新機能「◯◯」が熱い!
  • ぜひiPhone7に買い替えてください。

一見色々書いてあるように見えますが、「iPhone7」という単語ばかりであまり内容の要約になっていません。

冗談みたいに見えるかもしれませんが、「SEOでは上位表示させたいキーワードを含めるのが大事です」、みたいな話を読んだ人は揃ってこんな風に全見出しに同じ単語を入れます。

そうでなく、正しく見出し・目次として、その項目の内容をまとめることが基本の基本ながら大切です。

最近ではそもそも見出しなど一切つけないブログを見る機会も増えましたが、それはGoogleに対してうちは情報を整理してないですよ、と言ってることになりますよ。

Wikipediaメソッド5 : 内部リンクの充実

内部リンクとは、他のサイトへのリンクではなく自分のサイト内のリンクのことです。「詳しくは"○○の使い方"のページを見てください。」などと書いてそのページへのリンクを貼ることですね。

Wikipediaを見てても関連するページのリンクが貼られてるとどんどんそれをたどっていて、気がついたら1時間経ってるなんてことがありますよね。あれです。笑

わざわざリンクを貼らないでも、うちのサイトはページ数も大したことないしメニュー一覧や関連記事リンクなどがあるから、そこからアクセスしてもらえば良いではないかと思われるかもしれませんが、単純に見るユーザーに取っても明示的にすぐそのページに飛べるのは便利です。

またGoogleからしても、あえて手動でリンクを貼っているということは重要度の高いページ、関連度の高いページと判定することになります。

一つのテーマに関して関連するページ群が多いということは「うちのサイトはこのテーマに関して網羅的で詳しいですよ!」とアピールすることになります。それが上位表示のために重要な要素です。

Wikipediaメソッド6 : 引用・外部へのリンク

内部リンクによりサイトの網羅性・関連性をアピールするという話をしましたが、それは内部リンクだけでなく外部リンク(他のサイトへのリンク)を貼ることでも同様にアピールになります。

iPhoneのレビューサイトであれば、当然appleの販売サイトにリンクを貼るでしょうし、 Twitterで最新情報が出てればそのツイートを埋め込むでしょう。また、商品説明のYoutubeも埋め込むかもしれません。

普通にサイトを運営していれば当然やることなのですが、いざ仕事目的いざSEO目的となるとそれができないことが多くなります。

単純にリンクを貼るのはちょっと手間なので、それをやるのが面倒でやらない場合もあるでしょう。または別のサイトにアクセスを流すのは嫌だ!、みたいな感情でリンクを貼らない場合もあります。

それこそ被リンクによるSEO全盛期の時代には「リンクジュース」という考え方が重視されていました。これは他のサイトにリンクを流すということは、自分のサイトがもっているリンクパワーを外部に漏らしてしまうことだ!という認識で、とにかく外部には極力リンクを貼らないという考えでした。

たしかに今でも明らかに関連性がないサイトにリンクを大量に貼る、となるとパワーは失われますが、ユーザーに取って便利である必然的な範囲でのリンク掲載はSEOに取っても有益です。

最近ではこんな検証結果も出ていますね。

seopack.jp

ただこれは発リンクをすると順位が上がる!と捉えるよりも、webという概念を考えた際には一本もリンクを発していないサイトというのは変だよね、という考えをすることが重要です。

メソッドなどと言ってますが本来普通のこと。SEOって何?

これら6つのことをWikipediaメソッドと称して解説してきましたが、どれもこれもすごいテクニカルなことを話しているわけではありません。「しっかり情報を書きましょう。」「更新しましょう。」「見出しをつけましょう。」なんて技術とは呼べません。笑

以前からある頑張って人工披リンクを作るようなスキルはプログラミング的な技術要素も大きかったですが、サイトの質を高めるとなるとそれよりも「この文章は、画面の向こうにいる人が読んでいる。」と認識する想像力こそが技術となってきます。

その想像力があれば、どの話もなに普通のこと書いてるんだ?って思われることしか書いていません。でもいざ自分が書き手になって、それで売上を立てるという話になった時にこの想像力が失われることがあるんです。

お金の話になると、文章を書く作業はコストです。そしてコストは減らしたくなります。雇われの従業員やライターの場合でも「一記事4000文字以上書くように。」と指示されたら、リサーチして情報を詰め込めるより、間延びした文を書いた方が楽だし早く帰れます。

結局SEOって言葉は「コスパ良く上位表示させたい」って言葉なんですよね。なので熱意ある売れっ子の人ほどSEOなんて意識してません。もちろん必要最低現の知識は学ばれてるでしょうけど。

コスパも大事ですが、生き残る文章には美学が見えます。綺麗事ですが、その美学を持ち磨くことこそが一番のSEOです。そんな文章にユーザーは動かされます。

SEOで順位も上がってかつ人を動かす、そんなライティングを身につけたい方はこちらの書籍も最後にオススメしておきます。

沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション

沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション

 
沈黙のWebライティング ?Webマーケッター ボーンの激闘?〈SEOのためのライティング教本〉

沈黙のWebライティング ?Webマーケッター ボーンの激闘?〈SEOのためのライティング教本〉

 

SEOに関するQ&A

ここからは僕が日頃お客さんと話す際に聞かれるSEOに関する質問に対する回答をまとめて書いていきます。

Q.ソーシャルメディア(主にTwitter)の数字はSEOに影響するのか。ソーシャルシグナルについて

必須ではないですが、割と大きな要素です。

公式的にはTwitterなどのソーシャルメディアのいいね!等の数字は、順位に影響していない、と言われることが多いですが体感として順位に影響しています。

■2010年→影響していると言っていた。(GoogleとTwitterが提携していた)

www.suzukikenichi.com

■2014年→影響していないと言っていた。(GoogleとTwitterの提携解除などがあり)

web-tan.forum.impressrd.jp

■2015年→GoogleとTwitter再度提携

www.suzukikenichi.com

■2016年→GoogleがTwitterを買収する可能性についての報道

www.afpbb.com

そんなあれこれがある中、世の中的にはこの2014年の情報ベースで、Twitterでの評価は検索順位に直接的に影響していないと言われることが多いです。ただその後再度提携しているし、買収の話まであると、その情報を使いたい感バリバリじゃないという話なのですよね。

実体験の話として、僕はボカロDB歌い手DBというサイトを運営しているのですが、2016年の4月にエイプリルフール企画をやりその際に中々の反響がありました。

 それでもって「ボカロ」というキーワードで、4月1日に37位だったのが4月2日には14位になりました。

f:id:moba13:20160930201303p:plain

その際、観測している範囲で、Twitterで盛り上がったから他のwebサイトで紹介されるということはなかったのですよね。それでも単発とはいえ順位が上がります。

ちなみに歌い手DBの方は「歌い手」というワードでほぼ常に1位なのですが、このサイト被リンクだいぶ少ないです。ユーザー層が若いサイトだとホントに披リンクが集まりません。みなさん基本SNSしか使っておらずブログをやっているような人も今日日若い人だと皆無ですからね。

一方でTwitter上だと300人以上のユーザーさんにサイトのURLをツイートしてもらえていて、その中にはフォロワー60万人ほどの人もいます。被リンクは少ないけどSNSではかなり拡散されている、そんなサイト評価しないっていうのは、ちょっとあり得ないよなと思うところです。

経験則的には、先ほどのエイプリルフール企画のように一日バズっただけだと数日上がってお終いで、どの記事も安定してTwitterでそこそこ数字がつくようになると、順位の底上げがあるなという感触ですね。

今の世の中、ソーシャル大事!といいながら実際は「記事更新したら、それを自動でツイートするようにして…」なんて話でなぜか終わりがちです。だからこそ、そこで他のサイトと差を出しやすいので、ぜひそこを戦略的に攻めたらいかがでしょうか。他のライバルサイトがTwitterで弱ければなおさら。

SEOで一番簡単な対策は他のサイトが一切やっていないことをやることです。

年間SEOニュース

(随時追記中)

重要なSEO系ニュースをペタペタと貼っておきます。

2017年

フレッドアップデートについて

2017年3月にあった大幅なアルゴリズム変動、通称フレッドアップデート。ニュースでも話題となったwelqといったキュレーションメディア等に対する対策とも言われていますが、それにどう対応していくべきかについてはこちらの記事がよくまとまっています。

cards.hateblo.jp

綺麗で売れるLP制作ために。デザインとライティングの調和。

f:id:moba13:20140110041044j:plain

LP(ランディングページ)は昨今何か商品を販売する際には一番適した形です。何か商品・サービスを売ってる縦長のページ、と言われれば普通の人でも「ああ、アレね。」と思うのでないでしょうか。

楽天の販売ページもLPと呼べるものが多いですね。高級そうなお肉を蟹を販売しているところで多く見ると思います。肉汁じゅわーみたいな。笑

f:id:moba13:20170308205418j:plain

【楽天市場】★送料無料★黄金比率ハンバーグ&メンチカツ

昨今だと物品販売だけでなく、企業の新卒募集ページやエステの無料体験など、キャンペーン的なページでもLP形式で作られていることが増えて来ました。

f:id:moba13:20170308205929j:plain

特設ページ|マイナビ転職で求人募集するなら求人広告代理店ONE

購入してもらう・応募してもらう、といったゴールが明確なページを作る際には、目線が上から下にシンプルに流れていくので、他によそ見をすることが無くとても良いのですよね。

一方で楽天の販売ページなどを見ると感じるかと思いますが、決してオシャレではないLPを見ることも多いと思います。LP = ダサい・モサい・胡散臭い みたいなイメージを持つ方もまだまだ多いことでしょう。

では、なぜLPは今までそんな悪いイメージを持たれてきたのでしょうか。

売るためにはデザインの前に文字情報

それには商品を売る際、下記のどちらの方が売れやすいのかという話がベースにあります。

  • デザインは綺麗。商品説明は少ない。
  • デザインは正直ダサい。商品説明たっぷり。

僕はwebデザイン提供してます!という側の人間なのでここは前者でやっぱりデザイン一番!と言いたいところなのですが、実際は後者でまずはしっかりと商品説明がされていることが売るためには重要です。

ここで一つ実際によくある話をしておきましょう。

元々店舗で商品販売をしていた会社さんが、webでも展開していこう!という方針になりました。しかしweb製作にかける予算はあまりありません。

そこでお手製webサイトを作ることになります。サイトのデザイン自体は素人なので綺麗なとは言えませんか代わりにしっかりと熱意を込めて商品の説明を書いていきます。

その後広告運用なども頑張った結果、web経由の売上も増え、そのキャッシュを使い、お手製で作ったサイトをプロのweb製作会社に依頼し綺麗に作り直してもらうことに。

普通ここまで話を聞くと、それによりさらに売上が倍増!みたいな話に聞こえますよね。

しかし、必ずしもそうはならず逆に売上が落ちてしまい、結局元々自分が作ったサイトに戻しちゃう、なんてことがあるのです。

web製作会社の仕事の基本は綺麗なサイトを作ること、決して売れるサイトを作ることが仕事ではないんですね。

これは決してweb製作会社に依頼しちゃダメですよ、という話ではありません。もちろん理想はデザインも綺麗でかつ売れること。でもその両立は難しいということをまず知っておきましょうというお話です。

そしてその両立ができない場合、ダサかろうが売れる方がマシ、という状態になっているサイトが昨今まだまだ多いということです。

デザインを綺麗にして売れなくなるケース

ではなぜ、デザインを綺麗にしたのに売れなくなってしまうなんてケースが出てきてしまうのでしょうか。

これは色々と理由はありますが、まず簡単な理由として、一番楽にデザインをオシャレっぽくする方法は文字を減らすことだからです。

それこそブランドのサイトを見るとほとんど文字がなく、メニューも英字で、読ませるというよりデザインに溶けこませていることが多いですね。

f:id:moba13:20170308210633j:plain

PRADA - OFFICIAL WEBSITE - JA

我々はざっと見でスクロールしている時にも以外と文字を無意識化でも読んでいます。そしてそれが購買の判断の大きな材料となっているんです。

それをそもそも省いてしまったり、デザイン性を重視して読みやすさを放棄することでその重要な材料を削ってしまうのは残念としか言えません。

例えばこれなんかも、一見綺麗で見やすそうだけど可読性が下がるデザイン配置ですね。(矢印は目線の動きの解説)

f:id:moba13:20170308211630j:plain

このようなボックスを横に並べるようなデザインは綺麗に見えますが、人間の目線の動きを考えると内容をスルーしてしまうことが多いです。

最近はスマホで縦に並んだ情報だけを見る機会も増えたので、余計に横に目線を動かす人は減っているかもしれませんね。

さらにこのデザインにする際にボックス内に文字量を収める必要が出てきて、必然的に文字数を減らすことになります。

この例以外にもデザインの整合性を保つために自然と文字を減らしてしまう、なんてことが多くそれがコンバージョン率の低下に繋がることが多々あります。

絶対に横に並べちゃダメ!ということではないですが、この文字情報はしっかり読んでもらいたいという部分に使うのは不適当だと言えます。

最近は世間的にLPの制作案件も増え、これぐらいのことはLP専門でないデザイナーさんでも意識してくれることが多いと思いますが、結局良いデザイナーさんに出会いを引きを持ってるかどうかかなってところです。

多量の文字とデザインのバランスを取るのは難しい

上記の例を見てわかるとおり、文字情報とデザイン性の整合性を取ることの難しさが多少なり想像していただけたかと思います。

これはLPだけでなく、紙の媒体でも度々話題に上がる問題だと言えます。よくwebで話題に上がる話だと「日本の映画ポスターはダサい」問題があります。

f:id:moba13:20170308212028j:plain

君の名は。問わず、元々の宣伝ポスターはシンプルでカッコイイのに、なぜその上に「全米が震撼!」「衝撃のラストを見逃すな!」「今までで一番泣いた!」だとか色々書いてデザイン性を殺してしまうんだという話ですね。

なぜそんなことをと言われれば、その方が来場者数が多かったとデータが示しているから、というシンプルな理由なのでしょう。

こんな映画ポスターや楽天系LPはデザイン性を犠牲にしつつも低コストで効果(売上)が出せるフォーマット・テンプレートです。

作ってる側もそれがデザイン的に美しくなくなってしまうことを惜しく思いつつ、限られた予算や時間の中でまず売れなきゃ意味がなく、こうなってしまっているのでしょう。

ただそれだけ文字情報というのは購買に大きく貢献していると証明する例でもあります。

この点に関してはこの記事書いたのと同時期に似た話題が盛り上がってたようなのでこちらも併せて。

toksato.hatenablog.com

まずは売ることが大事。そのために自分で書く

実際問題、商売であればダサく見られてしまうことより、売れないことの方が問題です。まずは商品が売れなければ意味がありません。その為にはまず文書、まずライティングです。

半端な予算でweb制作会社に小綺麗な売れないサイトを作るぐらいだったら、自分で編集できるサイト製作ツールを使い自分で文書を書き、Facebook広告やリスティング広告など、広告費に予算を全投入する方が良いでしょう。

自分で作るなら、広告効果を見た後の修正・追加もいつでもできますからね。

当然の話ですが購買率が0.5%と1%のLPだと、売上が倍変わってきます。1000万円の売上が2000万円に変わるわけです(!)

だから大手はここに予算をかけるわけですが、誰もがそこまで制作費用はかけられません。では予算かけられない場合やテストマーケティングの場合に、どう節減するとなるとできる限り自分で制作してその分広告に回すというのが良いでしょう。

売ることだけを考えればデザインよりライティングですし、ライティングは少なからず自分がやることですから。

一方で、ライティングも含めLPを安く作ります!という製作会社もいくつか見たことがありますが、文書の品質を見ると安さ相応で、あんま売れないだろうなというところがほとんどです。

あれは自社が気合入れて売る商品に対して製作依頼するものじゃなくて、ある程度リピーターがいるなど、説明なしでも売れる商品の際に依頼するものというかんじでしたね。

高い会社に依頼すれば何も書かずに済むのか

では高い制作会社にお願いすれば、ライティングも含め全部丸投げできるのでしょうか。

数億単位の売上を狙う大企業はLP製作専門の製作会社にライティングまでトータルに依頼し、そこには数百万円の予算がかけています。

僕もそこまでではありませんが、そこそこ有名なLP制作会社さんへ発注者として仕事をしたことがあります。

でもその時は全く丸投げではありませんでした。確かに自分で直接LPの文書を書くことはありませんでしたが、ヒアリングにかなりの時間がかけられました。

試行錯誤して云々というのは内々でやるから許されることで、LP製作のプロが高額の費用で制作をするとなると基本一発で売れるLPを作る責任が伴ってきます。

だからこそ、「適当にそっちで書いてよ」と言われてもそうは出来ないんですよね。そこが売上に直結するものだとわかっていますので。

実際の手順としてはヒアリングシートみたいなものに記述することも多く、その項目数が数十に及ぶのが当たり前だったりするので、必ずしもライティングまでしてくれる=丸投げってことでもありません。

例えばこんなことが聞かれるわけです。

  • 他社との差別化ポイントは何ですか?
  • この商品の一番の売りは何でしょうか?
  • この商品により「こう変化する」という事例はありますか?
  • 過去の商品と比べ、どこが一番の変化でしょうか?
  • 今回の商品を開発する動機はなんでしょうか?
  • すでに商品を利用されている方は、どの点を一番喜んでいますか?
  • ..etc

もちろんそのヒアリング力含めのサービスなわけですが、正直「ここが具体的に言語化出来てたらもう自分で書くよ!」ってぐらい聞かれます。笑

とにかくそれぐらい労力を割く大事な部分と改めて認識する機会でしたね。

予算がどこまであっても商品の魅力を一番知っているのは発注側なわけで、それをイタコのように口寄せして自動書記してくれるなんてことはありません。

売れるLPを作りたいという以上、どんな形であれまず書くことが求められるのです。

デザインは必要なのか。

売るために一番大事なのはライティング。商品説明なしにオシャレなデザインだけで売れるのはすでにいわゆる知名度がある商品だけ。

大企業ならある程度体裁を作るためにもデザインは必要なのはなんとなくわかる。でもそれなら個人や中小企業はもうデザインなんて考えなくて良いのでしょうか?

この点に関して僕が今感じている風潮は、二極化です。

  • ライティングだけ頑張ってデザインはポイントだけ抑えて超最低限
  • ライティングもデザインも頑張る

ライティングは両者とも頑張っていますが、デザインは取捨選択が極端、それが今の時代です。

デザインに拘らなくても、売れているのであればそれならそれも正解の一つかもしれません。売上だけを考えればデザインが必須では無い時代になってきているのは確かです。

ただライティングだけの会社もただ単に手抜きをしているわけでもありません。その分ライティングはそれなりに得意だったり、広告運用が得意だったりと。

またその中でもデザインなしで大きい売上を出している会社が行っていることがあります。

それはコミュニケーション。ユーザーとの信頼関係の構築です。

スマホの普及に始まり、Facebookやメールマガジン、LINE@などのツールが増えることにより、ユーザーとのコミュニケーションコストは下がってきています。

そしてユーザーにその商品に対する価値を正しく伝えていれば、極論もはや綺麗なデザインが無くとも成約するようになってきたのです。

でもwebでのコミュニケーションは多くの場合テキストによるもの。それはあくまでライティングの延長に過ぎません。

コミュニケーションにより、デザインの役割の一部を代用できるようになったけれど、すべてをカバーできていないというのが僕の考えです。

ではまず、デザインとコミュニケーションの両方が持っている効果とは何でしょうか?その話の後にデザインしか持っていない価値を話せればと思います。

デザインとコミュニケーションは信頼関係の構築。

まずデザインの側面から考えてみます。良いデザインの効果とは何でしょうか?一般的に言われる言葉だと、「デザインはブランディングである」みたいなものがあります。僕もデザインの一番の力はこの"ブランド"を作ることだと思います。

ブランドって服とかのやつでしょ?ブランドなんて無くても売れれば良いよ、という方も多いかもしれません。しかし、まずここで言うブランドとは主に「信頼関係」を指します。

ユニクロの服であれば安いけど品質が担保されているであろう、みたいな感覚はまさにそのブランドによる信頼関係ですね。

高いデザイン性はそんな信頼関係を生みます。例えば高級な成分が入った化粧品が、100均で売っているようなプラスチック容器に入っているのか、ガラスの美しい装飾の入った容器に入っているかでは圧倒的に後者に信頼性があり購買に繋がりやすくなります。

そんなデザインの信頼感は、どれだけ商品が優れているかを長文で語り尽くしても得られるものではありません。

またその一方、そんなデザインの力を借りずコミュニケーションの力で信頼を作る会社は、ユーザーと定期接触することでこの信頼関係を作っています。

いきなり飛び込みできた営業マンがどれだけ商品の良さを説明しても、信頼には繋がりにくいものです。

でもすでに何度も交流があり、この人の商品なら大丈夫という関係性があれば、それもまた何千文字の商品説明よりも価値があります。

最近目にすることの増えたクラウドファンディングもこの仕組みですね。まだ商品自体すら出来ていないものに対し、その人がそれまでのコミュニケーションで得てきた信頼を価値に変換しているわけです。

このように、デザインもコミュニケーションも、LPのライティングだけでは得られないユーザーとの信頼関係を作り上げています。

最近ではデザインではなく、コミュニケーションによる信頼関係の構築がインターネット上では一種流行りとして注目されることが多いです。クラウドファンディングしかり、SNSで情報発信しよう!みたいな話ですね。

もちろん情報の伝播力が高まり、コストも下がってきた今コミュニケーションを培うことも重要です。

しかし、コミュニケーション的なマーケティングとデザイン的なマーケティングは、信頼関係の構築など重なる領域はあれどやはり別物です。

どちらの方が優れているという話でなく性質の違いですが、コミュニケーションを取れているからデザイン不要という考えは短期的な目線だと言えます。

それではデザインしか持ち得ない価値とはなんでしょうか?

デザインしか自己価値・未来を示せない

それは先に書いた「ブランド」のもう一つの効用です。

それは自分がどんなブランド感のものを使っているのかという自己価値を与えることです。

僕はライティングやコミュニケーションの力で商品が売れようが、ダサくイケてないデザインのLPで商品を売ることは根本的に良いことだと考えていません。

なぜなら、購入者に対して自分はそんなダサい販売ページで売っている程度のものを使っている人間だ、という認識を与えることになるからです。

商品購入者に良い自己価値を与えることは、商品の機能と同様か、それ以上に重要なことにもなりえます。

別の言い方をすれば、どんな気持ちでその商品・サービスを使って欲しいのかを伝えることとも言えます。

良い商品を提供していると自負している以上、それに見合ったブランド感を提供するのも販売者の責任です。

どれだけ優れた商品だと理屈でわかっていて、販売LPページもダサかったら、意識せずともその程度の商品を使ってるという気持ちになるものです。

ブランド品のバッグやネクタイだって、ドンキホーテで買うのか直販店で買うのかで、商品をどれだけ大事な扱うか、またそのアイテムにどんな服を合わせようかという気持ちが変わります。

LPのデザインも同様に、この商品を購買することを通して、あなたにこう変わって欲しいんですよと無意識化でメッセージ伝えるツールなのです。

それって売上に関係するの?と思われるかもしれませんが、長い目で見るととても大きく関係する要素です。結局そのデザインが発するメッセージに反応する方があなたの商品を購入するわけですので。

あなたが伝えるブランド感によって購買層も変わります。それはすなわち顧客単価も変わるし、クレーム率も変わるし、継続率も変わるということにも繋がっていきます。

それは必ずしもきらびやかなハイブランド感を出す必要があるということではありません。例えば地域密着的な商品であれば綺麗さよりも親しみやすさの方が大事でしょう。

ブランドという言葉を見るとキラキラ感を想像しがちですが、下町の古くから続く饅頭屋さん、みたい雰囲気も一つのブランドです。

どんな方向性であれ、こんなお客さんに来て欲しい、そしてお客さんにこう変わってほしいと、直感的に無意識下で伝えること、それがデザインにしか出来ない大事な役割です。

それは必ずしもすぐにわかりやすく売上に直結しないかもしれません。実際デザインが微妙でも売れている商品はたくさん見てきました。

でもデザインに疎かにすることは、段々と提供者と購入者がそれぞれ求めている認識にジワジワと歪みを生んでいくことになります。

強者のLPと弱者のLP

長々と書いてきましたが、そろそろまとめを。

ただ売るだけでなく、本当に価値あるものを届けるLPを作るのであれば、ライティングもデザインも両方が必要だというのが本記事で伝えたいことです。

その際に最後に話をしたいのが、「強者のLPと弱者のLP」という視点です。

まず元々、LPというのは弱者のための戦略でした。インターネットでターゲットを絞った人にだけ刺さる販売ページを作り、テレビで有名なあの商品に勝とう!というものですので。

そう、僕らはどんな商品を売るにしても、テレビや雑誌などマス的な展開をするのが正解・強者だと心の底で思いがちです。テレビ番組に取り上げられるだとか、本なら10万部売れるだとか、とにかくたくさん露出して、たくさん商品が売れることが正解のように感じてしまいます。

インターネットが最近どんどんと身近になり、新たなマス的存在となりつつあるため、結局マスが勝者なんだと、改めて余計に感じやすくなっています。

でも元々インターネットでモノや情報を届けるメリットは、ターゲットを絞って必要な人にだけ届けられるということです。

さらに言えば、これからはあえて絞ってより切れ味を鋭くする時代です。ターゲットを絞り、なおかつ絞ったからこそマスではできなかった新たな世界観を作っていくという、新たな強者の戦略としてLPを作り込む会社が出てきているのです。

そんな強者のLPを作る上で重要となるのが、今回書いてきたライティング&デザインの両軸の調和です。これはただこれまでのLPがちょっとオシャレになってきた、ということでは無く一気に反転した立ち位置にあるんですよね。

同じLP制作なはずなのに、片方は弱者としてもう片方は強者して。気がつけばそんな格が両極端に分かれていました。

かといって強いから良い、弱いからダメということではありません。

予算が少ないなら弱者の戦略としてとにかく予算を削ったフォーマットを作れば良いですし、予算があるなら強者の戦略として競合他社が現れないぐらいぶっちぎった世界を作っていけば良いだけの話。

そんな違いを認識し区分した上で、自分がどちらかを選択した上でLPを作り始めてみてはいかがでしょうか。

少しでもこの記事が参考になりますことを。

 

デザインに関してまた別の角度から見るためにはこちらの記事もどうぞ。

blog.code-link.jp

イケてるwebデザインの違いとは何か。ユミソラIllustrator基礎講座のススメ

f:id:moba13:20170213115154j:plain

3年前にお世話になった、ユミソラ先生のIllustrator講座の感想です。これまで3名ぐらいにオススメだよ!と紹介して送り込んでいますが(内1名は元々webデザイナーで今では売れっ子 )、改めてブログを通してご紹介を。

僕は普段の自己紹介では色々説明を省いて、デザインもプログラムもできますなどと言っているのですが、元はディレクターでちょっとデザインツールも触れるノンデザイナーです。変な人よりは出来ると思いますけど。

そんな僕がなぜデザイン講座に足掛け1年毎週3時間(Illustrator講座単体では2か月)通っていたのかを、これからwebデザインを学びたい人はもちろん、web製作に関わる人全員に向けても書いていきます。

webデザインにセンスは必要なのか

f:id:moba13:20170205155355j:plain

上記の画像は実際にIllustrator講座中や独自に作った成果物の一部です。

例えばトランプのマークや桜の花びらは講義内で作った成果物ですが、見てのとおり非常にシンプルな形状です。しかし、シンプルだからこそ誤魔化しが効かず、学習時に問題点や操作法を洗い出すのに好都合なのです。

シンプルなパーツ作り=操作の未熟さを浮き彫りにすることなので、Illustratorの使い方を集中して学習することができます。

「センス」というと良い言葉に聞こえますが、webデザインにおいてはそのセンス(感覚)に依存していて、「基本的なツールの操作スキルが未熟」という人がチラホラ見受けられます。センスで未熟さをある意味誤魔化しているんですね。

それでも良いっちゃ良いのですが、デザインが分かる人が見ると色々と粗いんですよね、やっぱり。センスがあっても、細部が粗いものに僕はokを出せません。逆に特別なセンスが無くても、細部が整っているものはサクッとokが出せます。

センスがある人こそ基礎を固めて、それをもっと上位の箇所で利用すべきです。またセンスに自信がないという人でも、基礎があれば良い成果物を作れます。センスはそれに+αされるおまけです。

センスの前に必要な基礎の未熟さを明確にし、あとはその具体的な改善点を学ぶだけ、それがユミソラ式Illustrator講座です。

最近のweb製作はシンプル&ビジュアル重視の大味のものが多い

さて、最近のwebサイトというと以下のサイトにあるようなページを見ることが多くないでしょうか。

f:id:moba13:20170131233314p:plain

lp-web.com

メインビジュアル(サイトを開いた時最初に目に入るところ)は画面一杯に画像がドーンとあって、以前のwebサイトのようなサイドバーなどなく1カラムで構成されていて、見出しは大きな文字+装飾で、画像やボックス要素がシュッ!っと横から出てくる。

それこそmacやiPhoneなどAppleのサイトをその走りとして印象に持つ人が多いかと思います。このようなシンプルなデザインのサイトは、スマホで閲覧する際にも閲覧性が高いため相性が良くここ2,3年流行りとなっています。

一方で下積みが少ないデザイナーでも、それこそセンスゴリ押しでそれっぽいものを作りやすく玉石混合な状態になってきています。最近ではwixペライチといったデザインサイトを誰でも作れます!といったサービスも出てきてその傾向はより顕著です。

ではイケてるシンプルデザインサイトとイケてないシンプルデザインサイトの違いはどこにあるのでしょうか。

最低三手間の原則

Illustrator講座の中では、ツールの使い方はもちろんですが、要所で講師のユミソラ先生のデザインに関する思考法を教えてもらえます。

その中で僕が一番よく覚えているのが「最低三手間の原則」です。

文字通りではありますが、デザインパーツを作る際に最低3つの手間をかけるとイケてるデザインになるということです。

講座を受けてから3年経った今でも、自分でデザインやってて微妙なところを見つけると「ここ一手足りてないな。」などとよく一人でやっています。「手抜き」なんて言葉がありますが、あれは手が入っていないのではなく、手数が足りないということなんですよね。

先ほど、最近のwebサイトはシンプル志向だなんて話をしましたが、そんなシンプルなデザインの時でもこの最低三手間の原則は適用されます。

シンプルというのは中々難しい言葉で、安易に受け取るとただの手抜きになります。シンプルなのに手間数をかける、これは矛盾した言葉に見えますが、デザイナーの仕事とはそれを成り立たせるところにあるわけです。

「最低三手間の原則」こそ、イケてるシンプルデザインとイケてないシンプルデザインの違いであり、書籍で独学したり、ツールの使い方を学ぶだけの講座では身につけることができないスキルです。

手間をかけるにはスピードが必要

では限られた納期の中で三手間をかけるにはどうしたら良いでしょうか?一発で良いモノを作るセンスでしょうか。確かにそんな天才もいるかもしれませんが、それだとセンスの乏しい我々凡人は困ってしまいます。笑

凡人が手間をかけるために必要なものはズバリ「スピード」です。センスが無くてもスピードがあれば試行錯誤をたくさん繰り返し良いデザインが作れます。

そんなわけでユミソラ式Illustrator講座では、単純な機能を使いこなすスピードを身につける講義が前半のほとんどを占めるといっても良いでしょう。

Illustratorというベジェ曲線がーみたいな難しい機能の話になりがちですが、それは中盤以降。もちろんベジェも大切ですが、基本機能で出来ることをまずはとにかく身につけます。

そしてその中で、難しい機能を使わないでもできることが、たくさんあるということに気がつくこともできるのです。

デザインソフトの基本操作スピードというのは、文書を書く時やプログラミングの時でいうタイピングのスピードです。まずはそれが必須なのは自明ですよね。でもデザインだとタイピング特訓ソフトのようなものは無いわけで、それを学ぶことのできる場は非常に貴重です。

◼︎ユミソラ先生のお言葉

シンプルという名の手抜きに依存すると変化の時に滅びる

そんな中、今の時代手を抜いてようがそれっぽいデザインができるなら良いじゃないか、という話もあります。

確かに今の時代はそれで良いのですが、デザインのトレンドは常にシフトしていきます。今のデザインの風潮も元々以前に流行っていたものが、進化して戻ってきたものですし。

www.asobou.co.jp

そうなると、ただの手抜きに依存したwebデザイナーはまた風潮が変わった時に、もしその風潮がリッチなものでスキルが大きく求められる流れだったとしたら、変化に適応できず絶滅することとなります。

また昔からwebをやっているデザイナーさんと仕事をすると感じるのですが、そういった方々のデザインは前の風潮の時に磨かれたスキルを今の時代にマッチさせていて、そこに強みがあるのですよね。

先ほど、シンプルな中に三手間を入れるのはバランスが難しいみたいな話をしましたが、そのバランス感覚のようなスキルはまた次の流行に変わった時にはきっと磨きづらいスキルとなり、それを持っていること自体が強みとなってくるのです。

ノンデザイナーこそ勘どころが大事だし、それがないと良いと言われるデザイナーになれない。

僕は仕事でなくライフワークとしてもwebサービスを作る人間ですので、そういった時にはデザインもプログラムも基本全部自分一人でやることになります。そんな時webデザインで大事なことは、締めるべきポイントをちゃんと締めるという勘どころです。

うちのサイトでいえばこの歌い手のまとめサイトでは、キャラクターアイコンというポイントに手間をかけ(もちろん学んだIllustrator力で作成)その他装飾は少ないですがバランスは取ってありそのおかげでデザインをお褒めいただくこともあります。これが仕事だとしたらもっと詰めていくべきところはたくさんあるんですけどね。

f:id:moba13:20170204150825p:plain

極端な話そんなポイントさえ抑えられていれば、仕事の案件でもクライアントさんからokが出ます。

これは説明が難しいのですが、必ずしもすべてのパーツに気合が入っていればokが出るわけではなく、全体の調和感みたいなところです。締まってないポイントがあるだけで、その箇所だけでなく全体のパワーが抜け落ちてしまうのです。

ここは中々書籍などでは学びづらいところで、最終的には自分でたくさん手を動かしながら学んでいくような領域なのですが、それでもまず最初に言葉で学んでおくことでかなりショートカットができます。

割とそこそこwebデザイナー歴がある人でも独学でやってきたような場合ここが抜けてることがあるので、意識が重要なポイントなのでしょう。

おそらく僕もノンデザイナーと言いながらも、ユミソラ先生はもちろん、これまでいた環境でお世話になってきたデザイナーさんの成果物や話を見聞きする中でほんの少しその感覚を分けてきてもらっていたのだと思います。

◼︎ユミソラ先生のお言葉

Illustrator講座、4~5月にまた開催されます。

そんなわけでIllustratorの使い方はもちろん、webデザインの思考術も学べるユミソラ先生のIllustrator基礎講座がまた2017年4月よりまた開催されます。

不定期での開催のため一度募集が終わると、また次回開催までだいぶ待つことになります。ぜひこの機会に学んでください。

詳細やお申し込みは下記のページからどうぞ。

tukilog.jugem.jp

具体的なことに対する質問や、最新・捕捉情報はTwitteも併せて参照ください。

twitter.com

少し調べていただければわかるかと思いますが、実践的なwebデザインスキルを学ぶ場というのは本当に貴重です。決してお安くはありませんが(といっても英会話教室に通う程度)良き学びをどうぞ。

Illustrator講座詳細ページへ

素敵なロゴ制作のため発注者がやること。デザイナーとのやり取りのコツ

先日完成したうちのロゴのお話です。

f:id:moba13:20170118144625j:plain

今回は自分のロゴということで、通常のロゴ制作よりさらに気合い入れて作成したので、その工程を保存しておきます。

ロゴは自分で制作したわけでなく、馴染みの敏腕デザイナーさんにお願いをしました。で、常々感じていたのですが、ロゴ制作ってデザイナー選びも大切ですが、それと同じぐらい発注者の対応も大切なのですよね。デザイナーと発注者の協調調和です。

通常ロゴ制作というと、何案か上がってくる→そこから一案選ぶ→ブラッシュアップする という工程が多いですが、割とあるのがこの工程の中でロゴがダサくなっていくという現象です。

デザイナーさんは決して案の中で「これが推しです!」と言うことはありません。ベストを選ぶのは発注者ですから。でもその発注者が、案の中で一番微妙なものを選んで、それをさらに微妙にする指示を入れてくることが多々あるのです。

もちろん格好良ければ良いわけでなく、その企業なり団体の意思が一番伝えられることが大切です。ただダサいし周りに意思も伝わらないロゴがなぜか出来上がっちゃうことあるので、そこは発注者として自分も作り手の一人であるという意識が必要です。

今回、その意識を持ち努力してみた結果、いつもとは違った工程になったのでそれをまとめていきます。

1.材料集め

この辺りは普通の工程ですが、まずはデザイナーさんに渡す資料作りです。ロゴの仕上がりはデザイナー次第。でもそれと同じぐらい自分が集める素材が重要です。最初の打ち合わせ前にできる限る資料を作っておきます。

よくプログラマーを「魔法使い」と言うことがありますが、デザイナーもまた魔法使いです。そうなるとロゴは魔具になりますが(笑)強い装備を作るためには良い素材を集めるのがRPGよろしく定番のルールですね。

素材集めには色々と方法があります。

  • 社名の由来やそこから連想されるもの
  • 現在の事業内容や今後の方針。伝えたいメッセージ
  • 尊敬する企業や取引先の名刺などから参考になるロゴ。
  • 街中をフィールドワークして見つけるロゴや看板、雰囲気・色使い。
  • 好きな美術や映画
  • 自分が普段好んで身につけるもの

などなど、直接ロゴにつながるものでなくとも、自分が好きなものや自分ルーツにつながるものはすべて素材になります。

これらを打ち合わせ前にマインドマップでもなんでも良いのでまとめておけると良いですね。

f:id:moba13:20170123170004j:plain

ポイントとしては今この瞬間だけを見るより、「過去」と「未来」を素材として出しておくことです。

「今この瞬間」というのは現在の事業内容だったり組織規模だったり、今自分はこういうことをやっています、という部分ですね。もちろん伝えるべき情報ですが、それ以上に過去・未来の情報量が必要です。

「過去」は自分の幼少期からのルーツ。その会社ないし組織を作った根源となる動機が伝わると良いです。幼稚園や小学校の時に何が好きだったかみたい話からでも広げていけるかもしれません。

「未来」は背伸びをした先にいる自分。ここは今回、僕が最初意識できていなかったポイントなのですが、過去と現在からだけ素材を集めると今の自分っぽいロゴが仕上がってくるのですよね。

それを見た時に何が足りない感をすごく感じたのですが、それが「未来」でした。自分が今後どうありたいか、です。単純にその組織が目指す未来などをまとめるのも良いですが、普段より少し背伸びをした場所にフィールドワークにいくと何かイメージが湧くかもしれません。

普段買っているブランドよりワンランク上のブランドの服や靴を見に行ったり、普段より良い土地の高いお店でご飯を食べてみたり(笑)

それが何の素材になるんだよ、と思うところですが、普段より良い場所にいった時の気持ちはもちろん、見かけたお店のロゴだったり模様だったりがヒントになったりするものです。

僕の場合は、ロゴのことを考えながら、ふと日本橋で映画「君の名は。」を見た時「あ、コードリンクの"コード"ってプログラミングだけのイメージでなく、"紐"ってイメージにもなるな。」と考えを広げた後に街中をうろうろしていたら偶然見つけたこの暖簾の紋が一番イメージに近い!なんて出会いがありました。

 

普段だったら新宿辺りで映画を見ているのですが、あえてそうじゃない土地を歩いたからこそのヒントでした。

2.デザイン案から広げていく

最初の話でロゴは最初のデザイン案から絞っていく、という話をしましたが今回一番違ったのがこの工程です。

下の図が実際にうちのロゴが出来るまでの流れなのですが、毎度全然変わってるといますね。ただ毎度1からやり直しているわけでなく、奥底にあるものは一緒っていうのは感じ取ってもらえるのではないでしょうか。

 

うちのロゴが出来るまで。

リョウさん(@code_link)が投稿した写真 -

 

普通のロゴ制作は狭めていく流れですが、今回は広げていく流れでの制作となりました。それでは、どんな流れで広げていったかを解説していきます。

まずなぜ広げていったかというと、都度足りなさを感じたからで、そこに必要なエネルギーを加えていったからです。

そしてその足りなさというのは、デザイナーさんが表現できていない要素というより、こちらが伝えきれてない要素があったと言えます。

ではその足りない要素をどうすれば言語化して伝えられるかが、これからの話となります。

まずは自分の直感で判断

ともあれ最初のロゴ案が上がってきたら、まずは自分の直感で判断です。何となくでokなので、自分がどのロゴが好きでそれはなぜなのか。別のロゴはなぜ違うのか、というイメージを持っておきます。

画面上だけで見るのと、印刷して見るのとではイメージが違うので、紙で見るのも良いでしょう。紙ならそのままイメージしたものを言葉にできますし。僕の紙もこれぐらい文字で埋め尽くされました。

f:id:moba13:20170123165521j:plain

ただいきなりこんなに書いたわけでなく、最初は数行程度だけ書いたのが、寝て起きて改めて感じたものや、この後の工程で書き足したりしていった結果です。

数日間、ディスプレイの横や自宅のテーブルの上に印刷した紙を置いておくと、自然に目に入って自然と日常の中で考えやすくなりますね。

周りの人の意見を集める

自分が毎日考えるのと平行して、周りの人にも意見を求めましょう。一番大事なことです。

職場の人だけだと偏るでしょうし、家族や友達と食事でもしてる時に気軽なかんじで聞くのも良いです。

聞くコツとしては「俺はコレが良いと思うんだけど〜」などと自分の意見を事前に言わないことです。まずは純粋な相手の意見を聞きましょう。

そして、なぜそれを選んだのかをヒアリングしていきましょう。同じロゴを選んだ人でも、違ったポイントに良さを感じているかもしれません。違うロゴを選んだ人は、自分が感じた良さを逆に悪いと思ったかもしれません。

ちなみに僕は、第一案・第二案共に自分が良いと思ったロゴを良いといってくれる人が少ない少数派でした(笑)

なので、自分が好きな方のロゴがダメだと思う理由や、別のロゴを良いと思う理由を多く聞くことができました。

周りの意見を良い意味で無視し、抽象的なイメージに変えていく

反対意見はとても貴重です。ただ今回は、あくまで最初に自分が直感で良いと思うロゴをベースに、ロゴの変更依頼点をまとめていきました。

ここはだいぶ難しいポイントだと思います。

自分と反対意見が多いからといってそれに流されるのもダメですが、反対意見を「お前はわかってない」とばかりに切り捨てるのもダメです。

主体性を持った上で、必要な意見だけを取り入れる必要があります。では「必要な意見」とは何かと言った時、それは聞いた意見の言葉そのものには宿っておらず、その裏に隠れています。

意見そのものじゃなくて、なぜその意見を持ったのかという"背景"が重要ということです。例えばロゴ案に対してよく言われる意見に「色が暗い」「力が弱い」みたいな言葉があります。

それを言われたからといってデザイナーさんに「色をもっと明るくしてください。」「もっとパワーあるかんじにお願いします。」というだけの発注をかけるのでのはダサいと思っています。(ついそう言っちゃうことも多いんですけど。)

なぜそのロゴが暗く感じるのかは、必ずしも色の明度だけが理由ではありません。例えば、下の図は同じ色ですが感じる明るさは違うかと思います。

f:id:moba13:20170123104137j:plain

同様に明るさ暗さだけの話だけでなく、他に言われた意見も、同様に目に見えるポイントだけで原因ではなく、全体的な雰囲気から醸し出されているということです。

それであるとすると、目につくポイントの変更依頼をすることが重要ではなく、どんな雰囲気であって欲しいかを伝えることが重要になってきます。そこで求められるのが集めた意見を"抽象化"していくことです。

具体的に今回のロゴ制作にあたり、どんな抽象化をしたかをまとめていきます。

第1案 今の自分のイメージ。

f:id:moba13:20170123171133j:plain

僕がベースとしたロゴはこちらでした。もう一方のロゴを選んだ人達の意見は「これだと研究所っぽい。」「もっと線を太くしたり波を強くした方が良いと思う。」「もう一方のロゴの方がパワーを感じる。」といったところでした。

それら意見や、同じロゴを選んだ人達の意見を総合して感じたことはこのロゴは「良くも悪くも今の自分を表しているのだ。」ということです。

この抽象化に正解はなく、「仮にそのロゴを何かに例えるとしたら何か。」という遊びのようなものです。

そうすると自然とそのロゴに何が足らないのかが見えてきます。抽象化の結果、このロゴには「過去」「現在」の情報は入っているけど、「未来」において自分がどうありたいのか、というイメージをデザイナーさんに伝えきれていなかったのだと感じました。

そして、その未来像というのは、もう一方のロゴにある円の形のようなイメージとはやはり違うな、とも思い、その辺りの考えや情報を伝え変更依頼としたのです。 

ちなみに変更依頼では、極力色や形に対する直接的な指示はしていません。イメージをできるだけ具体的に伝えて、そのイメージっぽくしてもらいたい、という言い方をしています。

ノンデザイナーの人が頭の中で作った理想の形なんていうのは、実際に形になると得てして大したことがないですし、何よりイメージだけで伝えた結果自分の想像とは全く違ったものが上がってくるのが楽しいんですよね。デザイナーさんマジ魔法使い。

第2案 AIのイメージと重ねた例

f:id:moba13:20170123171152j:plain

次の案の中では僕はこれをベースとして選びました。他にこれを良いと言った人はいなかったかもしれません。笑

僕の中では、自分の持つ強みが発展し結晶化したようなイメージでいたのですが、「色が暗い」「冷たい・排他的かんじがする」みたいな意見が多かったように記憶しています。

そんな意見を自分の中で噛み締めた際に出てきたイメージは「世の中の人工知能に対するネガティブなイメージみたいだな」というものでした。

そのイメージを元に、テクノロジーを世に還元するような父性的なエネルギーを加えた方が良いのであろう、といった考えにつながり、それを変更依頼の軸としたのです。

ロゴ作りを経て、自己のイメージを固めていく

以上が今回のロゴ作りの大枠の経緯となります。一般的にロゴ作りというと、すでに固まったイメージを形に起こすもの、というイメージが強いかもしれませんが、今回はロゴ作りの中で逆に自分の中の指針を固めていくことができました。

飲食店のロゴなどですでにがっちりイメージが決まっている際にはクラウドソーシングのコンペ形式で案を集めるのも良いですが、自身の中で今後の方針についてまだ言語化しきれていない際は今回のような製作方法も一つおすすめです。

ですが、都度案が上がってからのフィードバックにも時間がかかりますし、毎度新しくロゴを作っていただくようなものなので、デザイナーさんにも負担をかけます。

その辺りはまずベースとしてお互いの信頼関係あってのもの。時間をかけるべき点以外は極力先回りで情報を送るなど、気遣いをお忘れなく。

自分はデザインをわかってないと自覚する

ここまで振り返ってみて重要な点を2点に集約するとしたらこの2つになります。これが発注者・ディレクターに取って重要なことです。

  • 自分がデザインに詳しくないと自覚すること
  • それでも主体性は持つこと

先ほどの「色をもっと明るくしてください。」のような発言だったり、周りの人の意見を聞かなかったりというのは、自分が少なからずデザインに通じてると思ってる勘違いだと思うのですよね。

都度、僕がロゴの製作に関わっていて感じるのが、自分はデザインをわかっていないのだな、ということです。日頃web製作をしていて、それこそ自分でもPhotoshopやIllustratorなりに触れていると勘違いしてしまうのですが、本来デザインはそんな簡単なものではありません。

最近ではwebサイト製作ツールや、画像加工アプリなど、それっぽくデザインに触れた気になってしまうものが増え、勘違いする機会はますます増えてくるでしょう。

そんな中ロゴ製作はそんなツール頼りでは作れない、デザイン純度の高い仕事です。ですので、ここで改めてデザイナーへのリスペクトを思い出して取り組むべきお仕事と言えるでしょう。

リスペクトと主体性、その2点を意識し素敵なロゴ製作になりますことを。

 

最後に、今回素敵なロゴを制作していただきましたよあけデザイン様のサイトはこちらです。

仕事実績:コードリンクのロゴ | 熊本のデザイン事務所 | よあけデザイン
yoake-design.com

六本木アートナイト2016で感じた、変化してきたクリエイティブ

f:id:moba13:20161023161919j:plainwww.roppongiartnight.com

毎年「今年はどうすっかなー」と言いながらなんだかんだ行っている六本木アートナイト、今年も行ってきました。個人的に楽しみにしていた、たこ焼きシーケンサー(何を言っているのかよくわからない)が時間の都合で見れませんでしたが、ここ数年の中ではだいぶ満足した年でした。

www.roppongiartnight.com

六本木アートナイトは、3.11の大震災があった2011年には中止され翌年以降も震災復興というメッセージ性が強い作品が多かったように感じています。

ただ今年はその色がだいぶ無くなったきた印象がありました。こんな展示数年前だったらできなかったんだろうな、という直接的なものから、間接的なテーマとしても「破壊」を伴う作品が出てきていました。

ただそれは、そのような物事をもう忘れてしまった、というエネルギーではありません。あれから数年、安心や安全を意識し社会は回ってきたように感じていますが、それだけでは世の中回らない部分がある、という感覚です。

「このままではダメだ。」という感覚が、社会の中で産まれてきており、ではどうすれば良いのかというと、破壊と言うと大げさかもしれませんが、まずは物事を手放すという必要が出てきたよう感じます。

新しい作品というのは、その社会の兆候を写す鏡ではないのかなと。

これまでの作品は、元々あった作品の上に震災というテーマが乗せられていましたが、今はそれは大前提のテーマとなり、そこに何を乗せるか、ということを考える時代になってきたということです。

それと関連することで、先月あった「デザイン・コードSP」という番組の中で、オリンピックの卓球台に関する制作秘話がありました。

www.tv-asahi.co.jp

f:id:moba13:20161023163603j:plain

この卓球台、TVで試合を見ていて「すげーカッコイイなー」と思っていたのですが、実はこれも震災からの復興というのがベースのテーマにあるのです。

使われた木材が被災地のものということもありますが、この一見「X」に見える台の形は実は「支」という漢字を表しています。ただ良い意味でそれがわからないぐらい格好いいデザインなのですよね。

ここ数年の世の中の作品は、支えるといったテーマと作品自身があまり組み合ってないように思うところがあったのですが、その辺がかなりかみ合ってきた2016年を最近は感じています。

そんな時代、その上に新しく乗ってきたテーマが「破壊と再生」というのは非常に面白いなと考えることのできる六本木アートナイト2016でした。

来年もなんだかんだ行くのかなー。

よくわからないとわかった人工知能セミナーナイト

 f:id:moba13:20161023214723j:image

こちらの出版記念イベントに参加させていただいたので、その内容をメモがてら記事にしてみます。さっそくよくわからない!と評判が来ているらしい(笑)本書ですが、今回のセミナーの内容をお届けする中で別の目線を与えられれば幸いです。

peatix.com

第一部:AI教育論

第一部は著者である清水さん単独のお話。AI教育論といったところでしょうか。

まずAI、すなわち人工知能の「知能」とはなんなのでしょうか。それは本書の中にも解説があることですが、「知性=intelligence」その意味は「知識(knowledge)と技能(skill)を獲得(aquire)し、適用(apply)する」こと。それすなわち知性となります。 

いまのPCでもある部分では知性を得ることができていました。Google検索も知識を獲得し、それを活用するするという意味ではAIと言えるかもしれません。ただ今そのような限られた範疇だけでなく、その範囲が拡張してきているため昨今またAI業界が盛り上がってきているようです(第三次ブーム)。その大きな特徴は、認識スキルの急激な伸びです。 

具体的には、深層学習という分野の中で、画像を認識するロジックをAI自身が作り、いままで人間が頑張って作ってきた画像認識アルゴリズムの精度(60%ぐらい)を10%以上一気に超えてきたというのです。

ではAIになぜそれができるのか。それはAIに個性があるから。 

個性、というと大げさなのかもしれませんが、AIは初期のステータス設定がランダムなため、同じ学習をするにしてもその学習結果が一人一人異なるのです。そんなAI君達が何千何万人と一気に学習を進め、認識の精度を上げていく、と流れです。

そんなAI君達の中で優秀なテスト結果を出す個体の特徴というのは「良い間違いを重ねたAI」。AIに取って正解というのは=間違いではないものを知る、ということなのです。

だから学習中偏った正解ばかり見てしまうと、いざ本番にちょっと違った問題を出された時に間違えてしまうとのこと。

まるで人間のようですね。同じ授業受けてもみんなテスト結果は違うし、真面目に黒板のノート取ってるんだけど応用問題になると全然わからない子がいる、みたいな。なによりAIは「間違う」ことができるから高い知性を得ることができるということ自体がすでに人間的です。

他にも人工知能の学習テクニックがいくつもあるのですが、どれも人間的なのがとても印象的でした。

蒸留

蒸留というAIの学習方法があり、それはざっくりいうと「良いAIを先生にすると、生徒のAIはもっと賢くなる」ということ。

生徒AIは、まず先生AIの答えをそのまままずは何も考えず、完コピしていく。そしてその後に学習をしていくと先生AIが3ヶ月かけて学んだことを、生徒AIは半日で学ぶことができるというのです。

人間でいうと、守破離みたいなかんじでしょうか。

生成敵対的学習

生成敵対的学習という手法もあり、これは「相手を騙そうとするAI」と「それに正しく答えようとするAI」を作りそれがお互いにライバルとして対決していくと学習速度が上がるというもの。

先ほどの話でも、如何によい間違いを積み重ねるかが重要、という話がありましたが、その良い間違い、というのをAI自身が作ってしまうということですね。

ブレイクスルー

これは学習方法ではなく学習過程の話なのですが、これもまた面白い話です。

AIの精度というのは、時間に正比例して伸びていくものでは決してなく、しばらく精度が伸び悩む時期が続きある時急に精度がスパーンと跳ね上がる時があるというのです。

もちろん全部のAIがみんなそうなるわけではなく、局所解をぐるぐる回るだけのやつもが多く、そんな子達は間引いたり別のランダムな値を与えてみたりみたいなことがあって、というお話のようですが。

そしてこれは3日経ってやってブレイクスルーが起きる、みたいな時間単位でもあるようで、それは少し前の今と比べて1/100のマシンスペックだったとしたら300日かかることだったみたいな話になってくるので、そもそものマシンのスペックの重要性をより感じることのできる現象でもあります。

 

そんなこんなで、どれも非常に人間的な学び方である、というのが面白いですね。

では、良いAIを育てるためにはなにが必要か。それは、良い学習データを人間が用意することにあります。すでに画像認識といった分野では、今プログラマーに残っている仕事は、AIに必要な学習データを作ることぐらいという話もありました。すでにプログラマー自身が仕事を奪われているのですね。笑

そして学習データのセット自体をAIがやってくる日というのもいずれやってくるのでしょう。

といったところで、AI教育論のまとめ。AIの教育に必要なものは以下の5つ。

  • 良い教材
  • 良い先生
  • 良いライバル
  • コツはそれぞれ
  • 根気よく待ってブレイクスルーに期待する

AIは技術によって、人間の認知が拡張された未来が楽しみです。 

 

第二部:品川女子学院の漆校長との対談。これからのAIで社会で人間が学ぶべきことは?

そして第二部は、品川女子学院の漆校長と清水さんの対談形式に。

diamond.jp

品川女子学院は、授業にタブレット端末を導入するなど先進的な学習を提供されている中高一貫校。

学校教育とAIというと一見関係なさそうに見えますが、これからの時代いまある仕事の50%は失われる、と言われているこの時代、「今後来るAI社会の中で子供達に何を教えるべきか」というのは教育者達の大きなテーマである、ということです。

対談中、色々な面白いお話がありましたがここでは基本的にこのテーマに話を絞っていきたいと思います。

まず品川先生のお話に出てきたので良い子を育てる4つのしつけ。それは以下の4つ。

  • 嘘をつかない
  • 約束を守る
  • 親切にする
  • 勉強をする

以上が身についていると、大人になった際平均年収が80万強上がるというお話でした。

こういった不変的なものが身についていれば、これから時代が変わっても生き抜くことができるのではないか、という一つの説です。

その話の後に清水さんが言っていたことは、それらのうち特に「勉強をする」のはAIの方が得意だし必ずしもそれだけでは足らない、ということ。昨今の某電通の悲しい事件もありましたが、その4つを身につけている人が現時点ですでに不幸せになるケースが出ているわけです。

それであれば、清水さんとしては

  • 遊ぶ
  • さぼる
  • 嘘をつく

といった「あいつ上手いことやってるよな」と言われるような人間らしいスキルが実際のところ求められているのでは、という話になりました。

凄く悪く言った形ではありますが、うまくいく経営者はこの3つができるわけで、それができないマジメな経営者は会社を畳んでいるわけです。そして今後従業員がどんどんAIになっていくのであれば、確かに今後さらに必要なスキルのようにも思えてきます。

ただここでの問題は、マジメに生きるべきか否かと言った細かい話では当然ありません。これらの話を通して、最終的に「人間にしかできないことは何か。」「今AIに足りないものは何か。」をすり合わせていくと見えてくる正解があるのです。

それはまるで理系らしくない話ですが、心とはなにか。意識とはなにか。という話へと繋がってきます。

本書の中でも出てくる今後のAIの課題として、どうすればAIに「意識」を実装できるかという問題があります。マシンスペックが足らないという基本的課題もありますが、それ以上にそもそもどうすれば意識が実装可能かを考える必要があります。

「記憶する」「考える」程度のことであれば今のAIでも可能ですが、「感じる」「表現する」というエモーショナルな能力に関しては「意識」という感覚が求められます。それがないとAIはただのおもちゃですし、それがない人間はクリエイティビティが発揮できません。

では「意識」とは何か。そこでキーとなるのが学校です。漆先生が今回対談者だったからというわけではないですが(笑) 学校というのは、ただ覚えたりテストを解くための施設ではありません。その学校生活の中で得られる経験こそが、自分の意識を育てていく過程になります。

人間で言えば、社会で上手くやっていく能力、と言われるものは意識と紐付いているとも言えます。意識が育っていれば、自分がどうあるべきかという問いに自然と答えられるわけですよね。

人間は今後よりたくさん良い経験を積むべきだし、AIは経験するという概念を強く持つべきである、なんて単純に言葉にしてしまうと質問を煙に巻いたようにも見えてしまいますが、結局それしか無いんですよね。

人もAIも、自分の人生を謳歌することで今後の楽しい社会が拓けるということです。

そんな抽象的な話になってくるので、具体的に今後どうすれば良いかと聞かれると、いざそうなってみないとわからないということ。笑

ただ、現場の最前線にいる人もわからないんだと知ることがまず重要なのでしょう。

そしてまず最初にそれを体感として身につけるのは、デジタルネイティブな世代でも無く、次のAIネイティブな世代の子達です。

僕らはその世代でないので、わからなくて当然、まずはそう受け入れことが重要なのです。

 

こんな面白AI話をより色々な目線から考えることができる本書。ぜひどーぞ。

よくわかる人工知能 最先端の人だけが知っているディープラーニングのひみつ
 

 

また、少し前まで生放送のタイムシフトもあったのですが、公開期間が終了してしまったようなので、対談内容が編集掲載されているこちらの記事もどうぞ。

ascii.jp

ぼからん・月刊うたらん・歌らん・奏らんのSongrium連続再生機能に対応しました。(PC限定)

こんにちわ、リョウです。

各ランキング投稿者様方のツイート等ですでに告知されておりますが、下記ランキング動画で紹介されている動画のSongrium( http://songrium.jp/ )さんを利用した、連続再生のために影ながら協力をさせていただきました。

  • 週刊VOCALOIDとUTAUランキング
  • 週刊ニコニコ歌ってみたランキング
  • 週刊ニコニコ演奏してみたランキング
  • 月刊UTAUオリジナル曲ランキング(2015/07/05 追記)

(2015/07/05 追記)

週刊VOCALOIDランキングさんの復活に合わせました今回からの企画ですが、下記リンクをクリックしていただければ、下記ランキング動画さんのランクイン動画を連続で視聴しつつ、関連動画や派生作品等も合わせてチェックすることができます。(残念ながらPCオンリー)

歌い手DB・ボカロDBを運営する僕は、この再生リストを生成部分で影ながらうにょうにょと動かせていただきました。

各ランキング動画のバックナンバー・ランクイン動画一覧は、こちらのページ掲載していますので、ぜひご覧くださいませ。 http://nicodb.jp/r/