どうも、UNIONNET Inc.の丸山です。

制作会社の現場をお伝えする【Web制作の裏側】。ここでは実際の案件を通じて、ユニオンネットでの制作過程やお客様とのディスカッション風景など、制作現場のリアルな様子を紹介したいと考えています。

今回は「桂三語オフィシャルウェブサイト」のできるまでをお届けします。ユーザー層が幅広い芸能人のWebサイト。初期段階でのコンセプト決定に苦労しましたが、シンプルな構成の中にも楽しめる仕掛けを盛り込んだサイトに仕上がりました。

桂三語オフィシャルウェブサイト｜Katsura Sango Official website.
https://katsura35.com

公開：2021年5月
Client：桂 三語
Production：UNIONNET Inc.
Director： 丸山 享伸、鈴木 潤 ／ Designer：西嶋 みゆき ／ Engineer：板垣 佑大郎
Photo：片山俊樹 写真事務所

落語家・桂三語とは

上方落語協会所属、六代桂文枝一門の噺家さんです。

吉本興業を所属事務所とし、天満天神繁昌亭での寄席を中心に全国各地での落語会やラジオ番組も担当しています。若手落語家の登竜門「新進落語家競演会（第24回）」にて新人賞を受賞し、これからの次世代を担う若手落語家の1人として注目を集めています。

ご依頼の背景

新型コロナウイルス感染拡大から1年。

劇場の休業や芸能活動の自粛が余儀なくされる中、「活動の再開や継続に向けて、何か手を尽くしたい」野望がありました。加えて、エンタメ業界の無観客開催やオンライン化の波にも違和感を感じられていました。

「落語はお客さんの反応を生で見ながらネタや言い回しを変えて噺を進めるもの。」と強い意志の基、この自粛期間を好機と捉え「Webサイトで何かできないか？」とご相談をいただいたのがキッカケです。

先方のご要望
✓ コロナ禍による業界全体の活動自粛に歯止めを掛けたい
✓ “桂三語”としての認知度を向上させたい
✓ 上方落語の普及に貢献したい

当社からの提案

サイト構成の考案にあたり、まず始めに議題へ上がったのはWebサイトの「立ち位置」でした。活動が幅広い芸能人のWebサイト。情報発信をメインとした限定的な構成にも、要望をクリアする厳しさを感じていました。

多方面への発信としては本来SNSを中心に展開した方が波及しやすく、運用コストも低くなります。しかし、三語さんの考えの中で「落語家のメインステージは劇場であり、噺を披露することが生業。SNSで繋がり合い、交流し、ファンを増やすことが落語家ではない。」との考えが強く、今回「劇場へ足を運んでもらうための仕掛けづくり」をコンセプトに設定しました。

ただし、劇場へ足を運んでもらうことが時期的に難しい状況でもあるため、接触機会の創出としてSNSを活用頂くこともお願いしました。

提案まとめ

コロナ禍による活動自粛への取り組み

• 持論（メッセージ）の打ち出し

個人としての認知度向上

• Googleサービス（ナレッジパネル）への登録や各サービスでの認証取得
• Wikipediaの更新
• 公演情報やメディア情報のコンテンツ化
• 公演依頼の相談窓口設置

上方落語の普及活動

• 若年層に受け入れられる（見つけてもらえる）デザイン
• 落語初心者に対する提案コンテンツ
• 接触機会の創出（SNS活用）

“オチのない話”を提供する音声配信「桂三語の知らんがな。」

サイトの更新コンテンツは、近日公演予定の落語会情報がわかる「公演情報」、テレビやラジオでの出演情報がわかる「メディア情報」、個人としての活動や近況報告の「お知らせ」の3種類。加えて、今回は音声配信の提案をさせていただきました。

SEOを考慮するとブログ更新が定石ですが、普段からSNSをあまり更新しない三語さんにとっては「文章を打つ」ことが定着しずらい見解となりました。そこで、更新の形態を本業に近づけ音声だけで完結するようにStand.fmのアカウントを開設しました。

落語は「マクラ＋本編＋オチ」で構成されていますが、今回はそのマクラとまでは行かないまでも、「桂三語としての人柄」を知っていただくための音声配信を目的としています。ネーミングではその他にも「バナナのじかん」や「オチのない話」など、某有名テレビ番組“◯◯な話”に寄せる案もありましたが、最終的には関西特有のツッコミ「知らんがな。」に落ち着きました。

デザイン

こちらは初期のワイヤーフレーム。まだ全体の方向性を定める以前、簡単なヒアリングを行った後に作成したものです。この時点では大まかに「写真を大きく使いたい」ぐらいしか決まっていませんでした。

デザインのコンセプト設定にあたり、まずはヒアリング内容の棚卸しを行いました。

