自分はUI/UXデザイナーでもグラフィックデザイナーでもないBtoC向けサービス作るのが好きなエンジニアです。今回会社でクライアントエンジニア向けにプラットフォーム横断するサービスのおいてプラットフォーム横断すべき情報とすべきではない情報について考える機会があったので記事にしました。AndroidなのにiOSみたいなダイアログボックスをデザイナーから依頼されてアラートやダイアログをフルカスタマイズして実装した経験はないだろうか?私も経験あります。あれ意味分からないですよね。メリットよりデメリットの方が大きいです。アラートと言われたら最初に浮かぶイメージは何ですか?Webフロントエンドエンジニア「ブラウザ上部に表示されるしょっぱいボックス」iOSエンジニア「画面中央にポップアップで出てくるいわゆるダイアログボックス」Androidエンジニア「iOSと同じくダイアログボックス」もう一つ、エラー通知と言われたら何が浮かびますか?Webフロントエンドエンジニア「エラー文言を帯やフォーム毎の下に表示。表現方法はプラットフォーム間で比べると大きく異なるが、プラットフォーム内で比べると統一されてるこのように同じアラートやエラー通知と言ってもプラットフォームによって表現方法は一致しません。その表現方法はプラットフォーム毎のユーザーからしたら標準で見慣れた物です。プラットフォーム間と比べるとバラバラだけど、アプリ内の表現方法は一致してますし、他アプリでも見たことある表現方法です。この前提の上で次の仕様があったら「ユーザーに入力不備エラーを通知する」と仕様があったら、各プラットフォームの表現方法は違います。Webフロントエンドエンジニア「入力フォームの下に赤文字で文言を表示する」iOSエンジニア「アラート(UIAlert)、自作ビューで文言を表示する。文字色は通常色だがエラーアイコンがついてたりする」Androidエンジニア「アラート(AlertDialog)、トーストでiOSと似たように表示する」つまり仕様は3プラットフォーム同じだけど、仕様の表現は3プラットフォーム異なります。補足:各プラットフォームの表現方法は一例です例に上げたプラットフォーム毎の表現方法はトレンドやデザインコンセプトによって変わります。各アプリ内においては統一されています。ユーザーはその表現への学習コストがかかる例えばアラートのYes/Noボタンの配置はプラットフォームによって異なるバージョンが存在します。iOSユーザーにAndroid向けのYes/No配置を見せると、iOSユーザーは操作を間違える。他iOSアプリとYes/No配置が逆だから。「閉じる/最大化/最小化」ボタンが右上にあったらどう思うかと同じです。仕様満たせばデザインは完全独立していいのか?サービスデザインにおいてテーマカラーに違反して、サービス全体としての一体感が薄れます。ピンクをベースカラーとしたサービスがあったとするそこにLPのデザインの全体色が水色だったら?外部のクレカ決済サービス使うためそこへ遷移したら青色だったら?もっと簡単に言うとcookpadのWebアプリ版とiOSアプリ版を見れば分かります。そもそもデザインは誰向けなのか考えるAndroidとiOSのデザインをあわせた所で、Androidアプリを使うユーザーからしたらiOSのデザインが合わさってる恩恵は受けません。WebとiOSのデザインをあわせた所で、iOSユーザーは見慣れない操作を体験しなければいけません。PC版WebとiOSデザインをあわせた所で、ポインティングデバイスが違いすぎてUXは最悪です。各プラットフォームのユーザーに快適で見慣れて受け入れやすいデザインにしていくべきです。仕様はプラットフォーム跨いで合わせないと不便になるWebのSEO強化でユーザー集客し、アプリ版へ導線ひく方法は一般的だと思います。いった残念なUXになります。mothuleこのページはmothuleの技術ブログになります。当サイトに記載された情報により損害が発生しましても、責任は致しかねません。