Pixivの新UIに不満が続出した理由

TwitterのトレンドにPixivが入っていたので何事かと思ったら、新しいUIに不満を感じた方たちのツイートが溢れていました。なぜこんなことになってしまったのでしょうか。そもそもUIUXとは何でしょうか。この記事ではわかりやすく紐解いていきたいと思います。

事の発端

なぜこのタイミングで不満が続出する事態になってしまったのでしょうか。その理由の一つにpixiv insideで『pixivのUIを迅速にアップデートする UIUXチームのフロントエンドモダン化の歴史』という記事が公開されたことが含まれます。

この記事で論じているのは、主に技術やシステムの話です。しかし、ここからPixivの新しいUIに対する不満へと波及していきました。

UIとUXの違い

一般的にUIはユーザーインターフェースのことで、UXはユーザビリティーのことを指します。UIの優れたウェブサイト、あるいはUXの優れたウェブサイトという場合、そのウェブサイトは大雑把にいって使いやすいウェブサイトであると言えます。

ウェブが登場したばかりはどちらかというとUIの方が重視されていました。かっこいいサイト、可愛いサイト、情報量の多いなサイトなど、主にデザインが重視されていました。

しかしウェブサイトはただクールなだけでなく使いやすくなければいけないという考えからUXという言葉が生まれ、ウェブデザイナーたちはウェブサイトの使いやすさも考えなければいけなくなったのです。

UXの大前提：大多数に倣う

UXを考える上で非常に重要になってくるのが、大多数に倣えというものです。なぜかというと、ユーザーはほとんどの時間を別のサイトで過ごしているからです。もしウェブサイトの慣例から外れていると、ユーザーは戸惑い、目的を達成できずに離脱してしまいます。

さて、すでに不満と理由が一つ判明したことにお気づきでしょうか。ユーザーはほとんどの時間を別のサイトで過ごしている、と書きましたが、すでにそのサイトに慣れ親しんでいる場合はどうなるでしょうか。

ユーザーにとって『改善された』あるいは『改悪された』という言葉は後付けの感想です。大事なのは今までのようにできなくなった、今までやっていた方法で目的を達成することができなくなったということです。

もちろん、今までやっていたものに何かを付け足す、あるいは今までやっていた手順を減らす、などの変化であれば改善と受け取る方も多かったと思います。しかし、今回の場合は、そういった小さな変化ではないため、以前のPixivに慣れている人ほど受け入れ難いものになってしまいました。

この点について詳しくは『Webデザインを変えるとしても、以前のものをすぐには捨てないで』という記事が参考になります。

それでは次に、ウェブサイトの慣例にはどんなものがあるのか見てみましょう。

UXの慣例１：左上のアイコンはホームへのリンク

代表的なのは左上のアイコンをクリックするとホームに飛ぶという構造です。どういうことかわかりにくいでしょうか。いつもウェブサイトをどのように使っているか思い出してみましょう。

例えばAmazonで買い物をしたいとします。そのときに最初にAmazonのアイコンをタップするのではないでしょうか。とりあえずウェブサイトのホームに飛ぶのです。押してもホームに飛ばなかったら、おかしいな？ と思うことでしょう。

この点でPixivは問題ありません。Pixivのアイコンを押せばホームに戻ります。それはウェブの慣例であり、戸惑う要素はどこにもありません。

UXの慣例２：ナビゲーションバー

ウェブサイトの慣例としてよくあげられるのが、ナビゲーションバーです。例えばイラストレーターさんのサイトなどで『Home Works Illust About』などと並んだリンクを見たことがあると思います。そのように水平に並んだリンクをナビゲーションバーと呼びます。

Pixivの場合はナビゲーションバーがありません。実際はあるのですが左上の『≡』を押すと出てくるようになっています。この『≡』は一般的にハンバーガーメニューと呼ばれています。

UXの慣例３：ハンバーガーメニューは賛否両論

UXの分野では、ハンバーガーメニューは少し扱いの難しいものとされています。前述のナビゲーションバーは横幅を必要とするので、スマホなど画面幅の狭いものには向きません。そこでワンアクションを挟んでナビゲーションを出すようにしたのがハンバーガーメニューというわけです。

ハンバーガーメニューはコンパクトに情報を収められるとは言え、ワンアクション必要になるために、扱いに注意が必要です。特に大きな画面を使っているユーザーにわざわざハンバーガーメニューを使わせるメリットないといってよいでしょう。

