↓このようなホームページを作りたいのですが？

質問

ご質問を見ていただきありがとうございます。
私はホームページビルダーで2年ほど、ホームページを作っているのですが、どうしても下記のようなサイトが作れず、毎日モヤモヤしています。

http://www.management-facilitation.com/index.html
上記のように、
(1)ページ上部の赤ロゴ（タイトルと人物の画像を混ぜたロゴ）の作り方

(2)ページ全体を囲んでいる赤い枠の作り方
具体的には上記サイトのようなページ枠の作り方

(3)タイトルロゴ（(1)）の下にある、「セミナー」のようなロゴの作り方

これらがホームページビルダーで作っていたのですが、どうも素人らしさが前面にでてしまいます。いろいろなサイトを見ますと、ビルダーで作ること自体が「素人」と言うことでしたが、上記の作り方はやはりビルダーではなくフォトショップ等で行うべきなのでしょうか？

おそらく、(1)と(3)についてはフォトショップを利用すべきだとはうすうすは感じておりますが、(2)については、十分ビルダーでも可能ではないかと思います。

この事が頭から離れずモヤモヤが止まりません。どなたかご教授ください！

回答No.7

hinatamama · ベストアンサー

フォトショップにチャレンジされるのですね。

(1)の作業の流れは、
・背景を赤で塗ります。
・その上に、人物の画像レイヤー1（すでに画像の背景を処理しているものとします）を用意します
・レイヤー2を新規作成し、横書きマスクツールで文字を書き、赤で塗りつぶします。
・選択範囲を保ったまま、レイヤー2の下に、新規レイヤー3をつくり、選択範囲を2pxほど拡張して白で塗りつぶします。
・レイヤーの2と3を結合します。これで白抜き文字の完成です。さらにこれにドロップシャドウをかけます。
・各レイヤーを縮小させたり移動したり、テキストを入力して完成です。

(3)は、反射形グラデーションをかけた上に、白でテキストを入力し、ドロップシャドウで完成です。

(2)ですが、このサイトは、テーブルの枠に画像（1pxの赤線と、余白のある画像）を使っています。No6の方のようなやり方もありますが、現在あまり推奨されていない（アクセシビリティの面で）やり方です。

コンテンツ全体を、テーブルで囲み（スタイルシートだけでもできますが、今のあなたには、失礼ながら難しいと思います）、そのテーブルの枠にスタイルシートで色を指定することで可能です。

<table cellpadding='0' cellapacing='0' style='width:763px;border:1px #c00 solid'>
<tr>
<td>
コンテンツ
</td>
</tr>
</table>

フォトショップの作業手順を読んでも、今は分らないと思いますが、まずはやってみることです(^^)

また分らなければ質問すればいいのですから、
頑張ってくださいね。
その向上心が大切だと思います。

回答No.6

sego

（１）（３）フォトショップやペイントプロなどの写真系ソフトで作成されると早いです。（可能です）

フォトショップなどは９万円しますが、３０日で使いこなして、使い切ってしまえば無料でダウンロードできます。
（世間では、無謀と言います、しかし目的がはっきりしているので、本屋当で解説本を立ち読みしていざ無料お試し版をダウンロードして３０日間みっちりがんばれば不可能ではないと思います。）

（２）テーブル２段がさね外側のテーブル背景を赤に
内側のテーブル背景を白等にして１ライン見えるようにすると可能です。（という方法も、一例）

<TABLE cellspacing="0" cellpadding="0" bgcolor="#ff0000" border="0" width="100%">
<TBODY>
<TR>
<TD>
<TABLE cellspacing="1" cellpadding="5" border="0" width="100%">
<TBODY>
<TR bgcolor="#ffffff">
<TD align="center">本文</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>

でも可能です。

参考URL：

http://www.adobe.co.jp/products/photoshop/pscs/main.html

回答No.5

ohsakura

ＨＰビルダーを使用している者ですが、失礼ながら勉強がたらないだけだと思います。ＨＰビルダー使用でもすばらしく綺麗なページも多々有ります。

レイアウトと配色が合わない方が多いと思います。中央寄りばかりに配列したり、やたら文字が小さくて醜いとか、配色が原色で、目に優しくないとか色々と有ると思います。

私のように１週間毎に、更新するものには、市販のソフトは便利ですし、タグで作る本でやって見ましたか、表を複雑に作るのは、タグから作るのには疲れました。タイピングも出来ないので。

３の方のようにソースを見てビルダーで、綺麗に作っている管理人に、メールして聞かれても良いと思います。

私は質問して聞いて改良しました。他人様にビルダーで作った事と思わせないほど、勉強したら楽しいと思いませんか？

私もそれを目指しています。

お礼

ご回答ありがとうございます。おっしゃる通りです。
勉強不足の為、わかるものもわからない状態です。もっと勉強して解決したいと思います。

ありがとうございました。

回答No.4

rightegg

うん？

ちょっと疑問が....

ホームページビルダーとフォトショップって目的が違いますよ？
ホームページビルダーってのはHTMLのプログラムを自動的に生成するのがメインのソフトです。
画像関係の機能はおまけに過ぎません。あれで画像を作っているのだとしたらそりゃ素人っぽいですよ。
プロでそんな人がいたらビックリします。

で、フォトショップは画像編集がメインのソフトです。ホームページ用から印刷用まで様々な画像を作ることが出来ますが、HTMLは生成しません。
つまりフォトショップで作った画像をまた、別の方法でホームページに配置しなければなりません。
僕はタグ打ち派なので、ホームページビルダーみたいなものは使わず、全てテキストエディターでHTMLを書きます。

(2)については正にHTMLさえ理解できれば簡単な事なんですが、ホームページビルダーみたいなものに頼っているからHTMLが分からずもやもやすることになります。
まあ、今ではHTMLがいまいち理解できてないプロも居る世の中なので、それはそれで良いのかも知れませんが、非常に簡単な言語なので是非覚えてください。
そうすればどんなサイトだろうがソースを見るだけでその仕組みを理解できます。

お礼

ご回答ありがとうございます。

ご指摘の通り、ビルダーでロゴを作成していました。やはりフォトショップにて挑戦したいと思います。

アドバイスありがとうございました！

回答No.3

rightegg

こんにちは。
ビルダー云々より画像制作が大半ですね。

(1)特に難しいことはありません。なるべく単色の背景で写真を撮影し、丹念にエッジを処理して背景色を変えるだけです。微妙にドロップシャドウも使ってますね。仰るとおり、フォトショなどのレイヤー機能が付いた画像編集ソフトが必須です。

(2)これはソースを見れば分かりそうなものですが、多分背景に色を付けつつ、セルの隙間を1px空けただけです。（言ってる意味が分かりますか？）

(3)背景にグラデをかけて文字を乗せてドロップシャドウ。まあ、フォトショを使えば誰でも出来ます。

回答No.2

noname#10657

どんなサイトでも、通常「ソース」を見ればだいたい察しがつきます。
ブラウザの「表示」「ソース」をまねて研究してみてください。
ロゴについては、何を使ってもいいでしょう。根気が必要かも。

回答No.1

totoroscatbus

私も最初はホームページビルダーを使っていましたが
とちゅうでメモ帳などのテキストエディエタに変えました。
理由は、構造を把握したかったからなんですが。

使っているとそれだけじゃなく、他のいろいろな要素があることに気づき、ネットを回っていろんな要素を探しながら、自分らしいHPを作りました。時間はホームページビルダーを使うより、早くできたような気がします

というわけで、ネットでHTMLリファレンスを探して、それを見ながら作るのがおすすめです

がんばってください