フォントまわりのふぉんとに細かい話

Webフォント（GoogleFonts）の使用により、フォント表示時のチラつきとサイト全体の重さが気になっていたので対策した話。
欧文フォントだけ使っている時はさほど気になりませんでしたが、日本語フォントをどうしても使いたかったので頑張りました。

Googleフォントの外部読み込みをやめて自サーバーから呼び出すようにした
GoogleFontsからフォントをダウンロード→woff2に変換→自サーバーにアップロードしてCSSの@font-faceで読み込む。

これにより初回アクセス時の読み込みは（たぶん）重くなってしまいましたが、以降のページ遷移はサクサクになったはず。
特にキャッシュを拒否していない環境であれば一度読み込んだフォントは1年間キャッシュされます。
外部からの読み込みだとページ遷移するたびに、端末標準の代替フォントから指定したフォントに切り替わる瞬間の画面のチラつきがありましたがそれもなくなりました。

続きを読む 🔽ローカルにフォントがインストールされていれば読み込むようにした
当サイトでは日本語フォントにKosugi Maruを指定していますが、閲覧者の端末にKosugi Maruがインストールされている場合はそちらを優先して読み込む設定にしました。その場合は問答無用で超サクサクです。

おそらくこのサイトへのアクセスの99%は自分だと思うので、とりあえず自分のPCからKosugiMaruで爆速＆チラつき無しで表示できるようになり大満足。

なおヒラギノ角ゴがインストールされている端末ではそちらが優先されます。
これは私がiPadで自サイトを見る時に、KosugiMaruがなんかしっくりこなかったからです；

タイトルロゴがちらつかないようにした
トップページの筆記体風のロゴもWebフォントなのですが、読み込み完了するまで代替フォントとして端末標準のクソデカゴシック体が一瞬チラつくのが気になっていました。

@font-face {
  …中略…
  font-display:auto;
}
ロゴに使用しているフォントではfont-displayを上記のように設定することで、代替フォントを表示せず、指定フォントで読み込み完了するまでは何も表示しないように変更。

あとはフォントとは関係のない本当に細かい余談ですけど、トップ絵とバナーサンプル画像は文字列変換して読み込み時の一瞬のガク付きが出ないようにしました。



【参考】

• Webフォントを高速に表示するための3つのポイント – エンジニアブログ – デザイン会社アジケが運営するUXエンジニアのためのブログ
• Webフォントの表示を最適化するテクニック | コリス
• （ちょっとメモ）@font-face で Webフォントを使おう - ほんっとにはじめてのHTML5とCSS3
• Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス
• 画像をBase64でHTMLファイルに直接埋め込む方法 | design Edge

#高速化 #手打ちサイト #カスタマイズ

個人サイトに関する15の質問

1：まずはお名前とサイト名、回答した日付をどうぞ
名前：ふじむら咲
サイト名：fujimurasaki.art
回答日：2023年4月16日でしたが書いているうちに17日になってしまいました。

2：サイトの取り扱いジャンルを教えてください
オリジナルイラスト（一部ファンアート）、手芸（あみぐるみなど）、ドール遊び（ブライスとかシルバニアとか）、自分語りと思考ログ。
あとは「ジャンル：個人サイト」とでもいうのか、サイト運営自体を楽しんでる様子も結構記録に残してます。

続きを読む 🔽3：サイトを作ろうと思ったきっかけを教えてください
元々ネットが好きなタイプだったのですが、気づいたらネット上にしっくりくる居場所がなくなってしまったので自分だけの場所を作りたくなりました。
作品を大勢の人に見てもらいたいからではなく、ひっそりとネットを使って何かしら発信していたいという動機から個人サイトを作りました。
個人サイトという媒体で自分が発信できそうなものは絵と手芸くらいだからそれをメインコンテンツにしている、という感じです。
ドールのコンテンツが途中から追加されたように、今後も発信できそうなものができたらコンテンツが増えると思います。

4：サイト名の由来はなんですか？
ドメイン名（≒ハンドルネーム）をそのままサイト名にしました。
ドメインには「art」という単語が入っていて、創作サイトだとわかりやすい気がしたので。
それから、このサイトは単に作品発表の場というだけではなく、自分自身のやってきた・考えてきたことが積み重なった地層のようなサイトにしたいと思っているため（＝ジャンル：自分みたいな節がある）、ハンドルネームの入ったシンプルな文字列を冠することにしました。

旧サイト名の「Down to earth」は、昔海外SNSをやっていた頃にイラストに対して貰った感想にあった言葉で、とてもしっくり来て嬉しいものだったので使わせてもらっていました。

