タグ検索：web制作

私が高校のデザイン授業の際に色について興味を持ったのは、デザインとして必要な色選びや組み合わせよりも、色の概念を知ったことの方が大きかったです。初めてこの概念を知った時は衝撃で、自分の思っていた色というものが全く違うものになりました。
そして色について沢山の興味が湧きました。

物の色というのは、物に色がついている訳ではないのです。物に反射した光なのです。

分かりやすく書くと、例えばリンゴは、リンゴ自体が赤色ではないのです。
太陽や電気の光を受けて光の赤の成分だけをはね返し（反射）、その反射した光を人間の目が見て、さらには脳が認識して、このリンゴは「赤」だと思うのです。

リンゴに光の赤の成分が反射されたとき、残りの光の色の成分は物に吸収されます。
光は三原色といって、R（赤）、G（緑）、B（青）の３種類の色成分があるので、リンゴの場合はR（赤）を反射し、G（緑）とB（青）を吸収しているのです。
そして、人間は反射した光を目で見て、目の中の細胞が光の成分に反応し、脳に光の色の成分の信号を送ります。そこで初めて「赤」という色を認識するのです。

よって色とは「物」として存在するのではなく、「物」と「光」と「人」の３つの要素の組み合わせで成り立つ概念です。
「物」は反射しやすさや透明度で、「光」は強さや種類（太陽光や電気の光）で、「人」は状態（目の構造や脳）によって色が違ってくるので、「物」と「光」と「人」の要素のうち、どれか１つでも違えば色の見え方は変わってきます。

３つの要素のうちの「人」の状態により色の見え方が変わるというのが、カラーデザインワークに大きく関わる部分です。
私が心引かれた色の概念こそが、「色のユニバーサルデザイン」において、一番重要なことだったのです。

次は色の概念のうち「光」を掘り下げてみようと思います。（UC級では「物」については掘り下げないみたいです。）

今回はa-blog cmsの「クライアントキャッシュ有効時間」の話です。
こちらも先日の「a-blog cmsの日」で教えてもらったのですが、a-blog cmsでブラウザのキャッシュの有効期限を設定し、サーバへのアクセス負荷を減らすというものです。

公式な説明によると…

という事です。
ブラウザのキャッシュなので、一旦キャッシュすると指定した秒数が経つまでブラウザのキャッシュを利用します。そのため更新してもすぐに画面に反映されないので、運用に合わせて秒数を設定するという感じです。

設定はコンフィグの機能設定にある「クライアントのキャッシュ有効時間」に秒数を設定するだけなので簡単です。

クライアントのキャッシュ有効時間を設定する

a-blog cmsの特徴として、ログイン・非ログインに関わらず同じURLでページにアクセスしますので、キャッシュが効いているとページの変化が反映されない場合があります。また、公開したエントリーが即座に反映されない場合もあります。このキャッシュ機能を使う場合は、サイト管理者側が理解をしていないとダメな気がしますから、運用側でしっかり把握しておく必要があると思います。

ただ、キャッシュのメリットは大きいので、少しでもサイトのパフォーマンスを上げたい方にぴったりの機能だとお思います。ちなみにページの更新状態にシビアな条件がなければ「120秒位で運用すると良い」というお話でしたが、仮に120秒が厳しい場合に15〜30秒程度で設定しても効果があるという事でした。

現状このサイトは120秒で運用していますが、サイト管理者が理解していれば、120秒程度のキャッシュのデメリットは感じられません。こちらはオススメ機能のひとつですので、ぜひ一度試してみてください。

「Zoho」チャレンジ中の私ですが、もう１つ勉強を始めようと思います。

私はWebデザインを始めた頃に、自分の武器の１つになればと思い色の勉強を始めました。
元々は高校のデザインの授業で色について学んていたこともあり、色選びはもちろんですが色の概念の話にとても興味をもちました。

そこで、色彩検定（当時はファッションコーディネート色彩検定だったと思います）と、カラーコーディネーター検定試験の勉強を始め、どちらも２級までを合格し、色彩検定については１級の１次試験まで合格できました。
残念ながら２次試験は通りませんでした。実技試験にてカラーカードを貼る時間が足りませんでした...。

最近Webのアクセシビリティについてのガイドラインが出来たり、分かりやすい資料が出ているので読み始めたところ、色についての項目が多くあり、また興味が湧きました。

そういえば色彩検定で勉強した内容と同じだと思い、何気にサイトをのぞいて見たところ、2018年冬からUC級という「色のユニバーサルデザイン」をメインとした級が新しく設けられていることを知りました。

学習の内容や出題例をみたところ、色彩検定３級〜２級で学んだ内容を掘り下げているものでした。
合格すると、色彩検定協会から「UCアドバイザー」という資格を付与されるようで、名刺に使用できる「UCアドバイザー資格マーク」を発行してもらえるようです。

なんてタイムリーなんだろうと、早速「公式テキスト」と「過去問題集」を購入し勉強を始めました。

ということで、このブログで宣言してみます。
2019年冬期の色彩検定UC級を受講します！　そして合格します！

それまでに学習したことや、「色のユニバーサルデザイン」に関することを色々と書いていこうと思います。（Zohoも書きますよ）

