デザインマスター【3級】学習ノート / みっち
デザインマスター【3級】学習ノート / みっち
ログイン
CSSの役割
CSSの役割と書式
CSSとは・・・Webページの見栄えを指定し、視覚的な価値を与えるための言語
◎ CSS(Cascading Style Sheets)の役割
本来の(H)HTMLで制作されたWebページがどのように表現されるかは
デバイスやブラウザによるが、
CSSを利用することで見栄えをコントロールすることができる
◎ (X)HTMLとCSSの関係
マークアップ(構造)あってのスタイルシート(見栄え)であることが前提にくる
つまり、(X)HTMLの役割をこなしてこそ、CSSの本領を発揮するということ
◎ CSSの書式
・セレクタ(selector)-スタイルの適用対象
・プロパティ(property)-スタイルの種類
・値(value)-与える効果の具体的な種類や程度
◇ p要素の色を赤に指定する場合
「p{ color: red; }」
この場合、pがセレクタ、colorがプロパティ、redが値である
そして、プロパティと値のセットを「宣言(declaration)」と呼ぶ
◎ CSSの適用方法
(X)HTMLにCSSを適用するには4つの方法がある
� �link要素で外部ファイルを参照
�◆ �importルールで外部ファイルを参照
�� style要素でCSSソースを指定
�ぁ�style属性でCSSソースを指定
�´△諒�法が望ましい
���い呂修裡廝紕皀據璽犬任靴�有効ではなく、メンテナンス性が低下するというデメリットもある
◎ CSSの適用メディア(メディアタイプ)
link要素やstyle要素ではmedia属性で適用メディアを特定できるが、
対応しているかどうかは、各種デバイスやブラウザによる
「screen」- PCスクリーン
「print」- プリンタなど印刷メディア
「handheld」- 携帯端末
「tv」- テレビ
「projection」- プロジェクター
「aural」- 音声出力 などがある
◎ スタイルの継承
CSSにはある要素に適用したスタイルは子孫要素に自動的に引き継がれるという特徴がある
◎ スタイルの優先順位
スタイルの適用対象が競合している場合、
「特殊性」- 一般的なスタイルよりも個別的なスタイルを優先する
「読み込み順序」- 後から読み込んだスタイルを優先する
という
2つのルールによって優先順位が決定される
また、値の後ろに「!important」をつけることで「スタイルの作り手」というルールによって
優先させることもできる
2010.01.18:
dmmitchi
:[
メモ
/
□ 3 級
]
マークアップの種類
◎ head要素に含める内容
・ title要素(ページタイトル)
head要素のなかで必ず一度だけ指定する
・ meta要素(メタ情報)
そのwebページ自体の情報を定義する。
・ link要素(文書間関係)
そのwebページから見てほかのページがどのような役割かを定義する。
・ style要素(スタイルシート)
CSSのソースコードや外部ファイルを指定する。
・ script要素(スクリプト)
JavaScriptなどのソースコードや外部ファイルを指定する。
◎ body要素に含める内容
body要素を構成するものには、大きく分けて「ブロックレベル要素」と、「インライン要素」の2種類がある
◎ 代表的なブロックレベル要素
・ h1-h6要素(見出しレベル1−6)
見出しにはh1が大見出し〜h3小見出しがあり、h4〜は必要に応じてそれ以下の見出しに利用できる
・ p要素(パラグラフ)
パラグラフとは「文章のひとかたまり」のことである
・ blockquote要素(引用文)
テキストをまとまった引用文として定義するために利用する
・ address要素(作成者情報)
webページのフッター部分で作成者のい連絡先や著作権情報を指定するのに利用する
・ ul要素(順不同リスト)
項目を順不同で並列的に列挙するタイプのリスト
・ ol要素(順序リスト)
項目を順序や順番として定義するタイプのリスト
・ dl要素(定義リスト)
「用語」と「内容」で構成するタイプのリストを定義リストという
・ table要素(表)
表の一つ一つの項目を「セル(cell)」、横方向のセルの並びを「行(row)」縦方向の並びを「列(column)」と表現する
・ form要素(フォーム)
ユーザーによる入力や選択が可能なフォーム
◎ 代表的なインライン要素
・ a要素(アンカー)
アンカーを定義するための要素
・ img要素(画像)
画像を埋め込むための要素
・ br要素(改行)
文の途中で改行するための要素
・ em要素、strong要素(強調)
テキストを強調するための要素 em>strong
・ グループ化要素
ブロックレベルでのグループ化にはdiv要素、インラインでのグループ化にはspan要素をそれぞれ利用する
◎ コメントと文字参照
(X)HTMLには任意のコメントを入れることができる
コメントはwebブラウザには表示されない内容であり製作者が目印やメモ書きとして利用する
2010.01.18:
dmmitchi
:[
メモ
/
□ 3 級
]
Web標準とページ制作
Web標準と(X)HTML+CSS
◇ Web標準とは
Webで標準的に利用される技術の総称で、W3Cという国際団体が定めています
◇ Web標準に準拠されたサイト制作
SEOやアクセシビリティ、メンテナンス性、互換性など、Webサイトのポテンシャルを最大限に活かすためには、
W3Cの技術仕様やガイドラインに基づいて制作するのが不可欠だという認識が広がってきました
(X)HTMLでページの構造→アクセシビリティをなるべく損なわないように工夫
CSSでWebページの見栄えを指定する→SEOやアクセシビリティのメリットに直結
テーブルレイアウトとフルCSSレイアウト
これまでWebページのレイアウトはテーブル(表)で実現することが多かったが
現在ではCSSでレイアウトするケースが増えてきている
テーブルレイアウトはソースコードの増大といったデメリットがありましたが
フルCSSレイアウトでは比較的短く合理的なソースでのページ制作が可能
動作環境とWebオーサリングツール
さまざまな機能を使って作業を行うことに加えて、制作スキルを均一化するという目的があります
CSSレイアウトの再現力にも注意が必要で、ツールの中には編集画面上で崩れるものがあります
全てをツールまかせにするのではなく、ソースコードを見ただけで作業できるレベルになることが
より高い品質のWebページを制作するために不可欠です
クロスブラウザの課題
さまざまなWebブラウザがあり、あるWebブラウザは適切に表示されるが、
一方では崩れやズレが発生するといったことが多々あります
制作者はあらかじめ
きちんと表示され動作する
ことをチェックする必要がありこれを「クロスブラウザ」と表現します
新
CSSサポートのよいWebブラウザ
FireFox1・2、Opera8.9、Safari1.2、Netscape7
CSSサポートにやや問題があるWebブラウザ
Win IE 7
CSSサポートにそれなりに問題があるWebブラウザ
Win IE 6
CSSサポートにかなり問題があるWebブラウザ
Win IE 5.5、Win IE 5、Mac IE 5
古
CSSの適用対象に含めないWebブラウザ
Win IE 4、Mac IE 4、NN 4
古いWebブラウザを含むターゲットにする場合はCSSをきわめて限定的な使い方をし、テーブルレイアウトを採用するやり方が一般的です
※ オーサリングツールとは ※
Adobe Dreamweaver、Microsoft FrontPage、IBMホームページビルダー等
タグ入力支援、CSSコーディング支援に特化したツール
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.12.12:
dmmitchi
:[
メモ
/
□ 3 級
]
音声素材
音声データの形式
◇ MIDI形式(テキスト形式)→電子化した楽譜のようなもの
◇ サウンドデータ形式(バイナリ形式)→録音済みのメディアをファイル化して流通させる
MIDI形式は再生に装置に内蔵したソフトウエア音源や、外部接続した音源が必要
再生する機器やソフトウエアの性能によって割り当てられる音源の質が変わる
→携帯電話の着信メロディや通信カラオケのファイル交換方式として活用
サウンドデータ形式は、人間の肉声も取り扱うことができる
どのサウンドプレイヤーで再生しても、聞こえる音声は同じである
つまり、
データ形式によっては環境で再生結果が変わることがある
と、いうことです
音声のデジタル化
サンプリング
アナログ音声の周波数をデジタルのビットに割り当てること
単位をHz(ヘルツ)で表され、数字が多くなると音質が高いがファイルサイズが増大する
Webコンテンツで主に用いられるサウンドデータ形式は
◇ MP3(高圧縮の音声形式)
◇ WAV(非圧縮データ形式なので、オリジナルの音声保存に適している)
◇ AAC(高音質で圧縮率が高い)
◇ RealMedia(圧縮と再生の方式が1つのコンポーネントとして提供)
◇ Windows Media(RealMedia同様)
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.11.30:
dmmitchi
:[
メモ
/
□ 3 級
]
写真素材
作業工程で異なるフォーマット
デジタルカメラで撮影することが一般的になった昨今、RAW形式による撮影が可能になりました
□□ RAW形式とは
アナログ写真のフィルムに該当するファイル形式です。
ファイルサイズが大きいので処理にも時間がかかります。
RAW形式はカメラに付属のアプリケーションや画像処理ソフトウエアで現像処理を行います。
印刷物とWeb素材両方に利用する場合、画質や色見の変更が自由なRAW形式が利用しやすいです
Web上でのみの利用に限定した素材であれば互換性の高いJPEG形式による撮影が望ましいのですが
上書き保存をするだけでも圧縮してしまうために、画質が劣化することから、
画質調整などは圧縮機能のない形式に置き換えて保存したうえで行うようにします
取り込み(撮影)時の注意点(デジタルカメラ)
デジタルカメラでの撮影は
� 〇1謄癲璽�
�◆仝�量
この二つに注意すると良い。
RAW形式以外の保存形式の場合、画質は設定した撮影モードの設定で大きく変わりますので
最初から劣化した状態で撮影をしてしまうと、補正が難しいので十分に気をつけます
取り込み時の注意点(スキャナー)
雑誌やポスター等、印刷原稿から写真を取り込む場合、必ず出るのが網点です
網点は使用原寸から拡大スキャンし、あとでピクセル寸法を縮小して目立たなくなるように工夫します
□□ 網点とは
印刷物は色の濃淡で表現されたドットの集まりです
このドットのことを網点(あみてん)と呼びます
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.11.18:
dmmitchi
:[
メモ
/
□ 3 級
]
画像素材
Webコンテンツで使用する画像データ
Webコンテンツで標準的に使用されているビットマップデータ形式はJPEG、GIF、PNGの3形式ですが
大抵、写真はJPEG、
ドット絵などの階調が少ないものはGIFといったように
この2種類でほぼ賄えるのが現状です
JPEGの特徴
商品写真など豊富な色数を必要とする要素にはJPEG(Joint Photographic Experts Group)が適しています
画像編集ツールで適切な圧縮画像を書き出すことができますが非可逆圧縮データであるというマイナス面も持ち合わせています
一旦ファイルサイズを小さくすると画質が下がり元には戻らなくなってしまうのです
こうしたことから製作現場では非可逆圧縮形式の画像をオリジナル素材とせず、汎用性のある形式で画像を保持することが望ましいとしています。
しかしTIFF形式で保存した画像は一般的にファイルサイズが大きいので、
メール形式などで送受信するには
画像を劣化させずにコンパクト化できるPNG形式が適しています
※JPEGの仲間でJPEG2000というフォーマットが国際規格に制定されています
JPEG2000は
圧縮時のにじみを軽減し、JPEGよりも画像が良く圧縮率も向上しています
著作権情報を個々の画像に添付することが可能です
写真画像などの複雑な情報にはJPEG、簡単なグラフィック、イラストにはGIFが適しています
GIFの特徴
GIF(Graphic Interchange Format)は情報通信向けに作られました
8ビット画像で256色まで色数を保持できるますが、異なる表示環境では40色について同じ色を表示することができません
よって、Webコンテンツで使用するGIFは実質216色しか使えません。(この216色のことをWebセーフカラーと呼んでいます)
GIFは使用中の任意の色を透明色にすることができます。(これを透過処理、透過GIFと呼びます)
撮影時に写りこんだ背景を切り抜くテクニックに利用します
PNGの特徴
PNG(Portable Network Graphics)は、1996年にW3Cが、2003年にISOが標準査定した配信用画像の保存形式です
最大256色の色を保持できる8ビットの形式と、フルカラーを保持できる24ビット形式+アルファチャンネルの2形式が利用されています
特に24ビット形式+アルファチャンネル形式は半透明のイメージを使えることから、表現力のあるWebコンテンツつくりに活用が見込まれています
PNGの書き出しには多くの画像編集ツールが対応しています今後、表示可能なWebブラウザのシェアがあがればPNG形式を積極的に使うことも検討したい
-----------------------------
読み込み速度を上げて
レスポンスを早める事が重要になるため、サイズが最も小さくなる種類を選択するよう努めます
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.11.17:
dmmitchi
:[
メモ
/
□ 3 級
]
テキスト素材
魅力的でわかりやすいテキストが重要です
Webコンテンツにおけるテキストの制作にはさまざまな担当者が関わります
< 執筆 >
○ コピーライティング
見出しやキャッチコピーを書く作業であり、専門家に発注する場合もあります
信頼感や安心感をアピールしたい場合や、お買い得感をアピールしたい時に、
目的に合わせたのキーフレーズリストを用意しておくと良いでしょう。
○ 文章ライティング
テーマに沿って構成や展開を工夫しながら文章を書く作業であり、短い文章から
数ページにわたる長い文章までをコンテンツとして用意する場合もあります
もちろん漢字や送り仮名、
用語・表記ルールの知識はもちろん5W1Hなどのライティングスキルを必要とされます
文章体裁の整備はサイト全体の信頼感につながるためきちんと用語・表記ルールを決めるのが望ましいです
WebコンテンツとしてのテキストにはSEOや読み手のリテラシー(処理能力)を考えたライティングが求められます
○ SEOライティング
SEOを意識したコンテンツライティングのことですが
検索エンジンが理解しやすいライティングということは、人も理解しやすいということなので、情報が伝わりやすい形式で文章を書くということがとても大事です
< 編集 >
テキストをコンテンツとしてまとめる作業のことです
執筆者とは別の人間が携わる(制作会社など)ことが普通であり
字数や段落を調整し、ほぼ完成した形のデモページとしてまとめます
< 校正 >
テキストの手直しなどを行う作業のことです
一通り出来上がったテキストについて、誤字・脱字のチェックのような基本的な作業から
テイストを崩したり前後文脈に齟齬(そご)がないか確認する作業を行います
著作権への抵触などの最終確認が必要な場合もあります
テキストコンテンツの改善ポイント
段落、行間、1行辺りの文字数
ユーザーのストレスに繋がりやすいため横幅を適度に狭めたり、段組みなどのレイアウト改善を行います
フォントのサイズや種類
フォントのサイズや種類は読みやすさに直結します。固定にせずユーザーが自由に大きさを変更できるよう設定しても良いでしょう
文字色と背景のコントラスト
色のコントラストが保たれていないと文章が読みにくい
図表化、リスト化
文章での説明よりも図表やリストの方がわかりやすいこともあります。
見出しレベルの見栄え
6種類の見出しがありますが、大きさの要素の違いをわかるようにすることでユーザーの混乱を防ぐことができます
その他
取材・インタビュー・翻訳
コミュニケーションスキルなどを要し
取材をしたり、イベントに参加してレポートを書くことは高度な作業です
グローバルな展開をしている企業サイトでは日本語を外国語に翻訳することも求められます
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.11.16:
dmmitchi
:[
メモ
/
□ 3 級
]
Webコンテンツを構成する素材
Webコンテンツはテキストや画像などの素材で構成されているので
同じ素材でも
「情報を伝達する要素」と「装飾的な要素」といったそれぞれの意味をもった使われ方をしています
適切に見分けることが重要になります
情報としての画像
商品の画像
社長近影
社屋
会社までの地図 など
画像素材は目で見る情報です。
文字では伝えきれない内容のものを画像表示することで
画像情報として扱われています
ユーザーはこれらの画像をコピーしたり友人と共有したりする可能性があることから
再利用しやすい状態であることが望ましいといえます
装飾としての画像
背景画像
飾り など
コンテンツとして扱われないよう直接HTMLに埋め込まずに
CSSで指定して背景として表示させる方法が妥当です
一方
視覚障害者など視覚的に情報を取得できないユーザーにはこれらの画像として提供することに何ら意味をなさないので
聴覚要素を配慮し、取り扱い方針を考えなければなりません
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.11.16:
dmmitchi
:[
メモ
/
□ 3 級
]
コンテンツマッピング
コンテンツマッピングとは
既存コンテンツの把握はサイト設計のもっとも基本的なプロセスです
Webサイトの構成されているコンテンツを洗い出し、分類と整理を繰り返します
これによってできた「表」をコンテンツマトリックスと呼びます
コンテンツマッピングで重要なのは
プロセスと成果
時間をかけ、利用できる情報を分類していきます
コンテンツの整理を進める上で収集したコンテンツは
モニター上で読みやすい適切な長さ適切な表現になるように、編集する必要があります
コンテンツマトリックス
コンテンツ公開にあたって、優先順位などを決定する必要があります
� \�作時間
�◆.咼献優硬�なインパクト
�� 必要技術
以上3つの要因からコンテンツの優先度を決定します
容易にコンテンツ制作ができるが、ビジネス的に重要ではないものは優先順位が低く、逆に
ビジネス的なインパクトが大きく重要なコンテンツを含んでいるが、制作に時間がかかるものについては優先度を上げていく
このようにコンテンツマトリックスを利用することでコンテンツの優先順位付けを行えばサイト全体の計画も決定しやすい
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.11.16:
dmmitchi
:[
メモ
/
□ 3 級
]
Webユーザビリティ
ソフトウェアをより簡単に操作、アクセスできることが優れたユーザビリティといえます
ユーザが目的に達成するまでに費やした時間や労力などもユーザビリティの指標となっています
ISO 9241-11 ユーザビリティの定義
有効さ
ユーザーが指定された目標を達成する上での正確さと完全さ
効 率
ユーザーが指定された目標を達成する上での正確さと完全さ
満足度
不快さのないこと、および製品仕様に対しての肯定的な態度
利用状況
ユーザー、仕事、装置(ハードウェア、ソフトウェア及び資源)、そして製品が使用される物理的及び社会的な環境
Jakob Nielsenによるユーザビリティの定義
学習しやすさ
システムは、ユーザーがすぐ使い始められるよう、感単に学習できるようにしなければならない
効率性
一度学習すれば高い生産性を挙げられるよう、効率的に使用できるものでなければならない
記憶しやすさ
ユーザーがしばらく使わなくても、再度しようするときに覚え直す必要がないように覚えやすくしなければならない
低エラー発生率
エラーの発生率を低くし、エラーが発生しても簡単に回復できるようにし、また、致命的なエラーは起こってはならない
主観的満足度
ユーザーが個人的に満足できるよう、また好きになるよう、楽しく利用できなければならない
これら二つを合わせ
ユーザー本位の「効果」、「効率」、「満足度」を
共に実現するように設計することを重要としています。
インターネットが私たちの生活に浸透するにつれて、
Webサイトにおけるユーザビリティの重要性はますます高まっているので
サイトに訪問したユーザーごとに期待するものが異なり、
ユーザーの行動によって見え方、使い方がまったく異なるため
訪問したユーザーがどのような行動をするかということを
想定し計画的に設計する必要があります
ユーザーインターフェイスデザイン
効率よく達成できるようにデザインされているかという観点
ユーザーエクスペリエンス
「体験」「経験」
ユーザーにとって面白い、楽しい、という肯定的なプロセス重視の観点
→
ユーザーエクスペリエンスデザイン
とは、
Webサイトを設計する際には、ユーザーがWebサイトを利用する過程を重視し、
何をどのように見て、読んで、その結果どのように感じて
次のアクションを起こすのかといった一連の経緯を考慮して設計することをいいます
ユーザーエクスペリエンスを豊かにするハニカム構造
� 〔鬚卜�つこと
�◆〇箸い笋垢い海�
�� 望ましいこと
�ぁ|気靴笋垢い海�
�ァ.▲�セスしやすいこと
�Α/�頼に値すること
�А_礎佑鮴犬澆世擦襪海�
Webサイトの目標によって、何がより重要なのか、何が足りないのか、
技術的に見つけやすいことは、使いやすさよりも
重視すべきことなのか?
など、さまざまな視点から検討することができるようになりました。
最近のWebサイトはユーザーエクスペリエンスの概念をはき違えているものが多くなっています。
「派手」「かっこいい」「優れた実装力」
これらは表面ばかりを強調しており、実際にアクセスすると重い動画コンテンツであったり
機能がありすぎて操作が複雑だったり、ユーザー本位に立っていないサイトが多いのです
インターネットを日々活用する機会が増えてきているのは事実です。
今まで以上に「普通であって使いやすいもの」の重要性を考慮している必要性があります
参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
2009.10.31:
dmmitchi
:[
メモ
/
□ 3 級
]
BINARY IT用語辞典
BINARY IT用語辞典
--------------------------------
IT用語辞典バイナリは、のべ10000項目以上のコンピュータ・インターネット関連用語について解説した国内最大規模のオンラインIT用語辞典です
2009.08.17:
dmmitchi
:[
メモ
/
□ リンク集
]
IT用語辞典 e-Words
IT用語辞典 e-Words
-----------------------------
用語の読み方・意味・関連用語などを、キーワード検索・分野別もくじ・五十音さくいんの3つの方法で調べることができます
2009.08.17:
dmmitchi
:[
メモ
/
□ リンク集
]
Wikipediaフリー百貨辞典
Wikipediaフリー百貨辞典
---------------------------
オープンコンテントの百科事典です。基本方針に賛同していただけるなら、誰でも記事を編集したり新しく作成したりできます
2009.08.17:
dmmitchi
:[
メモ
/
□ リンク集
]
OS
OS(Operating System:オペレーティングシステム)
------------------------------------------
UNIX・MacOS・Windowsという3大OSがあり、
パソコン本体を制御する基本ソフトのことで
世界中のほとんどのコンピュータが
Windows、MacOS、UNIXのどれかを採用しています
その中でもWindowsとMacOSは普及率が高く、
家庭で使われているパソコンはこの2つのどらかのOSで動いています
UNIXはサーバーとして最も多く使われているOSですが
個人で使うにはある程度の知識が必要になります
2009.08.17:
dmmitchi
:[
メモ
/
□ 用語集
]
RSS
RSS(RDF Site Summary)
-------------------------------------------------
RSSとは、Webサイトの見出しや要約などのメタデータ(データに関する情報)
を構造化して記述する
XML
ベースのフォーマット。
主にサイトの更新情報を公開するのに使われている
RSSリーダーを用いることで、
お気に入りのWebサイトの更新情報を効率的に集約し把握することができる
2009.08.17:
dmmitchi
:[
メモ
/
□ 用語集
]
次のページ>>
□ 初 級
□ 3 級
□ 用語集
□ リンク集
ケータイサイト
プロフィール
問い合わせ
ALL
メモ
メール
アンケート
カレンダー
ブックマーク
マップ
キーワード
スペシャル
プロジェクト
ログイン
All Rights Reserved by dmmitchi
powered by
samidare
ケータイサイト
問い合わせ
プロフィール
Powered by
Communications noteβ