HOME > Days > このブログのデザイン変遷と感想

このブログのデザイン変遷と感想

  • Days
半円

このブログの設定を11月に開始してはや3ヶ月。Neveのテーマを使っているもののデザインは自分の好きなように調整してきたのでテンプレートの外見からは大きく離れました。

私はWeb制作会社ではディレクターとして働いていたので、業務でのデザイン経験も実装経験もありません。ただ、制作側の様子を見るにつれ、どちらの作業の方に興味があるかと言われるとデザインの方に魅力を感じていました。
そのため、このブログで実際に自分でデザインをできている今が楽しいです。

とは言うものの、大学は理学部の地学科で今までデザインのイロハなど一切学んだことがない私なので完全に我流の見様見真似で進めてきました。
Figmaの中には「ああでもないこうでもない」の軌跡が大量に残っており、後から眺めると面白いものです。
自分の中のデザインへの意識もこの3ヶ月間で変わってきたので、その分かりやすい変遷をこの記事でまとめてみます。

TOPページデザインの変遷

1番最初のデザイン

初期のTOPページデザイン
サイトタイトルをスペルミスしていた(saamakko)時です

うわ~恥ずかしい。かなりハチャメチャでした。

あの時は「良い!」と思っていたのに今見返すと色やデザインに統一感がまるで無い上に無駄なものも多く、まさに「自分の好きなものを詰め込んだ」という感じが強いですね。

その次のデザイン

2番めのTOPページデザイン

メインビジュアル画像を変更し、ちょっと色合いやデザインを意識し始めた頃ですね。図形の要素が好きなのでふんだんに詰め込んでいました。

次の次のデザイン

最近の投稿一覧の表示形式やページ内の細かい色を変えたりしていました。ただ、カテゴリのバナーデザインにはずっと悩んでいました。

次の次の次のデザイン

背景色と文字色、画像の色合いなどを考慮した結果、比較的落ち着いたデザインになりました

デザイナー目線で見た時にこのデザインで良いのかどうかは分からないのですが、個人的には今までとは異なり「なんか変…」という違和感を抱かなくなったので徐々に方向性が定まってきたのかなと思っています。
シンプルなデザインが好きなのでこの雰囲気が気に入っています。

直近のデザイン

ロゴやフォントを変えました。ロゴやバナーに使っている画像は「Vector Stock」で購入したものです。画像編集だけでなくロゴの作成やデザイン、フォント確認に至るまで全てFigmaで作業しています。

ページ全ての画面キャプチャ撮影にはChromeの拡張機能「Full Page Screen Capture」を使っています。
次はTOPページ配下の下層ページについてです。

下層ページのメインビジュアルデザイン

つい最近まで

メインビジュアル画像は全幅、というイメージがあったためか全ページにバーンと画像を入れていました。ただ、これだとページごとに色の主張が強かったので、変更したいと思うようになりました。
「Read More」はcss調整前なのでpadding無しです。

直近のデザイン

直近KV

思い切ってページのメインビジュアル画像を小さくしました。各記事のサムネ画像の明度も調整し、記事カード幅も縮めて要素がなるべく主張しないように変更しています。

Elementorで固定ページごとにメインビジュアルを変えています。

自分でデザインして思ったこと

デザイン制作めっちゃ大変やな…

フォントサイズから色合い、px単位での余白調整、タブレットやスマホ表示時のバランス考慮などなど…挙げればキリが無いのですが、パッと見て違和感を抱かないようなデザインにするには相当色々考える必要があることを身を以て実感しています。

特にTOPページはそのサイトの印象となるので1番重要で、TOPページデザインが変われば下層ページのデザインも変える必要があります。
Webサイトを制作する際、社内のデザイナーさんが「TOPページのデザイン期間はPC/SP合わせて3日は欲しい」と言っていた理由がようやく分かりました。

今回ド素人の私が「いいかも」と思えるようなデザインに到達するまで3ヶ月間かかったのですが、デザイナーとして働く方々はそのレベル以上のものを数時間~数日間でイメージを起こして具現化しているんですね…本当にすごい。

今回記事としてまとめたものの、多分これからもちまちまとデザインを調整していくと思います。

タグ: