「インスタ映え」が、2017年のユーキャン新語・流行語大賞にノミネートされてから久しく、今日ではたくさんの写真がシェアされている。

そもそもインスタ映えとは、Instagramにシェアした写真が、見栄えよく映えることを表現した言葉だ。そしてフォトジェニック的な意味合いで用いられることもある。「それ映える！」など、写真にしたとき心が動かされる様を表す感動詞的な用法なのかもしれない。

それならば思うところがある。
AWS Amplifyの認証画面をInstagramっぽくしたら、それはもう「インスタ映え」ではないだろうか。と、勝手に解釈してみることにした。

それではさっそくAWS Amplifyの認証画面をInstagram風にして「インスタ映え」なのかを検証してみようではないか。

インストール

「a-theme-react」をインストールする。
a-theme-reactは、AWS Amplify UIテーマをカスタマイズできるパッケージだ。

npm install --save a-theme-react
# or
yarn add a-theme-react

テーマを変更する

テーマをカスタマイズするまえに、デフォルトのUIをご覧いただきたい。

シンプルな認証画面であることが分かっていただけたと思う。このUIをInstagram風に変更するわけである。

テーマを適用する

import { Instagram } from 'a-theme-react';
const app = <Authenticator theme={ Instagram } />

以上がテーマ適用の記述だ。まったく難しいことはない。a-theme-reactをimportして、theme propsにセットするのみでカスタマイズ完了だ。

「インスタ映え」だったか？

答えは簡単だ。これは「インスタだぜ！」だ。感動詞的ではあるが、「インスタ映え」ではなかった。

もし実装することがあれば、「インスタだぜ！」と自慢してみてほしい。