ゼロからのサイト作り - 1183618322

1：犬：2007/07/05(木) 15:52:02: なんだか発作的にサイトを作りたくなってきた。
アンケートコミュニティサイトみたいなのを作りたいが、
現状、技術もサーバもプランも何も無いので１から準備しなければいけない。

負荷軽減の為mod_perlで作りたいなぁと思っていたが、
mod_perlが使える良さげなレンタルサーバが無さそうなので断念。
仕方ないのでPHPとMYSQLでも勉強してみようかな。
2：tacos：2007/07/05(木) 18:47:07: なんだか口約束的にwebデザインを任された俺もいるぜ。
まずはホームページビルダでも入手するか…。
いやﾏｼﾞでHTMLからわかんないですから。
最悪トップページって1枚絵をどーんと貼るかとか覚悟してるぜ。
3：犬：2007/07/05(木) 20:01:52: 作りたい内容は、自動アンケート作成みたいなの。
アンケートの名を借りたBBS。

・過去ログを消さず、静的なページとして表示。
・投稿者にユニークなIDを付け表示
・IDによる投稿内容検索（スレ内）
・ユーザーによるスレへのタグ付け
・タグによる検索
・ブログへの投票結果貼り付け。
・回答者の男女比、年齢比を表示。
・上記は回答時に設定させ、cookieを食わせる。

他にも何か思いついたら追加する。
そもそもコンセプトが曖昧で、
ただ『作りたい』だけが先行しているから考えが散漫。

なんかPHPのコードは好きになれないので、
やっぱりPerlで書いてみようかな。
実行速度に問題があったら、その時点でPHP化を検討する。
そもそも根気無いから、ハードル低くしないと完成しそうにないしな。

>>2
近くにいたら何ぞお教えする事も出来そうですが、
今は距離が遠そうですね。
検索すれば何でも分かる世の中ですが、
万が一、分からない箇所などご質問頂ければ
お答えできるかと思います。
4：犬：2007/07/06(金) 00:59:53: 制作開始までのフローはこんな感じか。

・ローカルで学習環境の構築
・SQL学習
・ざっくり設計
・適当な鯖レンタル

たまの週末ぐらいしか、まとまった時間はとれないので、
長くかかりそうだなぁ。途中で飽きそう。
5：犬：2007/07/07(土) 19:47:39: 学習環境構築の為、今はもう使っていない６年ほど前のPCにVine Linuxをインストールしてみる。
インストールは上手くいったようなのだが、Webサーバにアクセスが出来ない。
Apacheの設定がマズいのか、ファイアーウォールのせいなのか、原因はまだ不明。

とりあえずモニタが１台しか無く、メインPCとサーバPCの切り替えが面倒臭い上に、
PCを２台置くスペースも無いので部屋の整理からはじめなければならないのかもしれない。
6：tacos：2007/07/08(日) 15:44:27: ところでweb制作ってプロに頼むとどれくらいかかるのん？
あ、お金と時間について、です。
7：犬：2007/07/09(月) 23:54:52: >>6
内容次第ピンキリなので何とも言い辛いのですが、
仮に以下のような内容を零細制作会社に依頼したと仮定してみます。

-----------------------------------------
制作ページ数20ページ未満。
デザインパターンは大きく分けて２、３パターン程度。
Flashは簡単な内容のものをTOPに１枚。
プログラムは既存プログラムの使いまわしのみ（掲示板、メールフォーム程度）
文言、イメージ含む素材一式は依頼者側で用意。
サーバは用意しない（レンタルサーバを利用、契約も依頼者負担）
アフターサポートは行わない。
-----------------------------------------

これで
見積もり：20万～
期間：実制作２～３週間
ってところでしょうか。

Web制作は毎度制作内容が変わりますしので、
相場はあって無いようなものですが、ご参考まで。
8：tacos：2007/07/11(水) 00:27:42: いやどうも曖昧な質問に回答ﾀﾞﾝｹ。
俺もちょこっと調べてみたが同様の状況だな。
以下俺の状況
・制作ページ数20ページ未満/デザインは4種ぐらいを予定
・TOPにFlash使いたい（自分の力量次第）
・メールフォーム等はフリーの奴を漁ってくる
・キャッチコピー等は俺が考える
・その他文言は依頼者側で用意。素材は依頼者7：俺自作3程度
・サーバはレンタル取得済み/アフターサポートは別途承る

デザインデビュウでいきなりコレでは凄いな俺。これでギャラ5万円。
さて、高いか安いか。
9：tacos：2007/07/11(水) 00:37:44: あ、書くの忘れてた。
webデザインを勉強するのにオススメの本とかありますか？
10：犬：2007/07/11(水) 01:15:28: >>8

お知り合い価格としては無難な線ではないかと思います。
お仕事として考えるならありえない値段。
実績が無い事を考えると、お金を貰えるだけ僥倖。

