---
Title: Webデザインに関する備忘録
Author: lar_bestwi
Web: 'https://mimemo.io/m/8agmD4pkyblRjYz'
---

mimemoに登録したので最初のメモを早速投稿。
自己紹介としては、えーとWebサービスを地味に作っている人間です。

最新作のWebサービスはこちら。
[Bestwi ツイッター分析サイト](https://www.bestwi.net/)

Webサービスを作ったりしているものとして最近気になるのはWebデザイン。

Webデザインに関しても流行り廃りがあるらしくFlashをバリバリ使ったリッチなサイトが流行ったかと思えば(かなり昔だけど)、あっという間に廃れたりとその流行のサイクルは短い。

スマホの普及のせいか数年前から固定ヘッダーのサイトが増えたり、スクロールすると要素が出たり消えたりするいわゆるパララックスサイトが流行ったりと、いつの間にか新たな技術やスタイルも次々と出現している様子。

正直Webサイト、特にWebサービスに関しては見た目より中身というのは原則だと思うので、ぱっと見明らかに使いづらいとか手抜きされているなと思われて完全に敬遠されないレベルならよいとは思う。

だけど、やはり最新のサイトは見た目がかっこいいだけでなく情報が整理されていて見やすいとか、今までだったら画像だったものをWebフォントやCSSで置き換えることで容量を減らしてサイトのロードを速くしたりとかの実用的な改善も行われている。そういう点にも着目したい。

私自身「なんでこのサイト、アイコン画像使ってるのにimgタグないんだろ。え、Glypicons? FontAwesome?なにそれ？」、というような感じで完全に流行に取り残されていて、リリースしたサービスが明らかに時代遅れのデザインになっているのもまずいので、最近のサイトを参考にしながら最低限時代にキャッチアップしていこうというスタンスでありたい。

なので最近見たサイトの中でこのサイトのデザインは参考にしたいというものをいくつか挙げていこうと思う。

# note
[https://note.mu](https://note.mu)
いやいや、いきなりそんなメジャーどころかいと思われるかもしれないけれどあえてnoteについては述べておきたい。
言わずと知れたテキスト投稿（最近は画像や音声なども投稿可能らしい）・販売サイトなのだが、とにかく文章を書くときにストレスがなく使いやすい。

CGMサイトにありがちなのが訪問者が見るフォアグラウンドは非常に綺麗で見やすいが、投稿者の使うバックグラウンドは見た目もあまり洗練されておらず使い勝手が悪くてストレスが溜まるというケース。
しかし、このnoteは投稿する側のユーザーエクスペリエンスもとても考え抜かれている。たとえば見出しやリンクなどもボタン一つで設定でき、余分な機能もついていないため直感的にテキストを書くことができる(見出しをh3にするかh4にするかなどの選択肢があったり、画像のaltを指定できて嬉しい人はHTMLをバリバリ書いている人やSEOの専門家以外あまりいないだろう)。
もちろん、読み手が見る画面の方も余分な広告や邪魔なシェアウィジェットなどが一切排除されてストレスを感じさせない。また、文字の大きさや行間も最適化されていてPCでもスマホでも読みやすい。
このUXの良さ、最適化されたサイトデザインは本当に参考にしたい。

# Qrunch
https://qrunch.net
技術系ブログ投稿サイト。IT技術関連の記事を投稿して知識を共有できるサイトで、Qiitaなどのサイトに近い。記事のエディタ画面が使いやすく、通知機能やトレンド記事の紹介機能など、全般的に機能が充実している上、使い心地の良いサイトになっている。
このサイトに特に着目した理由は、こちらのサイトが個人開発のサイトだということ
(こちらの記事に詳細が載っています→[https://qiita.com/c0domisu/items/95a561d163d26bbfe274](https://qiita.com/c0domisu/items/95a561d163d26bbfe274))。
目標にするとともに大いに参考にさせてもらいたい。

# POMU.ME
[https://pomu.me/](https://pomu.me/)
プロフィールリンク集サイト。インスタグラムのアカウントや自分のウェブサイトなどのリンクを設置できる自分のページを作成できる。
リンクを作り設置するというシンプルなサイトだけれど、デザインをカスタムすることでおしゃれに見せることができるという点が新しい。また、「サイト同士のハブ的な役割のサイト」という点も目新しい。

というわけで、最近のウェブサイトのデザインで参考にしたいサイトを3つ取り上げてみた。
自分のサイトのデザインもこうしたサイトを参考に磨いていきたい。

使っているクラウドメモサイトに関する別記事も書きました。よろしければお願いします。
https://mimemo.io/m/BV8YKG0gnv4ry91