ほっちゃんのプログラミング工房

12歳がウェブサイト公開してみて思ったこと等【ほっちゃん日記第二回】

12歳がウェブサイト公開してみて思ったこと等 作るに至った経緯・小学生でも作れる?おすすめのツール等は?

皆さんこんにちは。ほっちゃんです。

無事第一回の「【自己紹介】僕の自己紹介をします【ほっちゃん日記第一回】」が公開できたのですが、今回は実際公開するまでに至った経緯や、使用したツールなどを紹介します。

合わせて読みたい

【自己紹介】僕の自己紹介をします【ほっちゃん日記第一回】

なぜ公開した?

まずはなぜこのサイトを公開したのかを説明します。(いらない人は読み飛ばしてください)

もともと僕はプログラマーになりたくてプチコン4などでプログラミングをしていたのですが、

母が昔ウェブサイトを作ったことがあって、僕もやりたい!といったのが始まりでした。

ウェブ制作用言語に関する知識はゼロだったので、とりあえずサルワカさん等のサイトを参考にして書いてみたのですが、思うがままに書いてたらかなりダサくなって、作り直すことにしました

その後いろいろなサイトやスラスラわかるHTML&CSSのきほん 第3版なんかを参考にして作っていきました。

サルワカからの引用

サルワカさんからの引用

studio947からの引用

bookstudio947さんからの引用

小学生でもウェブサイトは作れる?

ウェブサイト自体は、小学生でも簡単に作れます

実際、僕の場合は短期間でも独学でここまで作れました。

基本的にはどこにどういう文字を入れて、その文字はどういう感じで表示するかを決めるだけなので、プログラミング力と同じかそれ以上に国語力・デザインのセンスが問われるように感じました。

たださすがに何も調べなくてもやってれば自然とわかる!というふうに都合よくはいかないので、
先ほど紹介したサイトや本、それにこのサイトでも小学生向けのウェブ制作解説記事をシリーズ化したいと思っていますので、
そういったところで勉強するのもいいのではないでしょうか。

小学生がウェブサイトを作るメリットは?

小学生でもウェブサイトは作れるということはわかりましたが、小学生がウェブサイトを作るメリットはあるのでしょうか。主なメリットを解説していきます

プログラミング力が身につく

ウェブサイトを作るにはプログラミングをして手打ちするか、wordpressやホームページビルダーなどのツールを使って作るかに分かれます。

wordpressなどで作ったほうが簡単ですが、プログラミングをして手打ちでやるとプログラミング力が身に付き、ためになります。

どんな仕事でもホームページがあるほうが有利なので、小学生~中学生くらいに作ってみて、慣れておいても損はしないでしょう。

国語力が身につく

先ほども述べましたが、ウェブサイト、特にブログ系のウェブサイトは絶対に国語力が必要です。ウェブサイトを作っていると自然と国語力も身についていくので、将来作家やライターになりたい人は練習になるでしょう。今後中学・高校で文章を書く課題も楽になるかもしれません。

デザインが得意になる

ホームページはただ文章を書くだけではなく、そのサイトのデザインもしなくてはなりません。

文字のサイズやカラー、段落と段落の間の取り方など、いろいろなデザインをしますので、将来デザイナーになりたい人はもちろん、いろいろな職業で役に立ちます。

お小遣い稼ぎになる

ある程度人気のあるサイトになってきたら、収益化するのもいいでしょう。収益化とは、そのサイトに広告などを張って、サイトを作ることによってお金を稼げるようにする、というものです。

もちろん親の許可などが必要ですが、頑張れば月一万円くらい稼ぐのも夢ではありません。

収益化はGoogleadsenseなど、いろいろな種類のものがあるので、ぜひいろいろなところで収益化をしてみましょう。

このようにウェブサイトを作ることによって、いろいろなメリットがあります。機会があったら、作ってみてもいいのではないでしょうか。

実際に使ったツール等をご紹介

ここからは僕がこのサイトを作るときに使ったツールなどをご紹介します。初心者でも使いやすく、評判もいいツール・サービスです。

Visual Studio Code

Visual Studio Codeからの引用

Visual Studio Codeからの引用

みんな大好きmicrosoftが出している、無料のコードエディタです。タグが色分けされていて見やすく、コード補完機能もあってかなり書きやすいです。

また、拡張機能が豊富で、痒い所に手が届来ます。

「この機能を使うには有料版を...」とか、「microsoftアカウントへログインしてください」とか言われることもなく、快適に使えます。

祖父の10年程度前のpcだと起動が遅いですが、今は母のWindowsを使っているので問題なく動いていて、満足です。

little server

littleserverからの引用

little serverさんからの引用

ウェブサイトには絶対に必要な、レンタルサーバーです。

lttle serverはレンタルサーバーの中でもかなり安く、そのうえ機能も豊富なのでなかなかいいサーバーです(語彙力喪失)。

一番安いミニプラン(150円/月)で契約しているのですが、ssdが20gbだったりと確かにほかのサーバーと比べて少ないですが、個人サイトでは十分すぎる量です。

知名度があまりないので不安になりがちですが、その分無料お試し期間が20日間と長めに設定されていて、不具合ばかりになったとしても損はしません。

他にもwordpressに最適なワードプラン(195円/月)、コスパがよく公式もおすすめなリトルプラン(250円/月)、強く早く、それでいて安いビックプラン(430円/月)と、どのプランもお小遣いが月500円でもおつりがくる値段になっています。

コントロールパネルの機能も豊富で、何ならwindowsのメモ帳とlttle serverだけでもウェブサイトは公開できてしまいます。

filezilla

filezillaからの引用

filezillaからの引用

サーバーにデータを送るためのftpクライアントの一つです。

ftpクライアントはFFFTPが有名ですが、filezillaの魅力は、なんといってもその転送速度でしょう。

filezillaはftpクライアントの中でもトップクラスに転送速度が早く、大量のファイルでも素早く転送してくれます。

若干画面がややこしいですが、将来大きなサイトを作ったときに転送速度が速いほうが便利ですので、慣れておいて損はないでしょう。

canva

canvaからの引用

canvaからの引用

canvaは名刺やらSNSやらウェブサイト自体やら…とかなりたくさんの物のデザインができるサイトです。

サムネイルを作るのに使っていて、このページのサムネイルもcanvaで作っています。

テンプレートが豊富なうえ、画像などをcanva内で検索でき、かなり便利です。

PowerPointやGoogleslideみたいな感じで使えて、慣れやすいです。

使うにはメールアドレスが必要ですが、little serverで契約するとメールアドレスも何個か作れるので、問題ないです。

画像やテンプレートがもっとたくさん使える有料版もありますが、サムネイルを作るのに使う分には無料版でも十分です。

まとめ

といった感じです。

次回はこの前シビックテック入門の勉強会に行った時のことを話します。

それではまた次回のほっちゃん日記で!