5：今のサイトはどのくらい運営していますか？　もしも過去に別のサイトを運営していた経験があれば、差し支えない範囲でそれも教えていただけると嬉しいです
もうそろそろ開設してから1年になろうかという頃です。

過去に作ったサイトはポートフォリオ風の簡易作品倉庫のようなサイトと、ガラケー時代の日記サイトです。いずれも長続きはしませんでしたが、たくさん作りました。

ガラケーのあのボタンでポチポチと見様見真似のトライアンドエラーでHTMLタグを手打ちしていたことが今の私のネット好き＆サイト好きのルーツです。
あの当時のテイストが「キラキラサイト」と呼ばれて懐かしまれていることを最近知りました。（元ネタの「ふみコミュ」は知らないので厳密には違うのですが）

あとはローカルにWordpressをインストールして、ブログサイトのような見た目で日記を書くのも好きでしたが、改装やアップデート、PC変更時などの不具合に対応しきれず消えてしまったことが何度かあり悲しい思いをしたのでやめました。

私はSNSネイティブではないですが、ガラケー全盛からのSNSが身近にあって当たり前だった世代ではあります。
さらに私自身は自分用のPCを使い始めたのが割と遅かったのもあったので、このサイトのようなPC個人サイトは懐かしさや回帰でというよりは、割と新鮮な気持ちで楽しんでいます。

余談ですが、同人系の個人サイト文化に初めて触れたのは、学生の頃にパソコンを持っていた友達がとある少年漫画ジャンルにハマっていて「こういうのがあるんだよ」と教えてくれた時です。
絵チャとかBBSとか隠しページとかサーチとかの初めて見る独自文化にめっっっちゃくちゃ憧れました。
インターネットにワクワクと秘密基地感がいっぱいの時代だったよね。怖いことも多かったけど。

6：サイト内でいちばんお気に入りの作品を教えてください
キャンプの絵です。
のびのび気軽にらくがきしてたら自分らしくてほっこりする絵が描けた、という理想の生まれ方をした絵だからです。

7：サイトに感想や交流用の窓口をご用意していますか？　ご用意している方は何を利用していますか？
特段それ用にというものはありません。

【2023年5月8日追記】
ちょっとした隠しコンテンツを作ってみました。興味のある人は探してみてね。

8：いわゆる日記的なコンテンツってご用意していますか？
ここ（Memo）です。むしろ更新頻度的には日記がメインコンテンツかもしれません。長文になる癖があります。

9：ここだけの話、隠しコンテンツとかあったりしますか？
ありません。以前はソースにAA化したイラストを仕込んでいたことがありました。
隠しコンテンツにはあまり関心がないのですが、今後お遊びコンテンツは何か仕込んでみたいです。PHPとか勉強して。

【2023年5月8日追記】
ちょっとした隠しコンテンツを作ってみました。興味のある人は探してみてね。

10：サイトはどのようにして作りましたか？　タグ手打ち？　ソフトを利用？　それともテンプレートやブログなど？　
HTML手打ち（PHPで共通パーツ化しています）＆ずぼログ＆てがろぐを使っています。
クレジットしているもの・していないもの含めて、たくさんの人の叡智をお借りしたから作ることができたサイトです。

リニューアル前はWordpressを使っていました。

どちらも一長一短だと思いますが、私は手打ちにしてから更新頻度が上がりました。小回りが利くのが好きみたいです。

11：サイトに対するこだわりを思う存分語ってください
何度かサイトをリニューアルしていますが、ほぼ毎回動作を軽くすること＆あまりjavascriptなどを使わないで構造をシンプルにすることにこだわりがちです。

普段からサイト運営メモというカテゴリで、技術面・メンタル面どちらもよく語ってるので、興味を持っていただける方はそちらを読んでもらえたら嬉しいです。

歴代のサイトデザインはギャラリーにも掲載しているのでそちらも良かったら見てくださいね。

あとは、なるべく文章が読みやすいものになるように後からちょこちょこリライトしています。（思いつくままダラダラ膨らんでしまうタイプなので…）
UI面も何がどこにあるかを見やすくしているつもりなので、自己満サイトと言いつつも意外と「わかりやすさ」を重視しているのかもしれないと思いました。

中身の話でいうなら、途中経過のラフなどはなるべく載せないようにしています。
公開した時点でその作品へのモチベが枯れるからです。没とかラフで終わりのものは普通に載せちゃいます。

日記にネガティブなことは書きすぎないようにはしていますが、創作への向き合い方や葛藤の様子などは共感されやすい部分だとも思っているので、暗く＆攻撃的になりすぎないように気を付けつつ結構出してしまっています…笑

