2024-06-01

記事の画像デザインについて考える

画像の視認性向上のための学びと改善点

最近デザインについて勉強した。

その際に学んだことなどを実際に何かアウトプットできればと思い実践する。

補足として今までのデザインに関しても個人的にかなり気に入っているがこのような小さい改善から始めていきたいと思う。

正解はないと思うので自分が満足できるものを作成できることが最終的な目標として考える。

元々の画像

このブログで今まで利用していた画像であり今までの傾向からなるであろうデザイン画像。

背景の写真自体は散歩や旅行をしている際に気に入ったポイントがあれば撮影し利用している。

元々特にデザインのレイアウトのこだわりなどもなかったため現在のデザインに落ち着きかなり気に入っていた。

変更後の画像

このように変更した。

今までのデザインは気に入っていたものの学んだことをすぐに実践していたいと思った結果，画像のデザイン変更に取り組んだ。

変更後の結果として，今までより背景画像に焦点が当たりやすくなり単なる風景画像と捉えてもおかしくないようなデザインになり以前よりさらにシンプルさが増したように感じる。

作ってみて思ったことは前の画像のデザインはかなり良くできていたように感じた。

ただ，これからまだまだ修正の余地があるのでさまざまなデザインを考えていければと思う。

中途半端に変更してもより良いデザインになるどころか，かえってよりわかりづらくなってしまうことを肌で実感した。

手順

文章の考案

内容に構成に関しては今までと同様に問題ない。

このブログを示すイメージと端的にタイトルのみ表示することができているので読み手視点からでもわかりやすいと考える。

もしこれ以上文章を増やそうと思った場合は文字のグルーピングやコントラストの調整が必要になるだけではなく，単純明快な画像イメージからかけ離れてしまうだろうと考えており必要ないと考えた。

レイアウトの変更

構成されている要素はロゴとタイトル名だけであるためグルーピングの明確化は必要ない。

そのためどのような配置にしようかという部分を検討したところ今までは中央に置くことでより綺麗にデザイン見せることができると思っていたが，大胆に変更することを意識して画面に対して左揃えで統一しつつ空白を調整していく。

またこの画像デザインは全てのデバイスでフルサイズかつアスペクト比を保ったまま表示することが可能なので画像全体でのレイアウトの粒度で考えていく。

視認性を加える

少し画像イメージ特有の特徴を加えていく。

どうやって画像全体を構成して個性を出していく方法は千差万別であり最も印象を変更しやすい部分だと感じた。

主に変更したところ

• 画像全体の透明度の調整
  • 背景画像である太陽の部分での強調が少し強すぎるため85%に変更
  • 文字とロゴに関して主張が弱すぎるため15%の補色を加えて対応
• フォントファミリーとサイズの調整
  • いろいろ試してみたり調べたりしたところ今のフォントに落ち着き変更
  • 今後利用していくレイアウトについても、この程度の文字数だと考え1行で表示できるように統一

迷ったところ

• 画像の中央あたりに何か差し込むことはできないか？
• フォントのサイズやファミリーにより改善点はないか？
• よりコントラストをはっきりとさせることはできないか？

まとめ

トータルして，まだまだ思い切って大胆に変更することができていないと感じた。

このブログのようなデザインは自分で出せるような個性だと思うので、たくさん学んでいってどんどん自分なりの面白みを加えられたらいいなと思う。

レイアウトだけではなくフォントのサイズや背景色、様々な表現力があると思うので、引き続き色々手を加えて試していきたい。

学んだことをいかせているかどうかはわからないがデザインを最初に学んで実践できてよかったなと思った。