TOPICS管理人のつぶやき

ホーム > 管理人のつぶやき > 制作振り返り日記 #1

制作振り返り日記 #1

公開:2026.03.06 

制作振り返り日記01

このWEBサイトを作ろうと思ってからのことを書き残しておこうと思います。
まず今回は、WEBサイトを作ろうと思ってからサーバー契約する前までの話です。

自作WEBサイトを作ろうと思ったきっかけとか

とりあえず手元に残しているメモで一番古いのが2025年7月19日でしたので、そのあたりの話から。

AIの進化が凄まじくて、何か勉強を始めなきゃな~と漠然と思っていた2025年夏。
ふと先輩社員の言葉を思い出しました。
『自分でサーバーを借りてホームページを作ってみると勉強になりますよ。』
たぶんそんな感じのことを言っていた、と思います。既に退職された先輩で、かなり前のことなので記憶が定かではないですが。

そのときはサラッと流しましたが、今となっては確かにその通りだと思いなおしました。
自分の業務内容は基本WEBサイトの制作、公開後の編集・修正などの保守です。サーバーの契約やドメインの取得などは別の方がやっていました。
制作の一番初めの段階から自分でやったことはありません。
それに、クライアントの意向とか関係なく、全て自分の好きにWEBサイトを作れる!
急な修正変更や聞いてないんだが?というような機能の追加もない、自分の好きに作ればいい。
考えてみると面白そうだなぁ、とゆるく自作WEBサイトの制作を始めてみることにしました。

サーバーどうしようかな問題

実際にWEBサイトを作って公開するなら、サーバーをどうするか考えなければなりません。
安いレンタルサーバーだったら月数百円から利用できます。
ですが、安いところは安いなりに通信速度が遅いとか、ちょっと微妙かな~というところもあります。

いろいろと比較検討している中で、実際の業務でも利用したことがあるXserverが2025年9月まで料金の半額キャッシュバックキャンペーンをしていることを発見しました。
1ヶ月の利用料金が990円からということで、金額だけならもっと安いところもあるし…と迷っていましたが、半額キャッシュバックがあるなら使ってみるか?とXserverを利用することにしました。キャッシュバックの申請を忘れるなよ私。
独自ドメインも無料(支払いを自動更新にするなら)。

実際に仕事で使うんだから、勉強になるだろうし役立つだろうし、ちょっとサブスク契約すると思えばめちゃくちゃ痛い出費では…ない…うぅ…。
※当時は仕事で使うから~と考えていましたが、現在退職したので今となっては無意味ですな。わはは。

自作WEBサイトの内容を考える

サーバーの契約をする前に、具体的な内容を固めておくことにしました。

まず自分の勉強のためという理由で作り始めたので、WEB制作に役立つものにしよう、と考えました。
たとえば、よくある「〇〇の作り方」のようなHTML・CSSのパーツまとめサイトがいいかなと。

また、記事を書くのにあたり勉強した際に、Googleの評価基準にEEATとやらがあると知ったことも理由の1つです。
EEATについてざっくりまとめると、

  • 記事の内容についての知識がある人が作っている
  • 記事を書いた人自身の経験に基づいた内容である
  • 記事の内容についてのプロが書いた記事である
  • 記事の内容(書いた人)が社会的に信頼できるものである

というようなものらしいです。
私がこの全ての要件を満たすことができるかは疑問ですが、一応実務経験のあることを記事にするわけですので、しばらくはネタ切れもないだろうし、記事も書きやすいかなと思いました。

サイト名を考える

ということで、方向性もふんわり決まったのでサイト名を考えることに。
こんな候補がありました。

  • WEB小ネタメモ
  • WEB TIPS
  • ぐだぐだWEBメモ
  • Wakariyasuiwomezasu Web Tips
  • 自分用WEB制作メモ
  • Web custome tips
  • mezase wakariyasui memo
  • Web development tips

最終的に「カスタマイズ」をGoogle翻訳してみて出てきた「customization」を使って「WEB customization TIPS」に落ち着きました。
単純に訳すと「WEB制作ヒント」的な感じになりますかね。なってたらいいな。

これだけだとサイトの内容がわかりづらそうだったので、結局「WEB制作TIPS」もくっつけました。
一番気を付けたのは、他と絶対被らないサイト名にするということでした。単純に被るのは嫌だという理由で。

必要なページを考える

とりあえず簡単にトップページは作っておこうと思いました。
あとは投稿記事のコンテンツは必須だなと。
メインはWEB制作のネタメモ(カスタム投稿)で、制作の記録とかつけたりするための投稿(デフォ)を用意。

あとは後々Googleアドセンスの申請をしようとおもっていたので、それ用の固定ページですね。
聞くところによると、「プライバシーポリシー」「お問い合わせフォーム」「製作者のプロフィール」があると審査に通りやすい…らしいです。真偽のほどは定かではないですが。
まぁ、作ってマイナスになることもないだろうと、その3ページは作成決定。

記事のネタが尽きてきたら、古の個人サイトみたいな隠しコンテンツを遊びで作ろうと思ったり。
訪問者カウンター作って、キリ番踏んだ方からのリク絵受付します!みたいな。
個人サイト全盛期に憧れはあったんですけどね、当時は学生だったし家にパソコンなかったしやったことはなかったんですけど。
作ったとしても、一生工事中の古の個人サイトみたいなことになりそう。実現するかは未定です。

