みんなー!個人サイト作ろうぜ!
と言っても、今やメリットよりデメリットの方が多いのは事実。
作品公開において、サクッと投稿できる・すぐに多くの人に見てもらえる・気軽に交流できるSNSや各種作品投稿システムに勝るものはない。作るのも更新するのもめんどくさい、人も来ない、今やそんな個人サイトに人権などないに等しい。悲しくなってきた。
が、引きこもり体質の私はあえてこちらに戻ってきた。詳細は前回の記事に書いたが、「誰かとの交流も楽しいが、『いつもは家にいて、時々外の空気を吸いに行く』くらいがちょうど良い」というのもあり、その家をサイトにしようという考えもある。
しかしもちろん、それは誰かに来てもらうことが前提の開放された家なので、常に片付けておき、少しでも楽しんでもらえそうな要素を加えていく。創作のモチベがない時は、サイトそのものやこのブログを楽しんでもらえるようにしていきたいと思っている。
しかし、もはやそんな時代ではないとはいえ、個人サイト自体はあちこちにひっそりと存在している。私のような引きこもり体質でなくとも、名刺代わりにしたり、自由にできる自分だけのスペースにしたりと、目的も用途も様々なのだ。
色々取り入れようとしてめんどくさくなってあまりにもシンプルすぎるサイトになってしまった私が言うのも何だが、興味を持たれた方にはぜひ片足を突っ込んでみてほしいと思う。
本題。
個人サイトをなるべくコストをかけずに作成するにあたり、どういった方法があるのかをざっくりまとめてみた。
※「配布テンプレート」はWordPress(以下WP)などではなくHTMLのテンプレート。
※「ほとんど知識のない人が作る場合」の本当~にざっくりとしたまとめなので、目安程度。
ノーコードツール | 配布テンプレート | 自作 | |
お手軽度 | 基本◎ ツールによる | ◯ | ✕ |
自由度 | △ ツールによる | ◯ カスタム次第 | ◎ 何でもあり |
セキュリティ | 提供元任せ | 自分で対策 | 自分で対策 |
デザインを作る必要 | 基本なし カスタム次第であり | 基本なし カスタム次第であり | あり |
コードを書く必要 | なし | 少しあり | あり |
サーバー準備の必要 | なし | あり | あり |
1️⃣ノーコードツール
有名どころにCanva・STUDIO・Wixなどがあるが、ピンキリである。
共通して言えるのは「難しいことをしないなら簡単、凝ったことをしたいなら学習コストがかかる」ということだ。
私はWebflowと何か(忘れた)を一度使ってみて、その場で作ってその場で公開できるのは楽だなと思ったが、あくまでテンプレートを使用してなおかつ作り込まない場合に限る。テンプレートによってはやたら重かったりレイアウトが崩れたりするものもあるし、何よりソースコードを触ることができないと、不具合が起こった時の対処が難しい。
そういう意味ではWPはかなりお手軽だ。がっつりカスタマイズする場合は様々な知識が必要になってくるものの、このブログのようにテンプレートを使えばコードを触らなくても良いものができる。サーバーとドメインを用意する必要はあるが、今はWPを簡単にインストールできるサーバーもあり、config系ファイルを自分で編集する必要もない。
ただし、セキュリティ面に気を配る必要がある。サーバーの設定やプラグインの導入・アップデートに注意することはもちろん、 WP自体のアップデートも行っておかないとどんどん脆弱になる(自動更新にすることはできる)。
2️⃣配布テンプレート
個人サイト用のHTMLテンプレートを配布しているサイトがある。コードを編集する手間はあるものの、凝ったことをしないのであればこちらもお手軽。個人サイト用に作られているのでコンテンツもそれに即したものが用意されていることが多く、デザインも使いやすいものが多い。
3️⃣自作
私の個人サイトがこちらに当たる。いかに時間をかけずに簡単に作成できるかを調査・検討した結果、「ノーコードは結局ツールの使い方を覚えないといけないのでめんどい」「細かいことができなくてイライラする」ということで、「自分で作った方が早い」に行き着いた。
ただ、作り始めると「やっぱめんどくせぇ」となるので、安易におすすめはできない。
私が過去に個人サイトを運営していた時は、閲覧環境がPCのみでブラウザもネスケやIEしかなく、ただ簡単なHTMLを書けば良かった。PC標準搭載のメモ帳で事足りた。
しかし今はどうだ。PC・スマホ・タブレットに対応させる必要があり、機種によって解像度も異なる。ブラウザもChrome・Edge・Firefox・Safariなど様々だ。言語もHTML・CSS・JSは当たり前、CMSを扱うのであればPHPも必要になる。当然、同じ言語でも内容はどんどん進化している。
そうなると普通は「自作しよう」とはならない。当時小学生だった私は「へぇ、ホームページってメモ帳で作れるんだ!」とわくわくしながらチャレンジしたものだが、今はそういう入りやすさがない。
もちろん今でもメモ帳で作ることはできるが、あまりにも効率が悪いし、HTMLのみで作ると90年代臭のするサイトになってしまう。
誰もが手軽にサイトを作れるようになったのは良いことだが、技術の進化に伴って求められるレベルが高くなり、それによって目も肥え、とどめにサイト自体が必要なくなった。私も個人サイトを開設するのは実に十数年ぶりのため、昔は良かったなどと言うつもりはないのだが、一抹の寂しさを覚える。
最後に誰得ではあるのだが、私がサイト作成にあたり現在使用しているツール・サービスを記載しておく。★は手作りする際に必須のもので、☆はあると便利なものである。
☆デザイン
・Figma(基本無料):全体の構成・デザイン・パーツ作成
・Photoshop(有料):画像加工・Figmaでは作成しづらい複雑なパーツの作成
・Illustrator(有料):ほぼベクター素材加工
★コーディング
ページをブラウザで見られるようにする作業。
・Visual Studio Code(無料):全部これ(その前はSublime Textを使用していた)
☆CMS
管理画面からコンテンツを投稿できるシステム。ノーコードツールもこれに当たるのだが、この場合はそのシステム自体を自分で構築し、サイトのデータを管理画面からアップできるようにすることを言う。
・WordPress(無料):ブログに使用
☆開発環境
快適にコーディングを行える環境。
・Parcel(無料):ローカル環境・コンパイル・ビルド(ファイルがまとまるのでアップする際にも便利。キャッシュ対策も不要)
☆バージョン管理
更新のログを残すことができる。チームで使用する際に本領発揮。
・Git:GitHub(基本無料)
・GitHub Desktop(無料・仕事で使用)
・SourceTree(無料・個人で使用)※GitHub Desktopは複垢使用ができないので仕方なく……。
★FTP
サーバーにアップして他人から見られるようにする作業。
・WinSCP(無料):セキュリティは現状これが最強らしい
★サーバー
サイトのデータをアップする場所。サイトを家とすると土地にあたる。
・さくらサーバー(有料):元々借りていたのでそのまま
☆ドメイン
オリジナルのURL。
・ムームードメイン(有料):こちらも元々利用していたのでそのまま
サイトにもCMSやフレームワークを取り入れる予定だが、今のところはベタ書きである。
仕事のために勉強する気は起こらないダメ人間のため、個人サイトを使って色々と勉強を兼ねた実験をしていく予定だ。
コメントを残す