このblogを制作するにあたって、デザイン面、技術面で工夫した所や、大変だったところ等を書いています。
今回は「blog」サイトという事もあり、UXを自分なりに良く考えて制作しました。

デザインについて

デザインについては、制作している時、「これはblogサイトだぞ！」っと何回も言い聞かせてデザインしました。
このblogは、個人ブログなので、自主制作になります。
自主制作は、いつも「好きなモノを好きなように」という感じで作っていて、オリジナリティを出したい欲求を抑えながら、「読みやすく、解りやすく」のデザインを目指しました。

デザイン詳細

先ず、テイストですが、これは今の自分のwebサイト（https://j-or-y.com/）に合わせました。
なので、ラインと絵文字をベースとしたデザインになります。
別に合わせる必要性はないのですが、見た感じで関連性があると伝わった方がいいかなと思って・・・。

それでは、詳細の本題に。
先ず、一番気を付けたのが、「レイアウト」です。
自主制作という事もあり、最初はちょっと変わったオリジナリティのあるモノを作ろうとしたのですが、途中で「それをしちゃうと読みにくいんじゃないか」と。オリジナリティあるレイアウトが出来たとして、それは凄く個人的には満足いくものでも、ユーザーから見たらどう感じのだろう。っという事で個性的なblogサイトをいろいろと調べてみました。
その結果として、「オリジナリティあるレイアウトはやめた方がいい」になりました。
変化球的な並びになっていると、デザインも良くて、バランスが良くても、普段見慣れてないものなので、やっぱり迷ってしまう事が多少ありました。「一覧のボタンどこ？、このボタンなに？、パンくずってどこ？無いの？」みたいな感じで。

結局たどり着いた答えが「超べたなレイアウト」です。「超べた」です。
自分が調べてみて、あくまで個人的な感想ですが、凄くいいなと思うblogサイトってどれもレイアウトは似たり寄ったりで、パーツ、コンポーネント部分で凄く個性を出していました。

色々なblogサイトを見て、一番重要である「記事ページ」の一番多いなと思うレイアウトが大体以下のような感じでした。

ページ上から

ヘッダー ⇒ パンくず ⇒ タイトル+アイキャッチ ⇒ コンテンツ+サイドバー ⇒ 関連記事 ⇒ フッター

パンくずとタイトルの順番が違ったり、パンくずが無かったりの違いはありますが、大体上記の形が多かったので、レイアウトはこのサイトにもこれを採用しました。
記事ページだけでなく、他のページ、topページ等も基本べたなレイアウトにしています。

大変だったところ

大変だったところは、記事ページのタイトル回りです。
兎に角ここが、しっくりこなくて何度も作り直しました。

色の具合だったり、配置するパーツ等だったり。何度作り直してもデザインが馴染まない、っていう感じがずっと続いてました。
特に「3dロゴ」の大きさと配置は時間がかかりました。他のページには配置してるモノだから、削除しちゃうとサイト全体の統一感がおかしくなってしまうので、取る訳にはいかないしで大変でした。

現状のデザインがめちゃくちゃいいの出来た、というよりは、「ま～ま～しっくりきたかな」という感じで収まった感じです。色については結局、アクセス毎に変化させる事で落ち着きました。

あと、サブページ全体では、パンくずリストも現状の形になるまでに何度か作り直しました。

こうしてみると、人のデザイン見て「あーだこーだ」言うのは簡単だけど、実際、手を動かすと全然良いのが作れないのが現実ですね。

あっ後、デザインで大変だったのは、記事のサムネイル画像です。記事自体は古いblogから引っ張ってきたものなのですが、サムネイル画像は全て作り直しました。約80枚位。しんどかったです。
blogサイトはサムネイルが命です（持論）。

実装について

技術的な事ですが、以下の記事にも書いたのですが、そもそもこのblogを作った大きな要因としてwordpressの練習（復帰戦）な所が大きいので実装はどこもまーまー大変でした。思っていたより忘れてる事が多かったので。

そんな中でも手こずった箇所を以下に書きます。

大変だったところ

ランキングページのページネーション

ランキングの表示にはプラグインの「WordPress Popular Posts」を使用しています。
色々調べたら、wordpressのランキング表示には大体このプラグインが使われているようで、使い方を説明しているサイトも沢山あったのですが、ページ送りの方法は、自分が実装している段階ではどこにもありませんでした。

ページ送りの実装に関しては、プラグイン自体の説明しているサイトが沢山あって、簡単にできるものだと思っていて、デザインもそのテイで作成したので、どうしても実装する必要があり、大分時間がかかりましたが、何とか自力で思うように実装する事ができました。
実装の仕方などについては、また記事でまとめようかなと思っています。

フッターのタグ

フッターのタグは、指定した数だけをランダムに選び、ランダムに配置するようにしています。
例えば、登録タグが100個あって、20個だけを表示させる場合は、アクセス毎に100から20個だけをランダムに選らんで表示させるタグが毎回同じにならないようにしています。現状は登録タグがまだ少ないのでほとんど同じタグが表示されています。

ただ大変だったのはタグの選別ではなくて、配置でした。
ただ単にランダムに配置させるのは簡単に出来たのですが、それだとある一か所にタグが集中して表示されることが頻繁に起こってしまいました。それを表示枠内に均等に配置するように調整するのが少し大変でした。
現状では、ある程度は均等に配置されるようになったのではないかなと思います。あくまでも「ある程度」です。

まとめ

wordpressの復帰戦という事もあり、兎に角大変でした。
上記に書いた以外にもsafariで動かなかったり、スマホでの挙動がなんか変だったりと。
でも、その分しっかりとwordpressを思い出す事ができました。