小見出し候補

一覧

・吹き出し系
・水平線系
・ドロップシャドウ系
・グラデーション系
・立体的系
・三角形系
・SVG系

---

ジェネレータ

・CSS triangle generator

サイトとの相性

・やってて気が付いたのだが、「見出し」って結局、既存サイトとの相性が最重要
・単体で良さ気でも、合体させたらダメだった、ってのは結構あり得ると思う
・例えてみれば、「PC壁紙」みたいなもの(写真として単体では素晴らしくても、壁紙にすると、アイコンが見にくかったりするのは良くあるケース)
・つまり、「見出し」はそれ自体がメインではなく、あくまでもサイトの補助的位置づけであることを忘れてはいけない
・初めは軽視してた「シンプルな見出し」が意外に見やすかったのも、実はそういう理由だと思われ

結果発表

公表する必要ないけど、何選んだか分からなくなるのでメモ
・1位「水平線形カスタマイズ … 15-14」
・2位「水平線形カスタマイズ … 15-15」
・3位「水平線形カスタマイズ … 15-13」
・4位「吹き出し系カスタマイズ … 14-8」

結局は？
・上記「結果順位」でいくことにした
・飽きたら随時変更していく、ということで…

---

1位「デモ15-14」不具合

・使い始めた初日に早速不具合発見
・それは長いテキスト利用時に折り返し表示されると、影の白い部分が見える、と言うもの
・元々、この「デモ15-14」は、テキスト量により影が表示されるという弱点がある(白背景しか利用不可)
・影位置を調整すれば何とかなるのかもしれないけれど、(結構時間がかかるような気がするので)とりあえず気が付かなかった、と自分に言い聞かせスルーすることにしよう
・2日かけた結果がこれかよ！ 頼むぜ＞オレ

「2日かけて調査」した結果、感じたこと

1.「小見出し」と「見出し」は違う
・「小見出し」は一般的に「見出し」より、数多く表示される
・1回表示させるのと、複数回表示されるのとでは、ユーザーが受け取る感じ方が変わってくるので注意が必要
・今回、自分で実際にサイトに組み込んでみて初めて気が付いた

2.「letter-spacing」最強
・これまでほとんど積極的に利用してこなかったが、見出しには「letter-spacing」は必須
・利用すると、見違えること間違いなし

3.「小見出し」と言えど、サイトに合わせることが必須
・例えていえば、店頭に並べられている洋服みたいなものだと思う
・ショーウインドウで眺めているのと、自分で実際に着こなしてみるのとでは丸っきり違う
・そんな感じ
・今回、色々「小見出しCSS」を探してみたが、いい感じと思ったのに、いざサイトへ設置してみると全然合わない、というのが結構あった
・慣れてきたらイケるのかもしれないが、正直サイトへ実際に組み込んでみるまで、合うか合わないのか、全然分からないな、と思った

発想が危険

・確かに昨日こう書いたけれど、よく考えたらこれはとっても危険な思想
・デザイナーのポートフォリオでもないのに、格好良いサイトを作りたい、て言ってるのと一緒

---

「小見出し」の存在理由は？

・言うまでもないことだが、「小見出し」は自分が格好つけたいがために存在しているわけでは決してない
・「見出し」を分かりやすく整理する、という重要な使命を帯びているわけだ

---

ゴールから考えよう

・そもそも、サイトを作成する目的は何か？
・まずはそこから考えなければいけない
・「格好良いサイトを作りたい」て言う目的でサイトを作成するのは……
・と言うか、何書こうとしているんだ。オレは
・そんなのどうだっていいじゃん
・やっと「小見出し」に目途がついたんだから、この件、もう終了ー

---

新規候補

これから確認予定
・HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
・斜めのストライプ

ウィキペディア見出し最強

自分のために技術系ブログを作成している
・作成しながら、自分の頭の思考を整理するために

凝った見出しは、考え事がしにくい
・長文になればなるほど、ワケが分からなくなってくる
・全体を俯瞰しづらい

4年8ヶ月経過
・「ウィキペディア形式の見出し」へ戻す
・一番見やすい

「ウィキペディア見出し」のポイント

フォントサイズの差分を大きくする

当初の不安
・アイコンを入れないと、見出しが目立たないのではないか？
→ 実際に試してみると全くの杞憂だった