オマージュ？パクリ？Webサイトの表現から「模倣」について考えてみた！
目次
「模倣」＝「モノマネ！？」
皆さんこんにちは。Webディレクター／Webデザイナーの竹中 智です。 今回はクリエイティブ表現全般の世界にある「模倣」について、Webデザイン表現での実例をご紹介しながら、一緒に考えてみたいと思います。
たとえば、あなた自身が日常で「視覚」や「聴覚」、「触覚」や「味覚」など…あらゆる感覚を通じた情報から新たな刺激を受けたときに、高揚した気分に続いて自らも表現として「模倣」してみたいと思ったことはありませんか？
さらにもっと身近な例えで言うなら、あなたが憧れているアーティストが身につけているファッションが素敵で自らも同じものを身につけてみたい！といった感覚になったことがありませんか？
このときに自身が影響を受けた「心境」はどのようなものなのでしょう。
まず「模倣」という言葉を聞くと、イメージとしては真っ先に「真似ている」ことを指す意味として思い浮かべるのではないかと思います。しかし、この「真似ている」という事象の奥には、掘りさげるとさらに深く多様な捉え方も浮かんでくるのです。
ただしその中には「ポジティブ」なものから「ネガティブ」なものまで含まれてきます。
今回はWebサイトの世界でも垣間見られる「模倣」の実例をもとに意味の深掘りをしてみたいと思います！
このWebサイト、よく観察してみたら…
まずはこの後に紹介する、ふたつのWebサイトのキャプチャ画像をご覧ください。
一見すると、皆さんもよく知っているであろう、ネットの百科事典「Wikipedia」やSNSの「X（旧Twitter）」っぽい画面に見えるのですが…
ゴールデンボンバー オフィシャルサイト
月の輪自動車教習所
実はよくみてみると、「Wikipedia」のように見えるサイトは、ミュージシャンの『ゴールデンボンバー Official WebSite』のサイト。
そして、「X（旧Twitter）」っぽく見えるサイトは「月の輪自動車教習所」という滋賀県の自動車学校のWebサイトでした。
意識して観察しないと気がつかないかもしれないこれらのサイトの表現、皆さんは第一印象としてどのように感じましたか？
そして、なぜこのふたつのサイトが、それぞれ「模倣」をしているのでしょうか。 その背後にあるであろう意図や感情についても深掘りして、考察を進めていみたいと思います。
「模倣」の多様性
皆さんが日々、閲覧しているWebサイト、多種多様な多くのWebサイトがあふれています。そして、よく見ると、あるサイトが別のサイトに「似ている」と感じられることもあります。 これは偶然ではなく、ある種の「模倣」が行われているからです。しかし「模倣」と一言で言っても、いろいろなカタチがあります。
「機能性」を重視した模倣
Webサイトの設計図（ワイヤーフレーム）とデザインカンプ（デザイン表現）
「模倣」に関して、ことWebサイトについては以下の考え方も理解しておく必要があります。
まずWebサイトには、文字情報（文書構造＝テキスト）とビジュアル（画像・イラスト・アイコンなど）の組み合わせによって「レイアウト」が成り立っています。 このレイアウトを見やすく、理解しやすくしていくために、ユーザー操作に関連する（ナビゲーションメニューなどをはじめとした）「ユーザーインターフェース＝UI」が更に配置されていきます。
これらの「レイアウト」や「UI」には、長年のWeb閲覧のノウハウによってフォーマット化された「基本のカタチ」があり、一定のセオリーに則った表現手法が一般化しています。 これによってユーザーも閲覧や操作において、自身の経験値によって「迷わず」期待した動きに合わせ情報をスムーズに閲覧していくことができるわけです。
そうすると、どこかで見た「似たような表現」だったり、さらには「トレンド」として採り上げられ、流行りとしてこぞって同じような演出手法を用いたサイトが出てくることも、広義の意味では「模倣」という捉え方もできるでしょう。 そして、これらは総じてWebサイトの「機能性を重視した模倣」であるとも言えます。
「感情に基づく」模倣
一方、自身が表現において「模倣」を採り入れたいと思い至るには、その多くの場合「感情」に起因することも多いです。そこには人の感情からくる「ポジティブ」な思いから、一方では「ネガティブ」な思いを起因にしたものまで幅広い捉え方が出てきます。 ここでは４つの種類に分類をしてみました。
インスパイア： 何かを見たり経験することで、新たなアイデアや作品を生み出す「動機付け」になること。 皆さんが「刺激を受けた」部分だったり「インスピレーションを受ける」といった言葉でも表現しやすいケースがインスパイアです。 例えば、ある画家の描くの絵画から、音楽家における新しい音楽における表現スタイルを試すきっかけを提供するような場合がこの「インスパイア」にも該当するでしょう。これは製作における発想のスタート地点でもあり、そこから自身のオリジナル性が表現していくことにつながっていきます。
オマージュ（リスペクト）： オリジナルに対する「尊敬」や「敬意」から、オリジナルに含まれる「スタイル」や「アイデア」を採り入れること。 こちらは先述の「インスパイア」よりも、更にオリジナルに対する価値を認め、尊重する心、敬意がより多く含まれてくる模倣として理解されることが多いでしょう。 「影響を受けた」という言葉からをもって心境としてもよく表されます。
パロディ： オリジナルを楽しみながら、風刺やユーモアの形で採り入れること。 元となるオリジナル作品に新たな解釈や意味を加えることで、ユーザーに新しい視点を提供するものです。その感情の背景には「楽しむもの」としての意図があり、ユーザーがオリジナルの存在を認知していることも、パロティが最大限に活かされる背景として必要になってきます。
パクリ（剽窃）： これは、オリジナルに対して許可なく、敬意を払うこともなく、ただ単純にコピーし専ら自身の利益のために模倣したもの。 これはいわゆる「盗作」そのものと言えるものです。 このような模倣は、創造性やオリジナリティの欠如であり、著作権を侵害する可能性が著しく高く、モラル的にも許されない行為となりますので、この行為を決して「真似」してはいけません。
「模倣」に関するポジショニングマップ
実例
ゴールデンボンバー Official WebSite
それでは、この『ゴールデンボンバー Official WebSite』を改めて見てみましょう。
💡 ゴールデンボンバー は鬼龍院翔、喜矢武(喜屋武)豊、歌広場淳、樽美酒研二の4人からなるヴィジュアル系エアーバンド。（ゴールデンボンバー Official WebSiteより）
まず、2016年にリニューアルされたこのサイトですが、体裁は「Wikipedia」そのものであり、一見するとWikipedia内のゴールデンボンバーのページにすら見えてしまいますよね。
しかし、よく観察すると左上のロゴが「ゴールデンボンバー オフィシャルサイト」となっていますし、上のタブメニューも「告知」「予定」などのコンテンツへのナビゲーションにアレンジされていますが、本当に「そのまんま」にも見えてしまいます。 そんなサイトなのですが、はたしてこれは「悪意を持ったパクリ」…なのでしょうか？
この演出を理解するには、大前提としてこのサイトの主役であるゴールデンボンバーさんのユーモア溢れるキャラクター性を理解している必要もあるでしょう。 「金爆」とも呼ばれる4人のメンバーによって成り立つそのキャラクター性は、ユーモアのある存在として世の中の多くの人々に認知されています。 そんなオフィシャルサイトが、有名な「Wikipedia」のデザイン（表現）を敢えてそのまま大胆に模倣したことでユーモアの延長としての「パロディ」を意図したもの、と解釈することもできると思います。 実際にこのサイトがリニューアルされた際には、彼らの持つユーモアの一環として、あえてその大胆な模倣演出を加えたと解釈されたことで注目を浴びたサイトでもあったのです。
月の輪自動車教習所
続けて、こちらの『月の輪自動車教習所』も改めて見てみましょう。 このサイト表現に対しては、ゴールデンボンバーほどの直接的ではないにせよ「あれ？何か似てるな？」と感じられるサイト構成になっています。 それは、SNS大手のひとつである「X（旧Twitter）」ですね。左側のアイコンを伴ったナビゲーションに対して画面中央がタイムラインにように読み進めることができる構造は、まさしく「X」を想起させます。 そうなると、このサイトの模倣の解釈としては、どのような背景があるのでしょうか。
まずこのサイトは製作会社である「株式会社ブルーパドル」さんが企画・製作を担当されています。
💡 株式会社ブルーパドルは、少し変わったデジタルコンテンツを作る会社です。まだこの世にない新しい表現や組み合わせの発見を、小さくてもいいから１つでも多く見つけることを目的としています。（ブルーパドルより）
株式会社ブルーパドルさんは、企画・PR・デザインを中心に、印象に残りやすい「一風変わった」デジタルコンテンツを多く制作されており、アイデアに富んだ新しいコンセプト表現によるコンテンツを日々量産されています。 代表の佐藤ねじさんは、リニューアルサイトのリリース当時、以下のコメントを残されています。
自動車教習所のサイトって情報量多いから、ふつうにWEBデザインしていくと、どうも読みづらい。管理画面も大変。
何かいい手はないかと考えた結果、ツイッター式のタイムラインは複雑な情報でも全然読めてるし、みんな読み慣れてるしいいのではと。
でも、これでOKした月の輪さんすごい。 pic.twitter.com/Oy50dyItgT
— 佐藤ねじ / ブルーパドル (@sato_nezi) April 20, 2023
多くの情報量を扱うサイトとして、最適な情報展開の手法として「X」のタイムライン方式を意図的に採り入れた、という意図があったようです。そのため、ここではサイトの「機能性を重視した」模倣であると言えると思います。
更には、このサイトのデザイン表現も「X」に寄せているという点からも、免許取得層となるメインターゲット層の若年層世代には馴染みの深いSNSを意図的に想起させ、敢えて大胆に構成することで「インパクト」や目に留まるキッカケ作りにも寄与しているのではないでしょうか。 また最後に「これでOKした月の輪さんすごい」と言及されているように、ユーモアも込めたであろう「思いきった」提案を採用するに至った、月の輪自動車教習所さんの理解の深さも感じ取れます。
やってはいけない「模倣」について
今回ご紹介した２つのサイトではそれぞれに「模倣」に対するコンセプトや背景がありました。そして、このように明確なコンセプトや理由があることで「模倣」も活きるものとなります。
しかしながら一方で、決してやってはいけない模倣は存在します、それが「パクリ」です。 過去には、公開されているWebサイトのデザイン（画像も含む）そのままのレイアウト、そしてソースコードまでもを丸ごと「パクリ（＝複製）」ながら、社名だけを入れ替えオリジナルサイトとして「偽り」公開しているといった悪質なケースもありました。
これは倫理的にも完全なるアウトですし、パクリにおいては模倣に対するコンセプトなども存在しません
おわりに
今回は実際のサイトを紹介しながら「模倣」について考察してみましたが、皆さんの印象はいかがでしたか？ 表現における捉え方にはさまざまな解釈があるということが垣間見えたと思いますが、一方で「著作権」という要素にも関わる分野としては、その模倣表現にも慎重さが同時に求められます。 皆さんが模倣表現に関わる場合には自己判断のみで終わらせず、具体的には専門家の意見を仰ぐなども心に留めておくと良いでしょう。
おわりに、SNSでも定期的に話題になる「模倣」のシンプルな喩えをご紹介します。
表現者の内心を表した、明快でわかりやすい喩えですね！
💡 余談：ちなみにSNS上には「インスパイア」のことを「バレた時の言い訳に使う」といった皮肉を込めた（？）言説もありますが、個人的には「断片的な要素の組み合わせ」（料理であれば調味料的な？）からアイデアを発展させていく考え方として、あまりネガティブな意味合いで使われる要素ではない…と思うので、敢えて外してみました。
竹中 智：ディレクター、デザイナー、講師
X（旧Twitter）： @artblind
https://www.artblind.com
フリーランスのWebデザイナー。
1998年、専門学校日本デザイナー学院 グラフィックデザイン研究科卒業後、エディトリアルデザイナーとして、デザイン事務所勤務。
2003年よりWebデザイナーとして独立。これまでに大企業系から中小企業サイトまで、様々なジャンルの延べ350以上のプロジェクトに参加。
2004年〜2009年までデジタルハリウッド横浜校（当時）、2009年より専門学校 日本デザイナー学院にて非常勤講師。Webデザイン系授業を担当。
関連記事
↓PicoN!アプリインストールはこちら
