http://www.advanceddesigntech.com ホームページデザインの基礎を教えます Tue, 17 Aug 2010 20:22:49 +0000 http://backend.userland.com/rss092 ja CSSは略語で、正式にはカスケーディング・シートといいます。 HTMLだけでは表現できなかった 細かいテンプレートのデザインが可能になります。 一つのシートが完成すると、色の違いや枠など、応用して使えるのでとても便利です。 最近はテンプレートをCSSで作る方が増えています。 HTMLだと、硬くなりがちなものも、CSSで作ると見栄えがよくなったりします。 http://www.advanceddesigntech.com/archives/18 文字サイズや画像サイズの統一をすると、シンプルなものになります。 その中にアクセントや区切りを入れれば、読みやすい、見やすいものが出来ます。 アクセントは画像サイズが大きいものを入れ込んだり、見出しを枠で囲んだものを入れてもいいと思います。 これは強調したい！という箇所があれば、その部分だけ文字を太くしたり、赤くしたりします。 強調文字は多用するとごちゃごちゃしますので、必要最低限にとどめておきましょう。 セールスレターの場合、その限りではありません。あちらはちょっと大げさにつくります。 http://www.advanceddesigntech.com/archives/17 携帯サイトでは、細かな装飾を施すことが出来ません。 そのため、スタイルシートを使えないのです。 見やすいページを作るためには、文字数も限られてきますが、 携帯からアクセスした経験があるなら分かると思います。 開きづらい、上手く表示できない、見づらい そのようなものは敬遠されるので、シンプルで見やすいものを作るのです。 PCサイトと連動して作るなら、 配色を統一させると良いのです。 http://www.advanceddesigntech.com/archives/16 ホームページをデザインするには、スタールシートを知らなければなりません。 ただしいTHMLとCSSを使って行いますが、 ラフデザインを書いて当てはめていきます。 難しいのは、どこに何を配置するか、色味をどうするか、効果的な画像を取り入れるかになると思います。 これでいいんです！という答えが無いため、いくつか作ってみるのです。 カラーについての知識があれば、ホームページの内容に沿ったデザインが出来ると思います。 HTMLとCSSは基本があるので、使っていくうちに覚えてしまうのです。 http://www.advanceddesigntech.com/archives/15 デザインの良いホームページを作っても、 カテゴリ（＝メニュー）がやたら多かったり、数的に適当であっても中身が沢山あるものは 良くありません。 どこを見ていいのかわからなくなり、他のサイトへ飛んでしまう可能性が大なのです。 カテゴリを分けたら、小カテゴリで分けると見やすくなります。 http://www.advanceddesigntech.com/archives/14 ホームページを作る際に、ユーザーに興味を持ってもらうため リード文とイメージ画像などを配置する事になります。 この時に、時にはイメージ画像に重ねてリード文をまとめた方が よりコンパクトにすっきりと収まる場合があります。 読ませたいリード文を効果的に見せるよう、 字体や背景イメージを工夫し、情報を整理するようにしましょう。   http://www.advanceddesigntech.com/archives/13 いざ作ったホームページが どうも統一感がなくなってしまった…という場合の 対処法について書いていきたいと思います。 まずは、ビュレットについて統一されているかを確認しましょう。 ビュレットとは、リンクテキストの頭につけるマークのことです。 トップナビゲーション、サイドメニュー、コンテンツ内リンクなど、 他ページへのリンクが張られているテキストのビュレットは 同じ形状のものになっているでしょうか。   http://www.advanceddesigntech.com/archives/12 ホームページを作る際には、 まず全体のラフデザインを作ってから 細部を作り込むといった手順が一般的です。 しかし、いざ完成してみると、 なんだかまとまりのないページになってしまうことがあります。 ラフデザインの段階では統一感のあるデザインであったものが、 メニュー部分を担当者Ａさん、トップナビゲーションボタン部分を 担当者Ｂさん、コンテンツ部分を担当者Ｃさん…と別人が作業を したために微妙に統一感のないページになってしまった、という事ですね。 ベースカラーなどの基本的要素は統一されているものの、 各担当者がそれぞれ独自に細かな修正を加えたため、 全体としてちぐはぐになってしまう、ということです。 http://www.advanceddesigntech.com/archives/11 サイトデザインを作る際に、 とりあえずphotoshopなどでラフデザインを作るというのは 一般的な作業手順のようです。 ホームページとして細部を作り込む前に、 ただのポスターのように全体のイメージ画を作ることで、 依頼者と作業者の認識をすり合わせる事ができるため、 完成間際になって大幅なデザイン修正が発生する事を防止できます。 ラフデザイン案が確定したら、ホームページとして作り込む工程に進みます。 http://www.advanceddesigntech.com/archives/10 優れたサイトとは、凝ったデザインのサイトだけではありません。 では、例えばあなたが「良いサイトだな」と思うサイトを いくつか挙げてみてください。 それらのサイトのうち、 凝ったデザインのものはいくつありますか？ デザインはシンプルだけど、知りたい情報がすぐに探せて 情報量も豊富なサイトはありましたか？ ユーザーがサイトに何を求めるかによって、 「良いサイト」の基準は変わるものです。 優れたサイトを作るためには、サイトの目的とユーザー層を 明確にしておく必要があるのです。 http://www.advanceddesigntech.com/archives/9