12：SNSを利用していますか？　もしよかったら登録SNSを教えてください
していません。LINEすらやめてるので多分世間的には結構変わってる人です。
一時期は私用のスマホも解約してましたが周囲の大反対＆さすがに困りごとが多かったのでそれはすぐ断念しました。

13：あなたは自分のサイトをもっと広めたいですか？　それともひっそりしたい？
基本的にはひっそりしたいですが、気の合いそうな（楽しんでくれそうな）人の元には届いてほしいので、どこにどれだけ露出するかの塩梅が難しいところです。
リニューアル前は検索避けをしていませんでしたが、今は検索避けしています。多分検索エンジンから来る層（＝役に立つ情報が欲しい）には求められていないサイトだと思うので。
検索除けをしていないとどうしても無意識に創作者（クリエイター）ではなく情報発信者（ライター）のノリになってしまって、それが自分でしっくり来なかったです。

14：いつまでサイトを運営したいと思っていますか？
10年続けたくて始めました。
過去に書いた文章は結構恥ずかしくて読み返せないものも多いのですが、もっと時間が経つと稚拙なものも些細なものも宝物になると思うのでなるべく消さないようにしています。（なってなかったらさすがにその頃には消しちゃうかも…）

15：最後になにかひとことありましたらどうぞ！
元々は自己満足で作った作品のおすそ分け倉庫みたいな気持ちで始めたサイトですが、今はサイトを更新したくて作品や文章を作るモチベーションが湧いてくることも多くなりました。
ひっそりとサイト運営をすることが割と本気で生きがい＆心の拠り所になっています。

創作者としても、サイト管理者としても、人としても未熟ではありますが、たまに覗きに来てくれた方が「おぉ、相変わらずやってんね」という感じでゆるっと楽しんでいってもらえるサイトを作れていたら嬉しいです。




配布元：個人サイトに関する15の質問
楽しかったです。ありがとうございました。

#自分語り

サイトを大幅リニューアルしました

大きな変更点は以下の通り。

• サイト名変更・バナー変更
• デザインの大幅変更
• Wordpressから手打ちサイトになった
• テキスト周りをてがろぐに一本化
• 検索除けをして運営方針を低露出に
• 完全非営利化

続きを読む 🔽サイト名変更・バナー変更
サイト名を「DOWN TO EARTH」から「fujimurasaki.art」に変更しました。
Down to earthという言葉は自分にとって大切な意味のある言葉でしたが、サイト名としてはあまり馴染んでない気がしていたので、気に入っているドメイン名をそのままサイト名として冠することにしました。

もしも当サイトへのリンクを貼ってくださっている方がおりましたら、サイト名・バナー共に新旧どちらを使っていただいても大丈夫です。

デザインの大幅変更
直近のデザインは自分でイチから構築したものでしたが、気に入っている反面垢ぬけなさも気になっていたので、今回はお洒落なテンプレートサイトの力を借りて思いっきり可愛いデザインにしてみました。
以前までのサイトデザインはどちらかといえばポートフォリオ寄りの雰囲気で機能性重視ぎみでしたが、今回は思いっきりミニマル化＆個人の手作り感を出すことを意識しました。（それでも2カラムにしたり機能をそぎ落としきれないのはもうそういう性格の私のサイトの個性ということにしておきましょう🫥）

ベースは空蝉さんのテンプレートにいろいろとカスタムを加えました。

Memo（てがろぐ）はそれをベースにさらに、テキストエディタで個人サイトをつくろう！さんのてがろぐ用スキン（skin-nikki）をはめ込みました。
skin-nikkiは見やすいのもさることながら、格納式のクイック投稿エリアの使いやすさに感動しました。

今回はテンプレートをお借りしたその上にカスタムを加えたことも相まって、かなりのスパゲティコードになっています。（ソースは見ちゃダメ🍝）
正直なんで上手く行ってるかわからないまま動かしてる部分も結構あるので、もしかしたら環境次第ではとんでもない表示崩れをしているのかもしれません…。
まぁ飛行機だってなんで飛んでるかわからないらしいので、きっとそんなもんです。

サイトの開設目的も自己満足のためなので、とりあえず自分が閲覧できればOKとします。
ただ、中身も外身もシンプル化したいという当初の目的からはちょっと外れてしまいましたね；主に中身の方が。
コメントもあまり入れなかったし、忘れたころにメンテできるかなぁ。。

今回はデザインを調整する際、PCファーストで作りました。
割と小型のラップトップにありがちな125%拡大ディスプレイでも違和感なく収まるように意識しています。
直近までのデザインは拡大するととても狭そうなのが気になっていたので…。（参考にした書籍の制作手順がモバイルファーストだったので、PCだとちょっと間合いが中途半端になる部分があったりしました。）
カスタマイズを結構ガッツリと入れてしまった都合、タブレットでの見栄えが結構おざなりになってしまってます。

Wordpressから手打ちサイトになった
かねてより脱Wordpressしたいとは言っていましたが、サイト作成当初は作品ギャラリーをHTML手打ちで整備できる気がしなかったので半ばあきらめムードでした。
しかし最近になってずぼログというありがたすぎるプログラムが配布されたこともあり、思い切って手打ちサイトに移行しました。

今までWordpressは重いし小回り効かなくてイヤだ的なニュアンスを結構出してしまってましたが、手打ちサイトを作ったことでWordpressのありがたさ・優秀さも改めてわかりました。
特に画像回りはアップするだけで勝手に軽くする工夫をいろいろしてくれてたんだなぁと。

後述する非営利化の話にも通じますが、今はもうSEOとかもどうでもよくなったので、マークアップの正確性などもあまり気にしなくて良くなったという点も、サイトの手打ち化に踏み切れた要因の一つです。

今後コンテンツを追加することになるのは基本的にずぼログと後述のてがろぐだけになりますが、どちらもスマホやタブレットからでも更新しようと思えばできるので、この先万が一PCが使えない環境になってしまっても中身の更新ができるのは安心材料です。

そして、手打ちサイト化した一番の狙い通り、サイトのリニューアルの反映は本当に簡単になりました。
リニューアル後のサイトの内容が入ったフォルダに独自ドメインを適用するだけで完了です。
WP時代はそれが簡単にはできないので毎回ヒヤヒヤものでした；；

テキスト周りをてがろぐに一本化
てがろぐとは別管理していた「ブログ」と「ドール」のコンテンツを、このてがろぐに一本化しました。
移行作業はなんと手作業です。漢の手打ち。

サイドバーにある>>長文記事一覧から、かつてブログに投稿していた記事も含めた長めのエントリーをブログっぽい一覧リストで閲覧できます。
スマホビューは最下部にリンクがあります。見づらいかもですが、スマホから長文一覧を見る人はあんまりいないだろうなと。。

てがろぐは独自記法とかも多くて他と互換性がなさそうに思えたので、テキスト関係を全面移行するのは正直結構迷いました。
でもそれ以上にてがろぐが好きなので踏み切りました。サイトをたくさん更新するようになったのはてがろぐのおかげなので。
さらにいうと、こことは別にプライベート用のメモもてがろぐメインで書いているのもあって書き慣れているというのも大きいです。
これまでは自分のブログ記事を後から読み返す時に、いろんな場所に分散していたために探すのに苦労したことも多かったので、一本化したことで横断検索もできて探しやすくなったのも良かったと思います。

トップページの更新履歴もてがろぐ埋め込み式にしました。
更新履歴用のてがろぐを新たに複数設置しているのではなく、今ご覧になっているこのてがろぐにすべて一本化しています。
更新履歴カテゴリに属する投稿だけが出力されるようになっており、タイトルクリックで本文に飛ぶことができます。
これにより長文が付随するようなお知らせなどもトップに掲載しやすくなりました。
ここはかなり苦労しましたが、上手くできた感動もひとしおでした！

【参考】freo（PHP）に「てがろぐ」の投稿を埋め込む | 10press

今回てがろぐをいろいろカスタムしてみて、てがろぐのポテンシャルを全然わかってないなぁと痛感したので、そのうちマニュアルを読み込んで機能追加してみようかと思っています。

また、手打ちで移行作業をしたため随所にデッドリンクが発生してると思いますので、その辺は気づいたところから少しずつ直していこうと思います。
てがろぐの記事同士はレス番を貼る要領でリンクできるので、内部リンクはかなり手軽に貼れるようになりました。

検索除けをして縮小運営
元々アクセスログを見ないようにしているので、どれだけ検索流入があったのかはわかりませんが、おそらく大手検索エンジンからではなく個人サイト用サーチなどから来ている方が殆どだと思うので、いっそ検索除けしてしまってもいいかなと考えました。
全体的にもうちょっと隠れ家感のあるサイトにしたいなぁ、と。もっと好き勝手にいろいろ書き散らかしたいし。
気心知れた友達5～6人の輪の中なら好き勝手喋れても、1000人2000人の前に立ってマイクで堂々と喋るのは私には無理ですので、それと同じ感覚ですね。適材適所です。

