@ HPをデザインする
HPをつくるなら〜♪ HPをつくるなら〜あぁ〜♪
セブの海の香りがする 壁紙を貼りたいと思っています〜♪
単 な る 幻 想 ... ♪
ということで、NMSで数百ページを興した経験をベースに
HP(Web Site)のページデザインに関してまとめてみました
l 初級1 (シンプルに) l 初級2 (体裁を整える) l 初級3 (テキストの整理) l 初級4 (写真の整理) l
l 中級1 (TABLEタグ・機能) l 中級2 (TABLEタグ・効果) l 中級3 (壁紙) l
l 上級1 (クリッカブルマップ) l 上級2 (配色) l 上級3 (遊び心) l
◆機能編(1/4)◆ |
◆機能編(2/4)◆ |
◆機能編(3/4)◆ |
◆機能編(4/4)◆ |
|
|
|
|
l 機能1 (フレーム) l 機能2 (Javascript1) l 機能3 (Javascript2) l 機能4 (ジャンプ一発) l
◆初級編(1/4)◆ (TOP)
○まずはシンプルに作ってみよう
ページデザインの基本は「CENTERタグ」です。
文章と若干の画像でシンプルなページを作ってみましょう。
・子連れでマリバゴ
(http://www.angel.ne.jp/~nisikori/ceb/maribago.html)
・コーラルリーフ滞在記
(http://www.angel.ne.jp/~nisikori/ceb/coralreef.html)
・やっぱりKTVに通えない
(http://www.angel.ne.jp/~nisikori/kids/anata.html)
・セブ&ボホール写真日記
(http://www.angel.ne.jp/~nisikori/ceb/yukun.html)
・ワイン豆知識...
(http://www.angel.ne.jp/~nisikori/yosyu/winemame.html)
・初めてのKonTiki♪
(http://www.angel.ne.jp/~nisikori/ceb/s_gokikoku/kontiki.html)
|
◇初級編(2/4)◇ (TOP)
●TABLEタグを使う(その1:体裁を整える)
ページ内の配置を整えるのに「TABLEタグ」は必須でしょう。
このタグを使うことにより見やすいデザインが可能になります。
・親子3人inマリバゴ
(http://www.angel.ne.jp/~nisikori/ceb/hirose.html)
・セブの海を満喫 ?!
(http://www.angel.ne.jp/~nisikori/ceb/kurosan.html)
・ムチャ食ったぁ〜!! 滞在記
(http://www.angel.ne.jp/~nisikori/ceb/muchakuttaa.html)
・「唐詩十選」
(http://www.angel.ne.jp/~nisikori/tosisen/tosisen.html)
|
◇初級編(3/4)◇ (TOP)
●TABLEタグを使う(その2:テキストの整理)
「TABLEタグ」は、テキスト情報の整理にも有効です。
・写真提供者リスト
(http://www.angel.ne.jp/~nisikori/ceb/teikyousyalist.html)
・セブボ総キャスト
(http://www.angel.ne.jp/~nisikori/oth/syuku/thanks_all.html)
・ピュリツァー賞
(http://www.angel.ne.jp/~nisikori/pulitzer/pulitzer.html)
|
◇初級編(4/4)◇ (TOP)
●TABLEタグを使う(その3:写真の整理)
「TABLEタグ」は、写真のサムネイル表示にも効力を発揮します。
・My Image Collection
(http://page.freett.com/nishi/image/image.html)
・映画・男はつらいよ
(http://page.freett.com/nishi/torasan.html)
・Cebu of Cebu 2
(http://www.angel.ne.jp/~nisikori/cebuofcebuA/cebuofcebuA.html)
・特選・セブ未公開写真
(http://www.angel.ne.jp/~nisikori/ceb/extra/cebuextrapic.html)
・清永さんのモアルボアール
(http://www.angel.ne.jp/~nisikori/cebuofcebuA/s_kiyo_shasin.html)
|
◆中級編(1/3)◆ (TOP)
○TABLEタグの機能的な活用
今度は、TABLEタグの機能的な使い方を紹介しましょう。
・Nobukoのセブ滞在記
(http://www.angel.ne.jp/~nisikori/ceb/missnobuko.html)
・先輩と二人で行く初セブ
(http://www.angel.ne.jp/~nisikori/ceb/see-snow.html)
・おーやんのらぶらぶぅ日記
(http://page.freett.com/winecell/ohyan/zecchou.html)
・きっず めにゅ〜
(http://www.angel.ne.jp/~nisikori/kids/kids.html)
・NMS SHORT TRIP MENU
(http://www.angel.ne.jp/~nisikori/index_shorttrip.html)
・NMSの強者達
(http://www.angel.ne.jp/~nisikori/nms_tuwamono/nms_tuwamono.html)
・写真で見る Cebu Hotels
(http://www.angel.ne.jp/~nisikori/ceb/cebuhotels/cebuhotels.html)
・有閑マダムの華麗なセブ生活
(http://www.angel.ne.jp/~nisikori/ceb/dyundyun/dyundyun.html)
・万歳師匠、フィリピンを生きる!
(http://www.angel.ne.jp/~nisikori/ceb/picture/dai_ikiru.html)
|
◇中級編(2/3)◇ (TOP)
●TABLEタグの効果的な活用
使い方次第で、より見映えのするページを作ることができます。
・行くぞ!Sea Breeze
(http://www.angel.ne.jp/~nisikori/ceb/seabreeze.html)
・セブparade2000
(http://www.angel.ne.jp/~nisikori/ceb/parade2000.html)
・Cebu North Road 1997
(http://www.geocities.co.jp/SilkRoad/3698/northroad/northroad.html)
・セブ〜のページ
(http://www.angel.ne.jp/~nisikori/ceb/cebu.html)
・洋酒天国のページ
(http://www.angel.ne.jp/~nisikori/yosyu/yosyu.html)
・はっちゃんファミリーの偉業
(http://www.angel.ne.jp/~nisikori/oth/syuku/hachan.html)
・Adamの禁断の果実
(http://www.angel.ne.jp/~nisikori/ceb/adam/adam_fruit.html)
・モンテベリオ2003
(http://www.angel.ne.jp/~nisikori/ceb/mvh2003/mvh2003.html)
|
◇中級編(3/3)◇ (TOP)
●テーマに合った壁紙を使う
ページのインパクトは壁紙で決まることがあります。
テーマに合致した壁紙を使うとよいでしょう。
・セブ〜のページ (1)
(http://www.angel.ne.jp/~nisikori/ceb/cebu_980519_old.html)
・初セブ旅行記
(http://www.angel.ne.jp/~nisikori/ceb/hatucebu.html)
・夜のセブ漫遊の旅
(http://www.angel.ne.jp/~nisikori/ceb/tambuli_villa.html)
・乳コレ'99春夏
(http://www.angel.ne.jp/~nisikori/sozai/titicolle99.html)
・セブ島旅日記(結婚編)【縦方向壁紙】
(http://www.angel.ne.jp/~nisikori/ceb/travelki/IVY.html)
・初めてのQuantum♪【左上一発壁紙】
(http://www.angel.ne.jp/~nisikori/ceb/s_gokikoku/quantum1.html)
・初めてのおつかい♪【TABLE内壁紙】
(http://www.angel.ne.jp/~nisikori/ceb/annie/hajimete.html)
・Kunchanのダバオ日記2002
(http://page.freett.com/cebucebu/hiroyuki/kunchan_davao.html)
|
◆上級編(1/3)◆ (TOP)
○クリッカブルマップにチャレンジ
Paint Shop Proなどの画像作成ソフトでオリジナル画像を自作し、
オリジナル画像から各ページへジャンプするようにしてみましょう。
・禁断の、夫婦セブ旅行記
(http://page.freett.com/winecell/shintaro/shintaro.html)
・セブを楽しむstep9
(http://www.angel.ne.jp/~nisikori/ceb/cebustep9/cebu_step.html)
・実録!汚された十字架
(http://www.angel.ne.jp/~nisikori/ceb/annie/cebubo_no_annie_2.html)
・Oregon Scenic Road
(http://www.geocities.com/TheTropics/Island/1424/ore/sroad.html)
・NMSの足跡
(http://www.angel.ne.jp/~nisikori/oth/syuku/nms_asiato.html)
・モンテベリオ十余年
(http://www.angel.ne.jp/~nisikori/ceb/mvh2003/montebello_villa_hotel.html)
・セブボのアニー's world!
(http://www.angel.ne.jp/~nisikori/oth/bbshist/annie_world.html)
・ダバオ、命!
(http://www.angel.ne.jp/~nisikori/ceb/zdavao/davao_inochi.html)
・NMS TOP MENU (1)
(http://www.angel.ne.jp/~nisikori/index_990211.html)
・NMS TOP MENU (2)
(http://www.angel.ne.jp/~nisikori/index_991112.html)
・NMS TOP MENU (3)
(http://www.angel.ne.jp/~nisikori/index_000129.html)
・NMS TOP MENU (4)
(http://www.angel.ne.jp/~nisikori/index_000729.html)
・NMS TOP MENU (5)
(http://www.angel.ne.jp/~nisikori/index_010430.html)
・NMS TOP MENU (6)
(http://www.angel.ne.jp/~nisikori/index_010506.html)
・NMS TOP MENU (7)
(http://www.angel.ne.jp/~nisikori/index_010527.html)
・NMS TOP MENU (8)
(http://www.angel.ne.jp/~nisikori/index_010728.html)
・NMS TOP MENU (9)
(http://www.angel.ne.jp/~nisikori/index_010921.html)
・NMS TOP MENU (10)
(http://www.angel.ne.jp/~nisikori/index_011022.html)
・NMS TOP MENU (11)
(http://www.angel.ne.jp/~nisikori/index_011231.html)
・NMS TOP MENU (12)
(http://www.angel.ne.jp/~nisikori/index_020208.html)
・NMS TOP MENU (13)
(http://www.angel.ne.jp/~nisikori/index_020323.html)
・Zaurus用NMSメニュー
(http://www.angel.ne.jp/~nisikori/zaurus_menu.html)
|
◇上級編(2/3)◇ (TOP)
●配色を工夫する
配色は個人の好みです。万人に好まれる配色はありません。
ウェブマスターのセンスがでるのでちょっとこわい(爆)。
・Cebu〜xxx
(http://www.angel.ne.jp/~nisikori/ceb/kiyo/xxxB.html)
・セブ島旅日記(結婚準備編)
(http://www.angel.ne.jp/~nisikori/ceb/travelki/IVY2.html)
・NMS総合メニュー2
(http://www.angel.ne.jp/~nisikori/index_table.html)
・Cebu百景(CU)
(http://www.angel.ne.jp/~nisikori/ceb/cebuhyakkei/cebuhyakkei_CU.html)
・こねこーズ物語
(http://www.angel.ne.jp/~nisikori/oth/bbshist/konekoooz.html)
|
◇上級編(3/3)◇ (TOP)
●遊び心をもったページ構成
たまには、遊び心をもったページ構成(流れ)にしてみましょう。
・バロットへの道
(http://www.angel.ne.jp/~nisikori/cebuofcebuA/barot4.html)
・Cebu〜 xxx
(http://www.angel.ne.jp/~nisikori/ceb/kiyo/xxxA.html)
・マリアン&マリリン2001(偽装母娘セブをゆく)
(http://www.angel.ne.jp/~nisikori/ceb/s_gokikoku/marianmaririn2001.html)
・Cebu百景(入り口)
(http://www.angel.ne.jp/~nisikori/ceb/cebuhyakkei/cebuhyakkei.html)
|
◆機能編(1/4)◆ (TOP)
○フレームを使ってみる
フレーム化されたページは、表示領域を狭めるデメリットがありますが、
連続検索や関連検索が必要な場合には効果的でしょう。
見た目には、左側フレームをインデックスにした方が安定感がありますが、
使い勝手からすると、右側フレームのインデックスが良いでしょう。
上下フレームをインデックスとして使うのは完全にその人の好みでしょうね。
また、4フレーム以上のフレーム分割は避けた方がよいでしょう(うるさい)。
・ベトナム戦争関連資料【左フレームindex】
(http://www.angel.ne.jp/~nisikori/nam/siryo.html)
・セブボード過去ログ【右フレームindex】
(http://www.angel.ne.jp/~nisikori/cebuboard/bbslog.html)
・ついに、家族来日(涙)【上フレームindex】
(http://www.angel.ne.jp/~nisikori/kids/yanata.html)
・NMS総合メニュー1【3分割フレーム】
(http://www.angel.ne.jp/~nisikori/nmsmenu.html)
・NMSの強面達【4分割フレーム】
(http://www.angel.ne.jp/~nisikori/nms_tuwamono/fr4_main.html)
|
◇機能編(2/4)◇ (TOP)
●Javascriptで楽しく
Javascriptを使うと見た目に楽しいページになります。
デザイン的にも用途的にもよりよいページが作れます。
・洋酒天国のページ (1)
(http://www.angel.ne.jp/~nisikori/yosyu/yosyu_old.html)
・MM21八景
(http://page.freett.com/cebucebu/mm21/mm21.html)
・セブ〜12景
(http://www.angel.ne.jp/~nisikori/ceb/cebu12kei/cebu12kei.html)
・ベトナム戦争年表
(http://www.angel.ne.jp/~nisikori/nam/nhyo5064.html)
・Vet Center in USA
(http://www.angel.ne.jp/~nisikori/nam/vetcenter.html)
・タッチ メニュー
(http://www.angel.ne.jp/~nisikori/index_touch.html)
・GEO-USAメニュー
(http://www.geocities.com/TheTropics/Island/1424/)
・Cebu百景(CB)
(http://www.angel.ne.jp/~nisikori/ceb/cebuhyakkei/cebuhyakkei_CB.html)
・I LOVE BLUE WATER
(http://www.angel.ne.jp/~nisikori/ceb/maribago/maribagoBW.html)
・セブボード流行語大賞
(http://www.angel.ne.jp/~nisikori/oth/bbshist/ryukogo_taisho.html)
・マリアン、マリリン in セブ〜
(http://www.angel.ne.jp/~nisikori/ceb/s_gokikoku/marianmaririn_in_cebu.html)
・セブ版・奥の細道
(http://www.angel.ne.jp/~nisikori/ceb/okunohosomiti/oku.html)
|
◇機能編(3/4)◇ (TOP)
●Javascriptで遊ぶ
Javascriptは、お遊びにも最適です(笑)。
・G座布団10枚!
(http://www.geocities.co.jp/Foodpia/2505/ozabG.html)
・節分(雪だるままき)
(http://www.angel.ne.jp/~nisikori/sozai/setubun/setubun.html)
・ゴルゴ13
(http://www.angel.ne.jp/~nisikori/sozai/G13.html)
|
◇機能編(4/4)◇ (TOP)
●ジャンプ一発!
使い勝手のいいメニュー例を示しておきましょう。
・NMSトップメニュー
(http://www.angel.ne.jp/~nisikori/index_001005.html)
・セブ旅行投稿記メニュー
(http://www.angel.ne.jp/~nisikori/ceb/toukoumenu.html)
・セブ〜写真散歩メニュー
(http://www.angel.ne.jp/~nisikori/ceb/shasin_cebu.html)
|
戻る
Copyright (C) 1998-2004 K.Nishikori. All rights reserved.