HPデザインのポイント
皆さん、こんにちは！
今回はお久しぶりのUI・UXデザインについてです。
HPのデザインを例に考えていきましょう！
※初心者向けの内容となっております。
UI・UXデザインとは
まずは、UI・UXデザインとは何か簡単におさらいしましょう！
おさらい不要！な方は、HPのデザインからご覧ください。
UIはユーザーインターフェースの略称で、ユーザーとの接点のことです。
デバイスのボタンやキーボードなどの物理的なものから、ディスプレイに表示されるボタンや画面もインターフェースに含まれます。
このインターフェースを使いやすくすることをUIデザインと呼びます。
UXはユーザーエクスペリエンスの略称で、ユーザーの体験のことです。
ユーザーがサービスを利用して、得られた体験や経験などのすべて指すものが、エクスペリエンスです。
ユーザーがサービスを通して得る体験や経験を設計することをUXデザインと呼びます。
HPのデザイン
では、本題に入りましょう！
今回はバチャこみのHPのデザインについて考えていきます。
最近リニューアルした、バチャこみ！のLPを見ながら、
以下の記事を見てみてくださいね！
https://lp.vachacomi.com/
HPを作る上で押さえておきたいデザイン基礎
まずは、HPのデザインを考える上で重要なポイントを押さえておきましょう。
①HPを構成するパーツ
②コンテンツの整列
③3つのカラー
④レスポンシブ
ひとつずつ見ていきましょう！
①HPを構成するパーツ
HPは簡単に分けると以下の要素で構成されていることが多いです。
1.ヘッダー
サービス名や企業名、メインロゴが書かれることが多いです。
ユーザーの目が一番に引き付けられる部分ですので、
大事な情報を入れることが重要になります。
2.ナビゲーション（メニュー）
メニュー表示のことをナビゲーションと言います。
ヘッダーと共にサイトの上部に位置することが多いです。
他ページやページ内のリンクがつきます。
ユーザーはメニューを元にHPを見ていくので、
常にユーザーが分かる配置にすることが重要になります。
3.メインコンテンツ
HPのメイン部分で、サービスの内容を記載することが多いです。
ユーザーに伝える情報を書くことが重要になります。
4.フッター
サイトの一番下のエリアをフッターと言います。
フッターはユーザーが最後にたどり着き、次の行動を決める部分です。
ユーザーの次の行動につなげることが重要となります。
②コンテンツの整列
HPに限った話ではないですが、コンテンツや文字を意識的に整列することで、「ちゃんとデザインをしている」という印象を与えることができます。
良くない配置例
良くない配置例
良くない配置例 良くな
い配置例 良くない配置例
良い配置例
良い配置例
良い配置例
良い配置例
簡単にnote上で表現してみましたが、いかがでしょうか？
デザインとして「あえて」そうする以外は、良い配置例のように整列した方が良いですね！
③3つのカラー
こちらもHPに限った話ではないですが、3つのテーマカラーを決めると、統一感のあるデザインになります。
ベースカラー
カラー比率：70％
HPの背景など、大きな面積を占めるベースとなるカラーです。
メインカラー
カラー比率：25%
HPの印象を決めるメイン（主役）となるカラーです。
アクセントカラー
カラー比率：5%
一番少ない比率ですが、一番目立つアクセントとなるカラーです。
ちなみにバチャこみ！では以下のカラーを使っています。
3つ以上のカラーを使うのも、もちろん良いのですが、デザインがごちゃごちゃするので、上級者向けです。
まずは3つのカラーを意識して、カラーを追加するのが良いと思います。
④レスポンシブ
レスポンシブとは、
「ユーザーが利用するデバイスごとに見やすく最適なHP表示をすること（マルチデバイスに対応）」です。
特に現在はPCよりもスマートフォンからの閲覧傾向が高いので、
レスポンシブはとても重要です。
参照：【2022年】モバイル対PC市場シェア＆利用状況に関する統計
文字や画像を適切なサイズすることや、
メニューをハンバーガーメニューにすることもレスポンシブです。
メニューについては、前回のUI記事で説明をしているので、ぜひチェックしてみてください。
メニューのUIデザイン
では、最後にもう一度、HPを作る上で押さえておきたいポイントをおさらいしましょう！
①HPを構成するパーツ
②コンテンツの整列
③3つのカラー
④レスポンシブ
いかがでしたか？
世の中には素敵なHPが溢れていますので、
まずはポイントを押さえながら、どんどんインプットをしていきたいですね！
次回も具体例を挙げながら、UI・UXデザインについてお話する予定です！
お楽しみに！