Webサイトについての小話の目次を開く ▼

個人サイト制作：サイトマップへ戻る

Webサイトについての小話

ネットは初めてか？
肩の力抜けよ（笑）

私が一生懸命勉強していると、父がこう言いながら私を冷やかしに来たもんです。
これ、後になって知ったんですが、けっこう有名なネットスラングというか、言い回しのようですね？
私も同じ意見です。
Webサイト制作なんてやることは星の数ほどあるし、全てを網羅するなんて無理なんですよ。
ここでは支離滅裂に、雑多にいろんな小話を詰め込んでいきます。
でも、とりあえず目次くらいは付けますよ？

HTML・CSS・JavaScriptは学ぶべきか？

HTMLは触るといいかも

そんな難しくないありませんし、広い意味でのWebというものに関して理解できます。
なにより楽しいですよ？
私もめちゃくちゃハマりました。
よくプログラミングと言われますが、HTMLはプログラムと言うよりマークアップ言語です。

とりあえずこのHTMLが書けるようになれば、「Xが最近不穏だろ？ でもブログはなぁ…サイトを作りたいなぁ…」というモヤモヤが解決します。
構造の違いについて理解し、かつ自分の手で構築できるようになるからです。
でも個人サイトを作るくらいなら、HTML+CSS+JavaScriptは必須じゃありません。

何もHTMLを全文暗唱して書ける必要はないです。
私も資格を持ってると言いつつ、忘れてる部分がいろいろあります。
書けるというのも確かに良いことなんですが、それよりもWebというものがどんな感じで作られているものなのか、ぼやぁっとでも良いから意味が分かるというのが、とっても大切だと思うんですよ。

CSSとJavaScriptは、HTMLがちゃんとできてからですね。
まずはHTMLを正しく書けないと、その先に進んでも意味がないです。

WebブラウザとHTML

そうそう、余談ですが…Webサイトやブログを構築するのに使うシステムは「ウェブサイトビルダー」と言います。
私が使っているGoogleサイトもウェブサイトビルダーの一種ですよ。

話を戻すと、Microsoft Edge・Safari・Google Chromeという３つのWebブラウザで正常に表示されるよう作るのが一つ。
もう一つは、このWebブラウザでWebサイトを見る仕組みについて、ざっくりでいいから把握しておくとWebサイト制作がより楽しいと思います。

Webブラウザというのは、いろんな場所にあるサーバに入っているHTML・CSS・JavaScriptを読んで解釈し、その結果を表示しているのです。
実際には多種多様なプログラムが動いていてHTML・CSS・JavaScriptだけではないけど、ひとまずこのくらいまで把握して頂けると、Webサイト制作に関する情報収集がスムーズになります。

Webの勉強はおもしろいと思う！

ほんと偶然だったんですよね。両親ともにIT詳しくて、いつの間にか私もパソコンをおもちゃにするようになって…
やがてLinuxにのめり込んでWebサイトを作り始めた。

プログラマーという感じでもないんですよね。私の場合。
プログラミングにも凝ってたけど、Webサイト制作ということなら上級者ほどシンプルに仕上げる傾向があることに気付いてさ。
必要最低限に済ませるのがカッコいいと思うようになった。
でもあんまりテキストテキストしてても自分が見てて退屈ですしね。
それで今の領域に行き着いた感じです。
とにかくシンプルにというのは、私のパソコン遍歴にも如実に表れています。
まず最初にLinuxのConkyにハマったんだよ。
スクリプト組んでデスクトップにメーラーや天気予報を表示させてみたりした。

参考サイト：Conky

参考サイト：Visual Studio Code

ただ、Visual Studio CodeならWindows11のSモードでも動作するみたいね。
今度入れてみようかな。─ 結局、入れちゃいました ─
Linuxの勉強というか、Linuxをおもちゃにしてるときに出会ったのがエディタ戦争です。

参考サイト：エディタ戦争

これがおもしろくてさ…
Emacsとvi、どっちがより優れたテキストエディタかという。
それぞれのテキストエディタ陣営が教会まで作っちゃって！