完全非営利化
サイト作成当初はサイト活動をほんの少しだけでもマネタイズしたいという思いがあったので、以前まではアフィリエイトリンクを貼るなど、トレンドブログのサイト構成を踏襲している部分がありました。
運営していくうちにその辺も心変わりしてきたので、記事内に貼ってあった各種広告リンクをすべて剥がしました。
当然ながら手作業です。漢の手打ち。（手消し？）剥がし忘れはあるかも。
単にモノを紹介したい＆細かい説明を省きたいという時はよくあるので、その場合は素のAmazonリンクを貼っています。

その他細かいこと
・Waveboxは興味あるものの引き続き保留。プレッシャーになりそう。

・プライバシーポリシーを撤去したかったのでメールフォームなどサーバー側でデータ収集するものを取り除きました。連絡先はメールアドレス記載で対応。
有料サーバーを使っているのでアクセスログは自動で収集されてしまいますが、利用目的があって能動的に取ってるものでもないのでわざわざプライバシーポリシーは設置しなくていいかなと判断しました。そもそもログ見てないし…。


#手打ちサイト #カスタマイズ #HTML #ずぼログ #てがろぐ

今日がこのサイトの誕生日

本日、このサイトをサーバーにアップしました。
これにより、昨日までは私のPCの中だけにあったこのサイトが、全世界に公開されることになります。

これで、このサイトの実質の誕生日は今日ということです。
自分にとっては何の日でもない、普通の日です。
たまたま大安吉日だったのは、なんだか幸先が良さそうです。

続きを読む 🔽自分の手で「地代（サーバー代）を払ってインターネット上に土地を借りて、誰でもふらっと入ってこれるギャラリーを開いた」という一連の作業をしたことで、その重みとか緊張感をどうしても感じてしまいますね。

そんな大層なことをしたはずなのに、作業自体はあっけないほどに簡単でした。
画面で見えているものは昨日までと全く同じはずなのに、不思議な感覚です。



当初は、作品がある程度貯まるまで1年くらいはローカル（自分のPCの中だけで、外部からは見られない）で運用する気満々でいたのですが、元々第一候補で借りようと思っていたサーバーが、12か月分のサーバー代無料延長クーポンを配るというとんでもなくお得なキャンペーンをやっていたので見切り発車してみた次第です。

一応今の段階でも、トップのギャラリーページが1画面分はギリギリ埋まっていて間が持っているし（現時点で3作品しかないですが）、ブログも5記事はあるし、アバウトページやファビコンなんかも一通りできてたので、最低限サイトとしての体裁は整ったな、と思った矢先のこのタイミングでした。

ただ、しばらくはサーチなどにも登録しないで、ローカル運用と変わらない気持ちで、気楽にまったりやっていくつもりです。



ところで、サーバー代というのは、サブスク料金なんかとは違って、「最近忙しいしサイト更新しなさそうだから、しばらく解約しとこう」というやり方はできません。料金不払い＝サイト消滅です。

各レンタルサーバーにもよりますが、サーバー料金は毎月ちまちま月額払いするよりも、一気に長期間契約（まとめて先払い）してしまうことでぐっと安くなります。

それに、月払いにしてしまうと、少ない費用で気軽に始められるのは良いのですが、「しばらく更新してないのに月額払うのもったいないな」→サイト削除　→数か月してから後悔　となる流れが見えてしまいました。

数か月くらいのブランクがあることを前提に、まったりと更新したいという目的にも長期一括契約は合っています。

今回は36か月契約をしたのですが、そこにキャンペーンの12か月延長が乗っかったので、なんと48か月、丸4年分のサーバー契約をしたことになります。

お得なのはいいことなのですが、思い返せば自分の人生で4年間何かの活動が続いたことが一度もないことを思い出して少し不安になりました。

アナログのノートにつけてる日記的なものが2019年からなので、それが唯一4年続きそうかも。
（それも最近滞りがちなのですが。）

ただ今回は、本当にサイト*を続けたいという強い思いを持って、構想やテストサイトの作成なども含め、水面下では1年半くらいのあいだ慎重にあたためてから始めているので、少なくともサーバー代を払った期間分くらいは、消したい衝動が来ても無視して頑張って続けます。そのための先払いでもあったので。

*厳密には絵を描いてそれを表に出す活動。現時点では個人サイトが最適解だった



「滞ってもいいからまた戻ってくる」を念頭に、まったり続けていけたらいいですね。

なんだかんだ、絵を描くことだけは、滞っても戻ってくるを繰り返してずっと続けられています。

もしこのサイトが消えることがあっても、描くことだけは今後もきっとやめないでしょう。

#モチベーション #レンタルサーバー