« ^ »

Webデザインとして手本にしたいWebサイトをリストアップする

所要時間: 約 3分

Webデザインとして気に入っていて、手本にしたいWebサイトをリストアップしておく。全体的にとてもシンプルで無駄がない。画像もほとんど使用していないため、古いブラウザでも最新のブラウザでも、簡易な実装しかしていないブラウザやテキストエディタでも常に正しく表示できそうだ。息の長い技術によって殆ど保守をしなくても良い形で作成されている。

https://kennethreitz.org/

全体的にすっきりしているが、文章主体に凝り固まっていない。私にとっては、自分の個人用のサイトを作ろうと思うきっかけをくれたサイトでもある。彼の作成した代表的なライブラリにPythonのrequestsがある。他にも多数の素晴しいライブラリを作成している。

https://matt-rickard.com/

このサイトはとてもシンプルで文字が主体であり、そして速い。彼はKubernetesに関連するツールで多数の貢献をしている。minikubeやskafffoldのメンテナでもある。

https://blog.hiler.eu/win32-the-only-stable-abi/

この人のサイトをどうやって発見したかを忘れてしまった。シンプルなサイトで、左カラムの上部にナビゲーションがある。通常のブラウザで表示させる時の左側のナビゲーションは、ewwなどで表示させる時には一番下にくる。ナビゲーションは主となるコンテンツではないから、この挙動は正しい。見る人を煽ることなく、必要とした人にだけ、行きたい場所へ移動できるようになっている。この実装は一番下のWebサイトのみだがぜひとも真似したい。

https://dkasak.github.io/

とてもシンプルなサイトでewwのようなWeb標準を実装しないようなブラウザであっても適切に表示可能なデザインになっている。フォントの設定がとても綺麗で、また注釈の挿入位置が見やすい。注釈の挿入位置は通常記事やその章の最下部に挿入される。この挿入位置も間違ってはいない。本文を読むことが重要なのだから、本文の邪魔にならないよう挿入したい。紙、もしくは画面であっても縦長の形態で表示されるのであれば、記事や章の一番下にまとめて表示でもよい。一方、Webブラウザで表示する場合、たいてい横長の表示となり、両サイドがあいていたりメニューやサイドナビゲーション、広告などのバナーなどが設置される。両サイドにメニュー、サイドナビゲーション、広告を設置すると、本文とは関係のない情報が目に入ってしまい、ノイズになる。とはいえ何も表示しないのはもったいなくも感じる。このサイトではその領域に注釈を挿入している。本文の近くに注釈があるため、内容を関連させやすいし、本文に関係のある内容のためノイズにもならない。これは真似したい。