独自ドメインを考える

自分でドメインを考えたことは今までなかったので新鮮でした。
ドメインを考える際に気を付けることなど調べてみると、「長すぎるドメインはよくない」「ハイフンが入ってるのダサい」…のような情報が入ってきました。
う~ん、そうなの?と疑問に思う部分もありましたが、長すぎず・ハイフン入れないを念頭に置いて考えてみました。

サイト名「WEB customization TIPS」をこねこねした結果、「customizatips」に落ち着きました。
当時のメモに「安直」って書いてた自分。
意味がわかるドメインがいいそうなのですが、その点で言うとこれはアカン気がします。
普通にわかりづらいよなと。
とりあえず他と被ってないからヨシ!と決定。

あとは「.com」にするか「.net」にするかで迷ったのですが、「.com」の方がよく見るし、安心感ある気がする!と「.com」に決定。
後から改めて調べると、技術とかテクノロジー系は「.net」がいいかもとの情報もありました。
まぁもう決めちゃったし、いいか!とその情報は一旦横に置いておきました。

ロゴと管理人紹介のイラストを考える

ロゴと管理人イラストを考え中

まず手描きでなんとなく考えてみました。

ロゴは筆記体的なものも考えましたが、なんか方向性が違くないか?とボツ。
サイト名のアルファベットの向きや組み方を変えて今の形になりました。

イラストは極力線を少なくするように、メガネ・髪型ボブ・ゲームのコントローラーを持たせて。
こっちはすぐに、これでいこうと決定。

最終的にCLIP STUDIO PAINTで清書して完成。

トップページの構成や下層ページの見出しなどを考える

トップページや下層ページの構成を考え中

とりあえず手描きでなんとなく考えてみることに。
このときはスマホ基準で考えていますね。

初めに「このサイトについて」的なテキストウィンドウを出す→メインコンテンツ→サブコンテンツの流れで作成しようと思いました。
テキストウィンドウは、ゲームボーイくらいの時代のゲームのイメージです。
何か動きがあった方がいいかなと思ってSwiperを入れてみることに。

あとは基本のボタンと、下層の見出しまわりなどを考えています。

WEBサイトの色味は、一応昔のゲーム画面のイメージです。
まだカラーになっていない時代のゲームで、本当は背景色を緑がかったグレーにしようと思っていたのですが、見づらかったのでそれはボツにしました。

ローカルでコーディング

それからサーバー契約までの間は、サイト用のGoogleアカウントを作ったり、ローカルでコーディングしてみたりしていました。

めちゃくちゃ久々にDOCTYPEから打ちました。
ずっとコピペでやってたから、最初何から書くんだっけ?と全然身についてなさすぎてダメでしたね。
昔勉強に使ってた本とか引っ張り出してきました。

こんな本です。

  • たった1日で基本が身に付く!WordPress超入門
  • WordPressレッスンブック HTML5&CSS3準拠
  • WordPress AMP対応モダンWeb制作レッスンブック
  • Wakariyasuiwomezasu Web Tips
  • ほんの一手間で劇的に変わるHTML&CSSとWebデザイン実践講座

WordPressを使い始めた7~8年前に買った本も、残していてよかったなと思いました。
当時買った本の中で一番役に立ったと思うのは「たった1日で基本が身に付く!WordPress超入門」でした。奥付を見たら、初版発行が2018年…。
他のWordPress本に比べて薄くて、読みやすくわかりやすい。すぐ読み終わって、簡単な基礎ならわかった気になれるから達成感も得やすい。
勉強するときの参考書はまず薄い物を選べ、というようなことを聞いたことがありますが、ほんとそれな、と思いました。

とりあえずHTMLとCSSだけで組めるところは、ローカルで進めていました。
SCSSも使ってみようかなと調べてみたり。

文章の書き方を考えてみる

今後記事を作成するにあたり、文章の書き方も勉強しておこうと思いました。

まず結論から入り、次にその結論に至る経緯、最後にまとめ…のような構成だといいらしいとか。
確かに誰かの話を聞く際に、要点がはっきりしない状態でダラダラと話されても結局何が言いたいのかわからないですよね。
読む場合も同様で、結論から始まることで、その後の内容が入ってきやすいかもしれないなと思いました。先にユーザーが知りたい情報を提供する方が、ユーザーにとって親切な設計になります。

ちなみに、勉強する際に参考にしている本。

  • ゆるゆる稼げる Webライティングのお仕事はじめかたBOOK
  • 簡単だけど、だれも教えてくれない77のテクニック 文章力の基本

別にこのWEBサイトで食っていく予定はないけれども、実際にライターとして働いている方が文章を書くときに心がけていることなど大変参考になりました。
文章力の基本の方はまだ読んでいる途中…。

このサイトの記事を書く以外にも、誰かに何かを伝える文章を書く術を知っておいて損はないと思います。

終わり

今回はWEBサイトを作ろうと思ってからサーバー契約する前までの話でした。
何か勉強しないとな~というふわふわした考えから始まったので、WEBサイトの構想段階も何かとふわふわしています。

物事は何事も考えている時が一番楽しいものですね。
なんとな~くどうしよっかな、と考えていたこのときが一番楽しかったような気がします。
あと、複雑なコード書いてヒィヒィ言ってるよりも、HTMLとCSSだけでコーディングしてる方が楽しいな。

もし次回を書くことがあれば、サーバー契約後からの話になります。