http://www.godheadsilo.com ホームページの作り方に関することを紹介 Tue, 03 Aug 2010 01:27:36 +0000 http://backend.userland.com/rss092 ja ホームページの作り方とは言っても、「こうやって作る！」という決まりはなく、自分がしたいデザインにどう近づけていくか、ということがホームページ作りの基本だと思ってください。 まずどういったホームページにしたいのか、コンテンツを考えます。その後にそのコンテンツをどういった配置にするか、どのページにこのリンクを持って行くかというような構成を考えなければいけないのですが、とりあえず絵に書いてみることが大事です。デザインも含めて書いていくと、イメージがわいて作りやすいかもしれませんね。 そしてその後に、ここを大きい文字にしたい、ここを何色にしたい、ここだけ枠で囲みたい、文字の下に線をひきたい、トップの画像にタイトルを入れたい、というようにやりたい事をひとつひとつを調べながら徐々に対処していくといいと思います。 また、自分がやりたいデザインの方法を調べていくうちに、別バージョンのやり方などもありますから、自分がやりやすい方法で作っていくと無理なく作ることができます。 また、今は難しそうだからいいけど、後々できるようになってきた時の為に、覚えていきたいなと思うような説明がそこにあれば、テキストエディタなどにコピペして、自分専用の「作り方の説明書」を作っておくと、次から検索して調べなくても済みますし、なによりタグなどを打ち込まなくても済むので楽ですよ。 これはそれほど頻繁に使わないタグなどはすぐに忘れてしまうので、思いだす際にも便利ですよ。 http://www.godheadsilo.com/?p=64 ホームページの作り方を紹介してきていますが、今回は基本のとりあえず決めておくことなどを紹介していきます。 まずホームページというのは ＜html＞ ＜head＞ ＜meta http-equiv="content-type" content="text/html; charset=Shift_JIS"＞ ＜title＞ホームページの作り方＜/title＞ ＜/head＞ ＜body＞ コンテンツ ＜/body＞ ＜/html＞ というような形になっていますよね。 正確には、もっともっと細かく色々な指定（タグなどを記入）していって、配置やデザインを考えていかないと、まともな表示にはなりません。なので最初はとりあえず、背景や文字色、リンク色などを指定しなければいけませんね。 最近ではこれらを全部ＨＴＭＬで指定していくというよりも、スタイルシートをつかった作り方の方が主流のようですね。 ホームページというのは、同じデザインのページが何ページもあり、コンテンツに変化をつけていき、それらがすべて組み合わさって、初めて１つのサイトになっているわけですよね。 なので、もしどこかのページで間違った指定をしているのに、それをそのまま気付かずにコピーして、どんどんページを増やしていくと、後からそれを見つけてしまった場合、または修正せざる負えなくなった場合に、いちいち全部のページを開いて指定し直していかなくてはいけなくなります。ハッキリ言ってその作業は実に大変な作業です。 なので、あらかじめデザインや文字色、文字の大きさなどをスタイルシートに指定しておくことで、各ページにそのスタイルシートの指定を呼び出しタグで呼びだす方法でやっておくと、後から色や大きさを修正したくなった際に、面倒なことにならない方のです。 ＣＳＳの指定を変えれば、全部のページに入って直しに行かなくても、勝手にすべて変わるわけですから、非常に楽ですよ！（呼び出しタグの方の綴りなどが間違っていなければ・・・ですけどね（笑）） http://www.godheadsilo.com/?p=62 ホームページの作り方について色々と紹介してきましたが、ホームページに載せる画像を作るとなると一般的に使われているのがPhotoshopやFireworks、Illustratorというものが一般的だと思います。 Photoshopの使い方は学校などでも習うことが多いかと思うのですが、今回は画像の作り方・・・ではないのですが、Photoshopの便利なツールについて紹介していきたいと思います。 ＜範囲選択などのツール＞ ■短形選択 画像の一部を短形で選択するツール。 ■移動 画像上をドラッグして画像を移動させる。 ■なげなわ 線や塗りの一部分を選択したい時に使う。 ■自動選択 クリックした部分と近い色調の部分を選択。 ■切りぬき 画像を切り抜く ■文字 文字を書きたい時に使う。 フォントはコンピュータにインストールされているものが使えて、 文字の大きさや色を選ぶ。ボールド、イタリックなどの変形も使える。 ＜描写のツール＞ ■カスタムシェイプ 登録された図形を描く。 「Shiftキー」を押しながらドラッグすると、盾を横を同比率で縮小したり拡大したりできる。 ■グラデーション 線や塗りで閉じられている部分にグラデーションをつけて塗ることができる。 ■エアブラシ エアブラシのようなスプレー効果の描写ができる。 ■ブラシ なめらかなカラーの描写ができる。 ■塗りつぶし 線や塗りで閉じられた部分を塗ることができる。 ■えんぴつ 輪郭のはっきりしている描写ができる。 ■消しゴム 画像を消す時に使う。 ■印象派ブラシ 基の画像をブラシでシュミレートして、印象は絵画のように加工ができる。 他にも画像修正のツールなど色々なことができます。 今回は長くなったので、また今度機会があれば紹介しますね。 http://www.godheadsilo.com/?p=58 ホームページと言えば何かしらの画像がついていますよね！ 無料ブログなどでは無料で（一部有料もある）、しかも簡単に設定できるテンプレートなんかがありますが、もちろんホームページにも同じものがあります。 無料で素晴らしいデザインのものを配布しているところもありますし、有料としてそれを売っているところもあります。 ホームページというのは色々な画像の組み合わせみたいなものですからね！その上に文字などを乗っけているわけですから、そのホームページの顔として、どういった画像にするかというのは結構重要です。 まず、画像の作り方について色々と紹介したいのですが、その人によって使いやすい使いにくいがあると思うので、どのソフトがおすすめ！ということは正直いえません・・・。 また、作り方なんて全く知らないし、どこか無料のところからもってくるわ！と考える人もいるかと思います。無料で配布している場合、ほとんどは「加工ＮＧ」とか、「リンクを張ってください」とか、「持って帰る時に一言ください」などと書いてあることが多いです。そういったサイトからもらってくる場合は、マナーをしっかりと守ってくださいね！ また、自分の好きな色で作りたいのはわかりますが、せいぜい３色くらいに抑えておくのがいいと思います。また、統一感を出す為に、同系色を使うとキレイになると言われています。カラーコーディネーターの友人にアドバイスをもらった時に、「全くの反対色を使ってパキっと印象を変えるのもきれいだよ！」と聞いたので、いろいろな色を組み合わせて自分が納得のいく配色で作ってみてください！ 画像の背景グラデーションとかで作るとページ全体が立体的に見えてキレイに見えます。・・・個人的にはポップな感じが好きなので、単色の背景にベタっと絵を貼り付けただけのようなサイトの方が意外と好きなんですけど！（笑） また、色によってかなり印象が違うので、真面目なサイトなら寒色系、女性向けのサイトなら柔らかい色合いのピンクだとかピンクオレンジなどの色合いがおすすめです！ また、気をつけたいのが、文章を読みにくくなるような色合いの作り方や、目がチカチカしてしまうものはやめた方がいいです。読むのに疲れてしまうようなサイトだと、せっかく来てくれた人がすぐに帰ってしまう場合もありますからね・・・。 ベージュの背景に濃いめの茶系の文字、パステルカラーに濃いめのグレーの文字など、背景が薄めな色で、文字を少し濃くすると、読みやすくていいのではないかと思います。 すごくきれいな画像を作りたいと思っても、その作り方が難しかったりするけど、一生懸命作ってるときって結構楽しいんですよね☆ 頑張って素敵なホームページを作りましょう！ http://www.godheadsilo.com/?p=56 ホームページの作り方というと、決まった法則があって、それに正確にのっとって作っていくというイメージがありますが、デザインに関してはこういったデザインで作りたい！と思った時に、実はいろいろなやり方があるのです。 人によって似たような意味のタグをしっかり使い分けている人もいれば、同じタグばかり使っている人もいます。その人によって使いやすい、分かりやすいやり方でやればいいのです。 でもどのやり方でやってしても、正確な指定ができていれば、同じデザインにすることが可能なんです。もちろん指定の仕方などはだいたい決まっているんですけどね。 あと、私もよく失敗するのですが、完成してからリンクの飛ばない箇所がいくつか出てきます。確認しているつもりでもこういった失敗を繰り返しているので甘いなと思います・・・。抜けているというかなんというか・・・。 ホームページには階層がありますよね。ひとつのだいたいのページを作ってしまえば、それをコピーして、そのコピーしたページを手直ししていけばいいわけですが、その完璧に作ったつもりの元となるページにリンクの失敗をしていると、後からの手直しが大変になります・・・。せっかちなのでついつい次に行きたくなってしまうのが悪い癖です。 作り方にはいろいろな方法があるわけですが、私のように後から手直しに時間をかけてしまう羽目にならないように、確認に時間をかけるのが、ある意味１番効率のいい方法かもしれません。 http://www.godheadsilo.com/?p=54 前にスタイルシートを使った作り方について紹介しましたが、そのスタイルシートというのも結構色々な指定ができて、覚えてしまえば何でも自分の思い通りのデザインが作れてしまうと言いましたよね。 ただ、このすべてを使いこなして作り方を覚えるというのはすごく大変ですが、やっていくうちに慣れていくので覚えてしまえば非常に楽しいです。最初のうちは作り方も全く分からないので、どこかのサイトでタグの意味や指定の意味を調べたり、質問したり、本を読んだり、詳しい人に聞いたりして、やっとかっとで作り方を学んでいき作り上げていくのですが、慣れている人ならデザインだけなら数日でできるのだそうです。 それを本業として独立している人もいるくらいですから、作り方の知識はものすごいたくさん持っているでしょうね。（独立するとなったら知識があるだけではやっていけませんが・・・） でも完成してきた時には、今までの苦労が全て忘れてしまうくらいに楽しいものです。最近ではまったくの素人さんでも携帯を使ってホームページやブログをカスタムしたりして楽しんでいる時代ですから、プロなら今後はもっともっと専門的な知識が必要となるかも知れませんね。 私のまわりにもウェブデザイナーの人が何人かいますが、そういった人達は作り方だけじゃなくアイコンや画像までもすごいきれいなものを作っていたり、ｐｃに関する知識も結構すごいので、どこかのオーナーに雇われて様々な仕事を任せられたりしています。 知識があってセンスもあれば、どれだけでも可能性が広がる仕事ですよね。 http://www.godheadsilo.com/?p=50 ホームページの作り方と言えばスタイルシートがありますよね。 スタイルシートは、WEBページ上のレイアウトデザインを定義するための技術で、使えるようになればすごく便利なモノだと思います。 まず、CSSの書き方には、＜/head＞の上に直接記述する方法と、CSSファイルを作ってCSSファイルを外部から呼び込む方法と、直接＜body＞内のソース部分に記述する方法があるのですがそれはまた次の機会にでも紹介していきます。 HTML文章に適用させる場合にはCSSと呼ばれるものを使って、ホームページのデザインに関することを細かく指定できます。スタイルシートとCSSが同じものであると思っている人もいますが、正確に言えばこれは正しくはないのです。 スタイルシート機能を実現するための方法の１つが、CSSというのが正解かもしれませんね。でも、このCSSばかりに頼るホームページの造り方をしていると、ブラウザによっては見栄えが違ったりもしますから注意してくださいね。 ただ、先ほども言いましたが、これに関しては覚えてしまうと本当に色々な細かい設定ができるようになるので、実に便利なものです。ただ、覚えることも沢山あります。１つの方法を行うにしても何通りのやり方があったりして、非常に頭が混乱してしまいます。 デザインをよく見せる為に色々な工夫ができる反面、頭に叩き込むこともたくあんあるということですね。ホームページの作り方を覚えるというのは非常に沢山の知識を詰め込まなくては難しいことなんですね。作り方を覚えるというのはかなり大変な作業かと思います。作り方がわかって完成したら嬉しいしおもしろいんですけどね。 あと、ホームページにはサーバーというものも必要ですから、そういった管理に関してはデータセンターというところでお願いできるサービスもありますよ。 エーティーワークスというところではサーバーハウジングやコロケーションについて紹介してるので見てみてください。 http://www.godheadsilo.com/?p=45 ホームページの作り方で大事なことと言えば見やすいサイトを作ること。 その見やすいサイトにする為には、色を２～３色で使い分けてみたり、 画像をつけてイメージしやすくしたり、文章を書いて説明を入れる時も長々と横に広がらないようにしたりと、工夫するところは沢山あります！ そのうちのひとつを今回紹介したいと思いますが、例えばメニューを作る。メニューを作ることでかなり見やすくなりますよね。ホームページに自分の簡単なプロフィールを載せたいと思っている人もいるでしょうし、日記をつけている人は日記という項目もホームページ内にあるでしょう。他にも、顔も知らない色々な人と交流する為のBBSなどという掲示板を設けたいと考えている人もいるかと思います。 とにかくコンテンツの内容は色々ですよね。 そんな時に大事なタグと言えば、テーブルタグ。 ＜table border="0" width="100"＞ ＜tr＞＜td align="center" bgcolor="#ff00ccF"＞プロフ＜/td＞＜/tr＞ ＜tr＞＜td align="center" bgcolor="#ff66ff"＞日記＜/td＞＜/tr＞ ＜tr＞＜td align="center" bgcolor="#ff00cc"＞BBS＜/td＞＜/tr＞ ＜tr＞＜td align="center" bgcolor="#ff66ff"＞リンク＜/td＞＜/tr＞ ＜tr＞＜td align="center" bgcolor="#ff00cc"＞TOP＜/td＞＜/tr＞ ＜/table＞ ※【＜】と【＞】は実際にはすべて半角で指定しないといけませんよ。 という風に表示すると色が一行ごとに交互に配色されるので、上下分けられていて見やすくなるはずです。この時に使う色は自分のホームページのテーマカラーに合わせて色を好きなものに変えるといいと思います。ここでは濃いめのピンクと薄めのピンクを交互に使っています。 ここにリンクタグをつける作り方も当然大事です。あなたの日記を読みたい！と思った人がここにカーソルを置き、クリックしたときに「ここからは飛ばないのか・・・じゃどこから見れるの？」と思うと探すのが面倒になって「もういいや、次のサイトに行こう」と思うようになるかと思います。そうならない為にも、せっかく来た人が「もっと見たい！」と思うようなホームページの作り方をしていきたいですね。 http://www.godheadsilo.com/?p=41 ホームページの作り方について、色々と紹介してきましたがホームページの作り方の基本として大事なものは、やはりタグです。どんなホームページを作るにしても、タグを知らないことには何もさわれません。 ホームぺージの作り方としてこのタグを知っているだけで、かなり応用がききます。そして分からないことがあればどこかの掲示板で教えてもらうことができるわけですが、その時に基本的なタグについて全く知らなかったら何のことか理解もできないでしょうしね。 今回は背景の設定の仕方というか作り方について紹介します。 背景をただの無色じゃなくて画像を貼りたいという人がいると思いますが、よく個人のホームページやブログなんかで画像が全体に広がっている背景を見かけるかと思います。 このタグは＜BODY BACKGROUND="ファイル名"＞＜/BODY＞とこのようになっているのですが、この＜BODY＞タグにてこのように記述することで、背景の画像を指定できるのですね。"ファイル名"の部分には、背景の画像のファイルを保存してある場所を指定すればいいのです。この時は必ず拡張子まできちんと記述してくださいね。（そしてこのタグというのは前にも言ったかもしれませんがすべて半角にしないとうまく表示されません。表にタグの文字が出てきてしまいます。） JPEG画像もGIF画像も指定はできますが、動画GIFはIE4.0・NN4.0以外では、たとえ指定しても表示されないのです。ちなみにこのタグを使うと、背景色を指定していたとしても、＜BODY＞タグで指定した方の画像が優先されて表示されるのです。また、画像ファイルのファイル名の大文字や小文字、また、拡張子には気をつけてくださいね。 http://www.godheadsilo.com/?p=39 ここを見ている人は、皆さんおそらくホームページを作ったことがある人、もしくは作っている途中の人、今から作ろうとしている人だと思います。 最近SEOという言葉をよく聞くと思うのですが、人気の出そうなホームページの作り方についてちょっとだけ紹介します。本当にちょっとだけですよ！私自身も詳しいわけではないですから・・・。 まず、ホームページの“テーマ”を決めなくてはいけません。アクセスアップしてほしいな！と思っているのなら必ずサイトのテーマというものを決めなくてはいけません。ここが結構大事なところ。 例えばどんなものかというと、趣味をメインにしたホームページの作り方が知りたいのなら、その趣味についてのテーマを決めればいいのです。芸能人が好きなのならその人のことをテーマにすればいいですし、食べ物が好きなら特に好きなジャンル別でテーマを作って書いていくのがいいかと思います。私だったらスイーツが好きなので、テーマはスイーツとして、内容はレシピや好きなお店、有名なお店、食べてみたいお店のメニューなど色々にするかと思います。 自分のことがメインであるホームページを作るというのなら、アクセスアップが見込めるのは芸能人や有名なモデルさんくらいだと思います。最近なら読者モデルなんてのもアクセス数がすごいようですけどね。よっぽど可愛い・カッコいい素人が写真を載せまくってる記事を更新しまくっているようなホームページなら、アクセス数が出るかもしれませんけどね。 ですがユーザーというのは必ず検索する目的があるものです。先ほど言いました好きな芸能人がテーマなら、トコトンその人について調べて、ファンの中では私が１番！くらいの気持ちでホームページを作ったらいいかと思います。 その人の名前をキーワードとして多めに（適度にですが）入れてみるとか、同じファンの人のホームページに遊びに行ってコメントを残してみるとか情報交換するとか。そのテーマのジャンルでは上位表示されるくらいになれば素晴らしいですよね！上表示について気になる人はSEOのホームページの作り方について調べてみたらいいかと思います。作り方として沢山のっていると思いますよ！ http://www.godheadsilo.com/?p=36