個人サイトを作るにあたっての寄り道的思考

07 Jan 2023
編集履歴 07 Jan 2023/初稿

Back

いきなりこんなものを書くなんてどうしちゃったんだ

せっかく個人サイトを設けたのにいまいち根が張らないというか定住しきれていない時期があった。普段使っていたSNSのほうがよっぽど何もかも簡潔で、気がつけば何かを描いたりした時に真っ先に更新しに行くのはサイトではなくSNSだった、なんてことがままあった。
それでも何となく考えていたのが

…などなど、なんとまあワガママなことがたくさんあった。そうなるとやはりどこまでもカスタムできてしまう個人サイトでしかそういうのは成し遂げられない、というか、それ、個人サイトならできるよね?というところに行き着く。

ただ、個人サイトを作るというとどのサービスが使いやすいかとか、追加機能(拍手・メールフォーム・漫画or小説ビューア・つぶやき欄など)の取捨選択とか、やるためにはWeb言語を知ってなきゃいけないかとか、わりとアイテムやパーツにフォーカスがあたりがちなので、
いわば設計思想とかコンセプトとかビジョンとか、そういう全体像の話があってもまあいいんじゃないか、と思って書いてみることにした。

もうちょい素朴なポイントなのが、俺ちゃん自身がもうサーバを借りる以外は全部自前でプログラミングしてしまうという暴挙でサイト建築をしたがために、どのホームページ作成サービスやフィードバックツール(拍手やメールフォーム等)やつぶやき系サービスもまともに使ったことがなく、個人サイトについて語るのにみんなが知っていることを何一つ語れないという惨劇に見舞われていて、つまり消去法としてこういう概念トークを展開することになってしまったのだった。

なのでまあ個人サイトを作るためのハウツーには絶対ならない話をするけれど、個人サイトを長年やっている人にはもはや当たり前のようなことも書いてあるし、かといって多少の専門用語も注釈抜きにして入れているので一体誰向けの話なんだという話が大半だと思う。
ひと通りのハウツーやサービスを探しながらサイトを作ったけれど何か思うようにならない、どっかりと腰を据えて運営している人がすごいと思う、苦言を呈しながらもSNSのほうに戻りがちになってしまう、という時に見てみたらいいやつが書いてあるかもしれないし、何もないかもしれない。

各セクションは独立して書いているので、興味のある項目だけでもどうぞ。




アンカーリンクで作る「部屋」の概念

アンカーリンクとはこういうやつのこと。<a> タグで囲んだテキストはどこか別のページへとジャンプさせる機能を持つようになる。aはanchor(⚓)のa。

……というのは誰もが知っていることだと思うけれど、ウェブサイトでのアンカーリンクは実に様々な実装でWeb上を空間たらしめている。
あらましを書くと長くなってしまったうので、端的に表そうとした図がこれ。↓

image

これまた端的に言うとSNSでこの風景を作ることはできない。
これが個人サイトの特色であり、面倒なところであり、作りがいのあるところであり、セルフ訪問や他サイトへの訪問の楽しみになるところだと思う。

この3つはまったく比べようがないもので、どれが良いかとかはない。
例をあげればここのこんふぃぐちゃんがやっているサイトはindexにメニューや更新情報が置いてあるので3番目のごちゃまぜタイプになる。
この図はまだindexに限った話だけれど、ここからENTERなどを押した後に展開されるメニューや情報によってまた風景は変わってくる。

必ずしも見たひと全員がこんな風に風景化してウェブサイトを捉えているわけではないし、サイトによっては風景化はできないがなんとなく空間のあり方はわかる、堂々と見せたいものとひっそり見せたいもの(いわばメインコンテンツとサブコンテンツ)の区別だけはつく、どれが重要かは分からんけど絵と小説が別で置かれているのはわかる、というような程度の差はもちろんあるし、これまたどれが良くて悪いとかいうものはない。

大抵のサイトではメニューの中に作品を散らかしていくような様式をとることはなくて、メニューの中のひとつを選ばせて次のメニューを見せて選ばせて…を繰り返した末に(ここでいう「選ぶ」はリンクを押す以外にも視線で探し当てるだけの行為も含む)「作品だけのページ」に行き着くようになっている。
絵ならサムネイルを並べたページだったり、漫画や小説ならエピソードの一覧だったり、作品の概要やあらすじを書きつけていたりする。ここまで来るともうindexにあったような「〜を中心に載せているサイトです」「管理者は〜です」とかいう今更な話は書かれないので、ページの中を占める「作品」の純度が非常に高い。

たとえばサイト情報は情報用のページ、作品は作品をまとめるためのページ、とそれぞれ純度の高いページをいくつも設けておいて、そこにたどり着かせるためのメニューページを作る。
だいたい情報用のページから直で作品用ページに行けるようなリンクを貼ることはないから情報と作品は全く独立していて、メニューがその2つをつないでいる。これは建物でいうところの「部屋」と「廊下」にあたる。

ブログエンジンを使っているサイトではindexや情報、作品、日記、リンクといった風に各種のメニューへ戻れる常設メニューがどこのページにも付属することになるのだが、これを見ると常にワープポータルのある空間にいるような不思議な気分になる。
手打ちやテンプレートを使用した静的サイトでは常設メニューを作るのはややこしい手順を踏む必要があるため、大抵の場合は廊下を辿って部屋に行くような構造にならざるを得ないのだが、常設メニューのあるサイトは「どんなに奥深くに迷っても特定のところへ行けばとりあえずひらけた場所に出れる」という安心感があったりするので、こちらもまた優劣のつけがたいところだと思う。

訪問者としてのアクセスのしやすさ、管理者としての整頓のしやすさでいえば常設メニューを作るブログエンジンの方が「情報の整頓と提示」がうまくできるようになっていて、なんというか事務的にも情緒的にもバランスが取れているサイトが多い。
「俺の作品はこうだ」というよりも「こんな創作をやっております」という雰囲気に近い。

手打ちやテンプレートサイトは「関係ない情報を限りなくカットしたページを順番に辿らせる」ので、最後に行き着いた情報それぞれがどう関連しているかは訪問者に委ねているところがある。
なので創作を扱っているときには「こんな創作をやっております」という慎ましさはなく、重厚なパッケージの本を開かせるような、意思によっては訪問者が排斥されてしまいかねない雰囲気を持つことになる。

華麗な省ステップで「更新」を手懐ける

個人サイトというと作品の保持能力やHTML/CSSの知識の有無やデザインテンプレートの紹介といった「もの」あるいは、SNSにはないひっそり感が心地いいよという「気持ち」がフォーカスされがちだが、それらはスタートを切るための意欲にはなっても実際のところ継続するための意欲にはあまりならないように思う。
というか、開設を皮切りに「更新」というものが常にタスクとして降り積もるため、更新が簡潔に行われる仕組みを持っていないとその意欲は更新を経るごとに削られることになってしまう。

SNSでも頻繁なアップロードを行う人のほうが着目される傾向にあるし、残念ながら個人サイトでも活動の基準値になるのは「更新」であるのだが、それが作品以外にもブログであったり訪問者とのコメントのやりとりであったり個人的な祝い事であったりと型にとらわれず幅広く扱えるところが個人サイトの特徴でもある。
都合よく解釈すればどんなことでも更新と銘打って活動の一環とすることができるわけなので、作品づくりだけが全てだとか思い込む必要もない。逆に「せっかく作ったがイマイチ」と思っているものは通知しないままこっそり掲載しておいて、こまめに探すような人だけが見れるようにするという手口も可能になる。

個人サイトの世界はSNSと違って更新したものがどこかのページの枠を奪い合って表示されていくといったものは基本的になく、結局のところ訪問者が一定の意欲関心を持っていなければ更新に気づかれることすらないため、更新頻度によってサイトに付与できるリアルタイム性というのはあまり活かされることはないように思う。
それでも「更新」という作業とこうも向き合っているのは、面白いことに自分の意思を率直に反映した更新の方法がとれるようになれれば更新作業の心理的負荷がほぼなくなり、個人サイトにおける義務としての更新ではなく作品づくりの最終段階としての更新として扱えるようになるからだ。
もちろん頻繁に更新が入っているサイトだと印象づけることができれば訪問者にとっては日々の楽しみのひとつとなるし、管理している自分自身がサイトを見ることで鮮明に活動を振り返ることができる。

