見やすい個人サイトを作るための覚書※ほぼ無料

見やすい個人サイトの覚書を書いた。

商業的なWebデザインというものは会社のコンセプトやら何やらを表示するために作られているので、自分が作ったものの情報をまとめたい個人サイト運営にはあまり参考にならない。
なおかつ個人が運営する以上そんなに手間暇はかけられないのであくまで楽に見やすくなるのが望ましい。
なお、WordPressやてがろぐのことはあんま詳しくないのでわかんない！　あくまでhtmlの話だと思ってほしい。

構造

本格的にhtmlをいじる前に載せたいものを決める

本格的にhtmlをいじる前に載せたいものは決めとけ！！
やっぱりやめた！　となってもあとから直せはするけど、直すのが面倒になり更新も面倒くさくなる……のはあるあるだ。

階層構造を決める

サイトの階層構造もだいたいでいいから決めとけ！！
これも後から直せばするけど、全然違う階層構造にしたいとなると手間がかかる。
ので自分が更新しやすく、見やすい階層構造を考えておこう。
私は更新が面倒なのでトップページにほぼすべての情報を載せている。こういうページ一枚のhtmlサイトは更新が楽なんですよね……。
あと階層構造をちゃんとしておけば改装も楽です。

テンプレートはシンプルなものを選ぶ

テンプレートはシンプルなものを選んでおくと何かと便利だ。シンプルなもののほうがあとから何か付け加えたくなったとき楽である。
私のようなにわかhtml使いには複雑な構造のhtmlは理解できない。
個性的なテンプレートを否定するわけではないのだが、長くカスタマイズを続けていくつもりなら個性的すぎるデザインは足枷になることもある。
あとおしゃれ系のサイトってコンテンツ増えたらきれいに見えないよね？　っていうのもある。
私はガタガタ氏が書籍で配布していたものを使っている。

情報の優先順位をつける

重要度の高い情報に画像をつける

画像はかわいいのですべての情報につけたくなるが、重要度の高い情報に画像をつけたほうが見やすい。
自分は同人誌を一番見てほしいので目立つところに設置している。
バナーが横長なのは縦型画像だと綺麗に見せるのが難しいから。
表紙全体を見せたほうがいいのかな〜となるけどカスタム難しい。

重要度の低い情報を目立たせない

あまり重要ではない情報は潔く目立たないところに置こう。
リンク集は作るのは好きなんだけど、サイトの本題ではない。
更新頻度が低いSNSや投稿サービスは容赦なく下にしたりテキストリンクにしたりすることにしている。やっぱり更新しているのを見たいと思うから。

見出しは番号が若い方を目立たせる

見出しはh3よりh2が目立ち、h2よりh1が目立つデザインにしておく。
この辺の見出しの目立つ、目立たないがはっきりしていないテンプレートもある。
テンプレートを借りるときカスタマイズした方が見やすくなることがある。

「わかる」工夫

リンク部分は「押せそう」な感じに

パッと見てリンクだとわからないリンクは押されない。
下線が引いてあったりホバーして色が変わったりすると「押せそう」に見える。
更にボタンを使ったりバナーが押せそうなデザインだったら押してもらえる。
どのくらいリンク部分を目立たせるかは人それぞれだけど、少なくともリンクと普通のテキストの見た目が同じというのは避けたほうがいいと思う。
今見返したけどもうちょっと押せそうにしたいな。

情報に関連付けたアイコン、イラストを使う

リンクに添えられているのが無関係なイラストだと押しにくい。
極端な例だが、「文章」というリンクなのに絵のパレットのアイコンを使っていると混乱するよね？
画像と情報はなるべく関連付けることでわかりやすくなる。
小説の表紙も喫茶店が舞台だったらコーヒー、家が舞台だったら室内のインテリアの画像、みたいにテーマを関連付けるのがわかりやすい。
ちなみにアイコンはescapeというサイトで配布しているCSSを使っている。

最悪画像が表示されなくてもわかるようにテキストを書く

