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