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

提供: Internet Web School

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

2012年6月27日 (水) 05:14時点における版

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

目次

概要

 Webページのデザインにはどのようなことを留意したらいいでしょうか?

 次のような項目についてあらかじめ決めておくことが必要です。

(1) ページの接続関係

  • 一番トップになるページはどのようなものか?
  • そこから直接リンクして飛べるページは何と何か?
  • それらから更に飛べるページは何か?
  • 全体の接続関係を矢印を使った線図で表すとよい。

(2) 各ページの特別な機能は?

  • 閲覧している人がデータの入力ができる(買い物の時の配送先など)

(3) 各ページの基本構成を決める。

  • 全体の配色は? 背景の色、背景の分割。それらの配色。
  • 配色(Wikipedia)

   

(4) メニューの形と並べる位置

  • 左にたてに並べて配置するか、上部に横に配置するか?
  • メインのロゴ配置と形。多くは左上
  • [[ロゴタイプ(Wikipedia)>wikipedia_ja:ロゴタイプ]]

(5) メインの写真

  • 使うとしたらその位置。
  • 文章ブロックの個数と位置。文字の色、大きさ、フォント。
  • またロゴに加えて、発信者のシンボルとしての画像データを入れることもある。
  • [[シンボル(Wikipedia)>wikipedia_ja:シンボル]]

またロゴの文字や、ブロックごとの見出し、ページの本文中のフォントも何にするか検討が必要です。

  • [[フォント(Wikipedia)>wikipedia_ja:フォント]]

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

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

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

CAIテスト

個人用ツール