スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ホームページを作ろう① ―計画編―

全5回程度を予定して進めていきたいと思います。

第1回 計画編
第2回 構想編
第3回 マークアップ編
第4回 デザイン編
第5回 動的、完成編


では第1回の始まりです。
概要

ホームページを作るのはとても簡単ですが、プログラミングをやったことがない人は「HTMLが難しい」「CSSの使い方がわからない」などと思うことでしょう。やったことある人は「JavaScript無理」という感じでしょうね。
もちろん使う道具の”使い方”がわからないのは少々厄介ですが、やはり”計画”なしに行動するのは致命的です。

そこで今回はホームページを作り始めるための計画を立てます。
この計画が立てることが出来ればホームページなんて1週間以内に作れます。もちろんカッコいいデザインのホームページですよ。

では始めましょう。



道具を選ぶ


まず、絶対必要なものはブラウザ、テキストエディタです。
この2つがあれば作れます。(公開はできませんが。その話は下の方でします。)

ブラウザは、好きなもので構いません。私はFireFoxを使います。
IEでも構いませんが、挙動がかなり違ってくるのでその他のブラウザでも確認する必要があります。

テキストエディタは、私のおすすめはWebMatrix2かCrescent Eveです。
どちらも使いやすいですが、WebMatrix2はMicrosoftが作っているものなので安心です。


次に選ぶのは使う言語です。
HTMLは当然ですが、HTMLにもバージョンがあります。今回はHTML5を使います。
CSSはバージョンを気にする必要はありませんが、バージョンは3です。

そして、最も厄介なのがJavaScriptです。
これは、プログラミング言語で少々難しいです。C言語などをやっていた人は気絶するでしょう…。
ですが、今回はJavaScriptを簡単に使うためのライブラリ、jQueryを使います!
まあ、使うって言っても既に出来ているjQueryで作られたモノを使うのですが…(^^;)
そこはあまり気にしないでください。使っていれば慣れます。

結局、必要な物は、
ブラウザ(FireFox)
テキストエディタ(WebMatrix2)
HTML5
CSS3
jQuery
となります。

本当は、jQueryは使わなくても作れますが、使うとかっこよくなります!



コンセプトを考える

「このホームページは一体何を伝えたいの?」と思われるのは嫌ですよね…。
ですので、「これを伝えます!」という目的を持たせます。

では、なぜタイトルを”コンセプト”にしたかというと…
内容の目的以外に、デザインの目的が含まれるからです。

デザインの目的とは、「どういう理由でここにこのボタンを配置したんだろう」とか「このアイコンはどういう意味だろう」というのを明確にすることです。
例えば、虫眼鏡アイコンは検索フォームの横とかにあったらわかりやすいですよね。

つまり、誰でもわかるデザインにするか、特定の人がわかればいい暗号みたいなデザインを決めるということです。

ではまずは、私が作るホームページのコンセプトを書きます。
目的:プログラムについて知ってもらう。写真を楽しんでもらう。
デザインコンセプト:名前を覚えてもらう。わかりやすく、かんたんに。
ターゲット:10~20代


ついでにターゲットの年齢層も決めておきましょう。
ターゲットが0~100歳みたいな(この例は馬鹿げていますが…)広すぎる範囲だと、幼稚なデザインにしたらいいのか、文字をすごく大きくしたらいいのかが分かりません。
2,30代の方などにとって幼稚なデザインや文字が大きいと目障りです。
と言っても、どのくらいの年齢の方が食いつくかわからないと思うので、調べるか、公開してから分析して決定するのもありです。

もう一個ついでに、画像を使ってデザインするのか、画像を一切使わずにデザインするのか決めておきましょう。
もちろん中間もありです。
画像を使ったデザインは、どのブラウザで見ても崩れることはありませんが、少々重いです。
画像を一切使わないのは逆ですね。FireFoxでちゃんと見れてもIEで崩れているなどよくあることです。

私は、画像はなるべく使わないデザインで作ろうと思います。



コンテンツを決める

これは、ホームページの目的を決めた時、またはこのページを見る前に決まっていると思います。
では私のホームページのコンテンツですね。

Home …インデックス
About …ホームページの説明、プロフィール
Tools …ツールの公開
Games …ゲームの公開
How to do …xxxの作り方ーみたいな感じなの
Photos …写真の公開
Links …リンク集

こんな感じになっています。

先程決めた目的やターゲットから外れないようにしましょう。
もし外れたものを追加したいのなら、大幅に目的等を変更するか、もう一個ホームページを作りましょう。
多分、もう一個作ったほうが楽です。



あとがき

というわけで、駆け足ですが、計画編が終了いたしました!
多分まだ難しい所はないと思います。
思い浮かばなくて手こずっている人はいるかも知れませんが…。
そういう人は、一旦作業を打ち切って散歩や読書をするか、その部分は飛ばすと良いと思います。
現段階ではちょっと飛ばしても修正は簡単ですので。


勘の良い人なら気付いていると思いますが…実は…私のホームページにはまだ名前がありません…。
ですので、上記のコンテンツには入っていません…。
本来ならばコンセプトあたりで決定しているはずなのですが、いまいちピンとくるのが思い浮かばなくて…。
恐らく次回までには決まっているでしょう!多分…

では、あと4回続きますがよろしくお願いします!
関連記事

テーマ : ホームページ作成
ジャンル : コンピュータ

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

まとめ【ホームページを作ろう】

全5回程度を予定して進めていきたいと思います。第1回 計画編第2回 構想編第3回 マークアップ編第4回 

コメントの投稿

非公開コメント

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです
広告
あわせて読みたい
あわせて読みたい
リンク
FC2ブログランキング

FC2Blog Ranking

いろいろ


人気ブログランキングへ
月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。