「Wordle」のプロダクトデザインに根付く、究極のシンプルさ

世界中で大ヒットを記録したこのゲームは、たった1人の手によって制作された。しかも、プロダクトデザインの基本ルールをすべて無視するやり方で。

2022年上半期最大のヒットゲームの一つが「Wordle」だ。アルファベット5文字の英単語を当てるという、単純ながらも中毒性の高いゲームは、SNSの口コミで一気に人気が広がった。その人気は、ゲームが公開されてから約3ヶ月で、ニューヨークタイムズ紙が100万ドル以上で買収するほど(2022年6月9日よりオリジナルサイトのWordleは削除され、ニューヨークタイムズ紙のサイトのみでプレイ可能)。

プレイしたことのない人向けに簡単にルールを説明する。「Wordle」では、本日のお題となるアルファベット5文字の英単語を、6回以内に当てる必要がある。鍵となるのは、回答の度に与えられるヒントだ。例えば、以下の画像では初めに「HAPPY」という単語を入力した。そうすると「正解に含まれている」かつ「位置も正しい」文字は緑色、「正解に含まれている」が「位置が誤っている」文字は黄色、「正解のどこにも含まれない」文字は灰色で表示される。それらを頼りに正解を探っていく。

このシンプルなゲームの圧倒的な魅力は一体どこにあるのか。子どもの予定管理アプリなどを展開するBit Stateの共同創業者兼CTOのChris Nielsen氏は、自身のブログ『Wordle is a masterclass in product design simplicity』のなかで、「プロダクトデザインの基本ルールをすべて無視」しながらも、世界中を夢中にさせた仕掛けを探った。以下は、本ブログを正式に許可をいただき、翻訳したものだ。

───

気がつけば友人も家族もみんなプレイしていたゲーム「Wordle」。例に漏れず、私もすっかりハマっている。

プロダクトデザイナー兼プログラマーだからか、Wordleをプレイしていくうちに、「どのように構築されているか」が気になるようになってきた。ちょうど、『School Morning Routine(朝の準備ルーティンをテーマにしたファミリー向けアプリ)』を開発中だったこともあり、Wordleに何かヒントがないかと思ったのだ。そして、調べれば調べるほど、奇妙かつ面白い、数々のデザインにおける意思決定が浮かび上がってきた。

そもそも、世界中で大ヒットしたこのゲームは、たった1人の手によって制作された。その人物の名はJosh Wardle*1。コロナ禍のロックダウン期間に、個人的なプロジェクトとして制作された。プロダクトデザインの基本ルールを、すべて無視するやり方で、だ。

Josh Wardle*1

ご想像の通り「Wordle」というゲーム名はラストネームの「Wardle」にちなんで名付けられたものだ。

Wordleをソフトウェア製品として、アーキテクチャのデザインレビューに出そうものなら、軽く笑われ突っ返されてしまうだろう。にもかかわらず、Wordleは世界中の何百万人が、毎日、楽しく遊べる素晴らしいゲームであり、Joshに大金をもたらした。

やるべきことをせずに成功したとなれば、その理由を探りたくなる。さっそくWordleを読み解いていこう。

Joshが「捨てた」もの

デザインとは取捨選択だと思う。制限があるなかで限られたリソースを配分する意思決定の技法だ。何を捨てるのかを見極めることがデザインだ。

Josh Wardleは、Wordleの制作において、実に多くのものを捨てた。

アプリなし

2022年最も人気のあるモバイルゲームには、アプリがない。iOSにもAndroidにもネイティブアプリは存在しない。Wordleはウェブサイトであり、ブラウザでプレイする仕組みになっている。アプリを持たないという決断によって、開発時間はかなり短縮できただろう。一方、Wordleを知った多くの人がブラウザゲームとは思わず、App StoreやGoogle Playストアでアプリを検索した。結果、Wordleを模倣したアプリゲームにひっかかってしまった人もいたようだが。

本家にアプリがないのをいいことに、Wordle風の偽アプリが乱立。課金目的のものもある。

フロントエンドフレームなし

Reactなし。Vue.jsなし。Svelteなし。Wordleは昔ながらのHTML、CSS、JavaScriptで開発されている。そのおかげで、ゲーム全体のデータ量がとても軽く(5文字英単語の辞書を含めてもたったの60kbだ!)、ページの読み込みは約30ミリ秒と非常にスピーディである。

30ミリ秒内で読み込み完了という脅威のスピード。

