dwango.co.jpのモバイルページをReactでデザインから作り直してみた。

# はじめに
この記事は [第2のドワンゴ Advent Calendar 2018](https://qiita.com/advent-calendar/2018/dwango2) の16日目の記事です。

先週は9日目の記事として、[「dwango.co.jpをReact/TypeScript/Storybookでリメイクしてみた。」](https://qiita.com/hiraike32/items/c6317aef2805342fc838)を書きましたが、今週はその続き。

先週はdwango.co.jpのデザインをそのままReactで作り直したのですが、それだけだとやっぱり物足りなかったので、今週はモバイルページを自分でデザインして実装してみました！

実装のときに工夫したことや、大変だったことを共有していきます。

※今回の作成物の一切は個人によるもので、弊社の意向とは全く関係ありません。

# 作ったもの
[dwango.co.jp](https://hiraike32.github.io/dwango-remake/)（モバイル端末からご覧ください）

[![mobile.gif](https://qiita-image-store.s3.amazonaws.com/0/227196/8f064d07-b2e9-4bab-6521-df8dfdbcbf73.gif)](https://hiraike32.github.io/dwango-remake/)

## デザインについて
デザインの要点は、**「多くのサービスを抱えるdwangoという会社をいかに楽しく見せるか」**だと思ったので、多くのサービス絵、ロゴ、バナーを使いつつ、かつ窮屈感のない構成を目指しました。

最初のうちは、とにかくたくさんの素材を引っ張ってきて、[Sketch](https://www.sketchapp.com/)で切り貼りしながらレイアウトを固めて。

ヘッダーと背景デザインについては、[dwango採用ページ](http://dwango.co.jp/recruit/)のデザインを踏襲しました。

ただ、今回のデザインは、サービス絵とロゴの雰囲気に合わせて多くの色を使いたかったので、背景の線もそれぞれ固有の色にしてみたり。

結果的にdwangoという会社の多様性を表現できたのではないかなと思います（後付け）。

Sketchで以下の画像を作って全体像をまとめて。背景線とか、お知らせ、フッターとかは雰囲気で作ってます。まあ実装していくうちになんとかなるだろうと。

こんな感じで、2時間くらいでデザインがまとまったので、コードを書いていきます。

![dwango_sp.png](https://qiita-image-store.s3.amazonaws.com/0/227196/a0d7c1c1-e258-0076-9209-76a58220296b.png)

## webとmobileの分岐
コードは先週作成したwebに付け足していくことにしたので、そもそもどこでモバイルを分岐させるか迷いましたが、結論としてRootで分岐させて、コンポーネント自体を独立させました。

Rootでwindowサイズを計測して、コンポーネントを分岐させています。

```Root.js
// Rootコンポーネント
const Root = () => (
  <React.Fragment>
    {window.innerWidth > 768 ? <PcRoot /> : <SpRoot />}
  </React.Fragment>
);

export default Root;
```

ファイル構成としては、このような感じに。

```
src
 |-components
 |└-Common
 |└-PC
 |└-SP
 |-img
 |-styles
```

完全にコンポーネントを分離させることで、別々に開発することができて、お互いへの影響を考えずに済んだのはよかったです。

cssのメディアクエリで色々と指定すると、webの変更をしたときにmobileへの影響を考えないといけなかったりして、結構大変なので。

スタンダードがどうなっているのかはわからないのですが、この方法で開発自体はとてもやりやすかったです。

## storybookの設定
mobileの画面を作成するときには、storybookもmobileで表示されるようにすると便利です。

[<img width="1439" alt="スクリーンショット 2018-12-16 22.18.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/227196/74b6fe09-253d-fce9-1ff6-727b487ffbb5.png">](https://hiraike32.github.io/dwango-remake-storybook/)

[@storybook/addon-viewport](https://www.npmjs.com/package/@storybook/addon-viewport)というライブラリを追加することで、特定のデバイスで表示される画面をstorybookで確認することができます（画像はiPhone6で見たときの表示デモ）。

また、viewportをコンポーネントごとにいちいち切り替えるのは手間なので、storybookの設定時に、viewportのデフォルトを設定すると楽です。

```Top.stories.tsx
import React from "react";
import { storiesOf } from "@storybook/react";
// viewportライブラリを読み込む
import { withViewport } from "@storybook/addon-viewport";

import Top from "./Top";

const story = storiesOf("SP/pages", module);

// デフォルトのviewportを設定する
story.addDecorator(withViewport("iphone6"));
story.add("Top", () => <Top />);
```

こうすると、webのコンポーネントの場合はwebのサイズで、mobileのコンポーネントの場合はiPhone6のサイズで確認できます。

いちいち端末で確認したり、Googleの開発者オプションで確認する必要がないので、けっこう便利だったりします。

## ランダムに動くアイコン
アイコンはそのままでも良かったのですが、せっかくなら動いた方が楽しいかと。

![icons.gif](https://qiita-image-store.s3.amazonaws.com/0/227196/cef23d23-bf62-dd7a-1d66-33aed1836196.gif)

このアイコンが動くタイミングはランダムに生成していて、かつリロードするたびに動くタイミングが変化するようになっています。

基本的なアニメーションの動作はcssで管理しつつ、タイミングを管理するanimation-delayだけはjsでランダムに生成することで、リロードごとにタイミングが変化しています。

コードだとこんな感じ。

```LogoDisplay.tsx
// ロゴを表示するコンポーネント
const LogoDisplay = () => (
  <div className={styles.container}>
    // ロゴの配列を回して、それぞれ表示する
    {logos.map(logo => (
      <div
        className={styles.logo}
        key={logo.src}
        // animation-delayだけ動的に後付けすることで、ランダムなタイミングを実装
        style={{ animationDelay: `${Math.random() * 4}s` }}
      >
        <a href={logo.href} target="_blank">
          <img src={logo.src} />
        </a>
      </div>
    ))}
  </div>
);

export default LogoDisplay;
```

動き自体は、ロゴの大きさを変えつつ、位置の移動と回転を同時に行って、自己主張モーションを実現しました。

40%~60%のときだけ動くようにしています。

```animation.scss
@keyframes shake {
  40% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  45% {
    transform: translate(5px, 5px) rotate(2deg) scale(1.2);
  }

  50% {
    transform: translate(0, 5px) rotate(0deg) scale(1.2);
  }

  55% {
    transform: translate(5px, 0) rotate(-2deg) scale(1.2);
  }

  60% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}
```

ランダムでふるふると動くアイコンを楽しんでいただければ。

# まとめ
といった形で、カラフルでスッキリとしたモバイルページを作成してみました。

ソースコードはこちらに置いてあるので、参考までにどうぞ。
https://github.com/hiraike32/dwango-remake

ただやっぱりデザインは苦手なので、デザイナーさんは偉大だと感じました。いろんなサイトを見て、良いレイアウトや流行のデザインを押さえておくのは大事ですね。

これからも新しい技術を身につけたら、定期的に何かを作ってアウトプットしていこうと思います。