そういうわけで個人サイトではなるべく更新の仕方と通知の出し方を考えておく必要がある。
個人サイトを始めるにあたって、メニューをどう置くか、デザインをどうするか、載せる作品はどれかといった「配置」「コンテンツ」をメイン考えるかもしれないが、
更新作業という「訪問者から全く見えることのないプロセス」についても考えておくと、いわゆる個人サイト開設ブームで終わらせることなくサイトを続けられるようになると思う。


最小はスリーステップ、人の限度はツーステップ

更新の多いサイトがなんだかんだで一番いいとすれば、そこに付随する更新作業はなるだけ少ないステップで済ますことができないと面倒くさくなって頻度が減ってしまう。その場合、その各ステップは「作成」「表示」「通知」に使われる。
作成は画像のアップロードや日記・小説のページの作成など、新たにデータを追加すること。
表示はそれら作成されたものにアクセスできるよう一覧ページなどにaタグを貼り付けるなどして表示させること。
通知は一覧ページおよび新規コンテンツが作成されたことを訪問者に知らせること。

あらかじめ断っておくと「通知」は別口として扱われやすい。
おおかたの人々はどこが更新されたかをチェックするために全てのページをくまなく開いていくようなことはしないので、この画像のようにどのページを更新したかをサイトの最初に訪れることになるページに記載して誘導できるようにする。これは全てと言ってもいいくらい誰もが取っている手法だし、これはあまり逆らうべきではないと思う。

それで、この「通知」を記載するのにまず専用のファイル(index.htmlとか)を編集することになってしまう。最低限これだけは必要だということにすれば、残されたもう1ステップでそれ以外の更新作業を完遂しなくてはならない。

SNSと異なる点で最も面倒くさく感じるのがページを作っても表示せよと言うまで表示されないということで、いわば画像そのものをアップロードしても実際にimgタグを差し込むまで表示されないとか、せっかく日記や小説の1ページを追加しても目次ページにそこへのリンクを記載しないと訪問者からは分からないまま、ということである。
これはブログエンジンを使っている場合Lightboxでのギャラリー制作を行っている場合はスキップすることができる。前者は表示や通知のステップを自動化できるし、後者は絵関連に限った話だがimgタグの中にキャプションを書くことで作成と表示の作業をひとまとめにできる。

手打ちと外部サービスの境界を消す

個人サイトを個人サイトたらしめているもののひとつにデザインの自由度があり、これは自分好みのスペースを作る以外にも役に立つ分野がある。それが「異なるサイトを違和感なく繋げる」こと。

手打ちで作ったサイトのあの形式ばらない感じを好んでいる人もいるかもしれない。その場合にブログなどをしようものなら文字装飾もタグで打たなくてはならないし、画像の位置調整もマウスでやるなどとは無縁の環境になってしまい、そのうえ更新に関して上記の3ステップ以上を悠に必要としてしまう。
ブログサイトに任せれば文字装飾にショートカットキーなどが使えるし、直感的な操作で記事を作成でき目次の生成も自動でやってくれる。

そうなったときに個人サイトのデザインの応用力は目を見張るもので、背景の柄や色、リンク色を統一したり枠線のとり方などをカスタムするだけで手打ちサイトに近づけることができる。
昨今のブログサイトはとにかくリッチなテーマが揃っているので、手打ち感のある一種のレトロに近づけるのは難しくなってきている気もするが、とにかく色を揃える程度ならカスタムCSSを触りにいかなくてもできる。

見づらさ、読みづらさ、探しづらさは敵ではない

とりあえずサーチサイトさんたちから色々な個人サイトを見て感じてもらいたいのだけど、なんというか、驚くほど創作の雰囲気とサイトの配色やレイアウトが合っているところが多い。
すごく不思議なもので、複数のタイトルを持っている人にしても「創作のテーマに合わせて作ったのか?」と思うほど、ファンタジーを扱う人はファンシーな配色にしていることが多いし、現実的なテーマで創作をしている人ほど自然色や白をベースにとった堅実な配色をしているし、とんでもないテーマの創作を扱う人ほどとんでもない色になっていたりする。