ユーザー登録なし

ユーザーアカウントを実装すると、セキュリティという恐ろしく難しい問題が発生する。なので、無くしてしまえば、開発は非常に楽になる。一方で、ユーザーは複数端末間でアカウントを共有できないし、運営側は登録メールアドレスを利用した広告やマーケティング手法も行えない。

バックエンドなし

バックエンドなしなら、開発時間はさらに短く済む。デメリットは、基本的な不正対策もできなくなってしまうこと。現に、Wordleは1日1プレイというルールだが、ユーザーが端末の日付設定を変更すれば、何度でもプレイできてしまう。ソースコードを見れば答えもわかってしまうのだ!

ソースコードのここ(ネタバレ禁止用にボケ加工済)を読むと今後の答えが全部わかってしまう。

ゲーム内のソーシャルツールなし

口コミで人気が出たゲームだが、ゲーム内にはチャットや友達登録、対戦モードなどソーシャル的な機能はいっさいない。唯一あるのは、既存のソーシャルメディアにスコアをシェアする機能だけ。

ただ、このシェア機能も不正な使い方ができてしまう。シェアボタンを押して生成されるのは、テキスト(訳者注:グレー・黄色・緑のマスも画像ではなく絵文字)なので、ユーザーが直接書き換えられてしまうのだ。

ソース:https://en.wikipedia.org/wiki/File:Wordle_Emoji_Screenshot.png

レスポンシブデザインなし

真っ白な余白があれば埋めたくなるものだが、Joshはそれを選ばなかった。端末による最適化もせず、最もスクリーンの小さい端末に合わせてゲーム画面を制作し、それより大きなスクリーンの端末では、ただ白い余白が増えるだけ。ある意味、究極にシンプルなレスポンディブデザインであり、開発にかかる多大な労力を省略できたはずだ。

https://responsively.app/ より作成

凝ったデザインなし

ゲームで使用されているのは、Clear Sansのフォントだけ。色も数色のみ。オリジナルのロゴもプライマリカラーの背景に、Clear Sansフォントのアルファベット「W」が置かれただけ。このビジュアルならば恐らく5分ほどでできただろう。

デジタル著作権管理も知的財産保護もなし

もし、パクリやすいゲームランキングがあったら、Wordleは間違いなく1位になるだろう。ソースコードも短く、簡単にコピー、再現ができてしまう。ライセンスの記述もない。唯一あるのは、使用されているサードパーティのライブラリのライセンスだけ(ライブラリ使用にライセンス記述が必須)。これによってWordleのクローンを製造する一大産業が発達した。

Wordleの何がスゴイのか?

切り捨てられたものをみると、デメリットも大きいことがわかる。それでも、Wordleが最高に面白いゲームであることに変わりはない。口コミで人気がでるゲームというのは妙なもので、何がどう当たるのかわからない「Flappy Bird(訳者注:シンプルながらクリアが不可能な難しさで話題になったゲーム)」などの変わったゲームが運よく口コミで広がり、バズを巻き起こすことがある。

ただ、WordleはFlappy Birdなどのゲームとは異なる。ネタとして面白半分でプレイしている人はいないからだ。隅々まで非常によく構築された素晴らしいゲームであり、運ではなく実力で成功を掴んだゲームなのだ。

Joshがゲーム開発でやったこと

Joshは多くのものを捨てた。そして節約できた時間と労力を、自分が「必要だ」と感じることに費やした。

自分自身が毎日プレイした

いいデザインの根幹には共感がある。共感するには、ユーザーが何を重要視し、何を求めているのかを理解する必要がある。ユーザーの気持ちを探る最良の方法は、自分自身がいちユーザーになること。Joshは、ゲームの答えとなる英単語リストの制作をガールフレンドに手伝ってもらったそうだ。答えを知らなければ、毎日楽しくプレイできるからだ。

最高のバランス

ゲームを楽しむための最適のバランスを見つけるのは容易ではない。プロダクト開発は想定通りに真っ直ぐ進むものではない。Wordleのディティール(英単語を入力してからタイルがめくれるタイミングなど)を見れば、Joshがどれだけ細部まで気を使ったのかが伺える。時間が可能にした美しいバランスだ。

プロダクト開発は想定通りにはいかない。迷走する可能性もあるので、スケジュールには余裕が必要。

アニメーションの美しさと機能性

