HTMLサイトをWordPress化中!+色覚の仕組みとユニバーサルデザインについて学習しました

HTMLサイトをWordPress化中!+色覚の仕組みとユニバーサルデザインについて学習しました

記事
デザイン・イラスト
本日は、現在制作しているデモサイトのHTMLからWordPress化を進めながら、色彩検定の勉強も行いました!

HTMLサイトのWordPress化を進行中!

これまでHTMLとCSSで制作していたサイトを、WordPressで管理できるように変換する作業を進めています。

本日は主に以下の部分を確認しました。

本日進めたこと

✅ header.phpへの分割

HTMLで書いていた共通部分をWordPressのテンプレートファイルへ移行。

<?php wp_head(); ?>

の設置位置を確認しながら進めました。

✅ CSS・JavaScriptの読み込み方法を確認

HTMLでは直接読み込んでいたCSSやJavaScriptも、WordPressでは適切な方法で管理する必要があります。

特にJavaScriptについて、

「今はscript.jsがテーマフォルダにない場合どうするのか?」

など、実際に作業を進めながら確認しました。

✅ ページ内リンクの扱いを確認

HTMLでは問題なく動いていたアンカーリンク(#aboutなど)が、WordPress化すると変更が必要なケースもあります。

どこをそのまま使えて、どこを修正する必要があるのかを整理しました。


WordPress化は単純にファイルを移動するだけではなく、

テンプレート化
パーツ分割
WordPress独自の関数への置き換え

などが必要になるため、少しずつ理解を深めながら進めています!

完成したらポートフォリオにも掲載したいと思っています✨


色彩検定の学習

本日は「段階説(現在の色覚説)」と「ユニバーサルデザイン」について学びました。

段階説(現在の色覚説)

現在の色覚の考え方では、

網膜の視細胞の段階では三色説、
その後の神経細胞や脳では反対色説の仕組みが働いているとされています。

三色説

人間の目には

S錐体(青)
M錐体(緑)
L錐体(赤)

の3種類の視細胞があります。

これらの反応の組み合わせによって色を感じています。

反対色説

脳では

赤 ↔ 緑
黄 ↔ 青
白 ↔ 黒

という反対色の仕組みで色を処理しています。

例えばL錐体とM錐体の反応差によって、

赤みの強さ
緑みの強さ

を判断しています。

そのためL錐体またはM錐体のどちらかが十分に機能しない場合、赤と緑の両方が識別しにくくなります。

ユニバーサルデザインと色使い

遺伝によって色の区別がしづらい色覚特性を持つ人の割合は、

日本人
男性:約5%
女性:約0.2%
北欧
男性:約10%
女性:約0.4%

とされています。

特に多いのは、

1型(L錐体に関わる色覚特性)
2型(M錐体に関わる色覚特性)

です。

一方で、

3型(S錐体に関わる色覚特性)

は非常に少ないとされています。

そのため、多くの人にとって見分けやすい配色を考える場合は、

❌ 赤-緑

よりも

黄-青

を使用する方が伝わりやすいとされています。

さらにビビッドトーンで比較すると、

黄-青 → 明度差が大きい
赤-緑 → 明度差が小さい

という特徴があります。

公共施設や案内表示など、多くの人が利用する場面では、

色だけで情報を伝えるのではなく、

記号
アイコン
文字

などを組み合わせることが大切だと学びました。

本日も制作と勉強を両立しながら少しずつ前進できました!

明日も引き続き、WordPress化と色彩検定の学習を進めていきます✨
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら