当ブログのデザインコンセプト
今日は当ブログのデザインについて解説します。
専門用語が多めに出てくるので、要望があれば各用語の解説記事を書こうと思います。
コンセプト
当ブログは
- ベースに周知されているUI
- アクセントに最新のUIトレンド
- スマホメイン
をコンセプトに作成してます。
ベースに周知されているUI
ベースはマテリアルデザインを採用しています。
ほぼ最近のUIはマテリアルデザインベースです。
こんな感じのデザインで、Android端末はマテリアルデザインOSです
wordpress系のデザインもほぼほぼマテリアルデザインを踏襲してると思います。
公式サイトもありますhttps://material.io/ (opens new window)
アクセントに最新のUIトレンド
マテリアルデザインだけだと私がつまならいので笑
トレンドを半分スキルアップのために取り入れています。
具体的にはニューモーフィズムとグラスモーフィズムをアクセントに入れてます。
記事内や、ホームのメイン所には採用しておらず
目立たないパーツの強調で採用しています。
ニューモーフィズム
ニューモーフィズムは2019年？頃から流行り始めているUIです。
こんな感じのUIです。
この記事の最下部に実際に動くものがあるので、パソコンの方はマウスを当てて見たりしてください。
グラスモーフィズム
グラスモーフィズムは2021年から流行るぞ？！と言われているUIです。
Apple系のUIがグラスモーフィズムを多めにしたので注目されてますね。
当サイトにはスマホ版のヘッダーに採用しています。
PCには取り入れていません。
スマホメイン
当サイトはスマホ画面を先に開発して、それからパソコンを開発しました。
近年はスマホ優先で開発するのがWeb業界の開発方針なので、それに従っています。
PC版の開発は力を入れていないので、スマホ版と比べ使いづらいと思います。
こちらがスマホ版
こちらがPC版
カラー
色はマテリアルデザインを踏襲して、2～3色で構成しています。
ツイッターなどのSNSボタンはイメージが崩れるので、特別にSNS色を使っています。
強調
当サイトの強調は太字で表現しています。
これは以下の理由で太字にしています
- カラーパターンを増やしたくない
- 色覚障害の方への配慮
半ミニマリストの性格上、ごちゃごちゃしたのが嫌いなのでシンプルにしたかった。のが主な理由で
普段ネットをしてる方に優しいUIを目指す。という意味でも太字で表現するのは有効な手法です。
マーカーや文字色はインパクトがありとても良い表現方法なので、それ自体は否定していません。
ホームページの色バランスや、誰に伝えたいかを考えて判断するのが良いです。
強調ひとつでも色々な表現があるので
サイトコンセプトを考えながら選択すると締まるデザインができます。
まとめ
今回は当サイトのデザインコンセプトについて、うす～～く、ひろ～～く解説しました。
今後はデザインに関する記事も書けたらなと思います。