過酷！オリジナルサイト作り
投稿:2023/08/03 更新2024/09/24
こんにちは！ でるてぃーです。
ひょんなことからブログやってみたい！と思い、独学でブログを立ち上げました。
が、ここまで来るのが長かった……。正直、初心者の私には頭がパンクするところでした。何がきつかったか、詳しくお話します。専門用語がいっぱい出てくるのでちょっと注意です（適宜説明を入れてます）。
目次（見出しにジャンプします）
ブログ環境を作るのが難しい
中学時代にパソコン部に所属しておりパソコンの検定（P検2級取得）をやってました。そのためサーバーやらHTML文書（ブログの大枠を決めるプログラム）の知識はある程度知ってはいました。
しかし実践まではしませんでした。勉強なんかよりゲームばかりやってましたね。中学生なんてこんなもんでしょう。
高校の情報（新課程ほどしっかりしたものではなかったが）という教科でもある程度やった記憶はあります。サブ教科でも妥協は許されません。
そのため、ブログづくりなんて簡単だろうと浅はかな考えのもとやってみることにしました。
ブログ専用のシステムすら知らなかった
CMS（Contents Management System）とよばれる、自分のサイトを作成・運営するためのシステムがあるということを知りませんでした。
Wordpressに代表されるこのCMSを用いてブログを作れば、ブログを運営しやすいわけです。
そして、ブログをやっている人の9割以上が何かしらのCMSを用いてブログを運営しているようです。そりゃ当たり前か。
しかし、CMSの存在を知らなかった私は、これから茨の道を掻き分けていくことになりました。
Wordpressを使わない苦悩① ドメイン登録
まずドメインを登録します。ドメインは「インターネット上での住所」という例えがしっくりきます。例えば下図のような、URLの一部分です。
このドメインは、インターネットの住所を人間用に分かりやすくしたもので、コンピュータ側の数字だけの世界では、インターネットの住所ももちろん数字（IPアドレス）です。
Wordpressを使う場合でも、他とかぶらないドメインを取得しないといけません。
Wordpressを使わない苦悩② サーバー登録
「サーバーが落ちててクエストができんぞ！」とかいうときの「サーバー」です。
サーバーとは、インターネットを用いて何かしらのコンテンツやサービスを訪問者に提供するためのコンピュータです。これがないとみんなにウェブページを見てもらえません。
僕はドメインを作ったところで一緒にサーバーにも登録しましたが、プロ仕様のウェブページならドメインもサーバーも使い分けるのでしょう。
サーバーはタダではありません。有料です。月額料金・SSL（送受信するデータを暗号化して安全性を高める仕組み）など、いろんな項目を検討しなければいけません。いろいろ考えて、私は「エックスサーバー」を利用しています。
Wordpressを使っていても、レンタルサーバーを登録しなくてはいけません。
Wordpressを使わない苦悩③ FTP登録
まだあります。FTPというシステムです。
ドメインを登録して、サーバーを登録しました。これでみんなにウェブページを見てくれる環境は整いました。よし自分の記事を・・・
あれ？どうやって自分の記事をサーバーに送るんだ？困りましたね。
FTPとは、ウェブページ製作者と外部サーバーとのデータの送受信をしてくれるシステムです。難しく言うと通信プロトコルです。
このFTPを使って自分のウェブページをサーバーに送ることで、ようやく自分の記事を誰かが見てくれるようになるわけです。
僕はFTPソフトウェアについては無料の「FFFTP」を使っています。25年以上のド定番FTPソフトです。FFFTPの使い方、導入の仕方はまたの機会に紹介します。
……とりあえず、ブログ環境を作り上げる手順を大雑把にまとめると下のような図になります。
真の難しさは言語だった
張りぼてのブログ環境を構築しましたが、まだプログラミング言語の壁があります。まさに外国語を学ぶようなものです。
そもそもウェブページの構成は？
ウェブページは、二つのプログラミング言語により構成されます。HTMLとCSSです。
HTMLとは、ウェブページの大枠です。主に文章に関わるメインコンテンツを記述します。
なんだ、HTMLだけで言いたいことがいえるのか！と思ったら大間違いです。読めるには読めますが、HTMLだけだとこのページはこうなります。
たいへん不格好ですね。いつも見るようなデザインのウェブページにするにはどうすればいいでしょうか？
このために「CSS」を記述します。CSSとは殺風景なHTML文章に肉付けしてデザイン性を豊かにするプログラミング言語です。
HTMLとCSS、この二つのプログラミング言語を組んで初めていつも見るようなホームページが出来上がるのです。
WordpressではHTMLやCSSの知識なしでも、まるでワープロソフト（Wordなど）のように記事を作ることができます。そういうことは早く言ってほしかった。
よく見るページ風のデザインがうまく作れない
正直このページのデザインどうですか？なんかシンプルですかね。
大学一年ごとき（しかも情報系の学部でもない）が作ったので大目に見てくださいよ(笑)。
慣れていないと画像一枚好みのサイズで貼るのも難しいものです。ずっと追尾するタイトルバーも。
スマホでこれを見てる人はタイトルバー（Delty memoってかいてあるやつ）の右に3本線マークがありますよね。これ「ハンバーガーメニュー」っていうんですよ。
押したらハンバーガーを頼めるボタンじゃないですよ。画面上が情報過多にならないよう、これを押したときだけ表示するコンテンツを作っておくんです。
タブレットやパソコンで見てる人ならわかりますが、このページ、2段組みになってます。左はメインのページ、右はサイドバーです。こうなるよう作るのも結構難しかったです。
そもそも、デバイスによって画面を変える（レスポンシブデザイン）ようにCSSを組まなければいけません。スマホ版でパソコン画面を見せたら小さくなってしまいますからね。
しかしながら、Wordpressはすでにたくさんのテンプレートがたくさん用意されており、自分好みのデザインテーマが選び放題！
しかも、コードを書くのも難しい複雑な機能も、プラグインとよばれるシステムが用意されており、たいへん簡単に作れますね。うらやましい。
CSS以外にも記事やデザインを考える
代わりにデザインしてくれる人に頼むのもありですが、いろいろ手間がかかりそうだなあと思い、今のところ全部自作またはフリー素材です。
いいサムネイル画像の作り方もよくわかっていません。とりあえず自分なりの美的センスに任せて作ってます。ロゴだって自分で作りました。
また、一番大事なのは読者に提供するコンテンツの量と質です。これができなきゃ意味がありません。
書いた記事は、一度読者としてブラウザから訪問して、客観的に精査します。欠陥があったら記事を修正していきます。
でもHTMLサイトにしてよかったこともある
この文章、一文一文全部＜ｐ＞や＜ｈ２＞（これの半角）などではさむんですよ。ワープロ感覚でできるWordpressと比べて非効率的かもしれません。
でも、使わない方法でやったおかげで知識を格段につけることができました。情報学部の友人にこのことを言ってみましたが「工学部なのにこんな高度なことやってんの！？僕らが2,3年にやるやつじゃん」と。
僕自身勉強は好きなので、ここまでのサイトをつくる上で「壁にぶつかる→問題解決」をこなすというのも楽しく感じましたね。
こういう経験をしておくと、新たなプログラミング言語を学んだりするときの敷居が低くなるのも大事なことです。Webページ作りをする前にExcel VBAばかり勉強していたので、これでもすぐ身についたほうなのかもしれません。
入社面接や公の場のネタにもなりうるだろうし、仕事や就職にそのまま役に立つスキルかもしれません。まだ大学生低学年ですから世の中のことをこれから勉強していきます。
時間があったらJavascript,Python,Texあたりを勉強したいですね。（良いデザインにしたいし、数学についての記事も書きたい）もちろん本業である大学の講義・試験も両立したいところです。
まとめ
いかがだったでしょうか。いち大学生が率直にウェブページ制作の苦悩を書きました。
同じように悩んでいる境遇の人が少しでも解決できるよう、邁進していきます。
関連する記事
プロフィール
でるてぃーメモ 管理人
大学2年。趣味はそろばんと資格勉強。個別指導塾とHP更新のバイトをしています。