2010年06月22日

【第10回】WEBレイアウトの定番

WEBサイト(WEBページ)というのはだいたいこういうレイアウトになっているものが多い↓。

100622_a.gif


まあまあ、「自分がつくりたいサイトはこんなレイアウトじゃない!」と言うなかれ。夢はでっかく、でも地道にいきましょう。それに凝ったデザインのサイトでも、よく見ればこのパターンにあてはまることが多いのだよ。

ではパーツの説明。別にこういう名前でなければならないわけではない。ただWEBデザイナーは便宜的にこう呼ぶことが多い。

-----------------------------
【ヘッダ】
サイトの名前やロゴがある部分。そのほか、「HOME」「お問い合わせ」のボタンなんかもここに配置されている場合がある。

【トップイメージ】
サイトの趣旨や目的がひとめでわかる画像。たとえば病院のサイトなら、病院の建物の画像とか。病院のイメージ画像の上に、キャッチフレーズが書いてあったりもする。

【ナビゲーション】
サイトのメニュー。このパーツの位置はけっこうまちまちで、「ヘッダ」と「トップイメージ」のあいだにあったり、「ヘッダ」の上にあったり、後述するように「本文」の横にあったりする。まあ、趣味と使い勝手の問題。

【本文】
ここが本題の部分。一番多いのは、まず大見出しがあって、その下に、小見出し+文章、と連なっていくパターン。説明用の画像なんかも文章といっしょに載せる。

【フッタ】
ページ下部。この部分によくあるのが、「Copyright(c)2010 ○○○○ All rights reserved.」という著作権表示(実はあんまり意味ないのだが。まあ飾りみたいなもん)。それから、「際とマップ」、あと商用サイトなら「個人情報保護方針」のボタンがここにあることも多い。
-----------------------------

以上。よくあるパターンは、「ヘッダ」「ナビゲーション」「フッタ」は全ページ共通で、その他のパーツはページごとにデザインや内容がちがったりする。

もうちょっと細かくパターン分けしよう。

【本文が2段に分かれているタイプ】

100622_b.gif

(例)http://homepage3.nifty.com/nagomian-gettou/
WEBページの横幅は800px以内というのが標準(最近はだいぶん崩れつつあるが)だが、800pxもあるとけっこう横に長いのね。文章をそのまま載せると読みづらかったりする。

そういう意味もあってか、本文の部分が左右に分かれているサイトがけっこうある。「本文2」には何を載せるかというと、たとえばキャンペーン中の情報のバナーとか。「本文1」と「本文2」の左右が入れ替わっていてもよい。

さらには、3段組みになっているサイトもある。たとえばこことか。
http://www.infoseek.co.jp/

【ナビゲーションが右または左にあるタイプ】

100622_c.gif

(例)http://www.r-factory-partners.co.jp/tech/job.html
最初に、ナビゲーションが横1列に並んでいるレイアウトをあげたけど、このように縦に並べてもよい。ページ数が多いときとか特に。
また、全ページに横1列にメインのナビゲーションがあって、各ページごとにサブのナビゲーションが縦に並んでいるサイトもある。

ではさっそくサイトのトップページを作ろう!
たとえばこんな感じで↓。

100622_e.gif


あくまでもラフ案。サイト幅750px。背景は青、サイト本体は白、という風に色を変える(別に何色でもよいが)。横長のナビゲーションを採用。

サイトデザインは、Photoshop、Fireworksなどなんでもよいが、ここではFireworksを想定して話をすすめよう。

乞うご期待。
posted by にあごのすけ at 22:04| Comment(12) | デザイン・レイアウト | このブログの読者になる | 更新情報をチェックする

2009年03月03日

【第9回】美しい色の組み合わせとは(2)

前回、使用する色は2色または3色でいいという話をしたが、それだけではあまりにも漠然としすぎているので、もうちょっと具体的な話をしよう。

僕は配色については専門的な勉強をしたわけではなく、あくまでもカンでやっている。それでも指針としていることはある。

たとえば、PhotoshopとかFireworksとか、いわゆる「お絵かきソフト」の色設定を開くと、こんなダイアログが出てくる(以下はFireworksのもの)。

web_09a.jpg

