この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
広告
posted by fanblog
2024年12月04日
HTML&CSSの規約を考える −昨日の続き− ~デザイン研究室~
こんにちは！
ナビゲータのEVEです。
一昨日から、 HTML 、 CSS の規約の策定に入ったのですが、完成の形が決まっていないと、規約を作るといっても漠然としたものになるということが分かりました。11月7日のレベルでもいいのですが、プロジェクトの規約と言い難く、 ワイヤーフレーム 、 プロトタイプ を作り、そのうえで規約を策定しようと決意したのが昨日です。
そして、昨日は、今後の流れを検討し、作業項目を抽出し、その抽出したイベントでどんなことをするのか確認しました。
それが以下の内容となり、昨日は?レイアウト、?配色まで検討しました。本日は、?の写真・絵から検討に入りたいと思います。
[?写真・絵]
www.pro2grammer.com 構築後ということになりますが、 直帰率 を如何に下げるかという課題があります。
このブログを見てくれていて、私のやっていることに興味を持っているユーザーの場合、ポータル画面を見た後、いろいろなページを見たいと思うかもしれません。ただ検索エンジンとかで来訪したユーザーは、検索し、興味があるかもしれないページを見、数十秒もしないうちに別のサイトへ移動してしまうという可能性があると考えています。それを直帰率というのですが、その直帰率を如何に下げるのかというのが運用後の課題です。
その課題を、ダイレクトというわけではないのですが、1つの手段として考えられるのが、写真とか絵とかになります。
文字は読まなければ、興味をもつことはありませんが、写真とか絵は直感的に興味を持っていただく可能性があります。そのため、直帰率を下げる効果的な手段となりえるのです。
その効果を最大限上げるためには、以下の点に注意を払う必要があります。
?@色調
?Aサイトとの融和性
?B解像度、ピクセル
?@の色調は、昨日の話につながります。使用する写真にも色があり、その色がサイト全体にいろいろな印象を与えます。
?Aのサイトとの融和性は、例えば、技術情報を発信するページを作るとしたら、パソコンに向かってプログラミングをしている人を採用するなど、そのテーマにあった写真や絵を使用すべきです。
そして、?Bでは、そのテーマにあった写真が、シャープのイメージを与えるなら最高の解像度で飾るということが考えられます。また、そのテーマのバックボーンとなるものだったら、ぼかして背景のように使用するなどの方法が考えられます。
写真により、どんなサイトなのか、直感的に来訪者に伝え、伝えたその内容が来訪者が興味を持つ内容だったら、いろいろなページを見ていただける可能性が生まれます。
[フォント]
フォントも、サイトの印象を与える手段となります。例えば、 明朝体 なら、フォーマルさ、伝統的、知的さなどを与え、 ゴシック体 なら、モダンさ、親しみやすさなどをユーザーに与えます。他にもフォントは沢山あり、 CSSの font-family により複数のフォントを指定することができます。その場合 JavaScript を使用し、ユーザーにより変更する必要があります。できることは分かったのですが、それを実施するかどうか現時点未定です。労力をかけただけの効果が見込まれるならやりますが、ないならやらないといった所でしょうか？
[あとがき]
いろいろ本を読みながら今後のサイトの方向性を考えたのですが、当初、 αサイト を構築しようと考えています。αサイトとは、中小企業診断士試験で知った言葉なのですが、最初のプロトタイプや試験段階のサイトになります。同サイトは、機能の動作確認やデザインの評価を目的としています。その中で、いろいろためし、試したその中で色々決めていこうかなって今は考えています。決まった内容は、都度規約として整理するという流れにしようと考えています。
そのため、この二日間で検討した内容を決定する必要はないかなっていう考えに至りました。
そして、決まった内容を、 βサイト に反映し、そこで、最終的な仕様を確定するという流れで製造していく予定です。
以上の流れの中で、御意見をいただき、私が考える方向性と合致していれば、取り入れさせていただきます。そして、セキュリティ、機能、デザイン等で気に入っていただけた場合、製造したシステムの全てまたは一部を有料で提供させていただく予定です。ご興味がある方は、引き続きよろしくお願いします。
では、また！！！
■HTMLコーディング規約 〜プログラム研究室〜
https://fanblogs.jp/bahamuteve/archive/517/0
■JavaScriptコーディング規約 〜プログラム研究室〜
https://fanblogs.jp/bahamuteve/archive/504/0
HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉 [ 株式会社アンク ]
価格: 2178円
(2024/11/13 14:34時点)
感想(0件)
いちばんよくわかるWebデザインの基本きちんと入門［第2版］ レイアウト／配色／写真／タイポグラフィ／最新テクニック [ 伊藤 庄平 ]
価格: 2640円
(2024/11/13 14:35時点)
感想(3件)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ [ Mana ]
価格: 2585円
(2024/11/13 14:31時点)
感想(1件)
いちばんよくわかるHTML5＆CSS3デザインきちんと入門【電子書籍】[ 狩野 祐東 ]
価格: 2728円
(2024/11/13 14:36時点)
感想(1件)
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
HTML/CSSの絵本 Webコンテンツ作りの基本がわかる新しい9つの扉 [ 株式会社アンク ]
価格: 2178円
(2024/11/13 14:34時点)
感想(0件)
いちばんよくわかるWebデザインの基本きちんと入門［第2版］ レイアウト／配色／写真／タイポグラフィ／最新テクニック [ 伊藤 庄平 ]
価格: 2640円
(2024/11/13 14:35時点)
感想(3件)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ [ Mana ]
価格: 2585円
(2024/11/13 14:31時点)
感想(1件)
いちばんよくわかるHTML5＆CSS3デザインきちんと入門【電子書籍】[ 狩野 祐東 ]
価格: 2728円
(2024/11/13 14:36時点)
感想(1件)
2022年10月01日
レンタルサーバーで開発するシステムのデザインについて [デザイン研究室]
こんにちは！
ナビゲータのEVEです。
今日は、今回製造するシステムのデザインについて話をしましょう。
デザインについては、本を一度読み、さわりに関する知識を手に入れた程度で、深いレベルで習得できたとは言えない状態です。ただ、最新がなんなのか、その本からさわりですが、理解することができました。
しかし、今回、レンタルサーバ上でシステムを作るに際し、その 最新のデザイン方法は採用しません 。その理由について製造する前に話をした方がいいと思い、報告することにしました。
いちばんよくわかるWebデザインの基本きちんと入門［第2版］ レイアウト／配色／写真／タイポグラフィ／最新テクニック [ 伊藤 庄平 ]
価格: 2,640円
(2022/10/1 20:49時点)
感想(3件)
[昔のデザイン]
昔は、インターネットを見ることができるデバイスは、パソコンだけでした。その後、携帯でi-modeなどが出てきたのですが、画面が小さくインターネットでWebページを見るというレベルではありませんでした。
その後、iPhoneがでてきたり、タブレットが出てきたり、 インターネットに繋がる端末が複数出てくるようになりました 。その出てきた当初、システム開発者は、接続対象に併せて表示する画面を変えていました。 iPhoneなら、iPhone用の画面 。 iPadならiPad用の画面 といった具合にです。そのため、非常に工数がかかる作業になってしまいました。
[1画面で複数のデバイスに対応できない？]
その後、1つの画面というか、HTMLと言ったらいいでしょうか？複数のデバイスというか、いろいろな画面サイズといったらいいでしょうか？その いろいろな画面サイズに1つのHTMLで対応させようと考えた人達がいました 。その起源について調べていないのですが、とりあえず、現在そのやり方が主流となっています。
[どんな方法？]
それは、HTMLで利用できる、 スタイルシートと呼ばれるものを利用 します。画面サイズにより、表示する形を変え、ユーザに見やすいように変形します。
例えば、パソコンにおいて、ユーザのために、左にメニューを出していたんだけれど、少し画面サイズが小さいタブレットには、左メニューを非表示にして、ヘッダでメニューを表示するようにするなどといった感じです。
現在は、スタイルシートを使っているとお話ししましたが、昔は、 テーブルタグを利用して表示 していました。要は、エクセルシートのようなテーブルを作って、画面のどの位置にどんな文字、どんなメニューを表示するのか指定する方法です。それでも、テーブルをサイズではなく、画面の何パーセントに何をどの位置に表示するのか指定することによりある程度はいろいろなサイズに対応して表示することができたのですが、それも、いろいろなデバイスが出てきた段階で限界を迎えました。
[レンタルサーバー上でのデザイン]
レンタルサーバー上のデザインは、デザイン感覚が全くない、私がデザインし、 HTMLで使用するのは、テーブル です。今回のシステム、表示だけでなく、操作性も含めて、パソコンで利用することしか考えていません。理由は、効率よく勉強し参加する人には必ず成果を得てほしいからです。成果を考えた場合、携帯や、タブレットでは非常に操作性が悪いということが上げられます。
加えて、私のデザインレベルが、初心者ということもあり、スタイルシートを用いて複数のデバイスに対応するのは難しいという判断があったのも事実です。
来年以降に製造に入る EVEシステムは最新式のデザイン方法を取り入れて作っていきます が、レンタルサーバー上のシステムにつきましては、以上の点をご理解ください。
画面のソースを表示してふる〜って思っていただいて結構ですが、以上のような理由がありますので、ご理解ください。
では、また！
