ホームページをつくりたい人のためのブログ https://ameblo.jp/v8mgdcj5/ ホームページの作り方を解説してみます。 ja ホームページを制作するには

自分でホームページを制作出来ない状況でホームページを持ちたい場合、

社内の人間に作らせるか、外注するかになると思います。


その際に、自分で考えているにより近い内容のホームページを制作させる方法について考えてみたいと思います。




①どんなページが欲しいのか

ホームページは複数のページによって成り立っています。

トップページの他に、会社概要、コンセプト、ご挨拶、組織概要、沿革、商品一覧、商品詳細、商品の購入（通販）、事業概要、サービス一覧、

サービス詳細、サービスの申し込み、アクセスマップ、新着情報、プレスリリース、店舗一覧、店舗詳細、お問い合わせ、利用規約、個人情報保護方針･･･


数多くの種類ページが考えられますが、どの様なページの構成にしたいのかを考える必要があります。


②ページ内容を考える

それぞれのページについて、どのような内容にするのかを明確に考える必要があります。

これが明確なほど、イメージに近いホームページが出来あがってきます。


③ホームページの印象を考える

テーマとなる色や、雰囲気、ターゲットとなるユーザー層や、ホームページが持つコンセプト・・・

伝えるイメージが明確な程、イメージに近いホームページが出来あがってきます。

この時に、イメージに近いホームページをいくつか例として挙げることができると、より分かりやすくなります。


④ホームページの目的を考える

「名刺に掲載するURLが欲しい」「ホームページを通じて知名度を上げたい」「ホームページを通じて売り上げにつなげたい」など、

ホームページで何をしたいのかを明確にすることで、どの様なホームページにするべきかが分かりやすくなります。


⑤ホームページにどの様な機能を持たせるのかを考える

この辺は、④のホームページの目的に沿って、制作者側と打ち合わせていく部分ではありますが、ハッキリと機能が決まっていた方がより自分が持っているイメージに近いホームページになるかと思います。

「会員登録が出来る」「通販の機能がある」「管理画面から新着情報が管理できる」「簡単なHTMLなら修正できるので、なるべく分かりやすい作りにしてもらう」など・・・






制作者によって出来ることと出来ないことがあります。

なので、なるべくホームページのイメージを明確にした上で、制作者と打ち合わせを行うことをおすすめします。


そうすることで、

・その制作者にお願いするべきか、他の制作者に依頼するべきか

・機能が増えれば制作費用も高くなってしまうので、予算と機能の折り合いをどの辺で付けるのか

などを制作者側のペースではなく、自分の判断で行いやすくなります。



ホームページ制作者は、おそらく「曖昧な依頼」には慣れています。

ユーザーの希望がハッキリしていなければ、必要な機能は付けず、「それなりのホームページ」が納品されることになる可能性があると思います。



制作費用だけで比較するのではなく、

「自分が制作したい内容がいくらで制作できるのか」という比較をした方が、

より良いホームページが手に入ると思いますので、

大変な作業ではありますが、より満足できるホームページを手に入れる為にも、ぜひおすすめしたい内容です。
]]> https://ameblo.jp/v8mgdcj5/entry-11344134574.html Sun, 02 Sep 2012 12:00:31 +0900 ホームページを持つことを広い視野で考えてみる
ホームページを持っていない場合に

「ホームページが欲しい」と思う場合があると思います。


そこで、今回は、ホームページを持ちたい場合にどうすれば良いのかなどを考えてみようと思います。


①ホームページをつくる

自分で制作しても、業者に依頼しても良いのですが、制作する以上はかなりの量の情報が必要になります。

コンセプトや商品の情報、オリジナルの写真、場合によっては利用規約や個人情報保護方針なども必要になるかと思います。

※写真については、写真素材（無料・有料）もありますが、一般素材よりオリジナルの方がより良いホームページになるかと思います。


②ホームページを更新する

ホームページを持つと、新着情報や新しい商品、キャンペーン情報などの情報の更新（ = ホームページの更新）が必要になってきます。

もちろん、強制ではありませんが、更新されていないホームページでは魅力も無く、何度も訪れてもらうホームページにはならない可能性が高くなります。

更新頻度は、ホームページによって異なりますが、出来れば毎日、最低でも月1回くらいは更新することをおすすめします。


③ホームページの宣伝

ホームページはあればユーザーが入ってくるというものではありません。

