要件の整理
自分のブログにかしこまった要件もないので、コーディング前に頭の中で軽く整理しておく。
5年近く前にもブログを作ろうとしたが、忙しくなってフェードアウトしたので、今回は公開することを最優先とする。（デザインや機能要件など凝らないことが重要。）
ブログの内容（雑記ブログ）
- 自身のナレッジなどメモ帳として
- 日々の生活などで感じたこと、娘の記録など（随筆。娘がいつか読んでくれるかもしれない。）
構成・機能
- 記事ページ
- カテゴリを1つ持つ
- タグキーワードを複数付けられる
- 目次を設ける
- 関連する前の記事と次の記事のナビゲーションを持つ
- 記事一覧（HOME）
- 最新順に並べる
- カテゴリとタグキーワードのファセットで絞り込み可
- その他ページ
- プライバシーポリシーとかアバウトとか？
- 特に機能なし
ターゲットブラウザ
自分のためなのでPCのChromeを優先、iPhoneのSafariも見れれば良い程度。
他のブラウザは無理に考慮しない範囲とする。
画面設計
自分相手に気にする必要はないので、第三者を想定して画面設計する。
会社やブランド、著名人のブログではないので、基本的に「指名検索」の動機で見に来ることはない。仮に訪問者がいるとすれば「情報検索」でしかないので、各記事にランディングすることを前提とする。
また、特定の領域に絞った専門的なブログではないので、ランディング記事と他の記事の関連性は薄い。「一記事一会」としてランディング記事の内容に集中できる構成にする。
画面設計での個人的ポイント
- 記事ページ
- 記事タイトルを最優先に配置し、グローバルヘッダーはひっそりと配置する
- 記事のメタ情報はサブエリアに配置して、記事本文だけをメインカラムに配置する
作るのは自分なので、ワイヤーフレームは書かない。
デザイン
面倒なのでWFも書かずデザインも起こさないが、せっかくの自作なのでDIYの醍醐味を味わいたいと思う。クリエイターのかっこいいポートフォリオみたいな雰囲気より、昔の愛生会病院みたいな、「個人が楽しんで魔改造した感じ」で好きにやれたらと思う。
あの「愛生会病院」サイトが閉鎖するらしいので、他のすごいサイトも集めてみたopen_in_new
DIYの醍醐味、我の要素
公開優先で凝らないと決めたが、余裕があれば入れ込みたい雰囲気を考えておく。
直でプロトタイプコーディングするので、ちょっとしたあしらいで悩んだときのヒントになれば。
- 漫画
- 昭和・レトロ
- SF・レトロフューチャー
- DIY精神
ブログ名に使う書体の作成
ブログタイトルに使う書体に悩んだが、素人が探しても多すぎて決めきれない。あてもなく探して決めるのが面倒になったので、作ってみることにした。タイトルは5文字だけなのでロゴデザインになるのだろうが、自分としては書体探しの延長で作ることになったので、タイプフェイスデザインの感覚で作った。
レタリング/タイポグラフィ/カリグラフィー/タイプフェイス/ロゴタイプ... 素人にはデザイン用語分からないので間違っていてもご容赦を。
「ひよ子」（ひよ子は福岡のお菓子）の文字の話が、江戸文字も知れて面白かった。
ひよひよひよ子 | 吉野堂物語 | ひよ子本舗吉野堂open_in_new
① 正方形の枠に文字を書く
正方形の枠に書くイメージがあるので、正方形の枠を準備する。
フリーハンドで書くつもりはないので、アタリにするグリッドを試し書きしながら用意する。あれこれやって、フィボナッチ数を利用してグリッド位置を決めた。
はるか昔の設計経験を活かし、CADを使って書いてみる。
アルファベットは正方形じゃダメだった。位置もおかしい。
② アルファベットを書いてみる
ちょっと脱線して、お試しでアルファベットを書いてみる。
全部書くのは面倒なので、“READ MORE”とか“TWEET”とか使えそうな文字だけ書いてみたら、結局19文字も書いてしまった。幅はまばらだが、文字部分だけ抜き出してから文字間を調整すればフォント化もイケそう。
Rの位置は調整できたので脱線してよかった。
③ 数字を書いてみる
さらに脱線して、数字を書いてみる。
正方形枠じゃダメなので適当に枠を調整。
数字は完全な脱線作業なので公開を意識して気を引き締める。
④ ステンシル体を書いてみる
反省も束の間、せっかくなのでステンシル体を書きたくなる。ステンシルは転写技法で、デザイナー職でなくともDIY好きなら知っているやつ。
通常の文字は「昭和のホーロー看板」や「漫画タイトルロゴ」の雰囲気がある。ステンシル体は「DIY」感があり、出来栄えの満足度は高い。自己満足が高ければ他人からみてダサくてもいいんです。
足りない文字を書いてフォント化してみる作業も面白そう。
HTMLプロトタイプ作成
HTMLとCSSを書く
アラフォーロスジェネ世代の得意分野、HTMLとCSSを写経する。
「IE滅びろ」というあの頃の願いが、IE11にてやっと実現しそうに。
老人のために苦労して培われたIEハックのスキルは、何の資産にもならなかったな。
- 記事ページ
設計に従って、忠実に写経 - 記事一覧ページ（HOME）
指名検索はない想定なのでトップページには設計の制約は不要。TOPは我を出せます。
大好きな漫画に倣って、「右から左」で「文字は縦書き」にしてみる。（PCだけ）
漫画が大好きなので、漫画家の方は本当に神だと思っています。
JavaScriptを書く
Vue.jsなんて全く知らないので、そのまま活用できるか分からないが、下記の機能を素のJavaScriptで書いておく。
ちなみに素のJSを「Vanilla JS」と呼ぶらしい。
- 記事ページの目次
- 目次のアンカーリンクのスムーススクロール
- ロゴSVGのマウスオーバー/アウト時のアニメーションスタート
- メニュー表示/非表示のトグル機能
- メニュー表示の際のワイプアニメーション（ロゴのSVG操作で調べた知識を使いたいだけ）
- 記事一覧ページの横スクロールもどき
- 隠し要素としてコンソールログにテキストを表示
- ダークモード
ダークモードは前回までSSHクライアントの黒い画面ばかりみていたのと、睡眠時間を削ってちょこちょこと作業してたために、白い画面が眩しく感じたので追加した。
デバイス側のダークモードに従うCSSのメディアクエリ「prefers-color-scheme」を使用するか迷ったが、自分はPCデバイスをダークモードにしていないので、切替ボタン式とする。
余裕があれば「レトロモード」など、2000年代風のページ切替などもやってみたかったが、これ以上の脱線は本当に公開に影響しそうなので自重した。
おわりに
書体作り体験は面白くて無駄に脱線はしたものの大満足だった。
ブログ名は工作やDIYが好きなので、作る人になる「Be a Maker」という想いで beamaker.jp というドメインを取っておいたものがキッカケ。普段何も作っておらず「Be a Maker」にするのは気が引けたので、ローマ字読みをして意味不明な言葉になった。
今回は雑記ブログだが、できればDIYにもチャレンジして記事を書きたいと思う。
一応このブログもDIY作品の1つとしよう。
次はアプリケーションの構築。まずはバックエンドのCMSを準備する。
ようやく、いまどきのHeadlessCMS体験ができる。