HTML＆CSS規約について考える～デザイン研究室～: ゼロからはじめるシステム開発

<< 2024年12月 >>
日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
22	23	24	25	26	27	28
29	30	31

2024年12月03日

HTML＆CSS規約について考える　～デザイン研究室～

　こんにちは！
　ナビゲータのEVEです。

　本日から、 HTML 、 CSS に関する規約の策定に入っています。ただ、規約を作ろうと考えても、何を完成とするのか、決まっていないと、規約が作れないことに気づきました。前回、HTMLに関する規約の一部を公開しましたが、漠然としていましたよね？まっ、あれはあれでいいのですが、プロジェクトの規約にはならないと判断しました。そこで、まずは、画面の ワイヤーフレーム を決定し、 プロトタイプ を作ってから、規約の作成に入った方がいいようです。

[やるべきこと]
　まだ、ワイヤーフレームも、プロトタイプも作っていないのですが、最終製品を作るまでの流れを、事前に抑えておこうと思います。
　前回紹介した本を借りなおして現在読み進めていますが、作業的には以下の流れで決定し、そして、前回紹介したHTML＆CSSの規約、 JavaScript の規約を再定義することになりそうです。

?レイアウトの決定
┣ターゲット
┗情報
?配色
?写真・絵
?書体
?HTML＆CSS
?JavaScript

[?レイアウトの決定]
　まずは、 レイアウト を決定します。そのレイアウトを決める場合、誰をターゲットとし、どんな情報を掲載するのかといった要素がレイアウトの決定要因となります。
　視点としては、 デバイス目線 、 ユーザー目線 があります。
　デバイス目線とは、どんなデバイスを使用するユーザーをターゲットにするかにより、レイアウトが変わってきます。考えられるのは、 パソコン 、 タブレット 、 スマートフォン などです。 マルチスタイル という方法もあるようですが、今回のプロジェクトでは、まずはパソコンをターゲットにします。マルチスタイルは、すべてのデバイスに対応可能という面で、生産性の向上に寄与しますが、操作性という意味でもしかしたら、いずれかのデバイスに偏る可能性がありますし、使用するユーザーを絞るのが難しくなる可能性もあります。
　そして、パソコン以外の画面は、パソコンのレベルから見ると、作り手からすると簡単です。少し変更すれば、タブレット、スマートフォン画面に対応出来る可能性もあり、まずは、パソコンをターゲットとした方がいいと考えます。
　ユーザー目線とは、どんなユーザーに使用してもらうかということです。まずは、 システム管理者 向けのシステムを製造するので、管理者目線ということになりでしょうか？

[?配色　色の三原色]
　レイアウト、ターゲットと掲載情報が決まったら、次は、配色を考えます。前回製造したシステムは何も考えずに、ワインレッド、ダークレッドを選択しましたが今回は、ターゲットなどを考慮し色を後から決めていきたいと思います。
　令和6年の 中小企業診断士 、 経営情報システム で出題されましたが、色には、 三原色 というものがあります。シアン (Cyan)、マゼンタ (Magenta)、黄 (Yellow)なのですが、この3つの色があれば、すべての色を表現できると言われています。小学生の時、絵具を混ぜていろいろな色を作った記憶があると思いますが、その行為に相当します。
なお、色の三原色以外に、光の三原色があります。それは、青、赤、緑で、色と光で三原色は違うという点について注意しなければなりません。

[色があたえる印象の違い]
　そんな色なのですが、色により相手に与える印象が大きく違います。以下の情報は、「Webデザインの基本」からです。

・赤
　情熱、興奮、注意
　ユーザに強い印象を与えます。　

・黄
　楽しい、元気、好奇心
　黒と組み合わせて、警告を促す色として使われることがあります。

・緑
　自然、安心、平和
　リラックス効果を生む

・青
　清潔、冷静、誠実
　安心感を与える

・ピンク
　可憐、好意、幸福
　女性らしさ

・黒
　高貴、洗練、不安
　内容を明るく見せる効果

・白
　清潔、洗練、献身
　他の色を引き立てる

ちなみに、管理者が利用する画面には何を基調にしたらいいのかChatGPTに聞いたところ、信頼感を与えるブルー、視認性を重視したグレーなどの提案がありました。

[あとがき]
　何気に作ってきたシステムですが、機能だけでなく、それを利用するユーザーのことを考えた場合、考えることは多岐にわたるということが分かります。時間たりないかな？？？
　次の作業に移りたいので、本日はこの辺で！

　では、また！！！

■HTMLコーディング規約　～プログラム研究室～
https://fanblogs.jp/bahamuteve/archive/517/0

■JavaScriptコーディング規約　～プログラム研究室～
https://fanblogs.jp/bahamuteve/archive/504/0