お金をかけて広告を出すか、SEOをかけるかが一般的です。

また、WEB上ではなく、名刺やチラシなどにホームページの情報を掲載するのも、宣伝としては有効な方法です。

※ホームページには実店舗や会社が存在しない（ホームページだけしかない）ものが沢山ありますので、そういったホームページには出来ないWEB上以外での宣伝はおすすめです。


④ホームページを管理する

様々な方法で集客を行ったとしても、ホームページからどの程度の売り上げが上がっているのかを測定できなければ意味がありません。

アクセス解析や成約率などを管理して、費用対効果を考えていくのもホームページ運営において重要な作業です。




この様にホームページは制作して公開したら終了という類のものではなく、公開後には運営や宣伝という作業が必要になってきます。

その為、ホームページを持ちたい場合、「ホームページを持ちたい」だけではなく、「ホームページをどの様に活用していくのか」を考えるのが必要になってきます。
]]> https://ameblo.jp/v8mgdcj5/entry-11339346518.html Mon, 27 Aug 2012 19:00:04 +0900 ブックマークしたときのアイコンの設定方法
アイコンの付かないサイトと

アイコンが付くサイトがありますよね？


※お気に入りの中を見ると分かると思います。


これ、ファビコン（favicon）って言うらしいです。



HTML上からファビコンを指定する方法

ファビコンの指定は、HTMLのメタタグ内で行います。

<link rel="shortcut icon" href="img/favicon.ico"/>

スタイルシートなんかを指定するのと、似たような形で指定できますので、さほど難しくはないかと思います。




ですが、指定されたパスを見ると分かるのですが、

「favicon.ico」というファイルを指定してますよね？

ファビコンっていうのは、アイコンの一種で画像のファイルなのですが、

icoという拡張子の画像になります。



faviconの制作方法
制作方法は大きく分けて2つあります。

ひとつは、WEB上のサービスを利用して、faviconを作成する方法です。

Googleで「favicon 作成」と検索してみて下さい。



もう一つは自分で制作する方法です。
Adobe Photoshopに、faviconを作成するためのプラグインを入れることで、faviconを出力できるようになります。

photoshop favicon プラグイン
あたりで検索すれば、情報が出てくると思います。




]]> https://ameblo.jp/v8mgdcj5/entry-11317182888.html Wed, 01 Aug 2012 11:00:06 +0900 おすすめのテキストエディタ
そこで、個人的にではありますが、オススメな（今現在も私が使っている）テキストエディタ（フリーソフト）をご紹介いたします。




それは

「Mery」

というテキストエディタです。




つい先日まで知らなかったのですが、

このテキストエディタ、結構色んな設定が出来るんです。



例えばですが、

・文字コードの指定

・複数のテキストファイルをタブで分けて表示

・URLをハイパーリンクさせる／させない

・文字のサイズやフォント

・テキストの色分け

などなど・・・




これだけ機能があって無料（フリーソフト）なわけですから、すごく良いと思いますよ。



ついでに、画面の色を反転させることも出来ます。
※黒背景に白文字になります



なんとなく画面がコマンドプロンプトっぽく見えて、

それだけでプログラムっぽく見える気がするので、

反転させて使用しています。




「Mery」は、「Vector」からダウンロードできます。

ダウンロードはこちら
http://www.vector.co.jp/soft/winnt/writing/se476839.html
]]> https://ameblo.jp/v8mgdcj5/entry-11315643587.html Mon, 30 Jul 2012 13:30:07 +0900 リンクの貼り方
面白いサイトを見つけたので、そのサイトにリンクを貼りたい


そんな時のために、リンクの貼り方について説明します。


普通にリンクを貼る

リンクは、下記の様な形で書く事が出来ます。
<a href="ここにURL">アンカーテキスト</a>


例）
<a href="http://www.kwkw.biz/">かわいくなりたい</a>

この様に書けばリンクする事が出来ます。



別ウィンドウ（または別タブ）で開くリンクを貼る

別ウィンドウ（または別タブ）でリンク先を開きたい場合は下記の様に記述します。

<a href="http://www.kwkw.biz/" target="_blank">かわいくなりたい</a>

target="ウィンドウ名"

という部分を追加すると、そのウィンドウ名で別ウィンドウ（別タブ）で開く事が出来ます。

targetの内容部分に書いてある

_blank

というのは、毎回別ウィンドウ（別タブ）で開くという意味になります。


