花見のページが完成。
トップページ

結局メニューはシンプルに。
ただ下の方がスペース空きすぎで物足りない感じ。もっとコンテンツやらバナーがあればいいんだけどね。このサイト専用のバナーでも作ればいろいろと楽できそう。

flashはなんだか良くありげなもの。ムービークリップ自体をアニメーションさせて、それをシーンに放り込めば複雑な事ができる・・！
これで前から謎だったロールオーバー時の処理を複数同時に出来そう。よし、これは次の課題。

最終的に妥協はなかった（トラックバック部分は面倒だから画像にした）ものの、今回特に目新しい事はできなくて、残念ながらスキルアップ感は得られず。
次はflashオンリーでいこっかなー。

次のテーマは花見。
花にはほとんど興味の無いつまらない人間だけど、桜はなんだか特別。春はステキ。



花見と言ったら配色はピンクだ、としか思いつかなかった。
ただそのままじゃつまらないから、メニューの背景を掛け軸に・・というか、これはちょっとデザイン的に問題あるなぁ。
それにもっとシンプルでいいんだよね。ポータルサイトは。
でも今回もflash使う、そして蝶をバタバタ飛ばす、予定！
できるかわからんけど、やるだけやってその結果完成品がかなりの妥協品だったとしてもそれはそれでｗ

ミネラルウォーターのページが完成。
トップページ

課題だったpositionは全体をrelativeで囲って、width:150pxの左カラムをabsoluteのleft:0、中央をabsoluteのleft:150pxに指定。
とりあえずIE（win），firefox，opera，NNでは大丈夫な模様・・。

ただフッターがうまくいかない。absoluteのbottom:0pxじゃ表示されないし、top:Npxじゃ中央カラムの長さが変わったり文字のサイズ次第で変になるし、relativeの外に出したらまたおかしい。だから強引に中央カラム内に記載。
でもこれも左カラムが長くなったらあんまりスマートじゃないわけで。

もう一つの課題、flash。
中身はこの間作ったものの流用だけど、とりあえず大丈夫みたい。シンボルやらムービークリップやらボタンやら、なんとなく全体のイメージが見えてきたような。
ただ予想通りというかなんというか、重い。かなり。ファイルサイズチェックでE判定・・。

素材辞典フォトバイブルを買ってみた。
写真が20,000点もあって7,000円なんて安すぎる・・！
サイズが640*480と若干小さめだけど、いやいやこりゃ素晴らしい。良い買い物をした。

さて今回のテーマは、フォトバイブルの中でなんとなく目に付いた水の写真からナントカ還元水・・じゃなかった、ミネラルウォーター。
イメージは水だけに青を基本に据えて、あまりごちゃごちゃしないシンプルなつくりに。



そして今回はメインの写真をflashで作りたい。初コラボ。
あとは前回ダメだったpositionも使って・・relativeとabsoluteはどっちがどっちだっけ。ていうかどう使えば不具合が出ないんだろう。
なんか手こずりそうだ・・。

とかなんとか言いつつ、フラッシュを頑張って作ってみた。→右カラム

グラフィックのデキはともかく、クリックだけのものなら意外と簡単かもしれない。ただし中身は汚いので人には見せられん！
あとはどんどん経験積んで、もっと洗練されたものを作れるようにならないとね。
今回作ったのこのフラッシュもいまいちだし、早くマシなものに置き換えよ。

さっ、明日からはまたサイト作り、の予定。いや、またフラッシュかも。
素材集を買って来たからいろんな事ができそう。テーマは～んー、何にしよ。

なんかPCの調子がおかしいぞーとmemtestを走らせてみたら半周もしないうちにエラーで画面が真っ赤。
やばい、とうとうメモリが逝きそう。
前からアプリ起動中に「メモリ不足です」って操作を受け付けなくなったりするからおかしいなぁとは思ってたんだけどとうとう来た。

んー、通販で買うべきか面倒だけど秋葉まで出向くべきか。
どっちにしろすぐ買えそうにはないから、もう暫くはごまかしごまかしやってくしか。
そんなわけで今日は何も作業できず。出費が痛い。

今日はflash。
サイト上じゃなるべくflashは使わない方がいいと思いつつ、テンプレートモンスターとか見てると、も～ワクワク心踊る。
そしてflash起動、わけわからん、ハイ終わり、の繰り返し。でも今日こそは・・といろんなサイトをまわって見よう見まねで作ってみた。