下にある「色合い」「鮮やかさ」「明るさ」の3つの数値がポイント。これでどんな色になるかが決まるわけだね(Photoshopだと「色相」「彩度」「明度」という表現になっている)。

僕がよくやるのは、この3つの要素のうち、1つまたは2つを固定して色を作ること

たとえば、鮮やかさ100・明るさ100に固定して、色合いだけを変化させるとこんな感じになる↓。

web_09b.jpg


色合いだけを117に固定して、鮮やかさと明るさを変化させるとこんな感じになる↓。

web_09c.jpg


なんとなく色の風味がそろっているでしょ? こうして、3つの数値のうち2つまたは1つは固定させて色を作ると、バランスの悪い色使いになることはあまりない。

一度お試しあれ。
posted by にあごのすけ at 16:35| Comment(7) | 配色 | このブログの読者になる | 更新情報をチェックする

2009年02月27日

【第8回】美しい色の組み合わせとは(1)

サイトの印象やデザインの良し悪しを決める大きなポイントのひとつは、やっぱり色の組み合わせだろう。

どうしたら美しい色の組み合わせができるのか?

あるとき、広告制作を長年やっているデザイナーに聞いたら、こんな答えが返ってきた。

「色は3種類が基本!」

彼が言うには、美しいデザインというのは色数が少ないことが多いとのことである。

もちろん厳密に3つだけしか使ったらいけない、というわけではなく、3系統にしぼったほうがいい、という意味だが。

さら彼は続ける。

「もっと言うなら、色は2つだけでいい!」

基本のカラーは2色にしぼる。3色目はあくまでもワンポイントとして使う。

たとえば基本の色を青系統と白の2色にし、ワンポイントとしてちょっとだけ赤系統の色を使うとか。

もっとも、これはあくまでも考え方のひとつで、万国旗みたいにたくさんの色を使ったサイトがダメというわけでない。
タグ:配色 COLOR
posted by にあごのすけ at 14:25| Comment(0) | 配色 | このブログの読者になる | 更新情報をチェックする

【第7回】パス:WEBの住所と道しるべ(後編)

ずいぶんと間が空いてしまった(汗)。

さて、前回はリンクのしかた絶対パスについて説明した。

今回は相対パスの説明だ。

そのまえに補足説明。URLが表わしているものは何か?

たとえばhttp://www.○○○.co.jp/aaa/bbb/ccc.htmlというURLがあったとき、その意味は図解すると次のようになる。

web_06a.gif

大元としてhttp://www.○○○.co.jpという固有の場所があり、その中に「aaa」というフォルダがあり、さらにその中に「bbb」というフォルダがあり、さらにその中に「ccc.html」というファイルがある。

スラッシュ「/」で区切られているのはそういう意味なんだね。まあこれは住所といっしょ。「東京都A区B町Cマンション」という地名があったとすれば、それは要するに「東京都の中のA区の中のB町の中のCマンション」という意味だよね。

ではいよいよ相対パスの話。

たとえ話をしよう。街でおじいさんに道を聞かれたとする。

「このあたりに郵便局があるはずなんじゃが……」

そのときもしも、

「郵便局なら東京都A区B町1−1−1にあります」

なんて答えたら、おじいさんはますます路頭に迷うにちがいない。こういうときは、

「この道をまっすぐ行って2つ目の角を曲がったところにあります」

と言うのが親切な答え方だろう。

いま自分がいる地点を基準にして場所を教える方法。この方法はWEBの世界ににもあって、相対パスと呼ばれている。

以下のようなサイトがあったとしよう。

web_06b.gif

index.htmlとc.html、それからフォルダが2つある。フォルダaaaの中にはa.html、フォルダbbbの中にはb.htmlがある。

index.htmlから見て、たとえばc.htmlにリンクするときは、普通に次のように書けばよい。

<a href="c.html">Cにリンク</a>

じゃあindex.htmlからa.htmlにリンクするときは?

そのときは、パスを、aaa/a.htmlと書く。最初に言ったように「aaaの中のa.html」という意味だな。リンクするときの書き方は次のとおり。

<a href="aaa/a.html">Aにリンク</a>

さあ、このへんからちょっと難しくなる。a.htmlからindex.htmlにリンクするときは?

