本ブログの大規模リニューアルを完了しました(第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属性を付与した<link>要素の動的生成・追加機能を強化した上で、Preload・Preconnect・DNS Prefetchの振り分けや動的追加のタイミングを外部リソース単位で見直し、処理負荷やネットワーク負荷の平準化の観点で処理を最適化しています。
- MutationObserver()によるイベント検出を採用し、関連処理の簡素化と高度化を両立しています。
- 関数内で定義・使用している無名関数のうち、汎用的な処理を担っているものを独立させ、外部関数化しています。
- copyイベント発生時、プレーンテキスト形式に加えてHTML形式のデータも生成・出力するように改善しています。
品質改善は継続します
リニューアルの第1弾は完了しましたが、今後も引き続き、デザイン・システムの両面で品質改善を進めます。
現状、無駄なコードや記述の重複が目立つことから、システム面の品質改善に注力せざるを得ませんが、デザイン面でも細かな問題を検出しており、バランス良く対応していきたいと考えています。
問題点や改善すべき点を見つけたり、あるいはリニューアルに関するご意見・ご感想などありましたら、どうぞお気軽にコメント・ご連絡くださいますようお願いします。
コメントを表示します