昨年、Kyashのサービスサイトはリニューアルをしました。
そのデザインを担当したKyashコミュニケーションデザイナーのサトウマサヤス（https://twitter.com/satohmsys）です。
今回は、サービスサイトの設計やデザインで行われていたこと、デザイナーとして意識したことをまとめていきます。
サイト全体のリニューアルを担当しましたが、今回は特にトップページについて触れていきます。
リリースまでの期間：1ヶ月弱 プロジェクトマネージャー：1名 マーケティングマネージャー：1名 アートディレクター：1名 コミュニケーションデザイナー：1名 （サイトはこちら https://kyash.co/）
目次 1.サービスが提供する価値の変化 2. 役割の混在するサイトのメッセージを揃えること 3. プロジェクト、プロダクトの理解で信頼度の高いワイヤーフレーム 4. サービスの伝達手段とビジュアルアイデンティティ（VI）を整理 5. 空気感やブランドを各ポイントでデザインに落とし込む 6. 適切なレビューを促し、タイムロスを抑止 7. 「NO CODE」で確実かつスピーディーに実装 8. サービスサイトリニューアルのデザインのポイント。ビジュアライズは、勘所をつかむことを大事に
2020年8月にKyashは資金移動業ライセンスを取得し、サービス内でできることも大きくアップデートしました。例えば、本人確認を経たユーザーがアプリ内の残高を現金として引き出すといったことができるようになりました。
これより、サービスの提供できる価値が大きく変化し、サービスサイトをリニューアルするプロジェクトがスタートしました。
Kyashのサービスサイトには2つの役割が、比重を決めきれないまま混在していました。
1. コーポレートサイト（ヴィジョンやミッション、抽象的な世界観のメッセージング） 2. サービスのサイト（ユーザーに直接イメージしやすい価値のメッセージングによるユーザー獲得）
そのため、アップデートが必要となった際に都度「なんのためのサイトか？」の議論が0から始まり非効率な上に中途半端な状態で、僕の入社する前からクリアにできないまま運用されてきました。
海外の大小問わず類似サービスのWebサイトの多くがサービス/コーポレートサイトを混在させていて、フェーズが似通わないものをベンチマークしていたことも理由でした。
今回はマーケティングマネージャーが主導で、リニューアルでユーザー獲得の方向性に寄せていくことをベースに、頭の中を言語化する意味合いで、「見出し・本文」程度のかんたんなTOPページのライティング原案を作っていきました。
今回のプロジェクトではメンバーではありませんが、Kyashのプロダクトマネージャーにも参加してもらいました。 余談ですが、Kyashのメンバーはプロダクトが大好きなので、目立つアウトプットには自発的に参加しやすい空気があるように感じます。
プロダクトマネージャーには、これまでの経緯や開発とプロダクトの未来をよく知るメンバーとして「何を伝えるか」の軸を揃えるためのフィードバックをしてもらいます。実際には上記の画像に載っている以上にボリュームのあるコメントがたくさん付いてます。 （時間が経っていて収集できませんでした）
僕自身はデザイナーとしては、どのような文体だとメリットが伝わるか？の観点で意見しました。
サイトの役割が混在していたぶん、文面をベースとして濃厚なやり取りを行い内容が精査されていきました。
プロジェクトマネージャーがワイヤーフレームを担当しました。本来ならデザイナーがやるべき…と前置きした上でしたが、この判断は2つのメリットがあります。
1. これまでKyashにおいてのコミット量が多くナレッジのあるメンバーがやることで、一貫性の高い論理に基づいたコンテンツ構成ができ、説得力が増す 2. 他の職務がある中、確実性の高い進行ができることでデザイナーの時間調整がしやすくなる
仕上がってきたワイヤーフレームがこちらですが、ぎっしり補足が書かれています。
なぜこのコンテンツがここか、なぜこの文言か？の理由が根拠立てて書いてあり、信頼してデザインに専念できますね。合意形成もしやすかったはず。
デザイナーとして「デザインだけ」以上を担当したい気持ちはありましたが、信頼度の高いアウトプットを行ってくれたおかげでタスクの分担についてて納得し、モチベーションも保ちやすかったです。
リリースまで時間がかなり限られていたこともあり、デザイナーの動き方として主に表現面に専念しつつ、他のメンバーに背中を預ける形で進めることにしました。
デザインの現場では、二転三転することも少なくないです。 タスクの分担をして、各段階でしっかりFixさせた上で次にパスするようにプロジェクトマネージャーが円滑に進行してくれました。
ワイヤーフレームの進行と同時に、アートディレクターとともにクリエイティブの方向性を固めていきます。
当時、僕は入社して1年弱ぐらいでしたが、KyashではKibelaというツールを使いドキュメントを残す文化があるおかげで、これまでのブランディングや戦略の経緯も情報をキャッチアップできていました。また自分なりの解釈持った上で、それをもとにメンバーとやりとりしたナレッジもある程度蓄積していました。
それをもって、アートディレクターとは、「今回のリニューアルでKyashひいては金融サービスの新しい形としてあるべきスタンスや感じ取ってもらいたいことはなにか」を、他サービスをベンチマークしつつFigma上やHangoutでリアルタイムに話し合っていきました。
決定したワイヤーフレームにクリエイティブの方向性に沿ったトンマナや空気感、モチーフをあてはめてデザインしていきます。
Webデザインは写真選定はもちろん、レイアウトや要素の密度によっても印象が変わります。 表層のデザイン上ではユーザー側に与えられる影響は想定でしかないですが、発信する側の持つ印象に当てはまっているかはブランドにおいて重要です。
Kyashは金融サービスでありながら、ただ送金・決済・支出管理などの利便を作るだけではなくユーザーの生活や自己実現をサポートするインフラを創る「ライフスタイルサービス」であるとメンバーは認識しています。
その前提をしっかりインプットして、リニューアルではそれまで以上に具体的に落とし込む意識でデザインしました。
そして、以下のようなキービジュアルと続くページ下部をメンバーからレビューをもらうことに。
時間が限られている中で、レビューをもらう際に2つの工夫をしました。
まず1つは「レビュー日を設け、プレゼンをしながらその場でレビューをもらう」こと。さまざまなタイミングでレビューがあり、都度修正するといったことを避けるためです。
ただ適切な意見をもらいたいため、論理でガチッとつめることはせずHangoutでディスカッションしつつFigmaのコメント機能を利用しライトな感じで説明をしました。
デザインとして何を意識したか、前回と大きく変わったところ、インタラクションがあるところ…前提から細かいところへ順を追って簡易的にプレゼンをします。
（今思うと反省点なのですが、ドライに進めきれなかったことで、ふわっとした話し合いになってしまいました…デザインの説明にもある程度のアジェンダや根拠の資料があると良いかもしれませんね。）
2つ目は「レビューする箇所と観点を指定する」こと。
例えばマーケターには顧客獲得施策との整合性を観点にレビューをもらっていました。
ビジュアルに関しては誰もが意見しやすく、逆にもらうべきレビューがもらえなかったりする場合もあるので、「各々の”職務の観点”からどんな点で見てほしいのか」を必ず伝えるようにしています。
この2つをもってデザインを決定し、実装フェーズへ。
Kyashのサービスサイトはコーディングをほぼしていません。「Webflow」という、いわゆるNO CODE Webサイトビルダーを使って実装しています。
そのためタイプミスによるデバッグやレイアウト崩れなどが起こりにくく確実性の高い実装が可能です。レビューに割く時間やメンバーも削減できるので、最大限デザインの時間を確保できたこともスケジューリングの1つのポイントです。
実装後は僕が何度も確認をしたうえで、文言の誤字脱字・操作感・閲覧体験を職務の観点から分けて最終レビュー。
公開も1クリック。本来ならば当たり前である、サーバーにアップしたりGithubでMergeしたりといった作業が不要なので、リリースもその直後の微調整もかんたんです。
サービスサイトのデザインの話でしたが、2021年1月現在なら、この点が一番特徴的かもしれません。
前述の「ライフスタイルサービス」は、前回のサービスサイトデザインでも当時の担当者なりにアウトプットされていました。
しかし僕がデザインするにあたって、入社前のことを含めドキュメントを読み自分なりの解釈で、周囲とのコミュニケーションでVIの「勘所」を掴んでいったことで、より社内でも納得感のあった印象です。
Webでもグラフィックでも、制作をするときには「何をメッセージするのか？」を外さないためのポイントを捉えるようにしています。今回で言うならば
・そのジャンルのサービスとしてどう感じ取れるべきか（外的） → 金融・お金として、「”難しくない”/”身近な”印象」 ・自分たちは何者であるべきか（内的） →サービスとして大切にしたい意識「ライフスタイルサービス」
ユーザー・そして社員へ伝わるメッセージとして、適切な具現化を意識していくことで、期日に遅れず、納得感を得られる仕事ができたポイントかなと感じます。
またそれができた重要な点として
・ドキュメントを残し継承するカルチャーが根付いていてインプットしやすかったこと ・アウトプットしやすい環境づくりを行ったこと
など環境によるものがかなり大きかったと感じます。
Kyashのサービスサイトは随時アップデートやテスト、潮流とブランドに照らし合わせ、然るべきユーザーコミュニケーションの模索を行っています。
あたらしい機能のリリースがあればSNS等の発表以外にこのサイトで掲載するので、機能はもちろん、金融サービスとしてのデザインのアウトプットも楽しみにしていてください！
もし、この記事を読んでKyashデザインチームに興味がわいたという方は、ぜひお話ししましょう！ Kyashの採用チームのアカウント( https://twitter.com/kyashrecruit_jp ) へDMかリプをください。