Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@hiraike32

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

More than 1 year has passed since last update.

はじめに

この記事は 第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

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

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

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hiraike32
Android Developer
dwango
Born in the net, Connected by the net.

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?