やかんです。こちらは、ドドドド素人のやかんが一生懸命ブログサイトをリニューアルする記事になります。その、第一弾。

  • 今こんな感じ。
  • やったこと
  • 技術選定
  • そのほか

今こんな感じ。

今はFigmaで色々調整してます。画像とか、未着手のところも多いですが今こんな感じ。

Figmaは今まで使ったことほぼないですが、教材で色々教わりながら取り組んでいます。

やったこと

  • ザクッとしたレイアウトを決めました。
  • 「Articles」「Categories」「Tags」の書体を決めました。

ザクッとしたレイアウトについて

レイアウトの段階で、「ブログのカードを縦型にして横スクロールにする」か、「ブログのカードを横型にして縦スクロールにする」かでまず考えました。結論、後者を採用したんですが、これは「記事一覧」の画面が縦スクロールなこととの整合性を考えてのことです。あとは、「ヤコブの法則」とか参考にしました。

トップページで表示される記事の数は4つにしたんですが、これは「ブログカード1つあたりの幅を確保したい」「Categoriesの文字が見えるようにしたい」という二つの思いで4つになりました。「ミラーの法則」だと5〜9個の方がいいんですかね？その辺はよくわからないので、目を瞑ります。

ヤコブの法則とかミラーの法則とかはこの本に書いてありました。↓

書体について

まず「Serif」「Sans Serif」「Display」「Script」のどれがいいかなと考えて、Sans Serifを採用しました。これは、「Articles」などの文字列がタイトルポジにあることと、全体のレイアウトがシンプルなため中性的な書体がいいなと思ったことによります。

で、Google Fontさんにお尋ねしたところ、Noto Sans Japaneseが良さそうだということでそれにしました。Noto Sans JapaneseのAboutを読んでみても、特に採用を踏みとどまらせるようなことは書いてありませんでしたし。

フォントはBlackという、一番太いものを選びました。これは、タイトルポジだから注目を集めてほしいという思いと、BlackにしたときのNoto Sans Japaneseのまるっこさがいい感じだったという理由によります。

技術選定

今までは「CMS = WordPress、フロント = Gatsby」で考えていました。Gatsbyはちょいちょい触ったことがあって比較的親近感がありますし。

ただ、今は「CMS = WordPress、フロント = Nextjs」にしようかなと気持ちに傾いています。理由は主に二つ。

  1. GraphQLに慣れていない。シンプルにAPI叩く方が分かりやすそう？
  2. GatsbyよりもNextの方がスマートでなんかかっこいい気がする。

どちらの理由もまあしょうもない理由ではありますが、どうしようかなー。まあのんびり考えます。

そのほか

  • パンクズリストどうしよう。
  • 仮想スクロールします。
  • 色を決めたい。

パンクズリストどうしよう。

パンクズリストは、「Home / 記事一覧」とかの、サイト上で自分がどこにいるか示してくれるやつのことです。で、このパンクズリストをどんな感じで配置しようか悩んでます。

仮想スクロールします。

仮想スクロールは、ざっくりいうとページの動きを軽くしてくれる技術のことです（あってる、、？）。他のところで仮想スクロールを使う機会があったので、今回も使ってみようと思います。

まあ、react-windowっていうパッケージに頼ってしまえばいいだけなんですけど。

色を決めたい。

色決めてみたいです。色彩理論っていうんでしょうか。本当に全然わかってないので勉強しながら考えます。

みたいな感じで頑張っています。楽しいけど難しいですね。今後も頑張っていきます。

ということで、この記事は以上になります。最後までお読みいただき、ありがとうございます！