そのときは「../」という書き方を使う。これは「1個上の階層」という意味。言い換えると「自分がいるフォルダの外」という意味になる。

だからもし、2個上の階層を表わすときは「../../」とつなげて書く。

タグの書き方としては次のようになる。a.htmlからindex.htmlにリンク。

<a href="../index.html">Aからindexにリンク</a>

応用として、a.htmlからb.htmlへとリンクする場合はこのように書く。

../bbb/b.html

ちょっとややこしく見えるが、そんなに驚くことはない。見たまま理解すればよい。つまり、「a.htmlから見て、いったん上の階層に行って(つまりaaaのフォルダから出て)、今度はbbbのフォルダに入ってb.htmlに行く」という意味。

リンクのタグで書けば次の通り。

<a href="../bbb/b.html">AからBにリンク</a>

以上で相対パスの説明は終わり。

最初はちょっと戸惑うかもしれないけれど、慣れればたいしたことはない。

相対パスを使わずに全部絶対パスで書く、なんてこともできるのだけれど(汗)。面倒くさいし、たとえばサイトのドメインを変更する、なんてことになった場合にはパスを全部書き直さないといけなくなってたいへんだ。

自分でウェブサイトを作るときは、相対パスは非常に便利であることに気づくはずだ。
posted by にあごのすけ at 12:48| Comment(2) | サイト構造 | このブログの読者になる | 更新情報をチェックする

2009年02月05日

【第6回】パス:WEBの住所と道しるべ(前編)

ウェブサイトやホームページを作るときにどうしても必要になってくるのがリンクだ。

リンク。他のページに行けるルートをつくること。簡単に言うと、ボタンをクリックして他のページに行けるようにすること。

リンクするためのタグはこうだ。

<a href="○○○○"> 次のページへ </a>

「次のページへ」の部分には、何か好きな言葉を入れればいい。

じゃあ「○○○○」のところに何を入れるのかというと、パスである。

パスというのはウェブ上の住所や道しるべのようなもの。絶対パスと相対パスの2種類ある。

まずは絶対パスの説明をしよう。

絶対パスというのはいわゆるURLのこと。Yahoo!ならhttp://www.yahoo.co.jp/だし、Googleならhttp://www.google.co.jp/だ。これは例えるならば、「東京都港区○○町・・・・・・」といった住所みたいなもの。

例として、ここではこのブログの前回の記事に飛ぶリンクをつくってみよう。

<html>
 <head>
  <title>リンクのサンプル1</title>
 </head>
<body>
 <a href="http://web-teach-yourself.seesaa.net/article/113612385.html">第5回の記事にジャンプ</a>
</body>
</html>


これを例によってhtml形式で保存して、ブラウザで見ると次のようになる。

sample_06a.html

青い文字で下線つきで「第5回の記事にジャンプ」の文字が表示され、クリックすると実際に第5回の記事のページに行くと思う。

さらに、同じウィンドウじゃなくて新しいウィンドウでページを開きたいときは、次のように書けばいい。

<a href="○○○○" target="_blank"> 次のページへ </a>

タグにtarget="_blank"をつけ足すだけ。お試しあれ。
posted by にあごのすけ at 18:17| Comment(0) | サイト構造 | このブログの読者になる | 更新情報をチェックする

2009年02月03日

【第5回】絵の具を混ぜるように色をつくる

しばらく記号だらけの話が続いたから、今回はもうちょっとヴィジュアルな話をしてみよう。

WEBでの色の作り方

と言っても、結局はタグとかの話になるんだけどね。

ウェブで色を表わすときは、RGBという方式を使う。

レッドのR、グリーンのG、ブルーのB。この3色を混ぜ合わせて色を作るのだ。テレビもものすごい間近で見れば、同じ赤青緑で色を表現してるのがわかるよね。

さて、WEBで色を表現する方法。たとえばは次のように表現する。

#FF0000

はこう。

#00FF00

はこう。

#0000FF

さらにはこう。

#000000

最初の「#」は、「これは色を表わしています」という記号。

あとの6桁の数字(と記号)は、なんとなく法則性がわかったと思う。1、2番目が「赤」、3、4番目が「緑」、5、6番目が「青」を表わす。

