ホームページのデザインの検討

ホームページのデザインの検討

2023年12月9日
スタビジ

ホームページを作る際の、
 デザイン
についての考え方を知りたい。

こんなテーマに関する記事です。


スタビジ

ホームページのデザインを考える際には、いくつかの要因があります。それらについてわかりやすく説明しています。

スタビジ

ホームページの作成を進める上では、
 見た目のイメージ
つまり、
 どういったデザインに仕上げるのか
を検討しておく必要があります。

稀に、
 大手の会社やポータルサイト
のようなサイトを作りたいとお考えの方がおられますが、そういったサイトは、素材も含めてオリジナルなものになっています。
機能面の開発の内容にもよりますが、結果、数十万円~100万円単位の制作費用がかかっています。

すべてオリジナルな内容で仕上げたい場合は、専門の外注先へ依頼されることをお勧めします。

逆に、
 シンプルな内容
で対応する場合は、自社で作成することも可能になってきます。

具体的に、デザイン面を検討する場合は、主に、
 ・レイアウト
 ・コンテンツ(画像、文章)の配置
 ・使用する色の組み合わせ
 ・画像素材

といった要素を検討していくことになります。

また、実際のサイト事例で、イメージに近いサイトの構成を参考にしても良いでしょう。

下記に順に説明していきます。

スポンサーリンク

レイアウト

スタビジ

ホームページの基本的なレイアウトに関しては、決まったものになっています。

例えば、
 タブレットやスマートフォン
は、
 ワンカラム
と呼ばれる、縦一列の全幅のレイアウトとなります。

また、PCに関しては、
 同様に、ワンカラム(全幅のレイアウト)
にするか、もしくは、
 サイドメニューを表示させるか
の選択になります。

例えば、トップページのみワンカラム(全幅のレイアウト)にして、その他のページには、サイドメニューを表示させるということもできます。

以前は、トップページにサイドメニューを表示させているホームページが多かったのですが、最近は、会社のホームページの場合、
 ワンカラム(全幅のレイアウト)
が大半をしめるようになっています。

【参考】レイアウトの違い ▼

ホームページのデザインの検討

画像引用;WEBデザインはこれで完璧!参考になるレイアウトまとめ
https://blog.codecamp.jp/web_design_layout

コンテンツ(画像、文章)の配置

スタビジ

まず、トップページの
 コンテンツ(画像、文章)の配置
をどのようにするのかを検討します。

いわゆる
 ワイヤーフレーム
と呼ばれるものです。

そのあと、トップページ以降にページについても検討しますが、やはり、トップページの見た目がとても重要になってきます。

どのような画像と文章を使うのか、またそれをどういった配置で組み合わせていくのかをか考えていきます。

ワイヤーフレーム例 ▼

画像引用;「ワイヤーフレームとは?作成のポイントやどこまで作るのかを解説」 https://sevendex.com/post/5592/

使用する色の組み合わせ

スタビジ

どのような色合いで仕上げるのかも、見た目の印象を大きく左右します。

色の組み合わせに関しては、
 色の組み合わせパターン
のサイトなどがありますので、参考にしてもよいでしょう。

また、ホームページの場合、
 メインで使用する色
を決めて、それを、
 ヘッダーやフッターなどの箇所
に適用させることになります。

また、ロゴ画像の色や、その他の画像に関しても、必要に応じてメインカラーを考慮して、サイト全体の統一感をもたすようにします。

配色に関しては、下記のページでも説明しています。

ワードプレスでつくるホームページの配色パターン
ワードプレスでホームページを作成する際に、 どのような配色をすればいいのかについて知りたい。 こんなテーマに関する記事です。  ワードプレスでホームページを作成…
www.stabusi.com

画像素材

スタビジ

画像や写真を準備します。
少なくとも、
 ・ロゴ画像
 ・トップページのイメージ画像

は必要となります。

イメージ画像は、写真、イラストのいずれかになります。
無料素材については、下記ページでわかりやすく説明しています。

ホームページで使用する無料素材について
ホームページで使用する 無料素材について知りたい。 こんなテーマに関する記事です。 ホームページで使用する無料素材について、事例をあげて説明しています。  会社…
www.stabusi.com

少なくとも、ネット上の素材を勝手に使用すると、著作権侵害になりますので、注意が必要です。

サイト事例

スタビジ

サイトの仕上がりイメージをもつには、サイト事例を参考にすると、イメージもかたまりやすくなります。

事例をみるには、下記のようなサイトがあります。
業種ごとの事例がまとめられています。

MUUUUU.ORGは、web制作において参考になる縦に長いレイアウトでかつ、クオリティの高いwebデザインのリンクを集めたサイトです。webデザインの参考にど…
muuuuu.org
81-web.comはWebサイト制作に参考になる日本の優れたWebデザイン・Webサイトギャラリー&参考サイト・リンク集です。81-web.com is a …
81-web.com
ハイクオリティなWebサイトを紹介するデザインギャラリー。コーポレートサイト、採用サイト、ECサイト、キャンペーンサイトなど2024年の最新トレンドを発信中!
bm.s5-style.com

まとめ

スタビジ

ホームページを作成する際に、
 仕上がり状態のイメージ
を持っておくことで、制作もしやすくなります。

漠然とした形で進めると、なかなか前に進まない可能性があります。

また、仕上がりのイメージがある程度まとまってきたら、そのイメージを、
 紙やデータ
で整理しても良いでしょう。

データの場合は、エクセルでも良いです。
また、制作会社の場合は、下記のようなツールを使用することが多いです。

Figma(無料のプランもあります)

Figmaは、意味のある製品を生み出すための、業界をリードするコラボレーションデザインツール。デザイン、プロトタイピング、開発、フィードバック収集を1つのプラッ…
www.figma.com

以上、デザインの検討についてでした。

スタビジ