はじめに

この記事は第2のドワンゴ Advent Calendar 2018 の16日目の記事です。

先週は9日目の記事として、「dwango.co.jpをReact/TypeScript/Storybookでリメイクしてみた。」を書きましたが、今週はその続き。

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

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

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

作ったもの

dwango.co.jp（モバイル端末からご覧ください）

デザインについて

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

最初のうちは、とにかくたくさんの素材を引っ張ってきて、Sketchで切り貼りしながらレイアウトを固めて。

ヘッダーと背景デザインについては、dwango採用ページのデザインを踏襲しました。

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

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

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

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

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で表示されるようにすると便利です。

@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の開発者オプションで確認する必要がないので、けっこう便利だったりします。

ランダムに動くアイコン

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

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

基本的なアニメーションの動作は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

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

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

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