超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

誰を意識して書いた?Webサイト作りに興味のある人
この記事の目的は?オレでもできると思っていただく
thum-6

日本にいた時、僕はパソコン超苦手のアナログ人間でした。

 

高校や大学でコンピューターの授業がありましたが、CPUやらハードディスクやら何を言っているのか全くのチンプンカンプン。

 

というのも僕の実家にはパソコン、インターネットがなかったんです…(信じられますか、今時そんな家庭を!)

 

ゆえに、僕と同世代が当たり前のように慣れ親しんでいる
パソコンが僕にはかなり難しいものでした。大学時代、ワードでただ単に文字を入力して簡単なレポートをつくることでさえ苦労していた僕。日本で働いていたときにパソコンを使っていたので、ワード、エクセルの基本的な操作ぐらいなら、カナダに来る前からある程度は知っていました。

でも、まさか自分がWebサイトをつくれるようになって、Web系の仕事ができるようになるなんて、夢にも思わなかったです。自分とは真逆の世界でしたから。人生どうなるかわからないものですね。

 

 

Webサイトをつくるには2つの方法があります。

 

1.テンプレートを使う

 

この方法は簡単で誰でもできます。あらかじめ決められたフォーマットに文字や画像を入れるだけです。実際僕も初めてつくったWebサイト
カナダ節約留学生活)はWeeblyというサイトが提供しているテンプレートを使って作りました。ただ単に文字や写真を入れるだけでとっても簡単。なんのWebの知識も必要ありません。たくさんの人がやってるアメブロもテンプレートを使ったWebサイトの1つですね。

 

 

2.自分でテンプレートを作成してWebサイトを作る

 

program group 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

プログラミング言語とやらでファイルを作成し自分でテンプレートを作って、それをもとにWebサイトをつくる方法です。

 

 

このテンプレートを使うか、使わないか。Webサイトを作る上で、かなりの雲泥の差があります。

 

まず、サイトのレイアウトを自由に作るためにHTMLとCSSというプログラミング言語を覚えなければなりません。その後、PHPファイルに書き換え、WordpressというWebサイトをつくるCMS(Content Management System)にアップロードし、いろいろとカスタマイズしていって…ナンチャラカンチャラ…

 

超アナログ人間の僕にとって、かなりハードルが高い!のび太がジャイアンにケンカで勝つようなもんです。

 

テンプレートを使っても十分かっこいいWebサイトはできます。実際、Web上には無料でかっこいいテンプレートがゴマンとあります。(“WordPress無料、 テンプレート” とかでググるといろいろな種類のテンプレートがいっぱいでてきます。)

 

「だったらテンプレート使えばいいじゃん!」と思うかもしれませんが、テンプレートを使うと、サイトのレイアウトが固定されて自分がしたいようなデザインにできないという欠点があります。例えば、「メニューバーを左にしたい」とか「メイン画像を下にずらしたい」とか。

 

customize 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

また、自分でテンプレートが作れるようになれば、テンプレートを使ってWebサイトを作るときカスタマイズが簡単にできるようになります。テンプレートを構成しているファイルに書かれている意味が解読できるので、どこを変え
ればいいかわかるようになります。

 

アイコンを新たに加えたり、1ページに出る記事の数を指定できたり、いろいろなことができるようになります。

 

僕ができるようになったのは、自分でオリジナルテンプレートを作ってWebサイトをつくるということ。

 

冒頭で述べた通り、カナダに来るまで僕はパソコン苦手の超アナログ人間。パソコン、インターネットがない家庭に育ち、学生時代まともに文字入力さえできず、ほんの数ヶ月前までWebに関する知識ゼロでした。

 

そんな超アナログ人間のび太が一体どうやってWebサイトを作れるようになったんでしょうか!?