Webデザインを勉強する為の本はとりあえず以下が良いかと思います。
パラパラ流し読みした事しか無いけど、一通り押さえてあるかと。

http://www.mdn.co.jp/Books/Contents/5814M.htm
http://www.mdn.co.jp/Books/Contents/5787M.htm

上記は純粋にレイアウト、デザインについての本ですので、、
コーディング等の作業手順やツールの使い方を学びたい場合は
不適かもしれません。
11：tacos：2007/07/11(水) 13:04:00: 僥倖だよなぁ。
実はギャラ10万で口利きを探してきた連れに5万行くんだけど
こっちとしては経験値が欲しいだけなので只でもいいやとか思ってはいるが
牧野(仮名)に借りがあったりするので貰えるモノは貰いますすいません。

デザイン関連になるとやっぱりMdNになるか…。
HPビルダの本を現在手配中(ﾔﾎｰｸで落としたが届かない！)なんだけど
HTML/CSSの基礎レベルの本で推奨モノがあればｼｮｳｷ。
いやそこら辺のサイトを読んでみてはいるんだけど
手にとって寝る前に読みたいのです。
一昔前には本ってメディア自体が廃れる危惧があったけど
実際に手にとってページをめくって読む行為って必要だよね。
気持ち的に。
12：犬：2007/07/13(金) 03:20:52: 仕事終わって、同僚と飲んで今帰宅。

> HTML/CSSの基礎レベルの本で推奨モノがあればｼｮｳｷ。

正直あんまり良い本は思いつきません。
基礎レベルなら適当なポケットリファレンス等で良いかと思います。

紙媒体は廃れると言われて長いですが、
いまだにモニタ他のデジタル媒体は
紙媒体の視認性を超えられていません。
なので、次代の画期的なディスプレイが考案されない限りは
廃れないと確信しています。
13：tacos：2007/07/15(日) 10:21:39: すげぇ基本的なことを教えてください。
ホームページの画面サイズってどれぐらいが標準的なのん？
HPビルダのデフォルト設定が750*900だけどこのまんま作ってええんかな。
14：犬：2007/07/15(日) 13:24:52: >>13

横800px以内が基本です。
これはモニタの最小サイズ800*600の中で
納まるようにする為です。

ですが、もはや800*600の環境は化石となっており、
現在の最小サイズは1024*768と新たに規定されつつあります。
余談ですが、Yahoo!のTOPページも近日中にリニューアルされ、
横幅が740pxから950pxに拡張されます。

縦は特に決まりはありませんが、
あまり長すぎるのは避けた方が無難です。
900ぐらいは無難な数値だと思いますが、
ページごとに長さが変わっても特に問題はありません。
縦は長さよりも「ファーストビュー（※）に何を配置するか？」
を意識する事が大切です。
※スクロール無しで表示される範囲の事

ファーストビューに配置された内容と、
それ以下に配置された内容では、
ユーザーへの影響度が格段に違います。

ユーザーはファーストビューを見て、
そのページへの興味を持つ事ではじめて
画面をスクロールさせて下まで見る、
というアクションを起こします。
15：tacos：2007/07/20(金) 06:36:45: 只今猛烈な無力感に駆られ中。
総ページ数は40近くに増加。アーキテクト(?)構築、ページ間リンク等の基礎工事は終了。の筈。
ただ、依頼主と会えない日々が続いているので細かいデザイン部分やコンテンツ内容が空白なページがあったり。
とにかくこれで良いのか悪いのかのジャッジが欲しい。
つーか俺の悪い癖で昨日自分が作ったものが今日になって許せなくなったりしてるのもあって脳内が混線中。
あ、「戻るボタン」作ってないや。又リンク張りなおしだくそぅくそぅ。

つーことでデザイン以外で見落としがちなHP作成時の致命的欠陥とかあったら教えてくださいな。
つーことですっかり俺のスレになってるな。
16：tacos：2007/07/21(土) 17:31:54: http://tomoyo37-web.hp.infoseek.co.jp/mlc/

とりあえず現状をｱﾌﾟ。見た目デザインとかはまだ未実装。空白は依頼主の素材待ち。
忌憚の無い意見をお伺いしたい。
17：犬：2007/07/22(日) 02:06:55: >>16
デザインの際には、このページを見る人が誰なのか？
何を求めてこのページを見るのか？　を常に意識する事が重要です。
今回の場合、安心感、清潔感が重要かと思いますので、
そういった点も意識してデザインすると良いかと思います。

内容としては、病院の外観、内観、院長の略歴、医院の実績
価格例等を追加した方が良いですね。

分かり辛い説明もあるかもしれませんが、
見せて頂いた中で気付いた点を以下ざっくりと。

