4 年ぶりにメインサイトをリニューアルしました (デスクトップ版)

1. Overview

4 年ぶりにメインサイトをリニューアルしました (デスクトップ版のみ. レスポンシブ対応は今後のタスク). この 4 年間にフロントエンドをとりまく環境が大きく変わったことや, 自身のスキルもレベルアップしていることを同時に実感しました. そこで, 開発環境やリニューアルにおいて, 採用した技術などをまとめておきます.

1 – 1. Before renewal

https://weblike-curtaincall.ssl-lolipop.jp/

リニューアル前のサイトです (.htaccess で 301 リダイレクトをしているのでもう閲覧はできません). 制作したのは, 4 年前なので 2014 年です. フラットデザイン + レスポンシブデザインが流行していた頃ですね. したがって, 旧サイトもできるだけ, 画像はもちろん, CSS による装飾も少なくし, かつ, デスクトップ・タブレット, そして, スマートフォンとデバイスに応じて最適なレイアウトに変わるようになっています. 以下, 開発環境と採用した技術です.

1 – 1 – 1. Development

  • OS X のビルトイン Apache

1 – 1 – 2. Technologies

  • HTML, CSS (SCSS), JavaScript
  • jQuery, AngularJS
  • Flash, ActionScript 3.0
  • フラットデザイン, レスポンシブデザイン, アイコンフォント

jQuery, AngularJS, Flash … 時代を感じますね …

1 – 2. After renewal

https://korilakkuma.github.io/LIFE-with-FAVORITES/

リニューアル後のサイトです. ロリポップのサーバーから, GitHub Pages に移行したので, .htaccess で 301 リダイレクトをかけています. 今回のリニューアルにあたってチャレンジしたいこと 2 つありました.

  • 画面幅いっぱいに利用した, HTML 版プレゼンテーションスライドのようなレイアウト
  • メディアクエリを利用しない (極力利用しない) レスポンシブデザイン

特に, 「メディアクエリを利用しない (極力利用しない) レスポンシブデザイン」を実現するために, 旧サイトと比較して, かなりの無駄なコンテンツを削ぎ落としました. 以下, その例です.

  • トップページのお知らせ
  • プロフィールを簡素化
  • ポートフォリオはスクリーンショットのみ, かつ, カルーセルパネルを利用して, 狭い面積でできるだけ多くの情報を伝える
  • ポートフォリオと同様に, YouTube の埋め込み動画も Grid Layout を利用して, 簡潔に情報を伝える
  • 掲示板は, いったん廃止

1 – 2 – 1. Development

  • Babel
  • ESLint
  • stylelint
  • webpack + npm scripts
  • Docker

1 – 2 – 2. Technologies

  • HTML, CSS (PostCSS), JavaScript (ES2015 ~)
  • React
  • アクセシビリティ (WAI-ARIA 属性, role 属性)
  • レスポンシブデザイン (予定)

う〜ん … 時の流れを感じますね … 詳細は, リポジトリを参照してください.

2. Implement

それでは, 各ページ (ヘッダー, プロフィール, ポートフォリオ, スキル, ミュージック, フッター) ごとに簡単に実装を紹介します.

2 – 1. Header

ロゴとサブタイトルのみのコンテンツにしました. また, mouseenter すると, アニメーションが再開されるようになっています. React の処理も, state の操作ぐらいで特に難しいことはしていません. 唯一, ハマったことは, 最初にこのページを実装したのですが, width: 100vw; にしてしまうと, スクロールバーの横幅に依存しないので, 横スクロールバーが表示されてしまうことでした. したがって, 以下のようにして, ページを画面いっぱいに広げました

selector {
  width: 100%;
  height: 100vh;
}

2 – 2. Profile

ここも, レスポンシブ対応を意識して, コンテンツを削ぎ落としたぐらいで, 実装では特に難しいことはしていません.

2 – 3. Portfolio

このページのカルーセルパネルがもっとも苦労しました. jQuery で実装していたときは, アニメーションも jQuery (animate メソッド) が担うので比較的簡単でしたが, React になると, アニメーションは CSS に分離させるので, jQuery でカルーセルパネルを実装する場合の考えと, React + CSS でカルーセルパネルを実装する場合の考えが根底から異なるのが原因でした.

ループしないタイプのカルーセルパネルはなんとか自力で実装できたのですが, ループするタイプは実装がおよばなかったので, 以下のカルーセルパネルを参考にしました.

ポイントは, Flexbox の order を適切に入れ替えているところでしょうか. また, transition の duration は, アニメーションの質を損なわない範囲で, できるだけ短く設定するのがポイントでした. リニューアルサイトでは transition: transform 0.3s ease-out; で設定しています. これはなぜかと言うと, あまり長く設定すると, order を入れ替えたときに, サイドのパネルが消えるのがもろに見えてしまうからです. 短くすることで, 人間の感覚上, 消えてないように見せかけています.

2 – 4. Skills

ここも, レスポンシブ対応を意識して, コンテンツを削ぎ落としたぐらいで, 実装では特に難しいことはしていません.

2 – 5. Music

CSS の比較的新しいスタイルである, Grid Layout を導入しました (もしかしたら, Edge はダメかも …). 最も見てもらいたい動画 (Forever Love (Piano Instruments)) を左の最も面積の広い部分に配置し, 残りをグリッド (格子状) に配置しています. なんだか仕様が複雑そう (Flexbox のような印象をもっていました …) と思いきや, 実装してみると, 意外とシンプルでした.

.Music__grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 560px 280px 1fr;
    grid-template-rows: 158px 1fr;
}

.Music__grid > li {
    display: block;
}

.Music__grid > li:first-child {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: auto;
}

.Music__grid > li:nth-child(2) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.Music__grid > li:nth-child(3) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
}

.Music__grid > li:nth-child(4) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}

.Music__grid > li:nth-child(5) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

2 – 6. Footer

お問い合わせフォームがメインです. 旧サイトでは, AngularJS で実装していました. ここも, React の state 管理をちゃんと実装するぐらいで特に難しいことはしていません.

3. Future Tasks

今後のタスクとしては, レスポンシブ対応です. 特に, メディアクエリを使わない (or 極力使わない) ように実装したいです (メディアクエリは, CSS を複雑にしてまうので). その場合, おそらく困難になるのが, ポートフォリオページのカルーセルパネルと, ミュージックページの Grid Layout でしょう.

4. Conclusion

長らく手をつけていないプロダクトをリニューアルすることは, 最新技術の習得にもなりますし, なにより時代の流れを感じて楽しいです !

コメントを残す