2012年5月10日木曜日

未来の会社のHP作りました。


GWの５日間使って、自分で会社のHPを作ってみました。
会社といっても、将来やってみたいことを形にしたもので、
テーマは「２０年後の未来の会社」です。

本当はもっと会社っぽいHPにしたり、
事業を細かく作り込んだり、やりたいことはたくさんあったのですが、
GW中の期間で完成させてリリースさせる予定だったので、
ひとまずこのサイトでリリースしました。




今回は、その経験をもとに、
初心者が５日間でどうやってHPを制作したのか、伝えていきたいと思います。

WEBサービスとはいかなくても、
自分で自分のHP作りたい人は少なくないと思うので。

といっても、１つの記事にまとまるほどの量ではないので、

１．サイトを作る上での心構え/開発準備
２．サイトを作るまでの大まかな流れ/スケジュール
３．サイトを作って感じたこと

の３記事に分けて伝えようと思います。


ということで今回は「サイトを作る上での心構え/開発準備」についてです。




今回のサイトを作ることになった経緯ですが、
とっても個人的な要因が大きく、単純に自分がやりたいことを一度整理しようと思って、
それを軸に拡大していって、それがこれから先の目標、数十年後の姿になるから、
その形を一度作ってみたら、自分が今すべきことが見えてくるのかなと思ったのです。

だから、誰かに公開するほどのモノでもなんでもなく、
もっと言うとあのサイトで一番大事な部分は「WANTODOリスト」で、
あそこに自分の大事なことが詰まっていると思っています。