■メニュー構成がページによって変わってしまう事。
　ユーザーは自分がどこのページを見ているのか分からなくなってしまいます。
　これだけは絶対に直した方が良いです。
■戻るボタンとメニューが同一レベルで配置されている。
　戻るボタンは右側本文の下部にあるのが好ましいです。
■ページによってマージンが違う。
　ページ遷移でトップイメージやメニュー位置がガタガタと変わってしまう。
■右側本文に見出しとして、現在表示中のメニュー名をつけた方が良い。
■ページを分けすぎて階層が深くなりすぎている。
■フッターが無い。本文やメニューがブラウザのギリギリ下までで表示されてしまう。
■左上の病院名ロゴからトップページへのリンクを貼った方が良い
■各ページイメージ上に表示されている文字サイズ、文字位置等が統一されていない。
　結果としてバラバラな印象を与えています。
■上記と同様に、本文の文字位置も統一されていない。
■病院のサイトである事を考えると、全体的な色使いは
　白、緑、薄い青あたりが無難。
　メニューに使用しているピンクは色味がキツすぎる。
■メニューをロールオーバーでハイライトさせるているが、
　白い文字をハイライトさせると見え辛い。
■トップページのメインイメージが紫と青を基調としており、
　暗いイメージを与える。
　その他、各ページトップに配置されている画像と本文の関連性が謎。

もしかしてMacでデザイン作業をしていますか？
全体的にイメージが暗いと思います。
MacはWindowsと標準のガンマ値が違いますので注意が必要です。

以下、参考までに、現状の遷移図を作ってみました。
２階層目に内容をまとめてしまって、
３階層目は無くてもいい気がします。

トップページ
┣当医院について
┃┣院長ご挨拶
┃┗アクセス
┣診察内容
┃┣産科
┃┗婦人科
┣各種サービス
┃┣母親学級
┃┣マタニティビクス
┃┗マタニティアクア
┗よくあるご質問
　┣月経周期
　┃┣月経周期とは
　┃┗基礎体温を知るメリット
　┣避妊について
　┃┣妊娠のメカニズム
　┃┣どんな避妊法がある？
　┃┣最も確実な避妊法は
　┃┗産みたい時に産むために
　┣ピルについて
　┃┣ピルとは
　┃┣ピルの服用法
　┃┣ピルの副作用は
　┃┗ピルの副効用
　┣性感染症【STD】について
　┃┣STDとは
　┃┣STDにはどんなものがある？
　┃┣STDに感染したら
　┃┣STDに感染しないために
　┃┗クラミジア
　┗女性特有のがん
　　┣子宮頸がん
　　┣子宮体がん
　　┗乳がん
18：tacos：2007/07/22(日) 09:13:32: おおー超ダンケ。早速直す直す。
色使いはかなり悩んだんだけど「主にティーンズ向け」と言われて思わずピンクにしました。
この発想の貧困さ。壁紙も超薄いピンクの予定でした。どーしよう。
とにかく基礎工事のやり直しだな。いやﾏｼﾞでﾀﾞﾝｹｽｺ。
19：犬：2007/07/22(日) 20:39:38: 休日出勤ばりばりで全然暇無いよ。
前回からの進展は、ケーブル整理用の使い捨てバンドを買ってきた事と、
PHPのごくごく初歩的なガイドをWeb上で飛ばし読みしたぐらい。

あと思いついたので、やりたい事を追加。

・各記事別にソーシャルブックマークボタンを配置
・人気のタグを表示
・投稿削除用管理ツール
・回答傾向を記録してマッチングみたいな事が出来ると楽しい。

とりあえず初期リリース用の具体的な実装内容も検討しなきゃな。
20：犬：2007/07/23(月) 22:47:10: 時間が無いので雑なイメージですが、こんな感じで伝わりますでしょうか？

http://www.geocities.jp/xiga_rs/sample_1p.jpg
http://www.geocities.jp/xiga_rs/sample_2p.jpg
http://www.geocities.jp/xiga_rs/sample_3p.jpg
21：犬：2007/07/23(月) 22:47:58: 上記直接ブラウザのアドレス欄にコピペしてアクセスして下さい
22：tacos：2007/07/23(月) 23:07:22: あーあーあーあーなるほどなぁ。直して考えてみる。ありがとー。
やっぱり勉強しないと駄目だなぁ。
仕事中に仕事させてしまってごめんよ。
23：犬：2007/12/26(水) 19:03:14: なんか仕事をやりたくなくなってきたので、
また趣味のサイトを作りたい欲がモリモリと沸いてきた。

とりあえずローカルの開発環境整備するのは諦めて、
安いレンタル鯖でも借りてこようかと思う。

・レンタル鯖借りる
・プログラム練習１
　→　フォームから入力された内容をPHPで受けてmysqlに保存
　　　mysqlからPHPでデータを読み込んで表示

とりあえず直近の目標はこんな感じか。