サイトを作る手順 [友達のサイト編]

  • このエントリーをはてなブックマークに追加

お友達に、サイト作りを頼まれていまして、作っていました。

その際に、こうやって、こういう手順で、こんなもの使って作りました。ってのを書いてみようと思いました。


まずどんな、サイトにしたいか打ち合わせ(バーミアンw)

そのお友達のやりたいこととしては、

  1. 「言葉と音楽の融合」。言葉を音楽でさらに引き立たせたい。
  2. 好きな著名人の言葉を、ノートに書いているので、サイトで整理して共有したい。

なるほどと思いながらも、問題点がありました。

  1. 音楽をたくさんあげるとなるとレンタルサーバーの容量が足りなくなる。
  2. 言葉が膨大な数になるとのことで、サイトの管理が大変になってくる。

ということです。

1の解決策としましては
  1. youtubeなどのサービスを使い音楽をアップロードする。
  2. 音楽ファイルをたくさんあげても、大丈夫なように、容量が大きめのサーバーを借りる。

友達の意見としては、あまりサービスの利用をしたくないとのことでしたので、2番目でいくことに決めました。借りたサーバーは

です。容量も15GBあるので、まぁ、大丈夫だろうなぁと。お値段もお手ごろということもあり(初期費用1000円月500円)、ここに決めました。 (サイトの作りが、自分的には、少しわかりづらく、迷いました^^;慣れればもんだいないんですけどね。)

2の解決策は、

Movable Typeを使い,管理しやすいような仕組みを作ることにしました。

ついでにブログもしたいといっていたというのもあります!

入れたいコンテンツとデザインを決める

  1. いくつかのカテゴリに分けた、ブログ
  2. 好きな著名人の言葉をまとめたページ。
  3. 周一で気に入った言葉をトップページに表示したい。

なるほどなるほど、だいたい構想はまとまったので,デザインはどうしよう、という話に。

が!デザインのことはまったく考えてなかったらしく、今度までに考えてもらうとして、Movable Typeをつかって、仕組みの構築だけを先にしてしまうことにしました。

本格的な作業はここから「Movable Typeをつかって、仕組みの構築」(約4.5時間)

を少し改造して、デザインはおいておいて仕組みのみ構築しました。

数日後、デザインの話)

話を聞くと、「立体的な物」、「奥行きがある物」「明るいイメージ」がいいとのこと。

図書館で画家の本を借りてきて、こんなイメージがいいな、と。

難しい・・。そして、いろいろ話、本を使ったデザインはどうだろうという話になり。その方向でデザインすることになりました。

デザイン開始(約1日)

いろいろ考え、ページを半分ぐらい開き、左側にメニュー右側にコンテンツというのが頭に浮かびました。

「言葉というものを大事に」というイメージだったので、雑誌でやろうとも思っていたのですが、雑誌系よりも、ちゃんとした、「本」を思い浮かべ、うちにはなかったので、図書館に借りにいきました。

というわけでいろいろ加工し、作ってみたのですが・・。

背景の色と本の色が・・。

何か途中まで作って、自分的にしっくりこず・・。

違う視点から作ってみることに、

しっくり??

背景が明るく、本と合わないような気がしたので、暗めにしてみました。

とりあえず、これで見てもらうことに!

デザインを見てもらってからの作業(約1日)

見てもらうと、当初言っていたとおり、もうちょい明るめがいいとのこと。「うーん、そうだよなぁ」と思いながら、とりあえず、前に作ったものも見てもらったら、「前のデザインも悪くないなーってことで」。

「最初は雑誌でやってみようかなぁ」って考えてたって話をしたら、「雑誌でもいいよ」ってことなので、ためしに作ってみることに。

雑誌のほうがしっくりかな?

雑誌をデジカメで撮って加工して、デザインをつくり、見てもらったら、

OK!!

Movable Typeにデザインを当てはめていく(約4.5時間)

すでに出来上がってる、Movable Typeの仕組みをもとに、CSSを当てはめていきデザインを完成させます。

実際にサイト出来上がってからの細かい修正などをして、完成!(合計して約半日)

実際のサイトはこちらです。

Movabl Typeだと、友達と二人で更新していくということもできるので、二人でやってるみたいです。

友達としてる会話などが音声で張ってあったりして、
おー、こういうのも面白いなぁ!って思いました!

なんか、熱い思いが詰まってるようなサイトです!


まだまだ、サイトでやりたいことがあるみたいで、いろいろ意見を言ってくれるのですが、それは、やりづらいなぁ・・ってものも・・。

(例えば、記事でもらったアクションよって、ドラゴンボールの元気だまを大きくしたい!とか)

まぁ、そんな感じでいろいろ苦労もあったのですが、できました!なんだかんだで面白かったです!いろいろ勉強になるしね!

コメント : 3

コメントフォーム
匿名 : 2009年04月01日 (水) 13:35

プロフィールとか縦幅が極端に短くなるページはmin-heightとかで対策した方が良いのではー?
デザインはおもしろいですねー。きっと苦労したことでしょうw

さいころ : 2009年04月01日 (水) 14:26

加工とかデザインとか面白いですねー
最初のデザインも需要ありそうで、すごいっす

kame : 2009年04月01日 (水) 22:28

匿名さん
たしかに、縦幅、小さいところはmin-height指定して、雑誌に見える最低でも雑誌に見える大きさぐらいまでにしてほうがいいですね!
ありがとうございます!

って、「匿名」って誰ですか!?w
先生?


さいころさん
ありがとうございます!
いろんなデザインを作るたび、
いろんな面白さがあって楽しいです。
もっとこうしたらいいものできたなぁとか、
探り探りの部分もまだまだあるので。
次同じようなデザインを作ったら、もっといいものができるように!ですね。

トラックバック : 0

http://develo.org/mt/mt-tb.cgi/58

このページの先頭へ戻る