ホームページ作成とアップロード/Webデザイン

提供: Internet Web School

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

例えば次のページはフォントの提供者であると同時に、そのホームページが種々のフォントをうまく使ったデザインをしている、とあどいう意味で参考になります。英文のページであるすが、見てわかると思います

http://www.emigre.com/

このページには、3Dのフォント、マウスを持ってゆくと表示される図柄(次章以下のジャバスクリプトを後で参照)など機能的な仕組みもなされています。

その他の写真やリンクの位置

CAIテスト

個人用ツール