エキスパート

1. デザインの基本原則
近接 関連する要素をまとめてグループ化し、
グループとグループの間に適切な間隔を空ける
整列 各要素を意図的に整列して配置する
反復 特定の要素を繰り返し登場させる
コントラスト（対比）
重要なものを目立たせたり、情報を探しやすくする。
見出しと本文の違いなど、要素同士の違いをはっきりと
表現する

2. トリミング

3. リサイズ

4. グリッドデザイン
縦横に引かれた細かい基準線（グリッド）に
沿って画面を分割し、要素を配置する方法

5. 黄金比 １：１.６１８
（＝５：８）・
・
白銀比 １：√２
（＝５：７）・
・
（＝１：１.４１４）・
・
用紙サイズ：A3.A4.A5など

6. シンメトリー 左右対称
アシンメトリー 左右非対称

7. ベタ組み
ツメ組み
コ ミ ﾕ ニ テ ｲ
コ ミ ﾕ ニ テ ｲ
文字間の調節なし
字面の幅を基準に詰める

8. アンチエイリアス
フォントのエッジを滑らかにし、輪郭を美しく見せること
カーニング
文字間の調整
混植
英数字やかななどのフォントを変更する。
和文フォントを指定後に欧文フォントを指定すると、
英数字のにみ欧文フォントが指定され、混植となる。
ジャンプ率
フォントの大きさの違いの度合い

9. 色の基本 ＜色の三属性＞
色相 彩度
明度
色味 色の鮮やかさ
色相環

10. メインカラーベースカラー アクセントカラー： ：
７０ ２５ ５
白やグレーなどの
無彩色や
メインカラーの
高明度（白っぽい色）
ロゴに使われる
コーポレートカラー
リンクテキストなどに使う
補色（色相環上で対極
になるカラー）など

11. Webセーフカラー
「00」「33」「66」「99」「cc」「ff]
の６種類の色番号を組み合わせたカラーコード。
配色パターンは216色。
Webカラーとも。

12. GIF形式
最大で２５６色。
マーク、イラスト、ロゴ。
画像の一部を透明化は可能。
半透明は不可。
JPEG形式
フルカラー（1670色）をサポート。
写真、グラデーションを用いたアートワーク。
透明化は不可。
非可逆圧縮（圧縮率を高くするほど画質が劣化し元に戻せない）
PNG形式
インデックスカラー（256色）を扱う「PNG-8」
フルカラー（1670色）を扱う「PNG-24」
半透明可能。
データサイズが大きい。
（参考）PSD形式・・・Photoshopで利用されるファイル形式
ビットマップ形式の特徴

13. SVG形式
・拡大・縮小しても画質が損なわれない。
・点とそれを結ぶ線（ベクター、ベクトル）
ベクター形式の特徴

14. HTML5から変わったもの
<address></address>
著作権表示 → 連絡先を表す要素
<small></small>
単に小さい文字で表示
→ 補足的な文字列、注釈や細目
footerの著作権表示
footerに著作権表示しかない場合は不要
<strong></strong>
強調 → 強い重要性を表す要素

15. audio要素・・・音声の埋め込み
video要素・・・動画の埋め込み
canvas要素・・・図形を描く
HTML5の追加タグ

16. HTML特殊文字
&amp; & アンパサンド
&lt; < 小なり
&gt; > 大なり
&nbsp; 空白
&copy; © コピーライト
&quot; “” クォーテーション

17. FTP(Fille Transfer Protocol)
ファイル(HTML,CSS,JavaScript,画像など)をWebサーバーに
転送するときに用いられるプロトコル
HTTP(HyperText Transfer Protocol)
Webコンテンツを送受信するときに用いられるプロトコル
SFTP(SSH File Transfer Protocol)
SMTP(Simple Mail Transfer Protocol)
ファイルを暗号化された通信路で送受信するときに
用いられるプロトコル
メールを送信するときに用いられるプロトコル
HTTPS(HyperText Transfer Protocol Security)
通信を暗号化したいときに用いられるプロトコル

18. バリデーション
検証・確認
ソースコードの記述の誤りや、W3Cの仕様に準拠しているか
調べる
リセットCSS
Webブラウザーごとの異なるスタイルを無くし、
表示を統一する
W3C(World Wide Web Consortium)
Web技術の国際的な標準規格化の推進を目指す非営利団体

19. ファーストビュー
Webページでスクロールしなくても見える１番上の部分

20. Webフォントとは
サーバーにあるフォント＝Webフォントを使う
本来、webブラウザは
各端末にインストールされているフォントで
文字を表示するようになっている
ブラウザによって異なる表示になってしまうこともある

21. Webフォントのメリット
１.どのデバイスでも同一に表示できる
２.レスポンシブデザインに対応しやすい
フォントの表示がユーザの端末に依存しない
画像フォントを使用した場合、サイズに合わせて
複数の画像フォントの用意が必要だが、
Webフォントを使えば、CSSとHTMLだけで表示させることができる
ビットマップ形式よりデータ転送量が少ない。
３.画像でテキストを表示するよりデータ量が少ない

22. Webフォントのデメリット
１.費用が発生する場合がある
２.フォントデータが重く、ページの表示速度が遅い
以前よりは非常に早くなっている

23. ユーザビリティ・アクセシビリティ
＜PDFファイルへのリンクの表示方法＞

24. ユーザビリティ・アクセシビリティ
＜PDFファイルへのリンクの表示方法＞

25. ユーザビリティ・アクセシビリティ
＜動画の掲載方法＞

26. ユーザビリティ・アクセシビリティ
＜動画の掲載方法＞