CSSやXHTML~WEBデザインのテクニックを書いていくブログ

ウェブサイトを作るためにウェブサイトの需要は年々高まっています。

ユーザーがたくさんサイトを利用するためにはwebの標準仕様に従ってサイトを作る必要があります。

文章構造を正しく理解して正しいタグ付けをしていく必要があります。

サイト高層と文章構造行動というのは情報を整理してまとめてしさき視覚化していくことでサイト構成にはなくてはならないものです。

9ブロックはサイト内のページやディレクトリ構造で繋がっています。

そのような情報を階層的にまとめていくことでユーザーは情報にアクセスしやすくなります。

トップページからカテゴリーへ移動したり枝分かれしていく個別ページにリンクするなど構造が存在します。

この本にも構造があります。

まず本という大きなテーマがありその中には松や題名があります。
そして文章神の中にも構造があってアウトがされています。

見出しはその中の文章のまとめ役をするものでもあり文章コードを作るべき理解するべきことは情報ブロックそして文章をまとめた段落やテーマなどです。

このような部品のようなもの要素といって要素を順序立てて構成することが構造です。

cssはレイアウトをするためのもの見出しや段落など本の文章にはわかりやすくするためのデザインがあります。

ウェブページの場合はcssでレイアウトを行います。

まず見出しをデザインとして綺麗に作ったり段落を読みやすくしたりページのタイトル夜間キャッチコピー写真などを入れて分かりやすくします。

このように構成されている要素をデザインとして整えるためにはcssを使っていく必要があります。

XHTMLは文章の構造化をタブで示すような方式で世界的に標準的な仕様が決まっています。

これでマークアップしてあれば読み上げ式のブラウザを使って良かったでも迷いをなくすことができます。

どんな環境でもサイトが読めるようにすることをアクセシビリティをあげるといいます。

がそのためにもXHTMLで構造化することは非常に重要なことです。
例えばホームページリーダーと呼ばれているソフトでサイトを読むとタグが出てきた時に音が鳴るようになっています。

そうすると聞いている人はそこが満たしだということがわかります。

クラシックマークアップされているかどうかを確認するためにはw3cが提供しているツールを使うとわかります。

がしかしこれを使っても内容が見出しと一致しているかどうかはチェックすることができません。

ですので、SEO対策だからといってキーワードを詰め込んだりすることはなく内容に一致した見出しを付けていく必要があります。

cssは素材の位置をコントロールするのが簡単cssを使えば透明なぎふなどを使う必要がなく自由に素材の位置をコントロールすることができます

情報整理して設計するわかりやすく

情報を整理してユーザーに提供するwebデザインは見た目を綺麗にするものだけではなくユーザーが分かりやすいように情報整理して提供するということを表しています。

まずウェブサイトは何を提供したいかという情報だけを記載していればいいというわけではなく例えば商品の情報を知りたい人や会社の情報を知りたい人など様々な人がいます。

ですので、全ての情報を1つのページにまとめるば良いというわけではなくそのユーザーに必要な情報がひとつにまとまっているということが大切です。

ですので、一つの会社でもいくつかのサイトを持つことはありますし、情報を開けて整理することで誰でもに分かりやすくすることができます。

ターゲットユーザー

とエルサな都市ユーザーシナリオの違いとはターゲットユーザーというのは色々な意味を持っています。

例えばosやブラウザの種類どのぐらいの解像度のモニターを使っているかなど閲覧時の環境という風ないい方ができます。

それ以外に年齢や性別どういう目的でそのサイトを訪れているのかなどの分類もターゲットユーザーという風に考えることができます。

そのターゲットユーザーのために最適なwebページを作ることが大切でインターフェースやデザインをしていくということになります。

が一方的な思い込みで作る心配があります。

ペルソナとユーザーシナリオとは実際にウェブサイトで撮ったアクセスログやアクセス解析データなどから得られた情報でユーザーの使いやすさなどを組み合わせることでユーザー想定を作ることができるなります。

このように明確化されたターゲットユーザーほサイト設計に活かせるようにして行くことが減るソナの装丁という風にいわれています。

ユーザーが単一ではなくいくつものパターンがいます。

ですので、ペルソナはいくつもありそのユーザーはどのような専用しながらサイト内を見ていくかユーザーシナリオという風にいいます。

使いやすいサイトを提供する情報が整理されていてデザイナー綺麗なものはサイトを訪れるユーザーのユーザビリティが高いという風にいうことができます。

使いやすくて役員等探しやすくてアクセスしやすいという風に考えることができます。

サイトが重いと使いづらいです。

文章がわかりにくいと目的の情報にたどり着くことができません。

ユーザビリティの調査はどうするのかそれではどうな風にユーザビリティを調査していく必要があるんでしょうか。

まずosとブラウザの違いをあらかじめ想定してos8ブラウザを変えてチェックすることはもちろんですが、実際入山に利用してもらってアクセス解析データを集めるということそれ以外にヒートマップと呼ばれるどこを長く見ているのかをチェックするツールを使って滞在率を調べてユーザビリティを調べることができます。

ユニバーサルデザインとは

ユニバーサルデザインは目が見えない人や耳が聞こえない人普通の人など誰もがアクセスしやすいように使われているものでユーザビリティーが高いものをユニバーサルデザインといいます。

パソコンだけでサイトが見られているとは限らずスマホや携帯で見られている場合もあります。

また文字が小さくて読みにくい視力が弱いユーザーというのもいますし、高齢者が増えてくれば高齢者向けにサイトの文字を大きくする必要があります。

そのためXHTMLを準拠して作ってユーザーを想定することで多くのユーザーにユニバーサルデザインのサイトを提供することができます。

HTMLとXHTMLの違いは

HTMLが普及し始めてかなりの時間が経ちます。

がどのような点が違うのでしょうか。

HTMLはページ記述言語でwebページは意味を持ってリンクなどによって参照できるようになっています。

HTMLは普通のHTMLとXHTMLの二つの種類があってどこが違うのかというと最初に生まれたのはHTMLでwwwを用いて全世界のネットワークが繋がれるようになりました。

ブラウザ毎に視覚的な表現方法の違いが出てきたなどで本来持っていた利用目的やないようにどんどん拡大してしまいました。

それで構造化文書を構造化するために再定義されたのがXHTMLです。

それは装飾などのタグを利用できませんが、cssで視覚的な相続を行って行きます。

そうすることで装飾に関わるタグなどがなくなって文章からデータを取りやすくなります。

ブラウザのさいも少なくなってアクセシビリティにも向上するという特徴があります。

そして技術は厳格な決まりがあって注意が必要です。

どちらを使うべきかいわれるばできればXHTMLを使った方がいいでしょどんな点が違うかというと終了タグを省略してはいけないからのタグをしっかり囲って終了する属性や要素名をを文字で表現するてんてんで囲むというふうな決まりがあります。

HTMLで記述されたページ

はHTMLで始まりHTMLで終わるようになっています。

中身はヘッドとボディの二つの種類があります。

XHTMLの場合はコンテンツはボディ部分にあるのですが、ヘッダーの違いがあります。

またSEOの視点からも重要です。

metaタグを使って属性使い分けを内容を記述することでどんな形式なのかということを宣言します。

そしてcssやjavascriptなどを直接記述する場合もここに記述します。

ですので、ヘッダー部分はしっかりと書いておく必要があります。

サブコンテンツ

このページの先頭へ