この部分を「sample」とかにすると「sample」という名前のウィンドウが開くことになり、

もう一度リンクをクリックしても、「sample」というウィンドウの内容にリンク先が読み込まれる事になります。


いくつもウィンドウを開かせたくない場合は、名前を付けるようにしましょう。

※ウィンドウ名は表示されません。





他にも、サイト内においては、ページの途中にリンクしたり、親ウィンドウなどを指定してリンクしたり、情報を持ったURLにしたり・・・

様々なリンクの貼り方がありますが、基本的なリンクとしては、同じウィンドウと別ウィンドウを覚えておけば大丈夫かと思います。

]]> https://ameblo.jp/v8mgdcj5/entry-11311443120.html Wed, 25 Jul 2012 13:30:07 +0900 ページの大まかな構造を作る方法
・ページ上部
・ページ左側
・ページ中央
・ページ右側
・ページ下部



HTMLを上から書いていくと、

・ページ左側
・ページ中央
・ページ右側

の様に、横に配置して、

なおかつその中に、各コンテンツを入れる方法というのが分かりづらいと思います。



横に配置する方法は、大まかに2つあります。



tableタグを使用する方法

tableタグは表を作るためのものなので、

本来、推奨されていない方法ですが

最初からセルを横に配置する事が出来るので、

簡単に実現する事が出来ます。



CSSで指定する方法

左、中央、右のエリアを

<div id="left">左のエリア</div>

の様に囲み、CSSで配置を指定します。


CSSでは

float:left;

（float:right;）

などを使用します。


overflowをhiddenに設定すれば、範囲を超えた場合、非表示にする事が出来ます。



tableタグを使用したデザインは非推奨ですので、出来ればCSSを使用する方法でデザインしてみて下さい。


また、CSSでfloatを指定する方法は、

例えば、ul,liタグを横並びにしたり、画像の横に複数行の文章を書くなど

デザイン上で必須ともいえる方法ですので、ぜひ使ってみて下さい。


※floatを設定すると、ホームページ制作ソフト上でプレビューが崩れることがあると思います。

その場合は、ブラウザでデザインを確認して下さい。


]]> https://ameblo.jp/v8mgdcj5/entry-11308990242.html Sun, 22 Jul 2012 16:00:09 +0900 ホームページ制作の流れ


①概要決定
「どんなホームページにしたいのか」「その為にどのようなページが必要になってくるのか」などを、大まかに決めます。
サイトをどのように使用するのかなどについてもこの時に考えます。


②デザイン
これはデザイナーさんが行う場合は別ですが、
私の場合は、主にノートに絵コンテで描いていきます。


③HTML、スタイルシートでサイトを制作します。
この時点では、画像は作っていない場合が多いです。
また、ページごとのコンテンツ内容も、この時点では入れていません。


④機能の書き出し
このサイトに必要な機能を書き出して、その機能を付けるのに必要な作業を書き出します。
これが実際の作業工程になります。


⑤各機能の制作
機能をひとつずつ実装していきます。
飽きたり、壁に当たった時は、⑥とか⑦を先にやります。


⑥画像の制作
サイト内の画像を制作していきます。


⑦ページ内容の制作
単純なHTMLだけど、内容（文章）を考えないといけない様なコンテンツの制作です。




あとは、テストして公開して、宣伝するという流れになります。


]]> https://ameblo.jp/v8mgdcj5/entry-11297222312.html Sun, 08 Jul 2012 11:00:24 +0900 HTMLでよく使うタグ ※xxxには任意の文字列が入ります。


見出しタグは、h4くらいまで使います。
<h1>xxx</h1>
<h2>xxx</h2>
<h3>xxx</h3>
<h4>xxx</h4>

段落
<p>xxx</p>

リンク
<a href="xxx">xxx</a>

ページ内の特定個所に名前を付ける（ページの途中にリンクするためのタグ）
<a name="xxx">xxx</a>

画像
<img src="xxx" alt="xxx" title="xxx" />

リスト
<ul>
<li>xxx</li>
</ul>

<ol>
<li>xxx</li>
</ol>

<dl>
<dt>xxx</dt>
<dd>xxx</dd>
</dl>

テーブル
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>

改行
<br />

区切り線
<hr />

class、id指定用
<div id="xxx" class="xxx">xxx</div>
<span id="xxx" class="xxx">xxx</span>

強調
<strong>xxx</strong>
<b>xxx</b>

