こんにちは。マイです。
先日このブログ「MY MEMO」をリニューアルしました。
備忘録として、目的や取り組み、反省点などを記録していきたいと思います。
Contents
リニューアルの目的
勉強だけでない、自分自身のことを記録していく場所に変えたい、という思いからです。
ただの勉強記録用につくったこのブログですが、もっと自我というか、都度感じたことやモヤモヤの整理を吐き出すことを増やしていきたいと思っていました。
これまでXでもいろいろ言っていましたが、140字よりもう少し文章量を増やせて、かつSNSほど人目を気にしなくて済む場所にブログがもってこいでした。（見られたくないことを書きたいわけではない）
リニューアルすれば自然とこの恥ずかしいデザインとおさらばできる、これまで学んだことを活かせる、と一石二鳥（三鳥？）です。
デザインのこと
まずはデザイン面に関して振り返りをしていきます。
コンセプトキーワードのようなもの
自分のブログなので、自分がどうありたいか自己分析をしながらイメージしたキーワードがこちら。
- 記録と発信
- 個と世界
- 内省と可視化
- 静かな意志
これをうまく反映できているか全く自信はないですが、自分の中に感じる矛盾？二面性？のような部分を表現できたらなと思いました。
たとえば、ぱっと見落ち着いて見えるけど、文章を読むと賑やかさが垣間見える、みたいな。
自分の文章が堅苦しくないので、見た目は落ち着いている感じにしたり、マウスストーカーで少しギャップを感じるような雰囲気にしました。
ビジュアル面で意識したこと
読み物メインのサイトなので、まずは読みやすいかを一番に考えました。1行の文字数や行間などなど。
また、なるべく画像を入れずに成立させたいということもあり、なるべく見た目が寂しくならないよう全体のバランスを見ながら作っていました。
最終的に和文フォントはりょうゴシックを採用しましたが、フォントに関しては本当に迷いました。モリサワがないと、和文フォントの選択肢が少ないですね…。
反省点
情報設計が甘かったです。
のんびりと数ヶ月かけて情報設計からデザインの段階を取り組んでいたのですが、どんな項目を加えるか、本当に必要なのかどうかが日々考えるたびに少しずつ変化していきました。
おかげでMutter（つぶやきページ）なんかは、「入れたいなあ」「やっぱりXあれば良くない？」みたいな葛藤をずっとしていました。
全貌はこんな感じです
結果、工夫しつつダメな点も受け入れつつできたものがこちら。
ついでにこれまでのデザインとも比較。
所感
今回、SAGYOU GANBARUで仲良くしていただいている方々にデザインを見てもらいました。
自分ではこれでよいと思ったデザインも、第三者の視点からだと読みづらいと感じたり、自分が目指したいイメージとは異なって受け止められるのだということを知りました。
作っても作っても「なんかダメな気がする…」と自信がなかったのですが（正直今も）、「ここいいね」「この部分好き」と言ってくれる方がいたおかげで、作ったものに対して少し自信が持てるようになりました。
知らない人にフィードバックをもらうのはまだ怖いなと思う方は、交流のある方に見てもらうところから始めるといいかもです。
コーディングのこと
最近はノーコードばかり触っていて、久しぶりのコーディングでした。
リニューアルでまず気をつけたこと
前回はまっさらな状態からコーディング→オリジナルテーマとしてWordPress化させたのですが、今回はすでに投稿があったり、使用しているプラグインがあったりと、作業前に考慮する点がいくつかありました。
それと前回の反省点、つまり使っていて気になった点の改善もやっていきます。
- プラグインのカスタマイズのバックアップ
- 既存ブログの構造と、使用しているプラグインの把握（整理も兼ねる）
- 個別投稿の見出しの余白感
など、一部はコーディングに入ってからではなく、デザインの時点で反映していました。
新しく取り入れたこと
やっぱり新しいことをやってみたいので、Xで見かけたネタや誰かのサイトを見ていいなと思った要素を盛り込んでみました。
- visually-hiddenを使って、見えないところにH1を挿入
- リストをスクロール移動させて、アクティブ状態に見た目を変える（アーカイブページ）
- SVGを画像としてでなく文字情報として読み込ませる
- GithubとVercelでテスト用のサイトをデプロイする
- WordPressのテンプレートパーツを活用する
- カスタム投稿を追加する
などなど。
AIに聞きながら、Webで調べながら、これまで作ったサイトよりたくさんの新要素を詰め込めたと思います。
個人的にアニメーションはうるさくない程度に作れて、コンセプトに沿えたかなと思ってます。
本当は動きはなくてもいいけれど、心地いい動きはノイズにならないんだなと作っていて実感しました。サイトに奥行きも出ますしね。
WordPress化前に一度静的コーディングをしていたのですが、スマホの実機確認がどうしてもしたくて、初めてVercelを使ってみました。便利！
苦戦したところ
WordPress化で思うように動かなくなる部分が多い多い。
プラグインを使用する前提で作っていた箇所も、管理画面のカスタムCSSに記述しないと優先的に反映されないこともあったりして、単純な静的サイトのWordPress化よりよほど大変でした。
ある程度完成した後は、どこをチェックすべきかリストになってる記事がないか探していたらオレインさんのチェックリストを見つけました。
今回は納品用ではないし4年も前の記事ですが、とても参考になりました。
Theme Check プラグインを使ってみたら、必須項目に関するエラーがたくさん出てびっくり。必死で直しました。気づかないところを見つけてくれるので助かります。
所感
コーティングはわかりやすい答えがあるので、次へ次へとのめり込み、つい過集中気味になってしまいます。
2月の最終週あたりは疲れてだいぶ頭が働かなくなっていました。
適度に脳を休めるよう気をつけておかないといけないですね。
まとめ
ふりかえりって、意外と文章にするのが難しいですね。
本当はもっとたくさん考えて作ってきたはずなのに、メモも残しているのに、文章に起こすとほんの少しの内容になってしまいます。
第一線で活躍されているデザイナーさんや制作会社さんの実績の文章を読んでいると、文章力や言語化のできなさに驚愕しています。
何事も、すこしずつでもできるようになっていきたいです。
デザインやコーディングの話ではないのですが、今回、Mutterページに♡のいいねボタン、個別投稿にmondのリンクを貼ってます。
試験的に加えてみたのですが、気軽にいいねを押したり、匿名メッセージ（感想でも物申したいことでもなんでも）をいたただけると泣いて喜びます！
X代わりにここで幅広くつぶやいているので、お暇でしたらぜひ覗いていってください。
それでは、また。
