Yasushi Noguchi Class
class resume organized by Y.Noguchi
ボックスの概念
まずは、ボックスの概念を理解することが重要になります。Illustratorでグリッドを作ったように、スタイルシートではボックスを作って組み合わせながら全体のレイアウトを作っていくという特徴があります。以下は、余白であるmarginやpaddingといったプロパティが、ボックスのどの場所をさしているかを説明した図です。
margin, paddingの指定の仕方
marginやpaddingの指定は、慣れないとなかなか分かりづらいものなので、この機会に覚えておきましょう。
webサイトの制作において、画像の加工は必須になる。
写真などの画像は、補正を行なうことによって大きく見栄えが変化するので、自身の持っている画像やフリー素材サイトからダウンロードした画像など、適切な条件で撮影されていない写真は修正してから利用すること。
以下は、適正な色の画像と比べ修正が必要な画像
適正な画像
アンダー
画像が全体的に暗すぎて暗部がつぶれている。黒い部分は修正不可能。
オーバー
画像が全体的に明るすぎて明部がつぶれている。白い部分は修正不可能。
コントラストが高すぎる
コントラストが高すぎて固い感じの印象を受ける。
コントラストが低すぎる
コントラストが低すぎて眠い感じの印象を受ける。
webの場合、様々なデザインがあるが、レイアウトの構成要素は意外に少ない。
以下はその一例。
よくあるレイアウト1
よくあるレイアウト2
よくあるレイアウト3
ブログタイプ1
ブログタイプ2
ブログタイプ3
ビジュアル要素が強いレイアウト
webレイアウトの特性
webの特性
webはPhotoshopやIllustratorでのデザインとは異なり、最終的な完成品はwebサイトを見ているユーザの環境（たとえばWindowsかMacか、どのブラウザか、ウィンドウをどれくらいの大きさにしているか、など）によって大きく見栄えが変わる。またhtmlによって記述しなければいけない。webのレイアウトを考える際には、これらの特徴を理解してからプランを立てる必要がある。
サイトを見ている人のPcがどれくらいのモニタのサイズか、どれくらいウィンドウを拡げているか、によってサイトの見栄えは大きく変わってくる。現在のところ、1024×768 (XGA)サイズをレイアウトの基準とすることが多いと言われている。しかし、この値はコンピュータの性能とともに変化するので絶対的なものではない。画面にはOSのメニューやブラウザのメニューなども表示されるので、実際にレイアウトで使用できる範囲は画面サイズよりも小さくなる。以下はその表となっている。
グリッドによるレイアウト
IllustratorやPhotoshopのグリッドを使うと、簡単に統一感のとれたレイアウトを行なうことができる。また、スライスなどの機能を使ってボタンなどをgifに変換する時にも便利だ。
ここでは、Illustratorによってカラーカンプを作る際に使うグリッドを紹介する。
グリッドは以下のメニューから選択する。
表示されないときは、表示メニューからグリッドの表示を選び、さらにグリッドにスナップやポイントにスナップもONにしておく。このことによってオブジェクトを作成した時に勝手にグリッドに沿って生成してくれる。
さらに、グリッドの単位を変更する。Illustratorメニューの以下の項目を選ぶ。
ここでは、50pixel単位で分割数を10としてみよう。
このことによって、グリッドが5で割り切れる単位になるので、長さも数えやすなって作業が楽になる。
さらに上の表に従って、970 x 600の矩形の中でカラーカンプを作ってみよう。
○フリーの写真素材
http://www.yunphoto.net/
http://sozai-free.com/
○トップページの参考
flashなどで作られているのもありますが、あくまでもデザインの印象が強いものを集めています。同じようなものを作れという事ではありません。
全体的に見やすく、レイアウトや写真の使い方が参考になるサイト
http://www.potterybarn.com/
http://www.bergdorfgoodman.com/
http://www.lupicia.com/
http://www.afternoon-tea.net/main.html
http://www.francfranc.com/
デザインが個性的
http://www.choppingblock.com/
http://www.todsgroup.com/
http://www.nike.jp/front/index.asp
http://club.lego.com/eng/
http://www.benkaufman.com/
http://ayakaito.com/log/
http://howardrevis.com/
テキストは、その属性（サイズ、行間、色、カーニング、トラッキング）をコントロールすることによって、その印象を大きく変えることができる。
webサイトは多くの人の目に触れることを前提として作ることが多いので、極力見やすい文字のデザインを考える必要がある。
サイズ
説明するまでもなく、文字の大きさのこと。文字パレットの以下の項目を操作する。
行間
行の間隔。初心者は以外にこの行間に気を使わないことが多い。一般的に、行間はある程度空けた方が読みやすい。始めは文字サイズの150%ぐらいを設定してみるのがいいかもしれない。
カーニング
部分的に文字間の幅を調整すること。
Illustratorでは以下の項目を操作する。
下のサンプルは、FとGの間をカーニングによって広げたもの。
トラッキング
均等に文字間の幅を調整すること。
Illustratorでは以下の項目を操作する。
下のサンプルは、トラッキングによって全体的に字間を広げたもの。
和文およびと欧文フォントは非常に多くの種類があるが、大別すると以下のように分類できる。
1. 和文フォントの種類
モリサワのサイトより引用。
2. 欧文フォントの種類
セリフ（ストロークの端に飾りがついた書体）
オールド・フェイス
Caslon （キャスロン、あるいはカスロン）、Century (センチュリー)
ギャラモン（Garamond, 或はガラモンド）、タイムズ・ニュー・ローマン (Times New Roman) など
モダン・フェイス
ボドニ (Bodoni)、ディドー (Didot) など
トランジショナル
バスカヴィル (Baskerville)、フルニエ (Fournier) など
スラブセリフ
Clarendon (クラレンドン)、Rockwell (ロックウェル)、Egyptienne F (エジプシャンエフ)など
サンセリフ（セリフのない、均一な太さのストロークをもつ書体）
代表的なサンセリフ
ヘルベチカ (Helvetica)、ユニバース (Univers)、フルティガー (Frutiger)
ヒューマニスティック・サンセリフ (Humanistic Sans-Serif)
ギル・サン (Gill Sans)、オプティマ (Optima)
ジオメトリック・サンセリフ (Geometric Sans-Serif)
フーツラ (Futura)、アヴァン・ギャルド (Avant Garde)
スクリプト（筆記体などの手書き文字に近い書体）
ディスプレイ (POP) 書体
ブラックレター
フラクトゥール
2. フォントメーカー
代表的なフォントメーカーは以下の通り。
モリサワ
アドビ
リョービ
大日本スクリーン
字游工房
ITC（欧文）
ライノタイプ（欧文）
それぞれの書体には、ファミリーという、太さなどが違ったセットがある。これをファミリーと呼ぶ。
一般的に、ファミリーの種類が多い書体は、デザインするときに扱いやすいと言われている。
例えば、書体の雰囲気を変えずにある部分だけ強調したい場合には、太めのファミリーと使うなどの方法が考えられる。
一般的には、EL (Extra Light), L (Light), R (Regular), M (Medium), B (Black), EH (Extra Heavy), U (Ulta)等の太さの違いや、斜体 (Italic, Oblique)等のファミリーがある。
以下は、リュウミンのファミリー。（モリサワのサイトから引用）。
http://www.morisawa.co.jp/
リュウミンの組見本
活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸。（wikipedia）
wikipediaにおけるタイポグラフィの定義
現代風に言い直せば、「文字を使用してそれを適切に組むことによって、文章の見た目の美しさや読みやすさをデザインする方法」となる。
スタイルシート(CSS, Cascading Style Sheets)
スタイルシートとは、テキストのデザインやレイアウトなどのウェブページの「表示」に関連する機能を定義したものです。
インターネットの黎明期にはhtml上ですべて行なわれていたこの「表示」に関する技術は、近年特にブログの登場などとともにCSSとなって急速に普及し、webデザインを行なうものにとって必須の知識となっています。
1. CSSファイルに記述してHTMLファイルに読み込む
htmlの<head> </head>の中に以下のコードを書き込む。
<link rel=”stylesheet” type=”text/css” href=”text.css” />
さらに、text.css（名前は任意）というファイルを作ってその中にcssの定義を書く。
この、text.cssはxhtmlファイルと同じディレクトリにおくのが普通。が、特に決まりはない。
ファイルを作ったら、先ずは以下のコードを書き込んでみよう。
（授業中に解説）
2. CSSの書き方（シンプルセレクタ）
書き方は以下の通り。
セレクタ { プロパティ: 値 }
一つのセレクタに複数のプロパティを与える場合はセミコロンで区切って改行する。
1
2
3
4
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
具体例。
1
2
3
4
body {
padding: 20px;
font-size: 100%;
}
-タイプセレクタ
例 h1 { font-family: sans-serif }
-全称セレクタ
例 * { margin: 0; padding: 0; }
-グループ化
例 h1, h2, h3 { …
16進数での表記
CSSでの色彩の指定は、基本的に16進数で行ないます。以下の図を参照してください。
例えば、赤は00~ffまであります。
この場合は、0〜255までの値を表すことができます。
0は「00」、15は「0f」、16は桁が繰り上がって「10」、255は「ff」となります。
0から15の値は、webの場合は以下の通りに表記されます。
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