で、当然気になってくるのが、「このFFってなに?」ということだと思う。

ここからちょっと説明がややこしいのだが……これもれっきとした数字なのだ。16進数で表わされた数字である。

普通の数字(10進数)は、00からはじまって、01、02、03、……09まできて、桁が上がって10になる。

16進数も最初はいっしょ。00からはじまって、01、02、03、……でも09で止まらない。次は0A、0B、0C、0D、0Eまで続き、ようやく桁が上がって10になる。

つまり、普通の数字は10数えるごとに桁があがるのだけれど、16進数の場合は16数えるごとに桁が上がる。

00から始まって、最後はFFで終わる。つまりRGB方式の場合、1色につき16×16=256の段階の色を表現できるわけだ。

これが3色あるわけだから、256×256×256=16777216。つまりウェブでは原理上、約1700万色を作り出せる。

ここでおぼえたことを活用するために、新しいタグをおぼえよう。

<font> 〜 </font>

文字のフォントやカラーを設定するタグ。これを次のように書くと、文字の色を指定できる。

<font color="#○○○○○"> 〜 </font>

これを使って、こんなHTMLファイルを書いてみよう。


<html>
 <head>
  <title>色の見本</title>
 </head>
<body>
 <p><font color="#FF0000">赤</font></p>
 <p><font color="#00FF00">緑</font></p>
 <p><font color="#0000FF">青</font></p>
 <p><font color="#FFFF00">黄</font></p>
 <p><font color="#00FFFF">水色</font></p>
 <p><font color="#FF00FF">ピンク</font></p>
 <p><font color="#000000">黒</font></p>
 <p><font color="#888888">灰色</font></p>
 <p><font color="#FF6666">オレンジ</font></p>
 <p><font color="#008888">青緑</font></p>
 <p><font color="#DDDD88">肌色</font></p>
 <p><font color="#AA5555">茶色</font></p>
 <p><font color="#AA0055">紫色</font></p>
</body>
</html>


<p> 〜 </p>は、第4回でやったとおり、段落を表わすタグだ。

これを例のとおりメモ帳に書いて保存して、ブラウザで開いたら次のようになる。

sample_05.html

なんとなく色の作り方がわかっただろうか。

もちろん色はこれだけじゃない、1700万通りもあるのだから、あとは自分の混ぜ方次第。

ただし気をつけないといけないのは、普通の絵の具の混ぜ方ではだめで、光の三原色の考え方で混ぜないといけない(→Wikipedia参照)。その点注意。

もっとも、ホームページ制作ソフトを使えば、こんなややこしいことは考える必要はない。パレットから好きな色を選ぶだけ。

でも、WEBの仕事をやる場合はこのRGBの表記方法を知っておくことは必須だ

たとえば業者に色を伝えるとき、「なんとなく渋めのお茶みたいな色で……」と伝えるよりは、「#8DBF20でお願いします!」と言ったほうがまちがいなく正確に伝わるから。
posted by にあごのすけ at 13:54| Comment(0) | 配色 | このブログの読者になる | 更新情報をチェックする

2009年02月02日

【第4回】HTMLは「タグ」から成る

さてさて、第4回目です。

とりあえず(僕が)3日坊主にならなかったことを祝福。

前回メモ帳でつくった「sample.html」をもうちょっと詳しく解説。

web_03a.gif

簡単に説明すると、

<html> 〜 </html>。これはHTMLファイルの先頭と最後に書く。「これはHTMLなんですよ〜」という宣言みたいなもの。

<head> 〜 </head>のあいだには、このウェブページに関する情報を書く。表からは目に見えない。いったい何を書くかは、おいおい説明していく。

<body> 〜 </body>のあいだには、ウェブページの中身、表に見える部分を書く。たとえば文章とか画像とか、そういったもの。

大きくこの3パートに分けられる。

気づいたと思うけど、

<○○○> 〜 </○○○>

これをタグと言う。HTMLはほとんどタグだけで成り立っていると言ってもいい。

タグはたいてい、<○○○>ではじまって</○○○>で終わる。タグに囲まれた部分に何らかの効果が現れるわけだ。少ないけど、<○○○>だけで終わりのないタグもいくつかあるけど。