• 業界らしさの「伝統」も欲しいが、個人としての性格が見える「遊び心」も欲しい。
• キーワードは「義理堅い」「元気」「根性」「サッカー」「三線」「相撲」「ゴリラ」。特にゴリラは幼少期からよく言われている。
• “桂文枝一門 ＝ 創作落語”のイメージが強いが、桂三語としては「基礎がなっていないのに創作に手を出すのは早い」と考えており、演目も古典落語が多い（堅実である）。

これらを基に社内で意見交換をした見解が以下の通り。

• あまりウケを狙った構成や表現はNG
• ターゲット層を考慮すると、奇抜なレイアウトも少し違う
• おしゃれな雰囲気よりは、ちょいダサな「大阪っぽさ」が三語さんらしい

社内での意見交換、三語さんとの意見交換を重ね、デザイン面では2面性を持たせ「A面（堅実さ）・B面（遊び心）をつくる」コンセプトになりました。

ここから社内でデザインイメージの擦り合せを行いました。

デザインとしての大まかな方向性を調整しつつ、構成としてまとめたワイヤーフレームがこちら。

三語さんから「やりたいようにやってくれて良いですよ！」と良い意味で丸投げしていただけた反面、1つのサイトで2つのデザインテイストを楽しむ設計に悩まされました。

ワイヤーフレームの作成で最も危惧していた点は制作段階における社内での「なんか違う」を回避することでした。結果、コンテンツの意図や写真イメージなどをかなり具体的な指示として書き込みました。

撮影はUNIONNET Inc.のスタッフ撮影でもお世話になっている、片山俊樹さんにお願いしました。

主にB面（遊び心）の撮影がメインでしたが、さすがは三語さん。当初の4時間撮影の予定を2時間半に巻き、ある意味怒涛のコメディーショーでした。そして、おそらくディレクター陣が制作過程の中で最も笑ったのはこの時かと。

そして出来上がったデザインがこちら。

デザイナー：西嶋

デザイン作成時の難しかった点は、B面（遊び心）のトンマナでした。

イメージを固めるためにまず参考となるデザインを集めたのですが、B面は「これ！」というドンピシャなものが中々見つからず苦労しました。 サイト構成として、コンテンツは同じまま写真のみを切り替える仕様だったため「色やあしらいでどのくらい雰囲気を変えられるか？」の考案には時間がかかりました。 頭を抱えた時間が長かった分、最終A面／B面それぞれで印象が異なるデザイン表現になったと思います。

個人的なポイントとしては、B面に配置している「小さな切り抜き写真」たちです。細かい部分はイラストを使う方向で考えていたのですが、作業中に何気なく置いてみたら良い感じで…！ 要所要所に「セリフをつけたら、遊び心も出るし、良いなぁ！」と閃きでテンションが上がったのを覚えています。

何よりもKVは少しやりすぎかと不安だったのですが、お客様にも気に入っていただけ安心しました。

アニメーション

デザインコンセプトからアニメーションが担っている役割は以下2点。

• シンプルな構成にどう緩急を付けるか
• B面の「隠し要素」をどう表現するか

ターゲット層（閲覧者）のことを考慮すると、あまり逸脱した表現方法はマイナスイメージが想定されるので、ここは何度もエンジニアとトライ＆エラーを繰り返しました。

コンテンツの緩急

「単調になりがちなデザインに緩急を持たせるため、ページの中盤では視線が変わるアニメーションで印象を強くしたい。」というディレクターの要望を上手く汲み取ってくれました。

A面・B面の切り替え

当初、A面・B面の切り替えには「ON／OFFのトグルボタン」を設けていました。しかし、途中から“隠し要素”に変更することになり、今のカタチに落ち着きました。

B面のイントロアニメーション

「とにかくふざけたインパクトを持たせて欲しい。」要望を表現したB面のイントロ。デザイナーとエンジニアの結晶です。

B面：バナナ当てゲーム

バナナ当てゲームについては撮影の兼ね合いもあり、事前に絵コンテを作成しました。

ユーザー体験を向上させるため、体力ゲージを付けたり、投げるバナナの種類を増やしたり、隠しコンテンツにも関わらず何度も細部を調整しました。パソコンでの操作とスマートフォンでの操作、双方に違和感が出ないよう上手く処理してくれました。

エンジニア：板垣

アニメーション制作の中で難しかった点は2つ。ページの「A面・B面の切り替え」と「バナナ当てゲーム」でした。

ページ切り替えでネックになったのは、切り替えの0.5秒間の、A面とB面が「同時に見えている瞬間」です。この時に、B面だけで表示されているようなアニメーション（紙吹雪など）が、途中で途切れてしまったりしないようにするのが大変でした。

バナナ当てゲームは、そもそも今まで作ってきたWebサイトの中でも珍しい要素でしたので、想定したことのない問題にも直面しました。

バナナの軌道を山なりにしたい・・・ただ、そのためには速度をゆっくりにしないといけない・・・しかし、そうすると当たっている印象が弱い感じがする・・・バナナの跳ね返り方は、三語様の左半分にあたった時は左側に寄り、右半分に当たった時は右側に寄る・・・

