iOSとAndroidのアプリ画面を比較できるサイト「consim.」が便利すぎる

# はじめに

**iOSとAndroidのアプリ画面を比較できるサイト「consim .」が便利すぎる！**と思ったので紹介します。
Apple MusicやTwitter、Slackといった有名なアプリの**iOSとAndroidのアプリ画面が大量に登録**されているので、観るだけでもUIの勉強になると思います。
（Apple Musicアプリだけで、**iOS 50枚**、**Android 48枚**のアプリ画面が登録されていました。）

また、**[iOSとAndroidの画面を左右に分けて表示](#iosとandroidの画面を左右に分けて表示)**することもできるので、**iOS/Androidどちらかの画面だけ見てみたい**、といった方にも有用なサイトだと思います。

* https://consim.design
![スクリーンショット 2020-08-27 12.31.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/ffd72375-80b7-dac7-048a-cb9902204ce4.png)

THE GUILDの小玉 千陽さんが個人で作成されているサイトみたいです。すごい！！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">iOSとAndroidの画面を比較できるデザインギャラリーサイト「consim.」をローンチしました！<br>デザインの原則、Contrast&amp;Similarityからconsimと名付けています。<br>まだ掲載数も少なくミニマム機能ですが、このアプリ見てみたい、こんな機能欲しいなどあればぜひ教えて下さい☺<a href="https://t.co/ZkHgvegYGM">https://t.co/ZkHgvegYGM</a></p>&mdash; 小玉 千陽 / THE GUILD (@chiharukodama) <a href="https://twitter.com/chiharukodama/status/1297722632540835846?ref_src=twsrc%5Etfw">August 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#「consim.」の使い方

とてもシンプルでわかりやすいサイトですが、簡単に説明していきます。

## アプリ毎の詳細な比較画像を表示する

[consim.のTOPページ](https://consim.design)で、**アプリ名、アプリアイコン、アプリ画面の画像**のいずれかをクリックすることで、**アプリ毎の詳細な比較画面**を表示することができます。
このページでは右側のSegmentedControl？[^1]によって、以下のように表示を切り替えることができます。
[^1]: 正しいコントロール名がわからなかったので、知ってる人教えてください :raised_hand: 
![名称未設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/387dcae5-4c16-d4fe-b8c7-4458003cc77f.png)

### iOSとAndroidの画面を交互に表示
![スクリーンショット 2020-08-27 12.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/3d4bf7a7-5474-dca8-9619-baf30a60b323.png)
アプリ画面の画像をクリックすることで、**アプリ画面毎**に**iOSとAndroidの画面を比較表示**できます。
![スクリーンショット 2020-08-28 9.53.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/aae05c8c-4e12-f78c-7e96-214b530fb3ce.png)

### iOSとAndroidの画面を左右に分けて表示
![スクリーンショット 2020-08-27 12.32.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/ca7ed6b7-4998-052b-5feb-9498e09fb13d.png)
アプリ画面の画像をクリックすることで、**アプリ画面毎**に**iOSまたはAndroidの画面を表示**できます。
![スクリーンショット 2020-08-28 9.59.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/a6ccf888-c19d-10cd-0936-51923d5b8b51.png)

### App Store と Play Store 画像を表示
下にスクロールしていくと、**App Store** と **Play Store** の画像を確認することができます。
（アプリによっては、**Related Apps**が表示されるものもありました。）
![スクリーンショット 2020-08-27 12.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/c4ff2682-db1f-297b-3015-ee87fe4c0583.png)

## アプリのApp Store/Play Storeを表示する

各アプリに表示されている**Apple/Androidアイコン**が**App Store/Play Storeへのリンク**となっています。
こちらをクリックすることでApp Store/Play Storeを表示することができます。
ちなみに、数字は画像を採取した際のアプリバージョンのようでした。（確認したわけではないので、推測です。）

![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63892/cc5800b8-171b-b93f-a6cc-ef5fb2e5cf3a.png)




# 登録されているアプリ
**現時点（2020/08/28）**でかなりの数が登録されています。
メジャーなアプリはある程度揃っているかなと思いました。

* [Slack](https://consim.design/apps/slack/)
* [Apple Music](https://consim.design/apps/apple-music/)
* [Twitter](https://consim.design/apps/twitter/)
* [Behance](https://consim.design/apps/behance/)
* [Instagram](https://consim.design/apps/instagram/)
* [Wikipedia](https://consim.design/apps/wikipedia/)
* [VSCO](https://consim.design/apps/vsco/)
* [Pinterest](https://consim.design/apps/pinterest/)
* [Netflix](https://consim.design/apps/netflix/)
* [Spotify](https://consim.design/apps/spotify/)
* [Starbucks](https://consim.design/apps/starbucks/)
* [Uber EATS](https://consim.design/apps/uber-eats/)
* [Yahoo! 天気](https://consim.design/apps/yahoo-weather/)
* [Uber](https://consim.design/apps/uber/)
* [Google Maps](https://consim.design/apps/google-maps/)
* [Facebook](https://consim.design/apps/facebook/)
* [Google Calendar](https://consim.design/apps/google-calendar/)


# あとがき

今後は投稿できる機能も追加されるようなので、ますます内容が充実していきそうでとても楽しみなサービスです。
「consim.」で取り上げてもらえるようなアプリを作るぞー！！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">頑張ります！🦾 <a href="https://t.co/XsVgsBV5cT">https://t.co/XsVgsBV5cT</a></p>&mdash; 小玉 千陽 / THE GUILD (@chiharukodama) <a href="https://twitter.com/chiharukodama/status/1298616889849987073?ref_src=twsrc%5Etfw">August 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 参考情報

* https://consim.design