もちろん誰もがそうとは限らないし、ファンタジーを扱っているからといって夢うつつな色にせよなどというルールはないので皆さんで好きなように作ったらいいのだけど、
おおよそ創作の好み≒配色の好みという方程式みたいなものはほんのりあるんだろうな、と思う。

稀にあまりにもコントラストが低い(文字の色が薄すぎるとか)、文字がかなり小さい、リンク文字の装飾がなくて押せるのか押せないのかわからない、などと「つらさ」を感じるサイトに行き着くことがある。

個人サイトめぐりは基本的に趣味なので、読みづらさだったり見つけにくさだったりして、「見たいものを見つける労力」が「見たいものに対する好奇心」を上回っていると1回アクセスしただけで来なくなってしまう。
好奇心というのは「単に新着や更新として出ていたから」「作品ジャンルが自分の好みと合ってそうだったから」「好きな作者のリンク欄に載っていたから」とか色々あってサイトごとにその好奇心の大きさに差はある。
それは訪問者としては調整しようがないし、被訪問者としては大きさを望むべきものではない。

ただ、その方程式を逆手に取ってみると「サイトに対してそれほどでもない好奇心の人」が「少ない好奇心を早々に使い切って遠のく」ことになるので、サイトをやっている側からすれば「趣味の合わない人は来なくなる」=「趣味の合う人だけが再訪問やコメントをしてくれる」とも言える。
例え方が乱暴になるけどこれがSNSにはない個人サイト流の人のふるい方というもので、「人がいなくなる」という痛手を負ってこそ同胞を発見できる摂理とは、例える以前に乱暴そのものである。

デザインに自信がないという人はとりあえず「こうしたほうがいいのかなぁ」という謙虚な心をすっ飛ばして、好きな色をリンク色にして、2番めに好きな色を背景色にして、文字は0.8emくらいにして、センチメンタルな人は font-family: serif; にして、入口ページに自信作を一枚貼って概要と一緒に好きなジャンルや要素を書きつけておけば、摂理は完成する。
さらに安易に見せたくないものについては別ページに隔離して、そこへのリンクは作者のプロフィールページに小さい文字で貼っておくとか、JSに詳しい人はアイコンを10回叩かせたら入れるようにするだとか、特定の言葉を知っている人だけが入れるようにするだとか、とにかく労力の要るように悪気100%で構えておくのがオススメ。

サイトの構造そのもので人をふるい落とすことができると、過剰な言い方や強調、根本的な立ち居振る舞いで自分の好みを主張する必要はなくなる。
個人サイトは人の出入りが全く認識できない状態にで過ごすことになるので、作者自身が虚空に向かって威嚇して回るよりも、ちょっと凝ったサイトを設けて見張り役を任せているほうがずっといい。そもそも自衛という行動は全くクリエイティブではないし……

個人的な話、Twitterで端的に表した文章を書きがちだったり「これが好き!」と説明するような雑な絵をわざわざ描いたりしたこともあったし、それがタイムラインを盛り上げたり好きを主張することに一役買っていたとしても、「作品」そのものよりも、「その作品を鑑賞した自分自身」を大事にしようとしての活動だったような気がする。
そっちで主に一次創作よりも二次創作を扱っていたのも、単にウケが悪いからとか完成してから出したいとかの適当な理由もあるけれど、
人に合わせた形に変えて出すことで、自分の手でしか作れないものが自分の手で歪められる上に、他人に周知させたことで元に戻せなくなるのを避けていたのではないか、とも今更ながら思う。

精神論からデザインの話に戻すと、要は見た目がギラギラしてたりリンクの貼り方が多少難ありだったりしても個人サイトでは何やかんや役に立つことがあるので、好きなようにデザインしましょうということです。

サイトはブカブカに作るくらいがいい

絵や小説などのコンテンツを足し続けるサイトである場合、作品数が100件以上にもなるといよいよあなたは管理者を退位し、何かしらの自動化システムに任せたほうがいいことになるだろう。