というように、通常の“情報を伝える”Webサイトでは出会えないような問題が多くあり、ディレクターさんやデザイナーさんの意見をもらいながら調整を進めていったのは、とても良い経験になりました。

公開

2面性のあるデザインや遊びのギミック以外にも、三語さんの実家から幼少期の写真を取り寄せたり、師匠から名前を頂いた時に食べていた親子丼を撮影しに行ったり、最後まで細部にこだわったサイト制作でした。

桂三語オフィシャルウェブサイト
https://katsura35.com

公開後は三語さんの方でもラジオやSNSなどの多方面でお知らせいただき、多くの方に「三語さんらしさが出ている」「面白いサイト」と嬉しい反響をいただきました。

今回のサイトのゴールは「コロナ禍による活動自粛への歯止めを掛けたい」「個人としての認知度向上」「落語の普及活動」の3点です。まだまだ目に見える効果は少ないですが、いずれも中期的な活動が必要ですので、このサイトを基軸に次の展開へ進めるよう活用していただけることを願っています。

桂三語さんからのコメント

打ち合わせの時間がいつの間にか仕事というよりも、丸山さんと鈴木さんに会いに行く目的に変わりました。お二人とお話ししている時間が楽しくてなりませんでした。

クリエイターさん達もわれわれ噺家と共通するところがあり（※ここはあえて割愛します）、つい話が長く脱線してしまうのも暫しでした。帰り道はいつも一席終わった後の心地いい疲労感でした。

仕事が激減し喋る場所を失った僕はお二人に話を聴いて貰っている。ありがたいなぁ。いやけど、タダやで、、、まえっか。という気持ち。アナログな私はほぼ丸投げ、これが良いのか悪いのか。お陰で本当に素晴らしいものを創って頂きました！

噺家は基本、べんちゃらとちょっとしたカワイイ嘘をつき幇間のような存在ですが、このことに関してはホンマのホンマに思ってます。むろんこの文面では説得力に欠けますが。丸山さんから、「特別賞」をいただきましたと報告を受けたときは興奮しました。それは賞を得たことではなく、そこまで情熱を注いでくださったこと、真剣に向き合っていただいたカタチ、「愛」を感じました。僕は未だにその賞がなんのこっちゃ分かりませんが、ユニオンネットさんとの信頼関係で得たものだと勝手に解釈しております。

これからこのウェブサイトをきっかけにユニオンネットさんと僕の仕事が『ドット混む』ことを期待しております。

また、Webサイトとしては公開後 @cssdesignawards にて特別賞をいただきました。

その他にも、国内の優れたWebデザインを集めたギャラリーサイトにもいくつかご掲載いただきました。Webサイトの直接的な効果とは別ですが、業界内から評価されたことは制作冥利に尽きます。

ディレクター：丸山

三語さんの奥様が上方落語協会のスタッフさんという事で、私としては「上方落語協会」「天満天神繁昌亭」、そして「桂三語」と3サイト目のご依頼でした。 また「サイト制作にあたり色々な制作会社を探したが、最終やはり依頼したことのある“信頼できる会社”にしようと思った。」と言っていただけたことも印象的でした。

デザインや構成の自由度が高く腕の鳴るディレクションでした。個人的には落語家さんのサイトなだけに「フリ・ネタ・オチ」を意識してコンテンツを考えるのが楽しかったです。

ちなみに、今回コンテンツの更新としてstand.fmを提案しましたが、公開後は担当ディレクターからただのリスナーになりました笑

ディレクター：鈴木

久しぶりに「真面目にふざける」ことが許される仕事で、血が沸き立ち、心が小躍りしていました。ご依頼の課題にプラスして、制作する上で大切にしていたのは「三語さんの“落語”に対する敬意や熱意を表現すること」「三語さんの人となりを知ってもらうこと」この２点になります。このサイトをきっかけに三語さんを知ってもらい、落語に足を運んでもらう人が一人でも増えて欲しいと思っています。

制作の自由度が高かったため、デザイナーやエンジニアの新たなる技術的側面を垣間見れたことも、嬉しい発見でした。自発的に取り組んでくれたスタッフ、そして、このような機会を与えてくださった三語さん、奥様に感謝、感謝、感謝です。

まとめ

今回は「桂三語オフィシャルウェブサイト」のできるまでをお届けしました。

デザインというものは一見シンプルに見えても何度も同じ道を通過したり、時には別の道を歩んだり、制作の現場では様々なやり取りや葛藤があります。もちろんこういった“生みの苦労”への理解を求めることが目的ではありませんが、制作現場が見えることでお互いにとってベストなコミュニケーションが取れるのではないかと考えています。

この記事が今サイト制作を検討している方、業者選定している方の役に立ってくれると嬉しく思います。当社でもWebサイト制作のご相談がございましたら、どうぞお気軽にお問い合わせください。

最後に・・・

どこで使うのか分からなかったオフショット写真・・・せっかくなので、ここで使いましたw

制作に携わってくれた皆さん、お疲れ様でした。