SpeakBUDDYコーポレートサイト制作ノート（前編）─"らしさ"を言葉で定義し、デザインに落としこむ
今回のnoteは、IN FOCUSの制作の内側を紹介させていただこうと思います。
Webディレクターの鈴鹿によるSpeakBUDDYさまのコーポレートサイトリニューアル。
前後編の長文になりますが、ぜひ最後までご覧ください。
はじめに
こんにちは。IN FOCUSでWebのディレクションとデザインを担当している鈴鹿です。
今回は弊社の直近のプロジェクトの中から自分が携わったSpeakBUDDYさまのコーポレートサイトについて、制作の過程とアウトプットの解説をさせていただきます。
ご依頼時のオリエンから最終的なリリースまで、どのようなプロセスを経て形になっていったのか？
苦労話や自慢話っぽくなってしまうかもしれませんが、IN FOCUSのものづくりの楽しさを少しでも感じとっていただければ、またWebサイトや商業的なものづくりにおける、ひとつの考え方の参考にしていただければ幸いです。
そもそもSpeakBUDDYってどんな会社？
SpeakBUDDYは英語学習サービスを提供されているスタートアップ。AIを使用した英会話学習アプリの「スピークバディ（SpeakBuddy）」はCMも打たれており、ご存知の方もいるのではないかなと思います。
代表の立石さまは、以前は全く別業種の外資系企業に勤められていて、英語に大変苦労された経験から、誰でも気軽に楽しく英語を学べるようにしたいという願いでこの会社を立ち上げられたとのこと。
メンバーもエンジニアやデザイナーをはじめ、1/3ほどが海外出身者。 出自もバラエティ豊かでメンバー同士の会話も英語がベースです。ミッションに定義されている「真の言語習得を実現し、人生の可能性と選択肢を広げる」 を会社として実践している印象を受けました。
この度、5年に渡る中期経営計画の嚆矢としてビジョンやバリューの策定などブランディングを刷新しており、IN FOCUSはその一端としてWebサイトのリニューアルを担当させていただきました。
コンセプトをつくる その1 ： やっぱり普通じゃいられない
今回のリニューアルにあたって、クライアントからの大きな要望は「10期目を迎えて改めて会社のコーポレートアイデンティティ＝『らしさ』を表現したい」でした。
SaaS系のスタートアップのためのWebサイトは、弊社としても自分個人としても制作経験があったのですが、企業のWebサイト制作で毎回難しさを感じるのは、Webサイトの一等地にあたるTOPページ、1stビューのキービジュアルで「目に見えにくい事業や会社の雰囲気をどのように視覚表現に落としこむか？」という点です。
WebサイトのTOPページの1stビュー、つまり最初に目に入る画面は
人で言えば顔、建築で言えばロビーやアプローチ(或いは門構えとか外観かもしれません)、お店で言えば看板のような役割を持っています。
様々なページを持つ企業サイトの中でも、パッと見た瞬間にサイトの主である企業が何をしている会社なのか？どんな人を対象としているのか？センスが良いのか？景気は良さそうか？など様々な印象を伝えられる場所です。
必ずしもヒーローイメージと言われる全面の写真や動画でなければいけないわけではないのですが、どうもここ5〜10年くらいの間、キービジュアルといわれる華やかで直感的な視覚表現がTopページの1stビューを寡占している状況が続いており、弊社でもよくご提案をさせていただいています。(※1)
製造業や飲食/ファッション業界だと、それでも提供されている商品やサービスをビジュアルに起こしやすく、また商品そのもののルックで競合他社との差別化も図りやすいのですが、PCやスマートフォンを介したアプリケーションが事業の場合、直接的な写真表現にしてしまうと"スマホを触りながら爽やかな笑顔をしている人"などになってしまいがちで、なかなかサービスをビジュアルで表現するのが難しいという課題があります。
更に表現する対象がコーポレートそのものだと"オフィスで活き活きとPCを前に仕事している人"や"オフィスで談笑する充実してそうな人々"がキービジュアルになりがちで、どうしても平易で普遍的な形に帰結してしまい、結果として背景のオフィスだけその会社でどんな企業でも当てはまる、いわゆるなキービジュアルがTOPページの1stビューに鎮座するコーポレートサイトがひとつ出来上がる。という事になりがちな傾向があると思います（抽象的なアニメーションやベクターアートを使用して上記を避けるという手もあるのですが、その表現もこすられていて既視感のあるものを脱するのが難しく、アイデンティティに図形などが定義されていない限り乱用は避けたいと感じています）。
勿論、クライアントが満足されていて企業の情報を伝えるというWebサイトの機能を果たしていれば通常は何も問題ないのですが...
“企業としてのらしさを表現したい”という先方からのご要望もあり、 わざわざウチのようなちょっと変わったものを作っているところにご依頼いただいているということもあり、普遍的なコーポレートサイトのフォーマットからは少し外れたところで如何にして"らしさ"を表現するか？ということに力を注ぐことにしました。
(※1) Webサイトとキービジュアル
Webサイトの1stビューについては多くのクライアントから雰囲気の良い写真や動画 or 抽象的なアニメーションなどコストとカロリーをかけたクリエイションを期待されることが多く、制作する側としても自分のセンスや技術を見せられる場であり、やりがいのあるものです。
明確な決まりがあって必ずキービジュアルを作らなければならないわけではいのですが…
0.5秒で興味の有無を判断すると言われている現代人の行動様態に合わせると、おのずと直感的に人を惹きつける魅力的なビジュアルの力に頼ることになってゆくのかもしれません（へそまがりな自分的にはちょっと抗ったものを作りたい気持ちもありますが 笑）。
コンセプトをつくる その2 ： 言葉から視覚、論理から感覚へ
とはいえ何の根拠もないところから突拍子もない表現に転んだり、趣味に走るのも違うのでどうしたものかな？とあれこれ悩みました。
ただ悪戯に自分の中だけで思い悩んでも何も生まれてはこないので、「彼を知りて己を知れば百戦して殆うからず」ということでまずはSpeakBUDDYさまについてちゃんと知る事からはじめました。
クライアントとの会話にはじまり、支給していただいた会社資料と元々のWebサイトを精読した上で、社長の立石さまのインタビューと出演番組を見たり、SNSや検索エンジンでエゴサーチをしたり、提供されているアプリを体験して競合他社とも比較してみたり...。とにかく自分が調べられる範囲の事は調べ尽くしたように記憶しています。主に文字情報のかたちでインプットを重ねた結果、なんとなくSpeakBUDDYさまの"らしさ"が言葉として見えてきました。
その"らしさ”は言葉にまとめると
・日々言葉を習得することについて研究している真面目さ、誠実さ
・AIや言語学習理論などのモダンなテクノロジーを実装するテッキーな側面
・アプリの体験設計に見られるゲーム性や遊び心
・言っていることや仲間内の会話にも分け隔てがなく、変な下駄も履いていない等身大な感じ
という感じのものでした。これらは単に言葉といってしまえばそうなのですが、 デザインを起こす時に頭の中にあることで、造形や発想をする節々で当初の目標がブレないように導いてくれる方位磁針のような役割を果たしてくれたと思います。
結果としてSpeakBUDDYが掲げている
「真の言語習得を実現する」
「人生の可能性と選択肢を広げる」
というミッションをビジュアルやUIの中で視覚的に表現するアイデアとして
英語のミッションのテキストの上にフキダシが重なって、中に日本語のミッションが見えるインタラクション(言葉の壁がない状態)
真の言語習得が実現した世界を表現したイラスト
クロスワードや単語当てゲームなどwebサイト上で気軽に簡単な英語学習ができるミニゲームの実装
の3種類のご提案をしました。
悩んだ甲斐あってか、幸いどの提案も気に入っていただけて
・Topページのキービジュアルでイラストを使用
・Aboutページのミッションのセクションで日本語の上にフキダシが重なって英語が見える演出
の2つが最終的に採用されました（余談ですが、個人的に一番推しだったミニゲームは今回はボツになりました...涙。どなたか供養のためにアイデアを使っていただけたら幸いです）。
そしていよいよキービジュアル制作へ
コンセプトも固まってきて、初回提案も好評いただき、いよいよ本格的に実制作に入っていきます。イラストをキービジュアルにするということは決まりましたがどのようなイラストにすれば良いのか？一枚絵として完成されていればそれで良いのか？概ね順調に進んでいたかに見えたSpeakBUDDYのコーポレートサイトでしたが、本当の難所はここからだったのです…！
Profile-Takenobu Suzuka
2020年2月からWebディレクター・デザイナーとしてIN FOCUSに所属。
最近見て良かったクリエイションのご紹介。GAPのLinen Movesのキャンペーンが洗練されつつ楽しく、Tylaさんもベリーキュートで良かったです。
また日本デザインセンターさんの会社説明会の動画が採用コンテンツの枠を超えて、デザインのクリエイションとしてとても学びが多く最高でした。
＠tknbszk_works
以前書いていただいたインタビュー記事はこちら。
この記事が気に入ったらサポートをしてみませんか？