バリュートラスト|価値を生む・未来を託す・投資を歩く

実践重視の投資と家計管理の記録、運用管理に役立つアセットツール、最新ニュースをお届けする投資ブログです。

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

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

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

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

ソーシャルボタン

  • ツイート
  • シェア
  • LINE
  • ブックマーク
  • Pocket

関連記事

前後記事

前後の記事を表示します

推薦記事

お薦めの記事を表示します(記事公開直後などは表示しない場合があります)

コメント

コメント投稿時のメールアドレスは一般公開されませんのでご安心ください。

コメントを表示します