折衷案としてよく使われるのはリキッド・レイアウトと呼ばれるものです。画面が大きい状態ではメニューなどが展開されて表示され、画面が小さくされるについれ、またはスマホなどで開いた時にはハンバーガーメニューに切り替わるようにする、といった具合です。

例えばYoutubeもハンバーガーメニューがありますが、画面が大きい時はナビゲーションが最初から開けれるようになっており、画面が小さい時には隠れるようになっています。

Pixivは大画面でも小画面でもハンバーガーメニューを使うようになりました。理由はわかりません。デザイン性を重要視したのでしょうか。それともファーストビューの情報量を増やそうとしたのでしょうか。

UXの慣例４：ウェブサイトの領域は高価

ウェブサイトと土地に例えるならば、それはホームは非常に高価な一等地のようなものです。その最初に表示される画面は高級住宅街のようなものです。数多のユーザーはウェブサイトを訪れるさいに、最初のその画面しか見ずに離脱します。

ファーストビューの情報を増やすことは基本的な戦略の一つです。絵描きのウェブサイトであれば、絵がメインなのですから、大きな絵を表示させたいかもしれません。ブログでしたら最近書いた記事を表示させたいでしょう。

現在のPixivがファーストビューで見えるのは、まずヘッダー、次に人気のタグ、次にイラスト・マンガ・小説のタブ、次にフォローユーザー・マイピクの作品、次におすすめの作品、という順になっています。

この順番にしたのには何らかの意図があるはずです。ウェブ制作においてデザインは一つ一つ丹念に設計されたものだからです。フォローしてる人の絵を見て欲しい、おすすめ作品を見てほしいということなのでしょうか。 Pixivの変更と波紋：カラムデザインの廃止

以前のPixivは縦に３つの領域が確保された３カラムのデザインでしたが、現在は１カラムのデザインになっています。多カラムデザインが悪いという話はあまり聞きませんが、最近のデザイントレンドでは１カラムが増えている気がします。

１カラムのメリットは、視線誘導が単純なところです。ユーザーはウェブサイトを上から下に見るだけで十分になるので負担が減ります。

逆に多カラムのメリットはより多くの情報を分類して表示することができるところにあります。とくにこのブログのような文章メインの場合、あまりにも画面いっぱいに文章が広がっても読みづらいだけになってしまい、狭めると、両サイドの領域がもったいなくなってしまいます。そこで、もったいない領域に何らかの情報を入れようとして、自然に多カラムが成立します。

しかし、Pixivは多カラムデザインをやめたため、これまで一目で確認できていた情報をスクロールしないと見られないようになりました。

このカラムについても折衷案があります。大きい画面の場合は多くカラムを表示して、小さい画面の場合は１カラムにするといった具合です。

ちなみにブログなどでありがちなことに、右カラムに広告を配置するというものがあります。そしてユーザーはそれに慣れてしまい、右カラムを無視するようになっていきました。

Pixivの変更と波紋：ダッシュボード

多くのユーザーはウェブを使っていてダッシュボードという言葉にどのくらい遭遇するのでしょうか。実はこのダッシュボードという言葉、ウェブ関係者は頻繁に遭遇します。毎日、目にするかもしれません。

Pixivで新しくダッシュボードというものが実装され、実のところ『使いにくい』という声は実は前からありました。逆に私は使いづらさを何も感じませんでした。私は日常的にネットの様々な『ダッシュボード』なるものに触れていたからです。

これは知らない人にとっては全く新しいものであり、戸惑うのも無理はありません。しかも、これまで見に行けていた『投稿作品』などもダッシュボードの中にまとめられてしまったために、ある意味、迷子になってしまった人も少なくないと思います。

ネットの設計には迷子にさせないというのが重要なキーワードになってきます。あるリンクを踏んだら、思っていたページに飛ばなかった、あるいは探したいページにたどり着けない、などがあってはいけないのです。ウェブサイトのリンクはいわば信頼なのです。

Pixivの変更と波紋：新着作品が一番下になった

これも大きな波紋を呼んだ変更の一つだと思います。これについて、様々な解釈がありますが、ここではウェブサイトの原則から考えたいと思います。

あるウェブサイトを頻繁に訪れる場合、多くのユーザーがまず確認するのは何だと思いますか。それは新着情報です。何が更新されたかを一番に知りたいのです。