管理人のミス、通信環境、あるいはサーバーの不具合などで画像が表示されなくなるときがある。
そのときに画像が表示されなくても内容がある程度わかるようテキストを書いている。
ALTをちゃんと設定しておくのも大事だが、こっちの方が管理人の私がわかりやすいのでそうしている。

余白

行間の余白は設定しておく

行間の余白は設定しておこう！
特にテキスト主体のサイトで行間が設定されていないとかなり見づらい。

目安としてはemで1.5〜2.0ぐらいがおすすめらしい。

見出しの後に少しマージンを入れる

見出しの後に少しマージンを入れておくと見やすい。
見出しの下にマージンがないと見出しの装飾とテキストがくっついちゃうんだよね……。
どのくらいマージンを入れるかはサイトによるのでいろいろ数値を試すといい。
このとき改行タグで余白を作ってはいけない。後々面倒になるから。

テキスト

文字の大きさは極端でなければいい

文字の大きさは見る側がブラウザの拡大縮小で変えられるので細かくこだわる必要はないかも。
ただ初見であまりに見づらいとブラウザバックしてしまうところはあるので程々が大事だ。
なんで同人作家向けのおしゃれなテンプレートってやたら字が小さいんでしょうね。これは平成の時からそう。イラストサイトならいいけどテキストサイトだと見えないよ……。
テキストサイトはちょっと大きめかなぐらいが見やすい気がする。

フォント

明朝が読みやすいって言う人とゴシックが読みやすいっていう人は分かり合えないから両方に配慮するのは無理！
私はWeb上ではゴシックが好きだからゴシック一択です！
というか明朝の個人サイトがあんまりなかった世代だからゴシックのほうがなじみがある。
今は紙でもゴシックで組まれた本をちょくちょく見かけるのでゴシックに対する価値観も変わりつつある気がする、
フォントが読みづらかったらコピペして適当なリーダーに突っ込んでくれていいから。（個人的利用かつローカルに限る）
Edgeにはイマーシブリーダーという機能があるらしい（使ったことないけど）

ディスレクシアの人はゴシックが読みやすい傾向があるらしい。

アクセシビリティに配慮してるつもり、の落とし穴

サイトを作っている人はアクセシビリティに良かれと思って文字サイズ、背景色変更を実装してしまうことがある。
しかし、視覚障害の人や感覚過敏の人はブラウザの拡張機能で背景色を変えていたり文字サイズを変えていたりするので特にこういう機能は必要ないらしい。
むしろどんなブラウザでも読めるようなシンプルな構造が好まれるそうだ。
自分も見づらかったらブラウザの拡張機能どんどん使ってくれて構わないし、ローカル保存だけならコピペ保存して電子書籍端末に突っ込んでもらってもいいので、そこはこだわらないことにした。
もちろん実装したいならしてもかまわないのだが、労力をかけて実装しても実際困っている人に便利とは限らないということだ。
htmlの話からそれる。
私はKindleであれこれ本を読むのだが、epubなのに逆にデザインを凝りすぎて読みづらくなっているパターンが結構ある。epubは字の大きさ、背景色、行間の変更、さらには読み上げ機能やハイライトで１行だけ強調などを使えるデータであるが、装飾が多すぎるとデザインが崩れやすいのだ。
ちょっと拡大縮小をかけただけでデザインが崩れるepubは購入しても読み進めず放置してしまうことがままある。
デジタルで文章を読むとき、シンプルな構造のほうが読者によるデザイン変更に耐えうる、ということは頭に入れておいたほうがいいだろう。

まとめ

これで合ってるのか？　しろうとなのでわからない。

私と同じく何もわからん人は、デジタル庁のアクセシビリティガイドブックを読もう！　めちゃくちゃわかりやすいし、健常者にとっても見づらいホームページあるあるがあって興味深い。この記事もこのガイドブックを参考にしている。

↓活動まとめサイト

↓人力おすすめ記事

以下、本当に読まなくていい記事の没文