ブログ
フォームは作ってあった。行き方が無かった
このサイトには、問い合わせフォームが置いてあります。プロフィールページの一番下です。 リンクを探したところ、サイトのどこにもありませんでした。 この記事で扱うこと 作ってあるのに辿り着けなかったフォームの話です。なぜ気づ […]
印を付けただけでは、探せるようにならなかった
記事一覧のカードには、前から「読了済み」の印を付けていました。 付けた当時は57本でした。いまは110本を超えています。印は役に立たなくなっていました。 この記事で扱うこと 読了の印だけでは足りず、未読だけを出す絞り込み […]
勉強法(4) 教える側に回ると、穴が見える
教える側に回って見えた、自分の理解の穴。答えられなかった質問の種類と、そのあと説明の仕方をどう変えたかです。
勉強法(2) 測らないと、分かったことにならない
このサイトで実際にやった「確かめ方」を3つ。どれも、確かめていなかったら間違ったまま進んでいたものです。
見た目で区別が付いているものは、機械には区別が付いていない
見た目で伝わっている区別が、機械には伝わっていなかった話です。何が起きていたか、どう直したか、そして「見えるから伝わっている」という思い込みについて書きます。
ソース解説(2) 目次は本文から作る
本文が文字列として届くこと、そこから見出しを拾う方法、既にあるidを勝手に変えてはいけない理由、そして読んでいる位置をどう追いかけているかです。
同じ「丸み」でも、比べる相手が違えば別の表に置く
フッターの上の角を丸めています。ページの下に別の面が敷かれている、という見え方を作るためです。 ところが、実機で見返すと「もう少し丸くていい、50pxでもいいくらい」と感じました。当時は14pxでした。 この記事で扱うこ […]
進捗バーが0から始まらないのは、測る場所を1つ間違えていたからだった
なぜ0から始まらなかったのか、どこを基準に測るかで何が変わるのか。そして、終わりの位置を動かさずに始まりだけ直す方法です。
「画面に入った」で数えたら、17%残して読了になった
「画面に入った」で数えると何が起きるか、それを「通り過ぎた」に変えると何が揃うか。そして、速く動かしたときに何を数えていいのかです。
一瞬だけ、白くなる
ダークモードを入れました。開いた瞬間に一瞬だけ白くなる現象と、24か所に散らばった色を1つずつ直さずに済ませた方法の記録です。
一覧が長くなると、探せなくなる
記事の一覧に検索欄を付けました。サーバーには問い合わせず、すでに手元にある一覧をその場で絞り込みます。本文を検索の対象にしなかった理由も書いています。
見つけてもらうために、書き方は変えない
このサイトで検索まわりにやってきたことの記録。順位を上げる話ではなく、存在を知らせることと、探している人の言葉に近づけること。記事の見出しと検索結果の文字を分けた判断まで。
登録してから、広告を出すまで
成果報酬型の広告を扱えるようにした。手続き自体は難しくないが、順番を間違えると手戻りになる。準備・判断・置かない場所の決め方をまとめた記録。
分類は、探す人の手がかりではない
116語の用語集を8分野に分けたが、WAFを調べたい人は分野を当てないとたどり着けない。分類が誰のためのものかを考え直し、検索を付けた記録。
最初の画面に、本文が無かった
記事ページを測ったら、本文が始まるのは772px、画面の高さは723pxだった。最初の画面に文章が1文字も無い。アイキャッチ・コピーボタン・見出しリンク・関連記事の4点を直した記録。
ページを消すとき、一緒に消えるもの
実績とスキルの個別ページをトップページへ統合した。作業はidを付けて2枚消すだけだが、決めることは消すほうに集まっていた。転送・sitemap・アンカーが動かない問題の記録。
ゆっくり読む人ほど、読了にならなかった
読了判定の分母に、フッターや前後記事リンクまで入っていた。本文を読み終えても89.9%。丁寧に読む人ほど読了にならない逆転が起きていた原因と、測ってから直した記録。
測れるもので代用すると、測りたいものから離れる
記事を最後まで読んだ人を数えたいだけでしたが、判定を4回作り直しました。そのたびに別の壊れ方をした経緯と、そもそも何を測ろうとしていたのかを整理します。
奥行きは、影だけの話ではない
ダークモードで影が消えて、奥行きを影だけで作っていたことに気づきました。面を分ける手段を並べて、どれが配色に依存するのか、どう選べばいいのかを整理します。
読む邪魔をしない
貼り付いたヘッダーと目次が、読んでいるあいだずっと画面を占めていた。下へ読むときは引っ込むヘッダー、スクロール中だけ薄くなる目次、先頭へ戻るボタン。3つの判断の記録。
届かない問い合わせ
問い合わせフォームで決めることは3つあった。メールアドレスを載せるか、送信先が未設定のときフォームを出すか、失敗をどう伝えるか。共通していたのは「うまくいったように見えて、実は何も起きていない」状態をどう避けるかだった。
1語1ページにしなかった理由
用語集を作るとき、1語につき1ページにするか、まとめて1ページにするか。解説を厚くすると決めた時点で前提が変わり、最初の判断を見直すことになった。薄いページを大量に作るリスクと、本番のPHPを触れないという制約から、分野別8ページという形にたどり着いた記録。
追従する目次と、画面の取り合い
PCで右側に追従させていた目次を、スマホでは上部に貼り付けた。ところが貼り付くものは画面を占め続けるため、本文を読む場所が足りなくなる。情報を消さずに縦を横へ並べ替えた話と、「飛んだ先がバーの裏に隠れる」という副作用への対処。
読む体験をつくる — 目次の自動生成から読了状態の保存まで
記事を5本公開したあと、読む側の体験を作り込みました。目次の自動生成、追従する目次、読了状況の表示と保存、スマートフォンのメニュー、読了目安の時間。あわせて、トップページの見た目も見直しています。 この記事は、その実装記 […]