“優れた芸術家は模倣し、偉大な芸術家は盗む “という言葉を聞いたことがあるかもしれない。ピカソが言ったとか、スティーブ・ジョブスが引用したとかで、デザインの世界では一つの基準にもなっている。
模倣は良くないが、アイディアを盗むのはアリということか？
これに関して、以前にインスパイアとパクリの違いをまとめた。クリエイティブな世界では誰もが何らかの理由で誰かに影響を受けており、100%オリジナルはかなり稀であるという話。ざっくりと考えてみると下記の感じなのかなと思う。
- パクリ: バレたら困る
- インスパイア: バレた時の言い訳として使う
- オマージュ: わかる人にだけにわかってもらいたい
- リスペクト: 他のクリエイターに気づいて欲しい
- パロディー: バレなきゃ困る
そして最近ふと思った。アートや音楽、ロゴやイラストのパクリはあるが、UIやUXにもパクリという概念は存在しているのだろうか？と。
UIトレースとパクリの違いは？
デザインを学ぶ際に最も効果的な “パクる”, いや “トレース” する手法がある。これは既存の人気サービスのUIやUXをベースにして、その上を文字通りなぞり、インタラクションも真似をしてみることで、ユーザーに喜ばれるサービスのデザイン要素を身につける事ができる。
これは、現に多くのデザインスクールやワークショップでも推奨されている手法である。トレースする経験を積み、それを消化し、自分のもにできれば、デザインスキルになる。
最近のUI/UXは似たり寄ったり
おそらく皆様もご存じのように、世の中のアプリのその多くは似たり寄ったりなUI/UXを実装している。
丸みを帯びたサンセリフ書体の大きく太い見出し、ネガティブスペースを多用した最小限の白黒インターフェース、ほとんど色を使わないなど、一見してどのアプリか見分けがつかないことも多い。
そして人気のアプリになればなるほどUIは “透明” になっていき、UXも記憶に残らないくらいナチュラルだ。
例えば、最近のソーシャル系のサービスにおけるショート動画のUIはどれもかなり似ている。使っているうちに「あれ、これどのサービスだっけ？」と思うことも多々ある。
SNS系動画UIはかなりUI/UXが似通っている
この例の様に、多くのアプリのUIが似ているのは、ユーザビリティーを追求したら同じものになったかもしれないし、アプリ全体に共通するユニバーサルなUIを追求した結果なのかもしれない。
コンテンツを見せることを最優先したり、ユーザーテスト、グロースハックなどの過程で、自然と似たユーザー体験にたどり着くのだろう。
どちらにせよ、ユーザー視点から考えるとより直感的に使えるサービスになっているのには変わりない。これは、「けもの道」が作り出されている状況に似ている。
どんどん透明になっていくUI
実はユーザーが気づかないうちに、人気アプリのその多くのUIが “透明” になってきている。
初期の頃のデザインはかなり工夫され、ブランド色が強かったものも、バージョンアップを重ねていくにつれ、UIにおける装飾要素がどんどんなくなっていき、最終的にたのアプリとの違いがほとんどなくなっていっている。
それもそのはずで、UXという言葉を作ったことで知られるドン・ノーマンは、「インターフェイスの本当の問題は、それがインターフェイスであることだ」という名言を残している。「インターフェイスは邪魔になる。ユーザーはインターフェイスにエネルギーを集中させたくはない。理目的達成に集中したいのだ。」と。
バージョンアップのたびに透明になっていくインスタのUI
実はユーザーから見るとUIや似ている方がありがたい
世の中のアプリのその多くが似通ったユーザー体験を提供しているのには意味がある。ユーザーにとってそのほうがありがたいのだ。
多くのユーザーが毎日複数のアプリを行き来することで、アプリ疲れが生まれ始めている。新しいアプリをダウンロードするたびに、異なるインターフェイスやユーザー体験を学び直すのに疲れてしまっている。
ということは、既存のUIやUXを踏襲した上で、新しい価値を提供してくれるサービスの方が自ずと使いやすくなる。当然だろう。ECサイトでショッピングカードのアイコンを右上に表示していない “ユニーク” なUIを喜ぶユーザーがどれだけいるだろうか？
UIデザインのスタンダードを逸脱するサービスを人間の脳は喜んでくれない。
実際。以前にSnapchatが機能をごちゃ混ぜにしたり、ナビゲーションのパターンを変えたりといった型破りなデザインをリリースしてみた結果、ユーザーのセンチメントをほぼ73％低下させ、アプリのユーザー数も株価も大きく下落させた。
この例からも分かる通り、斬新なデザインはリスクを伴う。逆に他のアプリと似ていたとしても、一貫したデザインはユーザーを動揺・混乱させる可能性を低くすることができる。
多くのアプリが共通のUIエレメントを利用している – 引用元: Complexion Reduction: A New Trend In Mobile Design
【注意!】以前にはUI/UXのパクリ疑惑訴訟も
しかし、UI/UXのパクリ疑惑に関して意義を唱えたケースもあり、実際に2018年に訴訟が起こっている。マッチングアプリ大手のTinderが同種サービスのBumbleに対して”スワイプ機能” をパクったとして訴えた。正確にはデザインパテント侵害の疑い。
このスワイプ式UIは、通称Tinder UIとも言われ、アプリをデザインする際にはよく利用されるスタンダードな動きではある。
Tinderが採用するスワイプUX
実は後発のBumbleのCEOが元々Tinderの社員で、社内で個人的なゴタゴタが発生。その後独立し類似サービスを開始した。そして、Tinderの親会社がBumbleに買収の打診をしたが断られた事実もある。なので、この訴訟の背景はかなりドロドロしてるっぽい。
Tinder側としては、BumbleのCEOおよび共同創業者がTinder在籍中に学んだ独特のUXを参考に、ライバルアプリを開発したとし、「Tinderを成功させるために、これまで多大な資源と創造的専門知識を投入してきた。これらの権利を侵害する同業他社に対しては、特許およびその他の知的財産権を行使する。」というのが彼らの主張。
一方で、ユーザー側からしてみるとこのUI/UXはマッチング系アプリの定番であり、Tinderが元祖だったにせよ、他のアプリが採用することに対しての違和感は無いように感じる。
ちなみにこの訴訟は2020年の6月に和解した模様。
スワイプインタラクションを採用するTinder (左) と Bumble (右)
あえて知的所有権を行使しないTwitter
Tinder vs Bumbleとは逆の例がTwitterアプリである。現在では一般的になっている画面を下に引っ張ってコンテンツをリロードするUX (Pull to Refresh) を最初にデザインしたのがTwitter。
このユーザー体験は、Instagram, Gmail, Facebookなどなどに「盗用」され、ユーザーは無意識に利用できるほど一般的になっている。
元々はTwitter用のアプリ、Tweetieが最初に開発した。そして、Twitter社はこのパテントを所有している。しかし、他のアプリがそれを盗んだとしても、その権利を行使することはない。
そこには二つの理由があると考えられる。まず一つ目は、他のアプリがそれを採用することを阻止したところでTwitterにはメリットがない。そしてもっと重要なのが、そのUXがより一般的になればなるほど、多くのユーザーがTwitterアプリを使いやすく感じてくれるから。
従って、逆にパクってもらってもOK。というのがTwitterのUXデザインポリシーになっている。
Pull to Refreshを最初に採用したのはTwitter
パクリあいながら成長するiOSとAndroid
最も一般的な類似UI/UXはスマホだろう。
2007年の初代iPhoneの発表から少し遅れてGoogleがAndroidがを発表した時、多くの人々が「あ、iPhoneのパクリだ」と感じた。でも実は、その後のアップデートを重ねるにつれ、お互いがお互いのUIデザインやUXに “インスパイア” され、それぞれの精度を上げてきている。
例えば、アプリ内のコンテンツをホーム画面に表示できるウィジェットなど、iOS14 (2020年リリース) に初めて実装された機能のその多くは、すでにAndroidに実装されている。その中でも、ピクチャーインピクチャーは2017年にリリースされたAndroid 8の一部としてリリースされていた。
お互いを刺激しながら切磋琢磨するiOSとAndroid
この例のように、iOSの機能の多くが、何らかの形でまずAndroidに実装されていることが多い。しかしAppleは、他のデバイスとの連動や、より洗練されたUXの作り込み、そして絶大なるブランド力を通じて差別化を図っている。
おそらく少なくともスマホOSにおいては、パクリ、パクられの流れは切磋琢磨になっているように感じる。そして、ユーザーからすると、それはかなりありがたい状態である。
スクラッチからデザインしない方が良い理由
誤解を恐れずにいうと、UIやUXの領域になってくると、無理にスクラッチからデザインしない方が良い。
まず、今までに存在していない利用体験をユーザーに提供すると、ユーザーがその利用方法を学ばなければならなくなり、使いにくくなる。
一般的なユーザーは、アプリやプロダクト、Webサイトなどに、既存のものと同じような動作体験を望む。ユーザーは慣れ親しんだプロダクトに対して抱いていた期待を、似たような製品にも持つという理論。
これはヤコブの法則とも言われている。詳しくは下記のポストを参考に。
これは日常生活にも適用される。例えばホテルに泊まった時、シャワーの使い方に悩んだことはないだろうか？無駄におしゃれにデザインされすぎてて、冷水を浴びた経験のある人も少なくない。
なので、デザイナーのエゴで “クリエイティブ” なUIをデザインするのは、必ずしもユーザーのメリットに直結しない。
おしゃれすぎるシャワーは使いにくい
ユーザーは、製品の使い方を覚えるのに、できるだけ労力をかけたくないと思ってる。ニールセンが「ユーザーが慣れ親しんでいるパターンでデザインしなさい」と提唱しているのはこれが理由。
現在の世の中で愛されているデザインパターンは、全て優れたデザイナーが長い年月を掛けて生み出されたものであり、それを利用しないのは勿体無い。
確立されたパターンは優れたユーザーエクスペリエンスの基本であり、それを活用することは現代のUXデザイナーの仕事として欠かせないものである。
問題に対する解決策がすでに存在するのであれば、それを利用すれば良い。パクリと言われても、ユーザーは気にしないし、ステークホルダーも気にしない。ただ、誰がみても安易な丸パクリはバレバレでダサいのでやめておこう。
UIにおける一般的な要素
そもそも現代において、モバイルでもWebでも、UIデザインを行う際に全くのスクラッチから作ることはほぼ無い。作業の効率化とユーザビリティーを優先させるために、既存の素材の組み合わせで行うことがほとんど。
よっぽどユニークなサービスでない限り、全くのゼロからデザインする理由が見つからない。言い換えると、どこにも存在していないUIをデザインしてしまうと、ユーザーが混乱することも多い。これは、カレーの具がどこの家庭も大体同じなのと一緒な感じ。
モバイルUIの多くは既存の要素を活用することが多い
一般的なUI要素例:
- ログインボタン
- ハンバーガーメニュー
- チェックボックス
- ドロップダウン
- カレンダー
- モーダル
- パンくず
- スライダー
- プログレスバー
- 検索アイコン&ボックス
- ショッピングカートアイコン
“正しくパクる方法”
UIやUXを上手にパクりたければ、モロパクリではなく、スマートパクリをするのをおすすめする。スマートパクリは、文字通り、賢くパクること。
そのためには、ユーザー像をしっかりと想定し、彼らの課題を明確にする。そして、その課題を解決するためのソリューションを考え、それに相応しいと思われる既存のサービスやデザイン要素を活用する。
ここで気づいたかもしれないが、実際のプロダクトのデザインを開始するまでのプロセスは、一般的なUXデザインのプロセスである。
しかし、最終的なアウトプットを作る段階になったら、できるだけ多くの優れたサービスを参考にし、時にはトレースも行って良い。ただ見た目の雰囲気や、自分のサービスの最も重要な価値の部分にはしっかりとオリジナリティーを入れて欲しい。
それを実現するために、まずは既存のアプリのUIや動きのエレメントを紙でスケッチし、注釈を入れてみるのが良い。
UIトレースは紙にスケッチするのがおすすめ
そして、複数のアプリの要素を研究、融合し、そして色や雰囲気にはユニーク性を打ち出す。イメージ的には90%が既存の要素で、残りの10%がオリジナルな感じ。使いやすさを担保しながらも、オリジナリティーも感じさせるサービスになっていくだろう。
UXデザインはオリジナルである必要は全くない
UXという領域は、時に「正しい」手法で行うことにとらわれすぎてしまうことがある。デザイナーのこだわりが強過ぎて、ユーザーメリットよりも、クリエイティブであることを優先しすぎるケース。
オリジナルなUIを作り込む時間があるなら、既存のデザインシステムを利用し、同じ時間をユーザー理解に充ててた方が良いプロダクトが作り出せるだろう。
UXピラミッドを見ても分かる通り、ユーザー体験の基本は “FUNCTIONAL (USEFUL) – 機能的である” こと。そしてその上に “RELIABLE – 信頼できる” と “USABLE – 使いやすい” が重なってくる。これらの条件を満たすには、UXはむしろオリジナルすぎない方が良い。
プロダクトの個性を出したければ、マイクロインタラクションやコピーライティング、コンテンツ、そしてブランドを通じて行うのが良いだろう。
あまりにも有名すぎるスタバのロゴ。ツインテールの人魚、セイレーンををモチーフとしたもの。ギリシャ神話では、セイレーンが船乗りを誘い、スターバック諸島とも呼ばれる南太平洋のある島の沖合で難破したとされている。
ニューヨーク州のブロンクスにある動物園、The Bronx Zooのロゴには二匹のキリンと三羽の鳥、そしてよく見るとニューヨークを象徴する摩天楼のビルが隠されている。
インターネットネットワーク大手のシスコ。その社名は本社がサンフランシスコにあることに由来している。そのロゴシンボル部分は、シグナルだけでなく、ゴールデンゲートブリッジも表現している。
ロンドン美術館のロゴは、有機的な複数の曲線で構成されている。これは単純な抽象的デザインではなく、その歴史と共に変化したロンドンの地形をモチーフにしている。過去、現在、そして未来に向けて、ロンドンとそこに住む人々が常に変化していることを表している。
世界最高級のバッグブランド、エルメスのロゴには馬車が描かれている。これは同ブランドが元々馬具を作っていたことに由来する。しかし、よく見るとその馬車には主人が存在していない。その理由は、エルメスの「主役はユーザー（お客様）にある」の哲学によるもの。
アメリカの大手テレビネットワークのNBCのロゴにはいくつかのメッセージが込められている。シンボル部分の真ん中あたりに孔雀が隠されており、カラフルな色合いには、その当時に白黒からカラーテレビに切り替えるきっかけとなるようにとの思いが込められている。
流れるような曲線で構成されるロンドン交響楽団のロゴには、頭文字の「LSO」が隠されている。またそのラインは、オーケストラの指揮者の手の動きも表現している。そのエレガントな曲線が、オーケストラの優雅さをさらに高めている。
ヨガをしている女性の足と手を結んだ空白の部分にオーストラリアの地形が隠されている。これ以上ないレベルでシンプルに洗練されている。
この「スパルタン・ゴルフクラブ」のロゴには、2つの意味が上手に隠されている。スイングしているゴルファーの横のその軌道。そして、じっくり見ると、ヘルメットを被った古代ギリシャのスパルタン戦士の横顔。ブランド名とそのサービス内容の両方を表現した好例だ。
ワシントン州立大学のマスコットはクーガーで、ロゴマークにもなっている。クーガーの頭の中には、大学のイニシャルであるW、S、Uがさりげなく隠れている。
ドイツのコルナー動物園のロゴには、いくつものシンボルが隠されている。ゾウの輪郭の中には、キリンとサイが。そしてゾウの後ろ足には、地元の名所であるケルン大聖堂が隠されている。
このロゴは一見すると、アフリカ大陸のアウトラインを描いただけのように見える。しかしよく見ると、そこには見つめ合う大人と子どもの2人が隠されている。
,
) (@chrismessina) 
![[Image: Wiki Commons]](https://i0.wp.com/blog.btrax.com/jp/files/2021/07/tokyo-logo.jpg?resize=830%2C467&ssl=1){kind=logo}
(@SawyerMerritt) 
