小見出し候補

UI見出し

見出しCSS

 状態:-  閲覧数:11,462  投稿日:2013-03-05  更新日:2017-01-07
「センスが良い小見出し」を探す
・似たサンプルが多くヒットするので、探すのは結構大変


要件


・「見出し」ではなくて、「小見出し」を探している。具体的にはh3
・h2タグより目立ってはいけない
・レスポンシブなので、極力画像は利用したくない
・どこにでもあるような普通の「小見出し」は嫌。なるべく格好が良いヤツがいい。それでいて見やすいヤツ希望(矛盾してる?)


Task


1.「探した小見出しCSS」を片っ端から単独設置
2.その中で気になった見出しを、サイトに合うかどうか、一つずつ取り込んでいって確認&選考

候補一覧

 閲覧数:493 投稿日:2013-03-05 更新日:2017-01-05 

一覧


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


ジェネレータ


CSS triangle generator

選考

 閲覧数:484 投稿日:2013-03-05 更新日:2014-03-12 

サイトとの相性


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

決戦選考

 閲覧数:480 投稿日:2013-03-06 更新日:2014-07-21 

結果発表


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

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


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


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

「小見出しCSS」を探してみて分かったこと

 閲覧数:511 投稿日:2013-03-06 更新日:2014-03-21 

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


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

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

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

どこにでもあるような普通の「小見出し」は嫌。なるべく格好が良いヤツがいい、という危険発想

 閲覧数:551 投稿日:2013-03-06 更新日:2017-01-05 

発想が危険


どこにでもあるような普通の「小見出し」は嫌。なるべく格好が良いヤツがいい
・確かに昨日こう書いたけれど、よく考えたらこれはとっても危険な思想
・デザイナーのポートフォリオでもないのに、格好良いサイトを作りたい、て言ってるのと一緒


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


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


ゴールから考えよう


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


新規候補


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


4年8ヶ月経過後、結局「ウィキペディア形式の見出し」へ戻す

 閲覧数:326 投稿日:2017-11-20 更新日:2017-11-20 

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


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

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

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

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


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

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



×

ゲストコメント一覧

番号 内容 投稿日
1 テスト 2013-08-17
コメント件数 … 1件

週間人気ページランキング / 1-28 → 2-3
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 37
3 「bgcolor」「background-color」「background」の違い | CSS 36
4 RGBの種類 / ビットカラー | RGB(色) 30
5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 18
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 18
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 17
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 16
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 16
9 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 15
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 15
10 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 14
11 Design 0 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
12 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 12
12 HSLとHSVの違い | 色変換(色) 12
13 ICCプロファイル | カラーマネージメント(色) 11
2023/2/4 1:01 更新