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

この変なサイトの「制作の裏側」なんて、なんの参考にもならないし、誰も興味はないと思うのですが、記録として、このblogを制作するにあたって、デザイン面、技術面で工夫した所や、大変だったところ等を書きました。
こんな奴もいるんだな～程度で見て頂けると幸いです。

デザインについて

デザインについては、かなり難航したというか、今もまだしっくりきてません。
基本的に自主制作は、「好きなモノを好きなように」という感じで「創る事をおもいっきり楽しみたい」をベースに創っているのですが、今回はblogという事もあり、「読みやすく、解りやすく」を意識しながら制作しました。

テイスト

テイストは、今の自分のwebサイト（https://j-or-y.com/）に合わせました。
ラインと絵文字をベースとしたデザインになります。
特に合わせる必要性はないのですが、何故かその時は「合わせた方がいい」という感覚になってしまいました。今考えるとこれが良くなかったのかもしれません。

レイアウト

一番気を使ったのが、「レイアウト」です。
自主制作という事もあり、最初はちょっと変わったモノを作りたいなと思ったのですが、blogサイトなので可読性や視認性を考えると、やめといた方がいいかな、という結論になりました。

結果として「やめた方がいい」には、なったものの、「変わったモノが創りたい欲」はまだあったので、個性的なblogサイトをいろいろと調べてみました。
あまり見かけない個性的なレイアウトをしているblogサイトは、基本的にどれもデザインレベルが高く、とても素敵だったのですが、やはり可読性において、背景等と文字が被っていて見にくかったり、視認性において、どこになにが配置されているか解りづらかったサイトが多いように感じました。

いろいろと考えた末、レイアウトは「超べた」がいいかな、となりました。
自分が調べてみて、あくまで個人的な感想ですが、いいなと思うblogサイトは、レイアウトは似たり寄ったりで、パーツ、コンポーネント部分で個性を出しているように感じました。

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

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

ページ上から

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

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

工夫した所

このblogサイトの前提として「目立つ」をベースに添えています。
自分という全く無名のクリエイターを「少しでも多くの方に認知してもうら事」、これは、このblogを作った理由の1つです。
なので「工夫＝目立たせる」という感覚です。
そして最も重要なのは、「創るをおもいっきり楽しむ！」です。これを感じ取れないサイトにはしたくありませんでした。

pickupのアイコン

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

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

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

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

大変だったところ

基本、デザインは、ずっと、しっくり来てないので、全体的に大変でした。

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

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

現状のデザインは、「も～しょうがない」という感じで収まった感じです。

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

後は、記事のサムネイル画像ですね。記事自体は古いblogから引っ張ってきたものなのですが、サムネイル画像は全て作り直しました。約80枚位。しんどかったです。

実装について

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

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

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

大変だったところ

フッターのタグ

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

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

まとめ

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