次にいくつか、代表的なタグを紹介しよう。

---------------------------------
<p> 〜 </p>
段落を表わす。これで囲まれた文章が1段落になる。次の段落を始めるときは、また新たに<p> 〜 </p>で囲む。すると改行される。

<br>
段落ではないけど単純に改行したいときにこれを書く。

<strong> 〜 </strong>
囲んだ文字を太字にする。

<i> 〜 </i>
囲んだ文字を斜体にする。

<hr>
横に区切り線を入れる。

<h1> 〜 </h1>
<h2> 〜 </h2>
<h3> 〜 </h3>
見出し。h1が大見出し、h2が中見出し、h3が小見出しで……と、h6まである。h1が一番文字がでかく、数字が下がるにつれて小さくなる。
---------------------------------

とりあえず今回はここまで(汗)。

タグはいろいろな種類がある。他に重要なものとしては、画像を表示させる<img>タグとか、他のページにリンクする<a>タグなどがあるけど、これについては別の知識が必要になってくるのでまた今度。

今回紹介したタグで、簡単なHTMLを書いてみた。

web_04a.gif

内容は、サンプル用に即興で書いたナンチャッテ小説なので気にしないでください。

とにかく、HTMLタグを見て、どんなウェブページになるのか想像してほしい。<p> 〜 </p>のように、始まりと終わりのあるタグはちゃんと両方セットで書かれているかどうかも要チェック。

これをブラウザでみたらこんな感じになる↓。

sample_04.html

だんだんウェブサイトらしくなってまいりました。

「文字だけのしょうもないページ」と思うなかれ。これが基本、プロになるには避けて通れない道。

気にすることはない。これにちょっと手を加えるだけで、驚くほどカッコいいページになって見違えるから。

それはまたおいおいと。
posted by にあごのすけ at 15:29| Comment(0) | HTML | このブログの読者になる | 更新情報をチェックする

2009年01月30日

【第3回】HTMLはウェブサイトの肝

さて、いよいよ本格的にウェブ制作の話に入る。

しかしまだまだ序の口、道のりは長いですよ。

ではさっそくHTMLの話を。

HTMLとは、まあ言うなればファイルの種類のひとつ、だと思ってくれたらいい。とにかく重要なファイル形式である。これがないとそもそもホームページやウェブサイト自体がまず成り立たない。

一番簡単なHTMLファイルの作り方は、メモ帳でつくること。Windowsにおまけでついている「メモ帳」ソフトのことね。

メモ帳を開いて、とりあえず以下のように入力してほしい。

web_03a.gif

段落をつけているのは、単に見やすいから。フツーに縦並びで書いてもいい。

入力し終わったら、ファイルを保存する。名前はとりあえずなんでもいい。「sample.txt」としよう。

保存したフォルダを開くと、ちゃんと。「sample.txt」があるはずだ。

web_03b.gif

もしも「sample.txt」ではなく、単に「sample」としか表示されないようなら、ウィンドウのメニューから「ツール」→「フォルダオプション」を選び、「登録されている拡張子は表示しない」のチェックをはずす。

web_03c.gif

すると、ちゃんと「sample.txt」と表示されるようになる。

さて、次のステップ。

「sample.txt」のファイル名を「sample.html」に変えてしまおう。するとあら不思議、アイコンがInternetExplorerのものに変わるはずだ。

すごい初歩的なことを言うと、「.txt」とか「.html」とかは拡張子と呼ばれていて、ファイルの種類を表わす。拡張子を「.html」に変えることによって、パソコンが「これはウェブページなのだな」と認識するわけだ。

これでもっとも簡単なウェブページが完成。「sample.html」をダブルクリックしてみよう。以下をクリックするとつくったサンプルが見られます。

sample.html

つくったウェブページが表示されました。

簡単なことをエラく長々と説明してしまったが、肝心な部分なので。

つくっては見たけれど理屈がわからないって?

だいじょうぶ。しくみについては次回からどんどんスピードアップして説明していくから。
posted by にあごのすけ at 16:31| Comment(0) | HTML | このブログの読者になる | 更新情報をチェックする

2009年01月29日

【第2回】ウェブサイトはマトリックスなのである

マトリックスという映画を知っているかな。

