こんなサイトが作りたいと思ったとき…

質問

今までfc2のブログを簡単にカスタマイズしていました。
最近webサイトを作りたいと思い立ったのですが、どのように作ったらいいのでしょうか？
例えば、以下のようなサイトがいいなぁ～こんなサイトが作りたいなぁ～
http://www.cluch.jp/
http://www.mamanqa.com/
と思ったとして、そこからどうしたらいいのでしょうか？
webサイト制作の本をみておけば、いいと思ったサイトの作り方や構成要素が分かるものなのでしょうか？
サイト作るのに必要な本や、ソフト等々アドバイス、お願いします。
（OSはMacのLionです）

回答No.2

ORUKA1951 · ベストアンサー

firefox + firebug( https://addons.mozilla.org/ja/firefox/addon/firebug/ )が一番良いです。
　ただ、どのような見栄えの良いサイトでも、デザインのヒントとしてサイトを眺めることが多く、実際にどのようにHTMLやCSSが書かれているかは、ほとんど参考にならないことが多いです。HTMLは、それぞれの文書によって構成が異なります。デザインのためにHTMLを書くと文書構造をマークアップするHTMLの目的から外れますから・・

お礼

ありがとうございます！
教えて頂いたアドオン、とても良さそうです。
日本語の使い方をみつつ、本も読みつつ、進めようと思いました。

回答No.4

noname#242220

現在のサイトはCSSでデータの位置を決めています。
データのみをコピーしても実際の形には成りません。
サファリの場合は『ウインドウ』メニューから『構成ファイル』を
選択すればどのファイルを使っているかは理解出来ると考えます。

CSSについては
・新標準HTML5 & CSS3辞典
< http://www.amazon.co.jp/dp/4844331752/ >
http://www.openspc2.org/ 　ー＞作成者のサイト

お礼

ありがとうございます！
cssも合わせて、よくみてみます！

回答No.3

Dr_

2つのサイトのどこが良いと思われたのでしょうか？
それによって、答えが変わります。

1.そこからどうしたらいいのでしょうか？

まねしてみることです。自分に足りないことが把握できます。どうしたら真似できるかわからなければまずはこうしたい（見本）ではなく、うごく写真を挿入とか、ヘッダーの下に3コラムの文字情報をなど、具体的に情報を分解。もしかしたら、こんな写真を撮りたいだけで、fc2ブログでも出来るかもしれないし……

2.webサイト制作の本をみておけば、いいと思ったサイトの作り方や構成要素が分かるものなのでしょうか？

見るだけでは始まりません。実際に試して見ることです。html+cssはソースを見れば済みます。本気で取り組めば、1ヶ月もあれば、ソースに何が描いてあるかはわかるようになります。

3.サイト作るのに必要な本や、ソフト等々アドバイス、お願いします。
私が2つのサイトを拝見して思ったことは、複数のプロの仕事です。本はレベルに合わせて、基本から必要でしょうね。かといって、基本だけではどうにもならないでしょう。ソフト以外にフォントや技術も必要です。

見本のサイトを作ろうとすれば
1.html+css+JavaScript(Jquery含む)の技術（いいと思ったサイトの作り方や構成要素が分かるし、丸ごとぱくれます。Ｗｅｂページを公開することはソースを公表することです。技術を隠して公開はできません）
ソフトはテキストエディタなら何でも可です。2.の素材を組み合わせて配置するだけの役割です。これを極めても、多分、素敵！なものは作れません。サイトのビジュアルは2.の素材によるところが大きいです。試しに、画像をオフにして気に入ったサイトをご覧ください。それが、1.にできることです。

2.その他の素材の技術（出来上がりは公開しますが、技術は公開しません。）
が必要ですね。

写真を撮って（カメラマンの仕事）、撮った写真を補正、加工して（カメラマンおよびデザイナー）。プログラム（デザイナーかコーダー）の部分と、フォントを用意（既存のフォントを購入し加工）し、画像化（デザイナかコーダー）。そして、0から自分で頭の中のイメージを画像化する（デザイナ）。そして、それらを統括し指示（ディレクタ）する人が必要だと思います。1つ1つがプロのお仕事かと。

それぞれに技術が必要なので、その辺の素人が写真をとってもこのサイトの写真のようにはならないと思います。ソフトを手に入れればできると思っておられるのなら、ちょっと違うかなと思います。

お礼

ありがとうございます！
とても丁寧なご回答、助かります。
確かに…写真の技術もろもろで仕上がっているんですよね。
本気なら1ヶ月、思ったよりも早くできる感じがして安心ししました。
真似るところから始めてみます。

回答No.1

aran62

ページを開きます。右クリックでページのソースを開きます。
これでサイトの構成要素がわかります。

これを一つ一つ、本と照らし合わせてチェックしてみると理解できると思います。
基本は全部一緒です。

お礼

ありがとうございます！
ブログのcssは難しい感じがしないのですが、ソースはみても先入観で…しっかり向き合おうと思います。