デザインについて

デザインについて

2023年5月17日

スタビジ

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

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


スタビジ

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

スタビジ

ホームページの仕上がり感は、
 デザインの質
によって、大きく左右します。

ホームページのデザインに関しては、
 レイアウト
 配色(色の設定、組み合わせ)
 フォント
 使用する画像

といった要因があります。

これらの要因をどのように設定するかは、
 感覚的な面
もあります。

ただ、
 見ていて心地よいデザイン
や、
 印象に残るデザイン
というのは、ある一定のパターンがあります。

デザインそのもののとらえ方に関しては、下記の書籍が参考になります。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なるほどデザイン

新品価格
¥1,980から
(2023/5/17 11:13時点)

また、具体的にホームページを作成する際には、
 実際のサイト事例
をみて、イメージに近いデザインのサイトを参考にする方法もあります。

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

スポンサーリンク

レイアウト

スタビジ

ホームページのレイアウトについては、
 主なパターン
が決まっています。

パソコンの場合は、
 全幅のレイアウト(ワンカラム)
もしくは、
 サイドバーを表示させる
のどちらかになります。

スマートフォンやタブレットの場合は、
 全幅のレイアウト(ワンカラム)
になります。

そのレイアウトの中で、
 どのようなコンテンツを配置するのか
を決めていくことになります。

ちなみに、会社のホームページの場合、現状は、
 トップページのレイアウトは、全幅のレイアウト(ワンカラム)
が主流になっています。

レイアウト

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

配色(色の設定、組み合わせ)

配色については、
 どんなイメージを伝えたいのか
によって、その組み合わせが変わってきます。

配色の決め方としては、
 配色のパターンをみて検討する
もしくは、
 参考となるサイト事例を見て検討する
の2つの方法があります。

配色のパターンに関しては、下記ページにその内容を説明しています。

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

また、サイト事例に関しては、下記サイトが参考になります。

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

フォント

スタビジ

フォントに関しては、下記の2つがあります。

ロゴデザインや、トップページのイメージ画像に使用するフォント
と、
サイト自体に設定するフォント
です。

ロゴデザインや、トップページのイメージ画像に使用するフォント

ロゴデザインや、トップページのイメージ画像のフォントは、
 サイトのイメージ上、重要な要素
と言えます。

ですので、ある程度は、こだわりをもってフォント選びをされることをお勧めします。
下記のサイトであれば、無料でロゴやイメージ画像をつくることができます。
(使用する素材や機能によっては、有料プランとなります)

Canvaで魅力的なロゴを数分でデザインしましょう。今すぐ開始!

サイト自体に設定するフォント

ホームページで使用するフォントは、デフォルトでは、
 ユーザー側の標準フォント
で表示されます。

ただ、ホームページのデザイン性を向上させるため、
 フォントを指定する
という方法があります。

これは、「Webフォント」というものを使用します。

webフォントには、複数の種類があります。

サイト自体にWebフォントを設定する手順としては、2つのパターンがあります。

ひとつめ

ひとつめは、
 HTMLとCSSに追記して使用する
と言う方法です。

ホームページの設定で、
 商用かつ無料で使用できるWebフォント(Google web fonts等)
が使用できる設定をします。

また、
 ワードプレスのテンプレート
のなかには、そういった設定が簡単にできるものもあります。
ただ、その場合は、設定できるフォントは限られています。

ちなみに、無料のテーマの
 ystandard
では、下記のフォントが使用できます。

 メイリオ・ヒラギノ角ゴシック
  游ゴシック
 明朝体

ふたつめ

ふたつめは、
 先にサーバーにフォントを設定して、それを使用する
というものです。

この場合、
 レンタルサーバー側で、Webフォントを用意しているサービス
があればそれを利用すると便利です。

例えば、エックスサーバーの場合は、下記ページに使用できるフォントの情報が記載されています。

www.xserver.ne.jp

この場合は、ホームページ側に、
 HTMLとCSSに、そのフォントを使用する為のコードを設定
します。
この設定は、ひとつめの方法を同じです。

注意点としては、
 フォントの読み込みの為、若干、表示速度に影響がでる可能性
があるということです。

使用する画像

スタビジ

トップ画像やアイキャッチ画像で、
 サイトの印象
も変わってきます。

また、それらの画像は、
 著作権
のことに注意する必要があります。

結論からいうと、
 商用で使用できる著作権フリーの素材
を使用されることをお勧めします。

素材を探される際には、著作権をクリアされていて、尚且つ、商用にも利用できるものから、
 サイトのイメージにあうもの
を選定します。

その際には、下記のようなサイトが便利です。

無料イラスト【イラストAC】 写真素材無料【写真AC】

まとめ

スタビジ

デザインに関しては、少なくとも、上記に記載したような要素に配慮していきます。

ただ、いろいろ細かいことを考えても、なかなか先に進まない可能性もありますので、やはり、
 イメージに近いサイト
を、
 ベンチマーク(参考指標)
として、イメージを固めていく方法が効率的と言えます。

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

スタビジ

この記事を書いた人

この記事は、「小規模なホームページ」や「新規の会社向けのホームページ」の作成をサポートしているスタビジ(株式会社クラスイエ)のスタッフが記載しています。
スタビジでは、良心的な費用で、ホームページづくりのお手伝いをしています。


ご相談はこちら

株式会社クラスイエ
〒270-1313 千葉県印西市小林北1-11-14 
Tel. 0476-77-9243 Fax. 050-3588-7306

お電話でのお問合せはこちら  
TEL;0476-77-9243
9:30~18:00(定休日;土日) 

メールでのお問合せはこちら


カテゴリー