Posted at

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


はじめに

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

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

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

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

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


作ったもの

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

mobile.gif


デザインについて

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

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

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

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

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

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

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

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

スクリーンショット 2018-12-16 22.18.16.png

@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

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

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

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

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