ということで、「サイトを作る上での心構え」ですが、
上で書いたように、
『サイトを通して作りたいこと/形にしたいこと』
をしっかり決めることです。
今回の自分のサイトは「２０年後の未来の会社」がテーマで、
それを軸に作っていったので、
どんなサイトにするか内容の部分で詰まることはなく、すんなり進みました。
(結果的には未来の会社というより、
個人サイトというか自己紹介に近い形になってしまいましたが、
それは自分自身のスキル不足と個人サイト寄りにズレてしまったのが原因。）

意外とサイト制作をしたことない人は、
プログラミングとかWEBスキルのほうばかり意識しがちで、
肝心のコンテンツがないことがたまにある気がします。


サイト制作でなくとも、プログラミング学びたい！って思っても、
なにから手を出していいか分からず、結局前に進まない原因も同じで、
作りたいモノがないんです。

だから、今このブログを読んでいる人のなかで、
サイト制作に興味はあるけど今作りたいモノのイメージがない人は、
まずはそのイメージを作りましょう。
それからサイト制作のことを学んでも全然問題ないので。
HP作ったってすごいように感じるけど、とっても簡単なんです。
サイト制作したい人はなんとなく難しそうという気持ちを捨てることが大事です。

サイトを作るのも、ノートに絵を書くのも、言葉で伝えるのも全部同じです。
どこに書くのか、文字にするのか、その程度の差でしかないので、
めっちゃきれいな絵が書けるなら、絵を書いて写真をアップすればいい。


ということで、サイト制作の心構えとしては、
・作りたいサイトのイメージをしっかり持つ
・難しそうというイメージを捨てる


ことです！
５日間でほぼ初心者がサイトを作れたのだから大丈夫です！


具体的にどういった流れで作っていったか、は次回に回すので、
最後に、開発環境やどういった準備をしたのかまとめておきます。

＜使ったソフト/サービス＞
サーバー：ロリポップ
デザイン：Fireworks
コーディング：DreamWeaver

自分で作ったサイトをWEB上で公開するにはサーバーが必要です。
元々借りていたので、そのまま「ロリポップ」を使いましたが、
データのアップロードもしやすいし、初心者にはおススメです！
正直、FTPとかよく分からないので、ただアップするだけで済むのは助かりました。

ロゴやバナー作るなどのデザイン面は「Fireworks」を使いました。
このサイトを作るためにインストールしたのですが、
基本的な操作などはIllustratorと同じです。
ただ、イラレよりサイト制作においては、めっちゃ便利でした。
優れてた箇所は主に２点で、
・スライスができる
・サイズや位置調整がやりやすい

スライスは、その名の通り、必要な箇所だけスライスして画像データにできるんです。
多分この魅力は説明しきれないので、制作の流れでちゃんと伝えますが、
イラレとほぼ同じだけど、サイト制作には向いているイラレだと思ってもらえたら。

最後にコーディングに関しては、「DreamWeaver」を使いました。
コーディングってなんだよ、って感じですが、実際にコードを書くことです。
<html>
<body>
<div class="ikechan">...
みたいな感じで、実際にコードを書いていって、それをサーバーにアップすると、
ブラウザ上で実際に表示されるってわけです。
（ブラウザっていうのは、google Chrome、Internet ExprolorとかFirefoxのことね）
サーバーにアップしなくても、自分で書いたコードをブラウザ上で開けば表示されます。
まあ、ここらへんも次回に詳しく。
普段は「サクラエディタ」という高性能なメモ帳を使っていたのですが、
やっぱりDreamWeaverは便利でした。
MacだとCoediterとかもいいらしいです。


DreamWeaverの魅力としては、
・デザインをすぐに確認できる
・予測変換がある


ってとこです。
どう表示されるか毎回ブラウザでチェックするのは面倒なので、
それを逐一確認できるのは便利でした。
あとは予測変換があるので、コードを打つ手間が省けます。
これは初心者だと自分で打ったほうが分かりやすいし自分で覚えなくなるので、
初めからDreamWeaver使うのはおススメしないです。
イメージとしては、小学生が電卓使う感じですね！笑


ひとまず、上の３つがあれば、サイトは作れます！
ただどれも普通に使おうとすると有料なので、
DreamWeaverの代わりにサクラエディタ使ったり、
Fireworksの代わりにイラレ使っても問題無いです！


＜使った言語＞
HTML/CSS/twitter bootstrap/jQuery

こう書くとなんかかっこ良く見えますねー。
ほとんどHTMLとCSSしか使ってないです。
サイトを見てもらったときに、ちょっと手の込んだ作りしてそうだなって思った場所は、
twitter bootstrapとかjQueryを使ってます。
最低限どういったものかは知っていたけど実用レベルで覚えてはいなかったので、
こんなことしたい！って思ったら調べればいいと思います。

逆に、HTMLとCSSは基礎を理解していないと結構キツイです。
まあ、基礎も１日あれば十分学べるかなと。

サイト制作初心者とは言いつつ、HTMLなどの初心者向けセミナーをやっていたり、
デザイナーやディレクターというポジションでサイト制作に携わったことはあるので、
なんとなくサイト制作での雰囲気というか感覚は知っていました。



というわけで、今回はサイト制作に入る前までを中心に書きましたが、
初心者っぽさを初めは出しつつ、実際は初心者じゃないだろ、
って感じになった気もしますが、
サイト制作してる人から見たら、初心者が調子にのりやがって、
みたいなになると思うので、
なんか板挟みな感じでとてもやりにくいですが、
初心者という立場から教えていこうと思います。


ブログでも伝えていきますが、直接教えたほうが手っ取り早いし、
顔を合わせながら作っていったほうが楽しいので、
サイト制作のセミナーを開こうかなーと思っています！
（最後は宣伝かい！ｗ）

ただしっかりとサイト作って公開するまでしたいので、
週１回×４回の１ヶ月間しっかり教える形で今回はやりたいなって思っています。

まだ詳細は決めてないのですが、興味あるかたはどうぞ。


あと、インターン先のビジョナリーファンでプログラマー募集中です。
もし既にサイト作れてインターンしたい人はtwitter,facebookからご連絡ください。
@ikechan0201,もしくは「山口拓也」まで。

楽しくサイトを作れて、スキルアップができて、給料も出るって、
めっちゃいいインターンだと思うんで、定員2名なのでお早めにー！


ではでは、明日からの更新もお楽しみに。




もしよかったら、「ツイート」「いいね！」などしてもらえると、
ブログ更新のモチベが大分上がります・・・！