本ブログの大規模リニューアルを完了しました（第1弾）

本ブログが2019年1月1日付で、リニューアルの第1弾を実施しました。

ただ、当初予定していた作業がすべて完了したのは2019年1月6日付であり、非常に長い時間を要してしまいました。

幸い、運用には支障ありませんでしたが、既報の通り、リニューアルの第2弾・第3弾も計画していることから、今回の問題をさらに分析して再発防止に繋げます。

第1弾のポイント

リニューアルの第1弾における主な変更内容は、以下の通りです。

デザイン

新デザインは、旧デザインよりもコンテンポラリーで垢抜けたイメージを企図しています。

共通

フラットデザインを基礎とする従来のデザイン思想を修正し、要所に透明感や立体感を取り入れることで、退屈さを感じないようにしています。

背景を白の単色からテクスチャーへと変更し、質感を高めるとともに、眩しさを軽減しています。

ブランドカラーの青を濃淡2色展開から1色展開へと変更し、色調を補正しています。

テキスト

文字色と背景色のコントラスト比を高めに設定し、読みやすさを改善しています。

ヘッダー・フッター

要素の表現方法をグラデーションからストライプへと改め、主張感と引き締め感のバランスを取っています。

メイン（記事本文）

未訪問・訪問済みのリンクテキストにブランドカラーを充てていたのを改め、青・紫の標準的な配色を採用しています。

1行の長さを最適化し、PCでは全角40文字程度、スマホでは全角20文字程度となるようにフォントサイズを調整することで、長文の可読性を向上しています。

見出しの意匠を工夫し、段落レベルを判別しやすくしています。

フォーム要素（テキストボックス・ボタンなど）

各ブラウザーの標準デザインから独自デザインへと変更し、統一感を高めています。

システム

システムは、クライアント側の処理のみを見直しています。ただし、デザインの変更や、クライアント側の処理の変更に伴う影響箇所については、サーバー側でも対応しています。

HTML

羅列していた要素をリスト化するなど、記述を見直すとともに、HTML5で追加された<aside>・<template>要素とhidden属性を新たに取り入れています。

CSS

<style>要素を分割した上で各々にmedia属性を付与し、CSSの適用対象と適用条件を明確化しています。

レイアウト手法をFlexboxからGridへと変更しています。

アクセシビリティーの改善に向けて、構造の見直しを進めています。

JavaScript

DOM操作系の汎用関数の機能を全面的に拡充・拡張し、高度で柔軟な処理を可能としています。

イベント処理系の関数を整理し、役割を明確化しています。

DOM追加時の逐次処理を改め、createDocumentFragment()を用いてバッファー経由で処理することにより、負荷軽減と高速化を実現しています。

イベントリスナー・タイマー・関数それぞれを一元管理するための汎用関数をMap()で実現し、関連処理を集約しています。

rel属性を付与した<template>要素の動的生成・追加機能を強化した上で、Preload・Preconnect・DNS Prefetchの振り分けや動的追加のタイミングを外部リソース単位で見直し、処理負荷やネットワーク負荷の平準化の観点で処理を最適化しています。

MutationObserver()によるイベント検出を採用し、関連処理の簡素化と高度化を両立しています。

関数内で定義・使用している無名関数のうち、汎用的な処理を担っているものを独立させ、外部関数化しています。

copyイベント発生時、プレーンテキスト形式に加えてHTML形式のデータも生成・出力するように改善しています。

品質改善は継続します

リニューアルの第1弾は完了しましたが、今後も引き続き、デザイン・システムの両面で品質改善を進めます。

現状、無駄なコードや記述の重複が目立つことから、システム面の品質改善に注力せざるを得ませんが、デザイン面でも細かな問題を検出しており、バランス良く対応していきたいと考えています。

問題点や改善すべき点を見つけたり、あるいはリニューアルに関するご意見・ご感想などありましたら、どうぞお気軽にコメント・ご連絡くださいますようお願いします。