独自スタイルのブログを作成するにあたって得た知見

このブログを作るにあたって得たバックエンド・フロントエンド・デザイン等の知見のまとめ

レイアウト

この記事がとても参考になった。

10個のベストプラクティスについて書かれているが、そのうち特に注意したものについてまとめる。

複数のブログ記事を整理して表示するには、カード式のレイアウトを使うとよいという話。

カードが優れている点についてはここに詳しく書かれている。

featured-imageについても実践したかったが、技術系ブログとして運営していく上で画像はほぼ使わないだろうと判断したため、今回は使わなかった。

当たり前のようであるが、意識しないと小さい文字を使ってしまいがちである。実際、自分も修正前は14px以下の小さいfont-sizeを使っていた。

使うべきfont-sizeについてはこちらに詳しく書かれている。「場合による」というのが結論だが、本文なら16px、タイトル部なら20px~30px程度に設定すれば電子デバイスでの閲覧上は問題なさそうである。

ブログアプリケーションだけでなく、テクニカルライティング全般に関わりそうな話ではあるが、ブログ記事にはクイックサマリー(要約)を用意すべきである。

元記事では、クイックサマリー用のボックスを用意することを推奨している。何かSEO的にも有利になるらしい。

"Neumorphism"というデザインが最近はやっているらしいので、その雰囲気を目指した。実装してみた感触を書く。

Neumorphismにおいては、ナビゲーションなどの要素は「浮いている」のではなく「浮き出ている」ものとして表現される。そのため、利用する色数が抑えられ、すっきりとした印象になる。

このミニマルな感じの印象が、Neumorphismを用いる一番のメリットだと感じる。

Neumorphismそのものでは、「凸」と「凹」しか表現手法がない。そのため、これだけで「グルーピング」「ナビゲーション」のすべてを表現しようとするとほぼ必ず無理が生じる。

実際、このサイトでは「凸」はグルーピング、「凹」はスクロール可能を表し、ナビゲーションなど、クリック可能であることの表現にはアクセントカラーを用いている。

こちらに書いてある通り、Neumorphismはフラットやマテリアルにとって代わるものではなく、グラデーションなどと同じく、1つのデザイントレンドとしてとらえるべきだと感じる。