ホームページ作成とアップロード/Webデザイン
提供: Internet Web School
(版間での差分)
(ページの作成: ホームページ作成とアップロード ＞ Webデザイン == 概要 == TBA == CAIテスト == *…) |
(→概要) |
||
| 4 行: | 4 行: | ||
== 概要 == | == 概要 == | ||
| - | + | Webページのデザインにはどのようなことを留意したらいいでしょうか？ | |
| + | |||
| + | 次のような項目についてあらかじめ決めておくことが必要です。 | ||
| + | |||
| + | *(1) ページの接続関係 | ||
| + | **一番トップになるページはどのようなものか？ | ||
| + | **そこから直接リンクして飛べるページは何と何か？ | ||
| + | **それらから更に飛べるページは何か？ | ||
| + | **全体の接続関係を矢印を使った線図で表すとよい。 | ||
| + | *(2) 各ページの特別な機能は？ | ||
| + | **閲覧している人がデータの入力ができる（買い物の時の配送先など） | ||
| + | *(3) 各ページの基本構成を決める。 | ||
| + | **全体の配色は？ 背景の色、背景の分割。それらの配色。 | ||
| + | |||
| + | * [[wikipedia_ja:配色|配色(Wikipedia)]] | ||
| + | |||
| + | メニューの形と並べる位置は？ 左にたてに並べて配置するか、上部に横に配置するか？ | ||
| + | メインのロゴ配置と形。多くは左上 | ||
| + | |||
| + | * [[ロゴタイプ(Wikipedia)>wikipedia_ja:ロゴタイプ]] | ||
| + | |||
| + | メインの写真を使うか、使うとしたらその位置。 | ||
| + | 文章ブロックの個数と位置。文字の色、大きさ、フォント。 | ||
| + | |||
| + | またロゴに加えて、発信者のシンボルとしての画像データを入れることもある。 | ||
| + | |||
| + | * [[シンボル(Wikipedia)>wikipedia_ja:シンボル]] | ||
| + | |||
| + | またロゴの文字や、ブロックごとの見出し、ページの本文中のフォントも何にするか検討が必要です。 | ||
| + | |||
| + | * [[フォント(Wikipedia)>wikipedia_ja:フォント]] | ||
| + | |||
| + | 例えば次のページはフォントの提供者であると同時に、そのホームページが種々のフォントをうまく使ったデザインをしている、とあどいう意味で参考になります。英文のページであるすが、見てわかると思います | ||
| + | |||
| + | http://www.emigre.com/ | ||
| + | |||
| + | このページには、３Dのフォント、マウスを持ってゆくと表示される図柄（次章以下のジャバスクリプトを後で参照）など機能的な仕組みもなされています。 | ||
| + | |||
| + | その他の写真やリンクの位置 | ||
== CAIテスト == | == CAIテスト == | ||
* [[cai_ja:COMHOC00010007|CAIテストのページへ]] | * [[cai_ja:COMHOC00010007|CAIテストのページへ]] | ||
2012年6月27日 (水) 05:12時点における版
ホームページ作成とアップロード ＞ Webデザイン
概要
Webページのデザインにはどのようなことを留意したらいいでしょうか？
次のような項目についてあらかじめ決めておくことが必要です。
- (1) ページの接続関係
- 一番トップになるページはどのようなものか？
- そこから直接リンクして飛べるページは何と何か？
- それらから更に飛べるページは何か？
- 全体の接続関係を矢印を使った線図で表すとよい。
- (2) 各ページの特別な機能は？
- 閲覧している人がデータの入力ができる（買い物の時の配送先など）
- (3) 各ページの基本構成を決める。
- 全体の配色は？ 背景の色、背景の分割。それらの配色。
メニューの形と並べる位置は？ 左にたてに並べて配置するか、上部に横に配置するか？ メインのロゴ配置と形。多くは左上
- [[ロゴタイプ(Wikipedia)>wikipedia_ja:ロゴタイプ]]
メインの写真を使うか、使うとしたらその位置。 文章ブロックの個数と位置。文字の色、大きさ、フォント。
またロゴに加えて、発信者のシンボルとしての画像データを入れることもある。
- [[シンボル(Wikipedia)>wikipedia_ja:シンボル]]
またロゴの文字や、ブロックごとの見出し、ページの本文中のフォントも何にするか検討が必要です。
- [[フォント(Wikipedia)>wikipedia_ja:フォント]]
例えば次のページはフォントの提供者であると同時に、そのホームページが種々のフォントをうまく使ったデザインをしている、とあどいう意味で参考になります。英文のページであるすが、見てわかると思います
このページには、３Dのフォント、マウスを持ってゆくと表示される図柄（次章以下のジャバスクリプトを後で参照）など機能的な仕組みもなされています。
その他の写真やリンクの位置