参考サイト：Church of Emacs

Emacsのほうが好みではあるけど、viのほうも「The Cult of vi」なんて作っててすごくおもしろかった。
私自身がWeb制作やってたから、快適なテキストエディタが大切であることは身に染みて知ってたんですよね。
当時はプログラミングに凝ってたから、いろいろ使ってました。
viは肌に合わなかったというか、私の理解力不足で使いこなせなかったです。
モードの切り替えと特殊なショートカットキーが馴染めなくてね。
でもEmacsはゴリゴリにカスタマイズしてました。

参考サイト：GNU Emacs

Emacsすごいんだよ。
テキストエディタなのに、SNSでもメールでも何でもできちゃう。
大学時代はこれでレポート書いてみたり、もちろんWeb制作でもお世話になった。
そしてだんだん…人間は一度にたくさんのタスクを同時並行作業することはできないという思考に入り始めました。
あんまり多機能でも、そしてそれを使いこなせたとしても、肝心の文章を書くときはそれに集中しないといけないよね。
昔の私のWebサイトはそこらへんが疎かになっていたと思う。
それなりに稼げたりもしたんだけど、なんかカッコつけてるんだよね。軽薄なイメージが漂ってた。
東日本大震災の頃は学生とも言えないような年齢だったけど、あの当時にインチキ臭いアフィサイトが大量生産されたじゃん？
いろいろIT分かるようになってから両親と話題になったんだけどさ。
ぐちゃぐちゃ地図やらTwitterウィンドウやらブログパーツやらが貼り付きまくってて、デカデカと広告がでかいやつ😆ww
ああいうイメージです。
うるさいWebサイトのITバージョンみたいな。
でも当時はそこから抜け出せなかったんだよね。
要するに資格だけ持ってる素人ということよ。
そんなこんなで、辿り着いたのがUbuntuのデフォルトテキストエディタであるgedit。
これもEmacsほどではないけどカスタマイズできて、ウィンドウを分けたりすることもできる。
それでいて、文章を書くのに集中できたんだよね。

参考サイト：gedit

参考サイト：Richard Stallman's Personal Site

URLもいいよね。
https://stallman.org/
とてもシンプルです。
ご本人様がどのような考えでこのWebサイトを作ったのか私のような人間からは想像も難しいけど、これほど偉大なプログラマーでありながら、とてもシンプルなんです。
テキスト中心のシンプルなWebサイト。
私はまだこういう領域に至っていませんが、このWebサイトも公開当初に比べてどんどんシンプル化していってるからね。
真似してるつもりでもないけど、やっぱ慣れれば慣れるほど、そして作り込めば作り込むほどシンプルになっていく傾向は感じてます。
結局のところグチャグチャしてるWebサイトはうるさいよね。
訪問者が迷うだけなんです。
私のようにITに慣れた人間でも、どこにメニューがあるのか分からないようなWebサイトはごろごろしてますよ？
トップページにいるのは分かるけど、そこから何をすればお目当てのページに行き着けるのか分からないの！
精進を重ねていきたいものですわね。

個人サイトからブログ、そしてTwitterへ

インターネットを用いた個人からの情報発信と言ってもいろんな形がありますよね。
SNSを使う方法もあれば、動画や配信をすることもあり、私のように個人サイトをひたすら拡大する人もいて。
私はインターネット黎明期を肌で感じることができた年代ではないのですが、簡単な流れをお話しすることくらいならできるかも？

個人サイトからブログへ

でもそんなのはおよそ一般向けではありませんよね。
個人からの情報発信によほどの意義や必要性を感じる立場の人だったら良いけど、そうでない人にとっては学習コストが高過ぎます。

一方、ブログはWebサイト制作をより身近にしました。
Web言語を扱えなくても、テキストを書いて画像を挿入、そして送信ボタンを押せばインターネットに自分の記事を公開できます。
そういうブログの老舗として世界的に有名なものの一つが、Bloggerです。

Bloggerは当初 Pyra Labs が開発し、2003年にGoogleによって買収されました。
それ以来、ずーっとGoogleが無償で提供しています。
こうして、ユーザーにWeb言語の習得を要求しない情報発信ができるツールとして、いろんなブログサービスが生まれたんだよね。