キアヌ・リーブスが主演していた映画。我々が生きているこの「現実」は、実はコンピュータが作り出した「仮想現実」だった!という話。映画の主人公であるノアはそれを知っていて、「現実」の本当の姿、つまりコンピュータのプログラムを見ることができるのだ。

ウェブサイトも実は似たようなところがある。

ホームページを見るとき、フツーはInternetExplorerとか、Firefoxとか、ブラウザを使って見るよね。でもだまされちゃいけない! あなたが見ているそのホームページ、実は仮想現実なのだ

ホームページの本当の姿をお見せしよう。

ブラウザのメニューから「表示」→「ソース」を選択する。

web_02b.gif


するとこんなワケのわからん記号の配列が出てくる。

web_02c.gif

これをHTMLソースと呼ぶ。そう、これこそがホームページの真の姿なのだよ。単なる記号と文字。それを「ブラウザ」という色眼鏡をとおすことによってはじめて、色も画像もあるホームページとして見えるようになるのだ。

もうちょっとくわしく説明しよう。

web_02a.gif


さきほど見た記号の配列は、HTMLと呼ばれているもの。主にウェブサイトの文章が書かれているファイル。

でもこれだけではサイトは機能しない。

HTMLを補佐する役割を持っているのが、スタイルシート(css)と呼ばれるファイル。文字の大きさや色、画像の配置、サイトのレイアウトなんかを設定しているファイルだ。

3つ目に必要なのが、実際にサイトに載せる画像(JPG、GIF)とかアニメーション(FLASHなど)などのヴィジュアルな素材。

この3種類が組み合わさり、ブラウザをとおすことによってようやく、見慣れたホームページが姿を現すのだよ。

最近はいろいろと便利なホームページ制作ソフトが出ていて、こうしたしくみをわからなくても誰でも簡単につくれるようになった。

でもここでは、そういうソフトの使い方は教えない。入門書片手にソフトを使えば誰でも作れるから。

でも「ソフトでホームページつくれます」じゃプロとは言えないのだよ。ふだんはソフトを使っていても、いざというときはソフトに頼らずにサイトを作れるようでなければダメ。応用が利かない。

昔は便利なソフトなんてなかったから、みんなメモ帳に手打ちで、さっきみたいなややこしい記号を打ち込んでサイトをつくったものだよ。懐かしいね。

はい、第2回目はここまで。

次からは、ウェブサイトの基本中の基本、HTMLの話に入りましょう。
posted by にあごのすけ at 14:02| Comment(0) | 全般 | このブログの読者になる | 更新情報をチェックする

2009年01月27日

【第1回】さあ講義のはじまりですよ〜

僕はこのブログを、WEB制作者養成の講義のつもりで書く。

ブログだけでどこまでみなさんに教えることができるか?

これはひとつの挑戦、試みだ。でもある程度「プロ」に近い域にまで養成できるのではないかな。

「ウェブのまったくの素人を、プロのウェブデザイナーに養成する!」

とにかくそれが目的である。

僕は非常に恵まれていたと思う。というのは、インターネットが普及しはじめたまさに同じ頃(95年頃)からWEB制作をはじめたから。

WEB制作ソフトはあるにはあったが、機能が少なすぎて使いものにならなかった。入門書はほとんどなく、僕はNetscape・HTMLオフィシャルガイドを読んで勉強した。

でも当時はおぼえることがまだ少なかった。だからすぐにマスターできた。あとは、時代の流れに沿って新しく出てきた技術や動向を、その都度こまめにおぼえていけばいいだけだった。それでこれまでやってきた。

でも今の時代からWEB制作をおぼえるとなると。

おぼえること山積みである!!

そりゃWEB制作の専門学校行って学ばな、マスターし切れんわな……。

しかし専門学校に行かずして、WEB制作のプロになれる、それがこのブログである!

と、息巻いてはみたがどこまでやっていけるんだか。

とにかく、僕は10数年かけておぼえてきたことを、このブログで忠実に再現していこうと思う。そして10年分の知識を1年かそこらで伝授したいと思っている。

ちなみに私は「にあごのすけ」と呼ばれております。流浪のWEB職人でございます……。
posted by にあごのすけ at 11:39| Comment(0) | 全般 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。