プログラミング無知の私が、一週間でコードを組んでホームぺージを作った話

小さい会社経営をしていて最初の難関はホームぺージ作りかもしれない。ホームぺージは会社の顔と言ってもいい。ウチのような店舗の無い店なんかだと特にそれが言える。やっぱりホームぺージの見栄えがいい店の方が売上はいいだろう。ホームぺージが90年代から変わっていないようなところだと正直、「ここ本当に経営してんの?」となる。

今までのウチのホームぺージは「悪くはないんだけど・・・」位の並みな感じだった。ウチの奥さんもそんな感想のようだ。しかし、今後のセールスを考えるとやはり「悪くはないんだけど・・・」よりは「いいね!」にしたいなと思った。

ホームぺージを作る方法は色々である。私が過去行ったのは、1.WIXを利用する。2.Wordpressを利用する、の2点である。どちらも良く言えば素人でもある程度は作れる。しかし、自由度が低いのが難点である。デザインなどの細かいところの設定が出来ないのである。(出来る人もいるが、それはやはり知識がある人である。)業者に頼むという手もある。しかし、私が知る限りこれは最悪な方法である。業者と契約し、お金を払ってから業者がドロンしたという話を2回も聞いたことがある。個人でやっている業者ほど危ないものはなく、ドロンまではいかなくても電話には出ない、メールを送っても返信がない。「訴えるぞ!」というとやっと連絡が来る。そんなのがゴロゴロいる。

まあ、ホームぺージは大きなセールスツールである。「それであれば、自身がホームぺージを作れるくらいになればこれは大きな武器になるんじゃないか」そう思い、ホームぺージ作りを始めたわけである。であるからして、これはアラフォーのおっさんがホームぺージを一から作る話しである。ひまつぶしに読んでいただければありがたい。




1日目:とりあえず本をパラパラと読んでみる。

ホームぺージ作りを始めるにあたって大切なのはテキスト選びである。個人的にはページがたくさんあっていいから、カラフルで説明がしっかりしていて、出来れば1冊でホームぺージが作れるものがいいなと思った。そこで選んだのが「1冊ですべて身につく HTML&CSSとWebデザイン入門講座」(SB Creative)である。この本を選んだ理由は上記で記載したような望み通りの本のように感じたからである。



本が来て、読んでみる。第1章でウェブサイト作りとはどういうものかということが書いている。第2章、第3章がコードの説明になる。コードに関しては、「こういうのがあるんだ」程度でパラパラめくる。第4章から第6章までが実際にホームページを作る話になる。これも「こういう感じなのね」という感じでパラパラめくる。1日目はそんな感じで過ごす。




2日目:とりあえず真似をする。

コードを入力するにはそれ専用のテキストエディタ―というものをダウンロードしなければならない。今回はAtomというものを選んだ。コードがカラフルなのがいいし、けっこう使いやすい。まずは、第2章で書いてあるコードをとりあえず打ってみる。そして実際にその通りになっているか検証してみる。出来ているとうれしい、出来ていないとうれしくない。初心者あるあるで、やっぱりコードの打ち間違いがどうしても起こる。しかし、ちょっと進めていくと飽きてくる。このまま第2章をすべてやっている暇は正直ない。そんな感じでその日は終わる。




3日目:もういいや!いきなり作っちゃえ!

第2章をちまちまやっていてもしょうがないので、いきなり第4章からはじめることにした。第4章にはサンプルサイトのコードが書いていて、それぞれのコードがなぜ必要なのかが書いている。このコードを真似して打って、チビチビ検証することにした。これが結構楽しいのである。1つ1つやっていって出来上がりに近づいていく感じがおもしろい。コードを打つのも結構慣れてきて、間違っているところが暗くなっていることに気が付いたので、間違っても早く修正できるようになった。




4日目:アレンジを加える。

そもそも論理的に考えるのが得意である私は、自社サイト向けにアレンジを加えることにした。例えば、会社名を自社名にしたり、画像を自分の好みの者に変えてみたりなどである。他はメニューボタンを増やしたりとか。出来るようになった。ここまで来ると、「あれ、これ自分で最後まで作れるんじゃね?」という気持ちになってくる。




5日目:CSSに四苦八苦

CSSというのは、平たく言えばサイトの装飾をつかさどるコードである。文字の色、写真の位置などそういうものを管理するコードである。HTMLは理解してきていたがが、CSSはまだわかってなかった。とりあえず、サンプルサイト通りにやってみる。そして色々いじくってどうなるかをみて見る。わからないところは、本のCSSの所をみて見る。イメージ的には、0→10→1みたいな方法である。0からいきなり、10を作ろうとして、わからないところがあれば、10の1部分である1なり2なりを調べる感じである。そうこうしているウチにCSSの仕組みがわかってくる。そして、ホームぺージの全体のウチの1ページが出来、その構造をコピーする形で数ページが出来上がる。




6日目:トップページを作る

ホームぺージで一番難しいのはトップページだろう。理由は、一番派手で一番複雑だからである。まずは、トップページのデザインを考えて、そこからコードを打っていく。実はここまで来ていると基本的なコードに関してはかなりマスターしていてトップページも割とすんなりできてしまう。

そして、トップページもできて「やったー」というところであるが、ここで今回のボス的な問題が発生する。それは、今回作ったホームページはPC向けであり、スマートフォンのような小さい画面だと、かなりごちゃごちゃのままになってしまうのである。ここへの対処が最大の山場である。




7日目:スマートフォン向けに調整する。

今回購入した本にも、こうしたスマートフォン向けの調整についても書いてあった。レスポンシブ対応をいうが、これをしないとサイトを見た人がドン引きすることになる。レスポンシブ対応ですることは、CSSの調整である。画面がある一定以下になった場合、CSSをどのようにするかコードを打つのである。スマホ画面になった時にメニューがハンバーガーボタンになるように出来た時はかなり感動した。ちなみにコードはGoogleで調べて、そのままコピーペーストしただけなのだが。

これが「ハンバーガー」だ!











そして出来たホームぺージが以下である。

http://www.zaitakuryugaku.com





奥さんに見せると「いいんじゃない、いいんじゃない」とのことだった。我ながらいいのができたなあと感慨深いものである。スマホへのレスポンシブ対応も問題なくされていて、これならお客さんに見せても恥ずかしくないと思う。

しかし、戦いはこれだけでは終わらない。確かにホームぺージは出来たのであるが、今後は「このホームページをどのようにすればよりたくさんの人に見てもらえるか」という新たな問題がある。俗にいうSEO対策などをしないといけないことになるが、それは後の話である。

「子どもにプログラミングをやらせたい」という親御さHTMLもそうであるし、人気のPythonもそうである。私も、実はJavaを少しやってみたが長く続かなかった。理由は、「このプログラミングで何ができるのだろうか」という疑問が出来たからである。サイト用のプログラミングは正直その悩みがない。少なくともサイトができるからである。恐らくサイト作りができるということは、その技術を使って商売も出来るし、小さな会社であれば優遇されるだろう。子供が商店街の店を回って、「ホームぺージ作ります」って回っていけば案外お客さんが見つかるかもしれない。おっさんが同じことをすれば「帰れ!!」の一言であろうが。



のぶしのてらこや
ホームスクールプラスα
在宅留学.com
在宅留学.com(Eng)
お問合せに関してはこちらからご連絡ください。
nobushinoterakoya@gmail.com

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です