その点でPixivはフォローユーザーの新着作品を一番上に置いています。この点に文句のある人はそれほどいないでしょう。フォローしている絵描きさんの新着投稿はチェックしたいですものね。

そのほかの新着作品はについてはどうでしょうか。私たちはPixivを訪れるとき、新着作品を見るでしょうか。ここが難しいところです。正直なところ、あまり見ないかもしれません。でも、やはり、新着作品は、すぐに見られるところにあってほしいと思います。

この点なども含めて、新規参入者が入りにくくなったと感じる方がちらほら見受けられます。

Pixivは慎重に移行していたのだが・・・

Pixivはいきなり新UIに移行するのではなく、一部のユーザーから、徐々に進めていったようです。そのときにも不満の声はありました。

Pixivがその声を聞いていなかったとは考えにくいです。私でさえ大規模に変更される前から『使いづらくなった』という声を時折耳にしていたからです。

変わらないでほしいユーザーと変えるしかない開発者

古い技術を保守管理していくのは想像以上の労力が要ります。私はPixiv関連サービスを見ていて、一括りにはできませんが、Pixivのエンジニアたちは新しい技術をどんどん取り入れていきたいという姿勢を感じ取っていました。

たとえば、pixivSketchが発表されたとき、当時まだ新しかったNode.jsやReactという技術を採用していました。SketchLIVEが出た時も、新しい映像通信技術に取り組んでいました。

Pixiv自体はPHPという言語で構築されているようです。PHP自体は現役で活躍していますが、グループでの保守管理という面から言えば、理想的なものではないと言えるかもしれません。Pixivが最終的にPHPからの脱却を望んでいるかは別にして、状況の変化に耐えうる、いわば手入れのしやすい状態にしたいと思っているように感じます。

とはいえ、ほとんどのユーザーは変化を望んでいません。変化はインパクトがあり時にはスパイスになるものの、変化に順応するのは大変でストレスにもなり得ます。

今回の一件は、変わらないでいてほしいと感じるユーザーと、変えていかなければ保守すら難しくなっていく開発者のちょっとした軋轢が垣間見えた瞬間とも言えるかもしれません。

今回の件をまとめると

PixivのUIに対して不満が続出した件について、考察してきました。そうなってしまった理由をまとめると次のように言えるかもしれません。

• UX原則から外れてしまった
• 新規参入者が入りにくい印象を与えた
• Pixivの方向性に不安を感じた
• 変化を望まないユーザーと変化せざるを得ない開発者の隔たりを感じた

これらが相まって『使いにくい』という結論に至り、その溜まった不満が今回の件で一気に噴出してしまったのではないでしょうか。 絵描きはどうするべきか

これは開発者のジレンマとなっている点ですが、よいものと思って使っている人はそのことを開発者に伝えず、悪いと思っている人だけが開発者にそれを伝える、というものがあります。そして悪い循環に陥ってしまい、結果的に意見を取り入れたはずが、どんどん改悪されていくというものです。

私はPixivの中の人ではありませんが、一人の開発者として考えを伝えると、自分が感じた良かった点や悪かった点などは『お問い合わせ』に意見を送るのが一番良いです。

実際は、特に不満は感じていないという方が多くいると思います。そのような方は特に何もしなくて大丈夫でしょう。これまで通りPixivを楽しく利用をしてください。

個人サイトを作ろうという流れに・・・

その後、TwitterではPixivが使いづらいなら、個人サイトを作ればいいじゃない、という流れになっていきました。そしてインターネット老人会に・・・。

話題が流れていくのは早いですね。

これは勝手な想像ですが、こういう流れになっていくあたり、今回の件で不満をあげた人の多くは、お絵かき個人サイト時代を経験している、古参のPixivユーザーなのかもしれませんね。

ちなみに私も個人サイトを持つことには賛成です。SNSに障害や不安が生じたときでも、個人サイトを持っていると動揺せずに済みます。おすすめです。

結論はこうです。

今回のようにいつも利用しているサービスでも何らかのトラブルが発生することはいつでもあり得ます。動揺したり、衝動的に行動したりせずに、落ち着いて情報を整理しましょう。

私たち絵描きのする基本的なことはこれまでも、これからも変わりません。

それでは引き続き創作活動を楽しんでいきましょう。