flash練習
制作時間3時間半
フレーム数140
・・・基準が分からないとは言え、この2つの数字はアホみたいに多いのでは。

うーむ。flashが思い通りに扱えるようになったら面白いだろうなぁ。
ちょくちょく練習した方がいいかもね、いっちゃん高いんだし使わにゃ勿体無い。。

一応完成。
トップページ
コンテンツページ

・タイトル画像に繋げてh1でサイト名を記述、そしてそれをtext-indent:-9999;でぶっ飛ばし・・・このやり方なんかすっきりしない。SEOスパムになるとかならないとか謎だし。display:none;よかはよさそうな気がしないでも無いけど。

・今回はテキストがほとんど無くて画像ばっかりだから、そのうちいくつか絶対位置で指定しようとしてみたけどどうもうまくいかなくて（いまいち理解してない）、しょうがないから<div class="xx"></div>って空のdiv作ってしまった。。。反省。

・コンテンツページの背景は％で指定してるからウインドウを小さくするといろいろと問題あり。px指定に直した方がいいかも。

・letter-spacingとdl,dt,ddを生まれて始めて使った。letter-spacingは「平日」と「祝休日」の文字数を合わせるため。定義リストは、dtは部屋の種類でddは値段。意味的にはそう間違ってはいないんじゃないかと思う。。

見た目単純の割りにかなりてこずったなぁ。勉強勉強。

フリー素材のサイトをまわってたらきれいな写真を見つけたんで、今回はそれを使ってなんか作ってみる。
で、その写真は何かと言うと夕焼けに染まる富士山。
富士山は日本の象徴。日本のもの。日本と言えば。温泉！そう、温泉。
今回のテーマは、富士山を見る事ができる温泉宿。

そしてこちらがfireworksでの完成予想図。



上がトップページで、下がコンテンツのページ。
温泉だけに和をイメージした配色にしようと思ったけど、画像が夕焼けなんだからどっしりと落ち着いた感じのほうが良いかなと思い切って黒一色に。
そして売りである富士山の画像も思い切ってどでーんと配置。
その他にも和文フォントを多用してるから画像だらけになりそう・・・ユーザーには優しくないページかな。
一応画像が重くても大丈夫なようにフッターにも文字だけのメニューを配置してみたけど・・どうなる。


写真素材提供
Photoげのむ様

さてさてとりあえず完成。

固定で横幅770pxと若干小さめ。
ニュースサイトだから老若男女問わず見るって事で、なるだけ画像は使わずシンプルに。手抜きと言うわけではなく。。
左メニューのボールの画像がずれてるのはline-style-imageを使ってるから？背景画像を使ったほうがいいってのは聴いたことあるけど、それは次回以降に。
このレベルのサイトにしてはcssの文字量が多すぎです。

