子供向け無料プログラミング寺子屋『CoderDojo熊本』のアンケートに、こんなメッセージがありました。
これからますます重視されると言われている『STEAM教育』。
- Science（科学）
- Technology（技術）
- Engineering（工学）
- Arts(リベラルアーツ、教養)
- Mathematics（数学）
『STEAM』の中で考えると、
ホームページなどのITは『テクノロジー(技術)』の分野ではあるなぁと思い、
小学生や中学生でもわかってもらえるように、できるだけ簡単に、まとめてみることにしました。
ホームページの作り方をわかりやすく 5つの方法
ホームページを作る方法というのは、
ざっくりいうと5つくらいあるかなと思っています。
1. wixなどの無料/有料ホームページ作成サービスを使う
2. ホームページ用のツールを使う(ホームページビルダーなど)
3. HTML+CSS+JavaScriptで直書きする
4. サーバー側のプログラム言語も使う(PHP、ワードプレスなど)
5. がっつりウェブアプリをつくる
1 から 5の順で プログラムを組む量が増えていきます。
ホームページの作り方をわかりやすく その1. wix
とにかくさくっとホームページがつくりたいなら、
wix(ウィックス)などの無料サイト使えば、とても綺麗なサイトが簡単につくれちゃいます。
すでに仕事をしていて、
宣伝用にホームページをつくりたいという場合はこれでいいんじゃないかなと思います。
wix(ウィックス) なら、
wix(ウィックス) が用意しているサーバーも無料で使えるので、
ややこしいことを考えずにとにかくホームページ欲しいという人ならベストじゃないかなと思います。
ホームページの作り方をわかりやすく その2 ホームページビルダーなどのツール
という場合に2つめの候補にあがるのが、
『ホームページビルダー』や『Bind(バインド)』というホームページ用のツール。
専門的なプログラムを書くことなく、パーツを組み合わせてホームページがつくれるようになっています。
最近は自動でスマホ対応もやってくれたりして、とにかく使いやすい。
有料なソフトが多いですが、
プログラミングはやんなくていいよという人は、
wix(ウィックス)かホームページビルダー系のどちらかでいいんじゃないかなと思います。
ホームページの作り方をわかりやすく その3 HTML+CSS+JavaScript
wix(ウィックス)もホームページビルダーも、
他の人が同じようなサイトを作ることだって可能なので、
よりオリジナリティというか、自分だけのホームページということになると、
しっかりと作り込む必要がでてくるのかなと思います。
パソコンで本格的にホームページをつくるとなると、
- HTML(エイチティーエムエル)
- CSS(シーエスエス)
- JavaScript(ジャバスクリプト)
が必要になります。
参考記事
家に例えると、
- HTML( エイチティーエムエル)・・骨格
- CSS(シーエスエス)・・色や見た目
- JavaScript(ジャバスクリプト)・・動き
といった役割になるかなと思います。
最近ではスマホ対応も重要と言われたりしています。
参考記事
『HTML(エイチティーエムエル)』と『CSS(シーエスエス)』はプログラムというよりは、
どちらかというと『デザインセンス』の成せるワザなので、
デザインが好きという人は、ここを極めるというのもありだと思います。
ホームページの作り方をわかりやすく その4 PHP、ワードプレス
先ほど紹介した3つの言語は、ある特徴があります。
- HTML( エイチティーエムエル)
- CSS( シーエスエス)
- JavaScript(ジャバスクリプト)
それは、ブラウザ側で動くということ。
- ブラウザ・・インターネットエクスプローラーやグーグルクロムなど
どんなサーバーを使っていても、この3つの言語は使うことができるし、使う必要もでてきます。
専門用語だと、『クライアントサイド』と呼んだりします。
一方、この3つの言語ではできない事もあったりします。
例えば、
- お問い合わせフォーム
- コメント機能
などなど。
こういう仕組みはブラウザ側ではなくて、サーバー側で作り込む必要がでてきます。
サーバー側を作り込む事を専門用語で、
『サーバーサイド』と呼んだりします。
サーバー側で使える言語というのはたくさんあるんですが、有名なところだと、
- PHP (ピーエイチピー)
- Ruby (ルビー)
- Python (パイソン)
かなと思います。
特に『PHP(ピーエイチピー)』は、ホームページ用につくられているので、
ほとんどのレンタルサーバーで使えるプログラム言語になります。
ホームページの作り方をわかりやすく 最強のブログツール ワードプレス
世界中のホームページで一番使われているのが、
『Wordpress(ワードプレス)』というツールで、
『Wordpress(ワードプレス)』も、『PHP(ピーエイチピー)』でつくられています。
- 人気記事のランキング
- Facebook自動投稿
などなど、とにかくたくさんの便利機能がオプションとして追加できます。
ホームページにいろんな機能をつけたい、
自分だけのブログをつくりたいと思ったら、
『ワードプレス』を試す価値はあるのかなと思います。
ホームページの作り方をわかりやすく その5 がっつりウェブアプリを作る
ホームページを作る方法の最後は、
ホームページとして表示させるだけじゃなくて、
もっと高機能をもたせたい時の選択肢になります。
例えば、
- インスタグラム風の写真アップ機能
- フェイスブックみたいなSNS
- 定期的に楽天トラベルの情報を集めたい
- 株価やテレビ欄の情報を定期的に集めてまとめたい
- 観光局の情報をまとめて統計をとりたい
などなど。
こういう機能をもたせようとすると、途端にプログラミングの割合が増えてきます。
参考記事
パソコンでホームページを作る方法1番から4番までを、
デザインとプログラミングの割合が 8 対 2 くらいだとすると、
がっつりウェブアプリをつくる場合は、
デザインとプログラミングの割合が 2 対 8 くらいに逆転する感じです。
また、プログラミングの量が増えるほど、
ホームページ/ウェブサイトというよりは、
『ウェブアプリ』という呼び名に変わってくる印象です。
サーバーもしっかり選ぶ必要がでてきます。
ホームページの作り方をわかりやすくまとめてみて
ホームページやウェブアプリの種類をざっくり5つに分けて紹介してきました。
簡単にホームページをつくりたいなら1番か2番の方法でいいと思いますし、
よりオリジナルというか、自分らしいホームページを作るほど難しくなっていきます。
『ウェブアプリ』と呼ばれるサイトは、
より高度なプログラミングのスキルが必要になってきますので、
必要に応じて、新しい技術、情報も仕入れていく必要があるかなと思います。
『web初心者』『HTML/CSS関連』ではこんな記事も読まれています。
1. 【JavaScript】初心者向けの動画をリリースしました【Udemy】2. 【Udemy】プログラミング初心者向けの動画をリリースしました【PHP】
3. 【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
4. ホームページつくり方を3ステップでわかりやすくまとめてみた【初心者向け】
5. 【セマンティックウェブ】HTML5をわかりやすくまとめてみる【初心者向け】
6. 【CSS】の書き方をまとめてみた 『レスポンシブ対応』※随時更新中
7. プログラム入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜
8. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)
9. パソコンのキーボード練習の4つのステップをまとめてみた
10. レスポンシブサイトの作り方をめっちゃわかりやすく書いてみた【Bootstrap4】【初心者向け】
11. ホームページの作り方をわかりやすくまとめてみた〜5つの方法【初心者向け】
12. 【サーバー】とは 種類についてわかりやすくまとめてみた【初心者向け】
アオキのツイッターアカウント。
