更新しやすさを大切にする理由
いかなる企業も常に同じ状況が続くということは決してなく、必ず変化を余儀なくされます。 その際にwebサイトが数年間ずっと同じままであると、webサイトに掲載されている情報に対する信頼性が担保できなくなってしまいます。 時代の変化・現場の変化・サービスの変化に合わせてwebサイトの情報の鮮度を保つことは、地味ながらとても重要なことであると我々は考えており、「写真で伝えるwebサイト」は更新のしやすさを考慮して設計を行っています。
なぜ更新しづらくなるのか
webサイトの更新が難しくなってしまう要因はさまざまではありますが、技術的な問題にフォーカスしている部分は以下の2つの点が考えられます。
現場で起こりがちな問題
操作が特殊で一部の人しか更新できない状態
たくさんの機能がついている編集画面。文字に装飾をつけたり、画像をある程度自由に配置できたりと便利であるが、初めて編集する人にとってはわからない部分が多いかと思います。
また、文字の大きさや太さ、色の付け方のルールの統一も取りづらくなり、デザイン性がかえって損なわれる危険性を潜んでいる状態です。
似たような変更を何度もさせられる状態
「この赤い文字を少し薄くする」という変更が発生した時、変更前の赤色をA、変更後の赤色をBとします。
基本的にどんなクリエイティブでも、全体的に統一感のあるデザインに仕上げるために、赤色Aを文字以外でも背景色や文字の下線の色、さまざまなコンテンツにまたがって使用することが多くなります。
結果として赤Aから赤Bに変更する箇所が何十箇所と出てくることも何ら不思議ではありません。
似たような変更を何度もさせられる状態で設計をしていると、単純に変更の時間がかかってしまう上に、変更漏れが起きて赤Aのままのコンテンツが残ってしまう恐れが出てきてしまいます。
更新の必要な部分は、
誰でもすぐに編集方法が覚えられる編集画面を準備する
WordPressの編集画面をAdvanced Custom Fieldを用いて実装したものです。
誰でもわかりやすい入力欄を準備し、テキストや選択肢の入力だけを行えば大丈夫なように編集画面を設計しておくこと。
クライアントのITツールの熟練度に合わせて多少自由を持たせるなどの臨機応変な対応は必要ですが、原則的には誰にでも簡単に覚えられる入力欄にしてしまうことを軸に考えています。
WordPress以外のCMSでも同様の設計を重要視し、ECサイトで広く用いられているShopifyではDynamic Sectionsを用いて簡単な編集画面を設計しています。
CSSのパラメータの共通部分を変数によって管理し、一括変更をできるように設計する
webページのデザインの多くの部分を司どるCSS。
CSSでは、デザインに関わるさまざまなパラメータを設定します。webコンテンツの色を16進数のカラーコードで指定したり、コンテンツの文字の大きさ、画面幅や余白などをピクセル単位で指定したり。
webページで使用するカラーは一般的にそこまで多くなく、6〜20色程度に収まることが多いです。同じカラーを複数の場所で使用したい場合はカラーに名前をつけて、SassやCSS variablesを用いて変数として管理することを積極的に行うことで、一括変更を可能にします。
よく使う幅やフォントサイズも同様で、変数として管理しておくことで、後々の一括変更ができるように設計しています。
$color__background-body: #fff;
$color__background-screen: #f1f1f1;
$color__background-hr: #ccc;
$color__background-button: #e6e6e6;
$color__background-pre: #eee;
$color__background-ins: #fff9c0;
$color__text-screen: #21759b;
$color__text-input: #666;
$color__text-input-focus: #111;
$color__link: #1c1c1c;
$color__link-visited: #1c1c1c;
$color__link-hover: #1c1c1c;