日本のインターネットの歴史

次のサイトが参考になると思います。

参考サイト： インターネットの登場・普及とコミュニケーションの変化
総務省トップ > 政策 > 白書 > 令和元年版 > インターネットの登場・普及とコミュニケーションの変化
第1部_特集_進化するデジタル経済とその先にあるSociety 5.0
第1節_デジタル経済史としての平成時代を振り返る

世界のインターネットの歴史

このサイトはすごいよ？
一見の価値あり。
世界中のWebデザインを時代順に閲覧できる、巨大なデジタルアーカイブになっています。

参考サイト： Web Design Museum

ウェブサイト・アプリ・ソフトウェア、そしてウェブデザインの歴史について、1990年代から今に至るまで揃っています。
私もここでいろんなWebサイトのパターンを勉強しました。
古いサイトであっても、自分の好みに合うデザインがきっと見つかるでしょう。

私が昔からテキストベースの個人サイトにしているのも、このWeb Design Museumからの影響が強いです。
特にTechnology（テクノロジー）系のWebサイトにはかっこいいものがたくさんあるんですよ。
例えばMicrosoftのホームページ。
個人的には、今のものより1996年あたりの古いタイプのほうが好きですね。
ひと目で内容がイメージできるアイコンと、ブログみたいに記事が並んでいるデザイン。
落ち着いた技術系のサイトという印象がある。

学生の頃に読みこんだIT教科書の付録にこのWeb Design Museumが掲載されててさ。
もう…マジでのめり込みました。
いろんなパターンでWebサイト作りましたよ。

ブログからTwitterへ

Web言語を手書きするよりぜんぜんマシだけど、ブログもやはり敷居があったんでしょうね。
実際、いろんなブログサービスを見ると多機能かつ複雑であり、設定メニューもパソコンに慣れた人向けという印象です。
普段からパソコンに触っていれば何てことないのですが、まったくパソコンに触ったことがないと厳しいかもしれません。

その点、Twitterというのはいいポイントを突いたんだと思います。
テキスト入力してから、投稿するだけ。
UIは極めてシンプルで、必要最低限のテキストとメディアのみ。
それでいてフォロワー同士であればタイムラインに投稿が自動で表示されるから、反応もすぐにもらえるわけですよ。
技術的な敷居を極力下げた、親しみやすい仕組みになっていますね。

Webサイトは作り込むほど技術的な敷居が上がり、ページビューを獲得するには経験まで必要になってきます。
初めのうちは誰も見に来ません。
SNSは最も技術的な敷居が低く、ページビューを獲得するのも簡単です。すぐに「イイネ」が付くでしょ？
ブログは中間に位置するんだよね。

個人サイト出身者が数年間SNSで遊んでみた

ライブサービスゲーム（ソシャゲ）にハマったことでTwitterをやってみたんだけどね。
例えば私のように地方移住（Iターン）みたいなことを考える人から見ると、ソシャゲなんて金の無駄みたいに思われるかもしれないけどさ😆ww
過剰な出費とならないようにやる分には問題ないと思います。
ガチャ課金にハマり過ぎると移住の夢が遠のきますというだけでね。

ソシャゲSNSでよく見た文脈として「ソシャゲは何も後に残らない」というものがあるんです。
でも私の立場からすると何も残らないのはTwitter等SNSのほうであって、ゲームではないよね。
ゲームは「楽しかったぁー！」が残るもの。

Twitterは120字以内に収まるWebページを気楽に投稿できるというものであって、一つ一つのTweetにURLが付いています。
いわば投稿が極端に簡単なマイクロブログなんですよね。
SNSがもたらす社会的影響はあるにしても、そのシステム上、自分が書いてきたマイクロ記事はどんどん過去のカテゴリーに追いやられ、後からアクセスするには少しの手間が必要です。
WordPressのようなブログのように、カテゴリー分けした上で閲覧者に利便性がある経路を用意するようにはできていません。