body{
width: 770px;
background: #fff;
padding: 0;
margin: 0;
font-size: 12px;
font-family: verdana, 'trebuchet ms', sans-serif;
text-align: left;
color: #000;
line-height: 1.6em;
}
ul{
padding: 0;
margin: 0;
}
h1,h2,h3,h4,h5,h6{
padding: 0;
margin: 0;
}
h1{
color: #fff;
padding: 30px 0 0 20px;
line-height: 1.5em;
display: inline;
}
h2{
color: #fff;
padding: 30px 0 0 10px;
display: inline;
}
h3{
border-left: 5px solid #666;
padding-left: 10px;
margin-bottom: 10px;
}
h4, h5{
font-size: 100%;
font-weight: normal;
padding-left: 10px;
margin-bottom: 10px;
} h6{
color: #f60;
font-size: 120%;
font-weight: bold;
}
#contents{
width: 770px;
margin-left: 30px;
}
a{
color: #339;
}
a:hover{
background: #339;
color: #fff;
}
.next{
font-size: 80%;
} /*ヘッダー*/
#header{
width: 770px;
height: 90px;
background: url(image/header.gif) no-repeat #fff;
margin-bottom: 10px;
} /*左カラム*/
#left-clum{
float: left;
width: 170px;
background: #eee;
padding-bottom: 30px;
}
#left-clum ul{
margin: 5px 0 0 20px;
}
.blue li, .red li, .green li{
list-style-image: url(image/ball.gif);
margin-bottom: 5px;
}
#left-clum .blue a{
color: #339;
}
#left-clum .blue a:hover{
background: #339;
color: #fff;
}
#left-clum .red a{
color: #600;
}
#left-clum .red a:hover{
background: #600;
color: #fff;
}
#left-clum .green a{
color: #030;
}
#left-clum .green a:hover{
background: #030;
color: #fff;
}
.blue-box{
background: #c8dcf8;
padding-left: 10px;
border: 1px solid #7b97e0;
}
.red-box{
background: #ead6ca;
padding-left: 10px;
border: 1px solid #b37b5e;
margin-top: 30px;
}
.green-box{
background: #d3e4cf;
padding-left: 10px;
border: 1px solid #46b40c;
margin-top: 30px;
}
.banner01{
text-align: center;
margin: 20px 0;
}
.navi{
background: #fff;
margin: 0 10px;
}
.navi ul{
margin: 5px 0 0 20px;
}
.navi li{
background: #fff;
list-style-image: url(image/list01.gif);
border-bottom: 1px dashed #999999;
}
.navi a{
color: #000;
text-decoration: none;
}
.navi a:hover{
background: #333;
color: #fff;
} /*中カラム*/
#center-clum{
float: left;
width: 360px;
margin-left: 10px;
}
.top-news{
text-indent: 1em;
}
.top-news img{
float: right;
margin: 0 0 10px 10px;
}
.top-news .next{
clear: both;
text-align: right;
}
.sub-header-blue{
background: #c8dcf8;
border-left: 5px solid #7b97e0;
margin-top: 30px;
}
.sub-header-orange{
background: #fc6;
border-left: 5px solid #c60;
margin-top: 30px;
}
.dot-style{
margin: 5px 0 0 20px;
}
.refer{
color:#666;
font-size: 80%;
}
.orange a{
color: #f60;
text-decoration: underline;
}
.orange a:hover{
background: #f60;
color: #fff;
} /*右カラム*/
#right-clum{
float: left;
width: 220px;
height: 200px;
margin-left: 10px;
}
.special{
text-align: center;
}
.special a{
font-size: 0%;
outline : 0;
}
.special a:hover{
background: #fff;
}
.special img{
margin-bottom: 30px;
}
.column img{
float: left;
margin-right: 10px;
}
.column .next{
clear: both;
text-align: right;
margin-bottom: 20px;
}
.ze-league{
background: #429f0f;
color: #fff;
font-size: 120%;
padding: 2px 0;
font-weight: bold;
} .ba-league{
background: #069;
color: #fff;
font-size: 120%;
padding: 2px 0;
font-weight: bold;
}
.rank table{
background: #fff;
margin-bottom: 30px;
border-top: 1px solid #666;
border-right: 1px solid #666;
}
.rank th, .rank td{
text-align: center;
padding: 0 2px;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
} /*フッター*/
#fotter{
clear: both;
width: 770px;
background: #789;
text-align: center;
}

うーむ、地味だ地味だ。こんなニュースサイトは絶対ブックマークしない。
昨日の図と比べれば幾分マシ？にはなってるようには見える、けど所詮素人レベル。。。

このブログの名前を決めてなかった！ テーマは「デザイン」、そして「素人」。
この2つからいくつか考えてみると・・・

1.「素人デザイナーのブログ」
2.「目指せデザイナー」
3.「WEBデザインを勉強するブログ」
4.「それいけデザイン」
5.「TheDesign」
6.「素人のWebデザイン」

1は既に「デザイナー」と名乗ってる時点で却下、2は特にデザイナーを目指しているわけではないので却下、3は普通すぎて却下、4はやる気無さ過ぎて却下、5はカッコつけて失敗している見本みたいなものだから却下、てことで消去法で6に決定。これもやる気なさげなのだけども、「素人がやらかしたWebデザイン失敗例」という意味にも受け取れるし、ある意味自虐的な感じでそこが気にいった。

さて･･･いよいよ本番のデザイン開始。
まず最初に選んだテーマは、明後日から高校野球が始まるってことで野球に決定。
でもただの野球じゃつまんないから、野球を中心に扱ったニュースサイトにしてみる。
ニュースを扱うとなるとまじめな雰囲気を出さないといけないから、配色は白をベースに、あと青系は信頼度が増す色。。。とどこかに書いてあった気がする。