エレガントなアニメーションと、高いパフォーマンスを両立するのは、ほぼ不可能と言っていい。しかし、Joshはこれをやってのけた。アニメーションだけ見ても、彼の細部へのこだわりがわかる。

アニメーション用のCSS。美しいゴージャスなコードだ。

誰でもプレイできる

昨今の他のゲームと異なり、Wordleは安価な低スペック端末でも、通信速度の遅い環境でもプレイできる。さらに、見づらい色を調整できるハイコントラストモードも用意されている。

大胆な選択

Wordleは1日1回しかプレイできない。コード上ではシンプルな決断だが、かなりの勇気とガッツが必要だったのではないだろうか。

抜群の安定感

Wordleのクローンアプリを試してみれば、Wordleがいかに安定感のあるゲームかがわかるだろう。クローンには、Joshほどの決断力も、ディティールへの気遣いもない。アイコンがタップ(クリック)しづらかったり、タッチの感度が微妙だったり、不必要なスクロールが生じたり。二番煎じのお粗末さが、Wordleの洗練されたデザインを教えてくれる。

Wordleから学んだこと

今回Wordleについて考察して、得た教訓がある。

「自分が重要だと思うこと」を正しく行うための時間とエネルギーを確保するには、「自分が重要だと思うこと」のために断固としてチャレンジし続けなければいけない。

プロダクトを開発する際、ほとんどの人はモバイルアプリが必要だと考える。開発リソースを大きく割いても、バックエンドやユーザー登録があって当然だと思う。Wordleは、この「あって当然」を考え直すきっかけをくれる。

1990年代、エクストリーム・プログラミングの基本原則『YAGNI(You Ain't Gonna Need It)』が普及した。これは文字通り、必要になるまで機能を追加しないという考え方だ。WordleはYAGNIの最もいい例と言っていいだろう。

さらにWordleから得られる教訓は、昔からデザインにおいて言われ続けていることとも接続する。

「すべてのものはできる限りシンプルであるべきだ。ただ、シンプルすぎてもいけない」アルベルト・アインシュタイン
「家を出る前、鏡を見てアクセサリを1つ外しなさい」ココ・シャネル
「少ない方が豊かである」ミース・ファン・デル・ローエ

Wordleから学んだことは、私が開発中だったアプリ『School Morning Routine』にも活かされている。何を捨てるかについて大胆な決断ができた。予定していた機能を減らし、試してみたかったオープンソースのライブラリを使うのもやめた。そうすることで、基本を完璧に仕上げるための時間と心の余裕が生まれた。

私も含めて、開発者やプロダクトデザイナーは、巨大テック企業が難問を解くのに使うような複雑な解決策に惹かれる傾向があると思う。だが、私は通常サイズの問題をエレガントに解いて見せる、たった1人の人間に魅了されることもある。基本ルールを破り、面倒な課題はスキップする。その勇気ある決断によって、誰もが夢中になる、こんなに楽しいプロダクトを生み出したJoshのような人間に。

リソース

Worldleでの学びをより深めるためにオススメのリソース。

  • YAGNI by Martin Fowler:YAGNI入門に最適。
  • Choose Boring Technology(著:Dan McKinley):ソフトウェアエンジニアは、最先端を追い続けるのではなく、退屈すぎるくらいの技術を選べという目から鱗の考え方。
  • The Lean Startup(著:Eric Ries):2008年に出版され、イノベーティブなプロダクトを作る際の無駄を削る方法について、新たな考え方を示した。本著が示した「MVP」という概念は、リリース時のプロダクトは完璧であるべきという考え方を揺さぶり、安くて単純でも、PMFへの学びがあればいいという考え方を提案した。
Credit
文・翻訳
そうこ

フリーランスライター。英語圏の記事を日本の読者向けにアダプト、リライトするのが主。Gizmodo Japan、Buzzfeed、GQ Japanウェブ版などで執筆。ゆで卵が好き。

編集
向晴香

大学在学中にBIツールの翻訳アルバイトを経て、テック・ソーシャル系のメディアで執筆に携わる。卒業後は教育系ベンチャーのマーケティングチームでオウンドメディアの運営を担当し独立。inquireにフリーランスとして関わり2019年から社員としてジョイン。関心領域は、よりよい意思決定を支えるメディアのあり方、マイノリティのレプリゼンテーション、女性とメディアなど。海外のコメディーとハロプロ、TBSラジオが生きる活力です。

Tags
Share