結果として、プロフィールと固定Tweetにいろいろと詰め込むことになる。
それは、「トップページないしはサイトマップ」として、満足に機能するものではないというのが私の感想です。
でもこれについては、Twitterを含めてSNSが悪いわけじゃない。
そういうUIなのですから。
目的が違うだけよ。

そんなこんなで、やはりWebサイト制作メインにいつかは戻ろうと。
それを前提としてSNSも扱っていて、しばらくはその状態で良いだろうとぼんやり考えていたのです。
ソシャゲをしてても大金を注ぎ込まなければ自分の進路に悪影響は出ないし、マネタイズサイトを再び運営したい ─ ないしは既に運営している ─ と考えても、「fein」の名を使う必要はまったくないのですから。

そんな矢先に、イーロンマスクが現れた。
上述したようにゲームの思い出には価値があり、それは形あるものとして残したい。
でもSNSに自分のコンテンツを残しておくのはリスクがある。
そして…今こうして元居た場所に帰ってきているわけです。

フォントには商用利用の可否があります

おっといきなり話題が逸れてしまった。
画像の著作権もそうなんですが、権利関係の話題と言えばフォントの商用利用がありますよね。
私の場合は画像よりフォントのほうからWebサイトに関連する権利関係の話を勉強したような記憶があります。
IT資格の教科書ではなかったけど、参考書籍のコラムか何かに書いてありましたよ。
例えばしばしばTwitterで話題になる創英角ポップ体なんか良い例かと思われます。
創英角ポップ体はリコーのものですが、Microsoftに販売権が渡っているのでMicrosoft Officeにプリインストールされています。
あれは、創英角ポップ体は商用利用して良いのですかね？
商用利用ライセンスというものがあって、Web公開される何かしらを商用目的で用いるなら当然、それらの情報は事前にチェックされるべきものです。

参考サイト：「株式会社リコー」フォントのライセンスでできることの範囲を見る／広げる（商用利用）(2023/10/21閲覧)

じゃあ、TwitterやYouTubeの収益化はどうなるんですかね？
ある任意のコンテンツがあり、それの一部と認識され得る範囲内で、どんなフォントが商用利用可能なのでしょうか。
また、MSゴシックやメイリオ、ヒラギノフォントはどうでしょうか。

このように、Webサイトに限らずおよそインターネットへ公開される何かしらの媒体について、それに使われる素材の権利やライセンスというのはとても複雑です。
フォントだけではなく、画像、動画・音声やそのサムネイルなどなど、多くの素材について関わる話ですよね。
JavaScriptとかで書かれたプログラムだってそうですよ？
ここで言うプログラムとは、検索すればそこらへんに転がっているブログパーツなども含みます。

これら各種の素材について権利やライセンス関係を事前調査しつつ情報を追跡し続けるのは、私には難しかったです。
完璧に把握して使い分けようとすると、ものすごく時間がかかるのですよ。
だからfein's portalではどこかでアウトとなるポイントが発生しないよう、デフォルトの段階から権利関係のリスクが発生しない素材ばかりです。
WFSのゲーム関連画像や動画以外はね？

そんなごちゃごちゃ言って…完璧でなくてもいいじゃないか？
確かにおっしゃる通りでしょう。
世の中にはグレーな話題だっていっぱいありますよね。
私とてすでに社会人ですから、そこらへんの塩梅も多少なら心得ているつもりです。
ただ、他者がやっちゃってるから自分もやっていいというのも…
特に、ゲームのSNSコミュニティというのは、異様と思えるほどに「著作権！」「著作権！」と大騒ぎになっていました。

私の場合、フォントに関しては学生時代の中二病Webサイトの段階でクリアできたんです。
権利関係でリスクのないフォントをCSSに書けば、それがWebサイトのデフォルトになるからね。
このサイトだってそうですよ？
でも動画のサムネイル含めて画像に関しては難しかった。
ルアーが泳ぐ様子など、いろいろ動画にしたものを掲載していたんです。
ここで魚の画像で商用利用可能なものを探すのに苦労しました。
なんか当時は魚の写真にしようと思わなかったんですよね。
アニメみたいな、可愛らしい魚の画像を使いたかったんですよ。