fireworksで作ってみた。


素人くさい・・・。
試合の速報とか簡単な個人成績を載せればもう少し賑やかになるかな。。

写真素材提供
フリーフォトボックス様

背景の左部分にグラデーションと、エントリータイトルと右カラムに画像を使ってみた。
あと右下部分に固定で月をイメージした画像・・・は邪魔？
jpegだしデカイし無駄に重くしてるだけか。。

このブログのカスタマイズはとりあえずここいらで終了。
あまりここで時間かけるのは勿体無いしね。
と言うわけで、明日からこのブログは本格的にスタート！？

はじめまして福助と申します。
今日からここでWEBデザインのブログを始めようと思います。
と言ってもほとんど素人な訳ですが。
とりあえず、まず始めにこのブログ（ムーバブルタイプ3.34）からデザイン開始。
テーマは黒く・・・というわけで下の画像のような真っ黒な状態からのスタート。

■配布用テンプレート・各種素材について
当ブログで公開している「配布用テンプレート・各種素材（以下、配布用素材）」は、個人のみ営利，非営利目的問わず全て無料でご利用いただけます。
ただしブログ右側の「Design & Layaut」内（ブラウザによってはブログ下部の「デザインリスト」内）で掲載しているものは、如何なる目的でのご利用も一切禁止とさせていただいていますのでご注意ください。（配布用素材一覧へはこのエントリの一番下から入れます）

・公序良俗に反する内容、誹謗中傷目的、法に反する目的、その他多くの方が不快と思われる目的としてのご利用は出来ません。
・配布用素材を利用する事によって生じた直接的，間接的，偶発的損害について、管理人はその責任を一切負うものではありません。
・配布用素材の紹介記事に掲載されている画像と実際のものとは多少異なる場合があります。
・事前の連絡無く配布用素材の修正，削除をすることがあります。
・配布用素材にある当ブログへのリンクは削除しないでください。
・Flash素材への直リンクはしないでください。


■加工について
・ブログテンプレート
非営利目的でご利用される方に限り、画像やソース、その他あらゆる加工についてご自由にしていただけます。
・Flash素材
Flash素材につきましては加工を禁止とさせていただきます。


■二次使用について
配布用素材の二次使用（転載・配布・複製・販売等）は、営利，非営利，加工の有無を問わず禁止とさせていただきます。


■営利・非営利目的としてのご利用
ここでは「物品や情報、またはそれに類するものを販売し収入を得る目的が“ある”」ことを営利目的とみなし、「アフィリエイトやアドセンス等、広告の掲載“のみ”による収入がある」際のご利用は非営利としております。

例
A.個人で経営しているネットショップ・商材の販売　→　営利
B.上記ネットショップのオーナー等の個人ブログ　→　非営利（アフィリエイト広告の有無は問いません）
C.個人的な趣味や日記として使用　→　非営利（アフィリエイト広告の有無は問いません）


■その他注意事項
Movable Typeのテンプレートでは、デフォルトで含まれていないプラグインを使用しているものがあります。
再構築時にエラーが出てしまう時は、該当プラグインがインストールされていない可能性がありますので、エラーメッセージを元に探していただくか、該当箇所のソースを削除してください。


■サポート
配布用素材のご利用について分からない点がありましたら、ダウンロードしたファイル内に記載しているアドレス宛てにご連絡ください。
その際タイトルを「素人のWebデザイン：配布用素材（または素材名）の利用について」としていただくと助かります。
また、誠に申し訳ありませんが、加工の方法やエラーの対処方法等、技術的なお問い合わせは受け付けておりません。
メールやコメントを頂いても返信出来ないことがありますので予めご了承ください。

配布用素材一覧

写真

★★★★☆
HTML&スタイルシートレイアウトブック 改訂版
一番最初に買った一冊（リンク先は改訂版）。
CSSってなんだろう？っていうレベルから入るので、全くの初心者でもすんなり入れる本。これが無ければその後に続く事も無かったんじゃないかなぁ。
とりあえず触れてみたいとか、ちょっと勉強してみよっかな？という方向け。

★★★★☆
これで完璧Dreamweaver8
DW購入後の初テキスト。「これで完璧」って書いてあるのはどうかと思うけど、ほとんどDWを知らないよーという自分みたいな人には完璧！って気分にはなった・・ようなならなかったような。
所々高レベルな箇所もあるけど、全体的に分かりやすく親切な内容で、まず基本的な使い方を学びたいという方向け。DWの導入本。