「Zoho Social」を利用して、オリジナルブランド「SlowStart」のSNSアカウントの運用を設定します。

ブランドとネットワークチャネルの設定

１つの管理単位を「ブランド」として、Facebook、Twitter、LinkedIn、Googleマイビジネス、InstagramのSNSアカウント（チャネル）と連携し、ブランドに追加します。
ブランドの名称やマーク、説明をつけて管理できます。
「SlowStart」ブランド情報のマークは、全てのSNSアカウントで利用しているブランドシールと同じものにしました。
ただ、どのチャネルも同じアイコンになるようで、これは、個々のSNSのアイコンを引っ張っているのかブランド情報のマークなのかは不明です。
アイコンの下の小さいSNSマークで区別できますが、FacebookとTwitterも青っぽいこともあり、一見同じものに見えてしまい、ちょっと迷います。
SNSアカウントのアイコンを変えて見たら判明するかもしれません。今度試してみます。

---

ブランド情報

ソーシャルチャネル

データ投稿

---

新規データ投稿

データ投稿中の

投稿管理

---

公開した投稿

投稿の予定

カレンダー

投稿の管理は、メールの受信BOXのように

• 公開した投稿
• 宣伝した投稿
• 投稿の予定
• 未公開の投稿
• 下書き
• カレンダー
• Facebookのリード獲得

と、切り替えて一覧で確認できます。

投稿ごとに詳細を確認し、配信済みの投稿は、反応や返信（コメントなど）、拡散率を確認できます。Facebookへの広告出稿も、同じインターフェイスで確認できるようです。カレンダー表示で、１ヶ月の配信予定を確認することができます。

SlowStartのSNSでは月ごとに曜日を決めて、配信しています。

投稿配信設定をしてみて

複数のSNSへそれぞれ投稿することは、各SNSごとに文章を精査し調整し考えていく必要がありますが、「Zoho Social」上で、統一されたインターフェイスで一度に投稿できるのは、かなりの作業量軽減になります。
また、投稿に対する返信（コメントなど）への対応も、同じシステム内で行えるので作業に一貫性ができます。

またInstagramは、通常スマホからしか投稿できないので、どうしても個人での作業になりがちですが、ブラウザ上から投稿できれば、企業のSNS担当者が代わっても作業内容を把握しやすいので、引き継ぎしやすいなど、メリットもありそうです。

配信予約を利用すれば、長いスパンでSNSの投稿内容を管理できるので、PR戦略も立てやすくなると思います。

このまま投稿を続け、SNSの反応やフォロワーの状況の数値を測っていきたいと思います。

先日参加したa-blog cmsの日（a-blog cmsの勉強会）でコンテンツセキュリティポリシー(CSP)の話がありました。
とても参考になるものでしたのでブログに残しておこうと思います。

コンテンツセキュリティポリシーを簡単に説明すると、設定されたドメイン環境以外のデータは無視することで、未知なる脅威からサイトを守るというものです。改ざんにあった際にも、コンテンツセキュリティポリシーを設定しておく事で、外部ファイルが実行できず被害を最小限に食い止めることが可能かもしれません。

a-blog cmsでは、「private/config.system.yaml」に設定をすることで実装可能ということでした。

//デフォルトはoff
content_security_policy : off # default-src 'self'; script-src 'self' | off

例えば、サイトのドメインのみデータの実行が可能にするためには下記の様に設定します。

//すべてのコンテンツをサイト自身のドメイン (サブドメインを除く) から取得
content_security_policy : default-src 'self'

この場合、他サイトのデータは実行されなくなりますので、別のサーバに置かれているjsや画像などは全て無視されます。

読み込み先にドメインを設定すれば、サイトのドメインに加え指定されたドメインの画像やjsなども実行することが可能になります。

//コンテンツをサイト自身のドメインと設定されたドメイン（sample-hp.com）から取得
content_security_policy : default-src 'self' *.sample-hp.com

例ではサイトのドメインに加え、外部ドメイン（*.sample-hp.com）のデータが読み込める様になりました。

また、SSLを指定することで暗号化した通信のみを許可する事も出来るようです。

//コンテンツをサイト自身のドメインと設定されたドメイン（www.sample-hp.com）からSSLでのみ取得
content_security_policy : default-src 'self' https://www.sample-hp.com

細かい設定は要件に合わせて追加していく様で、「script-src」「style-src」「img-src」などで、読み込むファイルの種類ごとに指定をすることも出来ます。

ただし、今どきのサイトの多くがSNSや地図APIなど外部サイトの機能に依存しているので、すべて設定するのは結構大変かもしれません。また、jsのインライン記述には基本的には対応しておらず、どうしてもインラインで書かなくてはならない場合は、ハッシュをつけるなどで対応する様です。

実際の作業としては、まずサイトのドメインだけを許可し、あとはソースやコンソールなどで表示される情報を確認しながら、読み込み可能なドメインを追加していく感じになると思います。
細かく複数のファイルを読み込むものも多いので、それなりの工数はかかりそうな気がしますが、これでリスクを減らせて安心できるなら、頑張って実装するのも良いかもしれません。