SNSの激変と生成AIの問題

さて、Twitterの激変とAIの登場は関連性があります。
そもそもOpenAIにお金を出していたのがEロンですし、そのEロン本人が後からOpenAIと違った意見を持つようになった事情もありますよね。─ オープンソースどうのというのは、そこらへんとも関係があります。 ─
そんなEロンがTwitterを陣取ったことで、昨今のTwitterからXへの変革があり、そしてエンドユーザーたちの混乱があるのです。
もちろんEロン率いるXはAIと密接な関連性があり、Grokなんかはその一つだよね。

特にTwitterでは大きな話題となっていますが、AIはその学習プロセスに著作権絡みの課題があると世界のいろんな人々から指摘を受けています。
その生成AIがもたらす著作権に関する対応でオロオロしているのが、日本の現状です。

その日本に、例えばAmazonがデータセンターを作ろうとしていたり、OpenAIが日本法人を作ろうとしています。
これから、何がどう動くか分からないよマジで。
我々エンドユーザーとしては、とりあえず安全圏へ避難するくらいしか選択肢がないんですよね。

あるいはSNSを含めてインターネットで活動するという行動そのものを停止するという選択肢もあるでしょう。落ち着かないと思う人はね。
でもそうではなく、個人サイトを作り、それを長い目で見て育てて、IT業界の情勢が落ち着いてきたときに本格的に行動を開始できるのだとすればいかがですか？

XであれYoutubeであれ、Instagramであれ。
何でも良いけどそれを続けている傍らで、個人サイトを作っておいて気長に育て続ける。
どの選択肢が最強という考え方では対応し切れないと思います。
例えばEロンの気分が変わったら、また振り回されるのでしょう？
そうではなく、知識に基づいてバランス良く、そして安全にWebの世界を航海する。
それが、この個人サイトの目的です。
マネタイズする気があるのかどうかみたいな、そういう細かい機能的なあれこれは二の次なんだよね。

いずれにせよ、日本のウェブについてわたくしfeinが恐れ多くも私見を書くなら…こう言えるでしょう。

• EロンがX（旧Twitter）に陣取っていること
• そのEロンが生成AIと深く関わっていること
• 日本が生成AI絡みの著作権問題でオロオロしていること

この３点が、非常にマズいと思っています。

ウェブサイトビルダーにも限界はある

意図せずレイアウトが崩れてしまったケース

ウェブサイトビルダーは、本来なら自分で書くコードをコンピューターが代行してくれているだけです。
この状態が続くと、ちょっとしたトラブルシューティングさえできません。
どこをどう直せば良いのか見当も付かない。
ウェブサイトビルダーの直接コード編集を使えば簡単に解決できるのに、学習した人と比べて何倍もの時間がかかる。

どう操作すれば良いか分からないケース

ウェブサイトビルダーあるあるなんだよ…
ものすごい多機能で、どう操作すれば良いか分からないのです。
私もしょっちゅうですよ。
むしろコード手書きの方が早かったりするんだよね…
普通のワープロソフトとは使い方が少し違いますし、機能名も異なることがあります。
先方も自社のツールを売りたいので十分な配慮はされていますが、ウェブサイトビルダーがしてくれる配慮にも限度はあります。

作業効率が違うことは確かです

まったく勉強しなくてもなるようになっちゃうでしょう。
HTMLみたいなWeb制作関連だけでなく、パソコンそのものにある程度詳しければ、作業効率が格段に違います。
例えばこのサイトであれば、数年に渡って書き溜めたPDFを一気にimage化してアップロードする作業がまさにそれですよね。
こんなの全て手作業でやってたら、何か月もかかったことでしょう。
ミスの原因にもなります。
CSSやJavaScriptを実装するにしても、コードに埋め込むのか外部ファイルとして読み込ませるのかで効率が違うことがあります。
どちらが良いというのではなく、実装方法をその場に応じて使い分けられることが、時間短縮に繋がると思いますね。

---

サイトマップ

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。

ページ上部へ戻る