How could even super Analog Nobita create Website??(´∵`)??

Advertising


宇宙語との格闘その1(HTML&CSS)

Webサイトをテンプレートを使わずに1から作ることになったのび太。でも、まず何をやっていいのかさっぱりわからない。

 

ググって調べてみると、どうやらHTMLCSSというプログラミング言語とやらを覚えなければならないことを知る。そこで早速図書館に行き、プログラミングの本を借りて勉強することにしました。見てみると…

 

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />
<meta name=”keywords” content=”This is Keywords of your website” />
<meta name=”description” content=”This is Description of your website” />
<link href=”./css/main.css” rel=”stylesheet” media=”screen,print” type=”text/css” />
<link href=”./css/reset.css” rel=”stylesheet” media=”screen,print” type=”text/css” />
<h1><img src=”./images/header-logo001.gif” alt=”logo” width=”188″ height=”96″ /></h1>

……
…….

 

 

ops 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

 

ん?一体なんですか(?o?)この宇宙語は?

 

 

もうわけがわかりませんでした…
見てすぐにめまいがして、気持ち悪くなりましたね。「こんなの覚えられるわけがない!」と思い、すぐに本を返そうとしましたがそこは気合でガマンして、一応全部読んでみました。でも、やっぱりチンプンカンプン。

 

そこで、僕がやった方法としては、

 

教科書通りに自分でコードを入力してみる。
 ↓
そのプログラムが動くか確認する
 ↓
プログラムが動く
 ↓
「このコードの意味はそういうことかぁー!」と理解する
 ↓
今度は別の種類のコードを書いてみる

 

この繰り返しをひたすら続けました。
教科書に書かれている文字を入力していく作業を3周する。

 

css edit 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

小学生がひらがなを覚えるときに、実際に書いてみて、それを先生に見てもらい正しいかどうかを確認する作業とまったく同じですね。その方法で、始めはわけのわからなかった教科書の文字の羅列が、徐々に意味のある文字列に見えてきました

 

そして1ヶ月後には、なんとか自分でコードを書いて、つくりたいレイアウトを表示できるようになりました。( \(^o^)/ヤッター!)

 

 

宇宙語との格闘その2(PHP)

HTMLとCSSという宇宙語でなんとかWebサイトのレイアウトを自分でつくれるようになったのび太。次にやるべきことをググってみると、どうやらWordPressとやらにファイルをアップロードしてWebサイトにするということを知りました。

 

“Wordpress”とは一体なんぞや? 」と思い、ググってみると、

 

WordPress(ワードプレス)はデータベース管理システムにMySQLを利用し、PHPで書かれたオープンソースのブログソフトウェアである。b2/cafelogというソフトウェアの後継として開発された。GNU General Public License(GPL)の下で配布されている…‥‥

ウィキペディア

 

まったくの意味不明….(これは人間語ですか?(?o?))

 

でも、上司にわか〜りやく説明してもらい、なんとか理解しました。要はWordPress は、PHP(プログラム言語) + MySQL(データベース)で作られたブログソフトウェアということ。ゆえに、WordpressでWebサイトをつくるためには、HTMLとCSSのファイルをPHPというプログラミング言語で書かれたファイルに書き換えなければなりません。そこで今度はPHPの本を図書館で借りてきて、勉強することに。ページを開いて見ると、

 

<!–?php /* Start the Loop */ ?–>
<!–?php while ( have_posts() ) : the_post(); ?–>
<!–?php get_template_part( ‘content’, get_post_format() ); ?–>
<!–?php endwhile; ?–>
 <!–?php twentytwelve_content_nav( ‘nav-below’ ); ?–>
<!–?php else : ?–>
<!–?php if ( current_user_can( ‘edit_posts’ ) ) : // Show a different message to a logged-in user who can add posts.
<header class=”entry-header”></header>

 

・・・・・・
・・・・・・

 

  

waaaht 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

 

再びめまいがして気持ち悪くなり、一瞬でやる気が失せました

 

でも「ここまできたらあきらめたくない!」と思い、この宇宙語にもなんとか挑戦。

 

これも最初の宇宙語と同じく、

 

教科書通りにコードを入力する
 ↓
そのプログラムが正しく動くか確認
 ↓
書かれている意味を理解する

 

この繰り返しです。そして、これも徐々に意味のある文字列に見えていき、なんとか基本的なPHPコードも習得することができました。

 

 

初めてのWebサイト完成 

その後は、

 

Webサイトに必要なPHPファイルを作り、Wordpressにアップロード

動作確認と修正を悶々と繰り返す

Photoshopという画像編集ソフトでロゴやバナーを作成、サイトに載せてみる

コンテンツの修正、Facebook、Twitterアイコン追加やプラグイン設定、などなど

 

いろいろな作業をしていきました。

そして、Webサイトを自分でつくることになって、勉強、制作を始めてから約2ヶ月、僕の初めてのWebサイト(初めてのオリジナルテーマ)が完成しました!

 

それが、LifeVancouverのWebサイトです。

lv 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

 

もともとLifeVancouverはテンプレートを使って運営していました。僕の上司が、LifeVancouverを自由にカスタマイズ(バナースペースを作ったり、記事の表示位置を変えたり,etc)できるものにしたがっていました。そこで、

oh 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

 

のび太、お前やってみそ♪
と言われたのがきっかけ。

 

Webに関する知識ゼロ、超アナログ人間の自分に本当にそんなことできるかなぁ‥」とかなり不安でした。

 

128 18 超アナログ人間だった僕が、Webサイトをつくれるようになるまで。意味不明の宇宙語と格闘し続けた2ヶ月間

それだけに意味不明の宇宙語と格闘し続け、Wordpressについて一生懸命勉強し、ついにWebサイトが
完成した時には、ものすごく大きな喜びがありましたね!

 

その後も仕事でWebサイト制作をするにしたがって、徐々にいろいろなことができるようになりました。

 

実はこのプログも自分でオリジナルテンプレートを作ったんですよ。アメブロでもいいかなと思ったのですが、せっかくWebサイトをつくれるようになったので、このブログも自分で作ってみようと思いました。

 

今では毎日Webの勉強を続けていて、SassやCompass、Javascriptなど、新しい知識にも挑戦しています。Webの世界は進歩がとても早いので常に勉強し続けなければなりません。Webに関する仕事をしている以上、Webサイトを分析するだけではなく、制作の技術も上げていかなければなりません。自分のレベルはまだまだ初級の初級!少しでも自分の技術、知識を高めていけるようにこれからも毎日一生懸命勉強していきたいと思います!

 

 

 



 

で、今回1番僕が言いたいことは、“誰でも少し頑張ればWebサイトを作れるようになれる”ってことです。だって超スーパーウルトラアナログ人間だった僕でさえ作れたんですから。どんな人にもできますよ。

犬にだって出来ます!僕にとって一番の肝だったのは宇宙語、いや、プログラミング言語の習得!でも、ここさえ乗り切ればなんとかなりますよ。

 

自分でお店、会社をもってる人やブログをやってる人などは自分でオリジナルのWebサイトを作ってみたいと思う方が多いと思います。ぜひ、挑戦してみてください。あなたがどんなにアナログ人間だったとしても絶対にできますよ!

 

 

 

 

Advertising

誰を意識して書いた?Webサイト作りに興味のある人
この記事の目的は?オレでもできると思っていただく
のび太

どうも〜!「がんばれ!のび太!」を運営しております、のび太と申します!

このブログでは僕の実体験に基づく「海外就職・留学・起業・恋愛」などに関する情報提供をしています。

以前カナダで留学&現地就職していたことがありまして、そのときにWebと英語と恋愛をガッツリ学ぶことができたんですよー。

カナダから帰国したあと、調子に乗って起業しちゃいましたー!イェ〜イ! \(^o^)/

  • 海外就職しよう!カナダで現地就職した体験者が語る「海外就職したい人に知ってほしいこと」
  • カナダに留学したい人が読む本
  • 起業1年目の教科書
  • モテない男の独り言
著書について

Advertising

同じカテゴリの最新記事

全カテゴリの最新記事

人気記事

ランダム