★☆☆☆☆
標準Webデザイン講座 DREAMWEAVER 8
先の本だけじゃ物足りなかったので、更なる知識を！と買ってしまった本。最初は基本的な操作方法から入るものの、無駄に難しく書かれていて分かりにくい。
恐らく初心者～中級者レベルを対象としているんじゃないかと思えるけど、ついていけなかった。というか読む気が起きなかった。
「他に無いぐらいスゴイものを作ってみようぜ！」と意気込んで作ってみたものの、結果自己満足で終わってしまった、という匂いを感じる。

☆☆☆☆☆
標準Webデザイン講座 FLASH 8
↑と同じシリーズの本。内容に関しても以下同文。
全編お坊さんやお寺の写真で構成。お経や仏壇を使ったFLASH作りや、お墓を背景にお線香の煙をアニメーションさせてみよう！とかテンション下がります・・。

★★★★★
プロとして恥ずかしくないWEBデザインの大原則 改訂版
プロとして恥ずかしくないWEBレイアウトの大原則
プロとして恥ずかしくないスタイルシートの大原則
Webデザイン，レイアウト，CSSを分かりやすく且つ詳しく書いてある良書！
元々有名なシリーズらしかったから、とりあえず買ってみようかな～って簡単な気持ちで手に入れてみたのに、気がついたら毎日これを読むのが楽しみでｗ
CSSの裏技や配色，見やすいレイアウト構成などなど、サイト作りをしていく上で知っておかなければならないことってこんなにあるのか！と驚く部分も多かったけど、でもそれらを考えて作り上げていくと言う事が楽しく感じられるようになった。基礎本を買ったら次の2冊目は絶対このシリーズっ。


★★★★★
世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル
これ！
これだー。これ良すぎる。
勉強ってこんな楽しいモンなんだーと思えたｗ
実際にプロが作ったサイトのソース（一部抜粋）を見ながら、何故ここはこうなっているのか、逆にここはこうだからこうした方がいいんじゃないか？とまじめに解説してくれる本。
ブラウザによる解釈の違いも親切に解説＆対処法を教えてくれるし、CSSに関しては正直これ一冊だけでいいかもしんない。まずは真似から入るのも大事！

★★★☆☆
Flashモーションデザインハンドブック
FLASHのアニメーションに重点を置いた本。
汎用性の薄いものもいくらかあるけど、前半はナビゲーションやボタンのような絶対知っておきたい部分が詳しく書かれているので、そこを読むだけでも価値があったかなぁ。
編集可能なサンプルファイルも付いてるので、中身をじっくり観察しながら勉強できるのも良かった。

★★★☆☆
FLASHで作る バナー広告見本帳
FLASHでバナーを作るということが目的の本だけど、様々なアニメーションの作り方を解説している本といった方が適当な感じ。
ある程度FLASHを理解している人向けの本で、特に後半はかなーり難しく、編集可のサンプルも付いてるけど中身を見てもサッパリなもの続きでお手上げ。
逆に言えばそれを理解できるようになればかなりのレベルアップが見込めると・・。

★★★★★
素材辞典フォトバイブル 20000
2万もの写真が入っている著作権フリー素材集。サイズは640×480と小さめだけど、この数でこの値段は安すぎ。
所詮趣味でやってるサイト作りだけど、これだけもの数があると作るのも楽しくなってくるし、プロ気分ｗ大手企業のサイトが使ってる写真も結構あったりで、そういうのを探すのも楽しかったり。

このブログについて
デザインのデの字も知らないWebデザインの素人が、思考錯誤しながらなんとか"見れる"サイトを作りたいとそんな一時の気の迷いで作ってしまったブログ。
毎日更新、がんばります。

非配布用テンプレートについて
非配布用テンプレートの中で使用している"写真素材"の著作権や一部レイアウトの意匠権は他の個人、又は企業にあります。そのため二次使用できないように写真の中にアドレスや文字を追加しています。
各テンプレート上部には素材サイト様へのリンクを貼ってありますので、ご使用の際はそちらよりお進みください。

配布用テンプレートについて
こちらに移動しました。

連絡
design△hobbyblog.biz
△=@に変換

管理人