WhatYaデザインとカスタマイズの話Part1

初めまして！株式会社空色/プロダクト開発部のフルサワです。

本ブログでは弊社より提供している、チャットサービスWhatYaに関する情報を随時更新していきます！

ブログを通して、皆様が「こういう風にカスタマイズしたら面白いかも！」や「WhatYaを更に活用したい！」といった気づきを得られれば嬉しいです。

さて、第一回目の記事は、WhatYaデザインの小話とカスタマイズの基本中の基本をご紹介したいと思います。

WhatYaデザインの基本

WhatYaの初期構築時は以下のようなデザインでお客様(ご契約者様)に引き渡されます。

WhatYaはMaterialDisignという、Googleが提唱するデザインシステムを採用しています。

このデザインシステムを効率的に実装するため、Material-UIというフレームワークを用いて開発を行っています。

初期構築後すぐに使い始めることのできるシンプルなデザインですが、設置するページの雰囲気に合わせたカスタマイズも可能な仕組みとなっています。

ただのチャットではなく、エンドユーザー様に寄り添うチャットとなるよう、カスタマイズしてみませんか？

初期構築後、お客様にレビュー用のページが引き渡されます。

レビュー用ページにてブラウザー開発者ツールを起動し、インスペクター(Chromeの場合はElements)を確認すると、_(アンダーバー)から始まるidやclassがチャットに実装されていることが確認できます。

これらの値を利用することで、WhatYaのアイコンやチャットウィンドウをお客様好みのものに変更することが可能です。

例えば以下のように変更が可能です。

変更時の注意点として、凡例における svg のような要素名を使用した指定を行うと、WhatYaのバージョンアップ時に構成が変更されてデザインが崩れる可能性があります。

また、class内に付与されているcpjssから始まるclassやMuiから始まるclassも同様にバージョンアップにより変更される可能性があります。

これらの値を使用しなければ実現したいデザインとならない場合はご相談ください。

idとclassが指定できれば、アニメーションにも対応できます。

例えば以下のようにボタンをフワフワさせて存在をアピールすることも可能です！

WhatYaのカスタマイズの第一歩はここまでです。

デザインの変更には苦労も伴いますが、チャットがお客様のサイトに馴染むことでチャット発生率の向上に繋がります。

次回以降、更にどのようなid/classが用意されているのかご紹介したいと思います。

WhatYaはお客様のサイトがより楽しく愉快なものになるよう日々成長中です！

ご相談・ご意見・ご感想は以下のURLよりお待ちしております。