今回作成したこのBlogサイトの制作について書きました

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

デザインについて

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

レイアウト

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

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

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

『よく見る感じのblogだけど、目立つ（印象に残る）サイト』って感じです。

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

ページ上から

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

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

工夫した所

pickupのアイコン

これも記事一覧の個所になるのですが、pickup記事が一目で分かるように、マウスの動きに合わせて回転しながら横移動するアイコンを設置しました。
最初は一覧のpickup記事に関しては特に何も付ける予定はなかったのですが、「pickupって特に読んで欲しいおすすめ記事だよな」っと考えた時、何も付けないのは良くないし、かといってただ単にpickupと文字だけ付けても「あんまり効果的じゃないよな」と感じ、最終的には、「NEW」「UPD」のように動きを付けた方が効果があるな、という事になりました。
止まっているモノの中に、動くものがあれば当然目は行くし、なんか面白そうな動きしてたら、クリックしたくなりますよね・・・多分。

個人blogっぽくしたくなかった

見たん感じがいかにも「個人のblogだな」っという感じにしたくありませんでした。
ポータルサイトやメディアサイトのようにボリューム感のあるサイトデザインを目指しました。
今の所コンテンツがあまり充実していなので、今後増やしていって、もう少し規模の大きなサイトにしていきたいと思っています。

デザインのテイストは全く違うのですが、目指す形としては、以下のサイトを参考にさせて頂きました。
https://cow-aka.jp/

大変だったところ

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

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

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

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

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

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

実装について

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

今回作成したこのBlogサイトについていろいろ書きました

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

大変だったところ

フッターのタグ

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

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

まとめ

wordpressの復帰戦という事もあり、兎に角大変でした。
上記に書いた以外にもsafariで動かなかったり、スマホでの挙動がなんか変だったりと。
でも、その分しっかりとwordpressを思い出す事ができました。
今後は、もっと内容、コンテンツを充実させて、もうひと回り大きな規模のサイトにしていく事が理想です。