フォーム
<form action="xxx" method="xxx">
<input type="text" name="xxx" value="xxx" size="20" />
<input type="submit" value="送信" />
</form>
※フォームはスクリプトと併用するものです。


抜けはあるかもしれませんが、多分、このくらいしか使ってない気がします。。。
]]> https://ameblo.jp/v8mgdcj5/entry-11288174782.html Wed, 27 Jun 2012 15:00:02 +0900 ホームページを制作するためのツールを紹介 ホームページ制作関連ツール

▼ホームページビルダー／Dreamweaver
両方とも、ホームページ制作支援ソフトです。

ソースとプレビューを同時に見ることができ、
プレビュー側に文字などを直接打ち込んでも、
それをソース側にHTMLタグに自動変換して書き込んでくれるソフトです。

HTMLが全く分からず、調べ方も分からない場合、
こういったソフトを出発点にしてみるのも良いかもしれませんが、
頼りすぎると、HTMLの習得が遅れるかもしれません。

個人的には、HTMLの書籍を購入して、WEBでも調べて、
テキストエディタで制作していく事をおすすめします。

※欲しい場合は、家電量販店で販売しています。


▼テキストエディタ
HTMLなどを書く際にメモ帳では機能が少なすぎて厳しいと思います。
なので、テキストエディタを使用します。

選ぶポイントとしては、
・文字コードを指定出来ること。
・タグなどを色分けしてくれること
・文字列置換が出来ること
・タブで複数ファイルが開けること
この辺でしょうか・・・。

全部そろっているものとなると、有料になると思います。
※無料版もあるかもしれませんが、まだ見つけていません。

※vectorなどで、ダウンロードできます。


▼FTPソフト
ホームページを公開するときに必要になるソフトです。
・FFFTP
セキュリティ関連で、以前問題になっていましたが・・・
使いやすいんですよね。
・FIle Zilla
FTPS接続ができるソフトで、FFFTPに比べセキュリティが高くなっています。

どうちらか、あるいは両方持っていても良いと思います。

※FFFTPはvectorなどで、ダウンロードできます。
※File Zillaは、hetemlのサポートページから見つけました。FTPなどについて書いてあるので、見ると勉強になるかもしれません。


▼画像制作ソフト
画像を編集・制作するソフトです。
Adobeのイラストレーターやフォトショップがオススメですが・・・値段がかなり高いです。
フリーのものとしては、GIMPがオススメです。

※vectorなどで、ダウンロードできます。


]]> https://ameblo.jp/v8mgdcj5/entry-11287283254.html Tue, 26 Jun 2012 12:00:05 +0900 ブログがSEOでオススメな理由
オススメな理由はいくつかあるのですが、

①無料で始められる／簡単に始められる
アメブロなどの一般的なブログであれば広告は入りますが、
有料サーバー（PHP使用可）を借りていれば、WordPressなどを無料で使用する事も出来ます。
でも、まぁ、管理する事も考えたら、アメブロの様な有名なブログの方がオススメです。

ブログは、ホームページ制作の様な特殊なスキルではなく、一般人向けに公開されているサービスのため、
特別な勉強をしなくても簡単に始める事が出来ます。
また、携帯から更新する事が出来る点も手軽です。

②記事がインデックスされやすい
ホームページは公開しただけでは、クローラーに見つけれもらえません。
クローラーは、リンクを辿ると言われていますので、どこからもリンクされていないサイトを見つけることは出来ないのです。

ブログは、記事を更新するときに、更新Ping（UpdatePing）というものを、Pingサーバーに送ります。
Pingサーバーでそれを表示してくれるので、クローラーがそれを辿って、ブログ記事を見つけてくれるのです。
また、大手のブログは「新着ブログ」とかを表示してくれるので、そこからもクローラーは見つけてくれます。

そんなわけで、ブログの記事はインデックスされやすいので、そのブログからのリンクも有効になったりします。

③ブログ自体の集客もある
大手のブログであれば、ユーザーが沢山います。
また、様々な言葉をブログ内で書くため、意外な形で検索に表示されたりもします。
その様な、1記事あたりであれば、わずかな集客ですが、続けていけばある程度の集客は見込めると思います。

※ブログ自体が「面白い」「有用である」など、価値のあるブログであれば、かなりの集客が見込る・・・かもしれません。




]]> https://ameblo.jp/v8mgdcj5/entry-11278740157.html Sat, 16 Jun 2012 10:30:27 +0900