はじめに

こんにちは、Itoopの佐藤です。

季節の変わり目ということもあり、暖かい日が続いたかと思ったら急に寒くなる日もあるので、引き続き体調に気を付けて過ごしていきましょう。

今回はWebデザインの「色」について書いていきます。

過去にレイアウト編についてまとめていますので、そちらもご参照ください。

関連記事：【HP作成】Webデザインの基礎！【レイアウト編】

色の重要さ

Webデザインを作る上で配色は非常に重要で、Webサイトを見る人の心を動かす要因の1つでもあります。

レイアウト編でも参考としていた「いちばんよくわかるWebデザインの基本きちんと入門」という本でも各色についてのイメージをわかりやすく学習することができます。

URL：https://www.sbcr.jp/product/4797389654/

各色の与える印象

各色が与える印象についてはそれぞれ以下のようになっています。

赤

情熱、興奮、注意などの意味を持ち、強い印象を与えて購買意欲をかきたてる効果がある

黄

楽しい、元気、好奇心などの意味を持った色。黒と組み合わせて警告を促す色としても扱われる

緑

自然、安心、平和などの意味を持った色。山や植物といった自然を表す色であり、リラックス効果を生む色でもある

青

清潔、冷静、誠実などの意味を持った色。海や空といったイメージもあり、安心感を与える

ピンク

可憐、好意、幸福などの意味を持った色。トーンや配色によって対象年齢を変えることができる

黒

高貴、洗練、不安などの意味を持った色。様々な色に会う色で、組み合わせによって色をより明るく見せる効果もある

白

清潔、洗練、献身などの意味を持った色。他の色を引き立てる効果を持ち、ベースカラーとして多く採用されている

おわりに

いかがでしたでしょうか。

今回はよく見かける色の与える印象についてまとめましたが、色によってもたらされる効果は様々あることをあらためて感じました。

作成するデザインに応じて、適切な色を選択しましょう。

当記事がHP作成のお役に立てれば幸いです。

はじめに

こんにちは。Itoopの佐藤です。

厳しい寒さが続く季節になってきましたね。体調管理はしっかりした状態で年末年始を迎えましょう。

前回に引き続き、レスポンシブ対応について書いていきます。

前回記事：【HP作成】Webデザインの基礎！【レイアウト編⑤前編】

後編は具体的なレイアウトについて説明します。

レスポンシブWebデザイン向けのレイアウト

レイアウト編③にて「スマートフォン」や「タブレット」など多くのデバイスで対応しやすい「グリッドレイアウト」について説明いたしました。

今回は、グリッドレイアウトを用いたレスポンシブ対応について説明します。

レイアウト編③：【HP作成】Webデザインの基礎！【レイアウト編③】

各デバイス毎のレイアウト

各デバイス毎のレイアウトを検討する際には、PC向けのレイアウトから作成し、タブレット→スマートフォンと作成していきます。

1.PC向けのレイアウト

ヘッダーを配置し、中央部にメインコンテンツ、サイドコンテンツが配置され、フッターが配置するのがPC向けのレイアウトにおいては一般的です。

2.タブレット向けのレイアウト

タブレットにおいては、PC向けのレイアウトではサイドコンテンツが入りきらない場合があります。

その場合はメインコンテンツを横一杯に表示し、サイドコンテンツをその下に配置することで、タブレット向けに最適化されたレイアウトになります。

3.スマートフォン向けのレイアウト

基本はタブレットとそれほど大差はありません。しかし、表示するコンテンツをタブレット向けのレイアウトと同じ量にすると縦長になりすぎてしまうことがあります。

一部内容を非表示にして縦長になりすぎないようにすることも大切になります。非表示にするかどうかは、それぞれの目的に応じて選択しましょう。

おわりに

デバイス毎のレイアウトについて説明しましたが、グリッドレイアウトだとデザインの段階で各デバイス毎のレイアウトを想定しやすくなります。

どのユーザーがどのデバイスを用いて見ているのかを考えて各デバイス毎のレイアウトを作成していきましょう。

「Webデザインの基礎【レイアウト編】」は以上になります。当記事が、Webデザインに触れ始めた方々の参考になれば幸いです。

はじめに

もうすぐ12月ですね。年末は忙しくなりがちですが、体調に気を付けて過ごしていきましょう。

今回は「レスポンシブ対応」について前編と後編に分けて説明します。

前編は、レスポンシブ対応の説明と、考慮するべき点についてです。

そして、レイアウト編はこれで今回が最後となります。

最後までお付き合いいただけますと幸いです。

→前回記事：【HP作成】Webデザインの基礎！【レイアウト編④】

レスポンシブ対応とは

レスポンシブ対応とは、異なるデバイスでもページのレイアウトやデザインを調整して表示する手法のことで以下2つのメリットがあります

メリット1.デバイス毎にHTMLファイルをつくらないため、1つのHTMLを修正することでどのデバイスで見ても修正が反映されている

これによって、各種デバイスでのHTMLを修正しなければならなかったり、修正もれが発生してしまうといった事態を防ぐことができます。

メリット2.同一のHTMLを利用することからURLが変わらないため、SEO的にもメリットがある

Googleもデザインパターンとしてレスポンシブ対応を推奨しています。

参考：Google検索セントラル,モバイル設定を選択する（https://developers.google.com/search/mobile-sites/mobile-seo/）

レスポンシブ対応を採用する際に考慮するべきこと

様々なメリットもあり、Googleも推奨しておりますが、考慮するべきこともあります。

● 画像サイズは、PC画面でも綺麗に見えるように、大きなサイズを利用する

画像の容量が大きくなるため、スマートフォンでの閲覧時に表示速度が遅くなってしまうことがある

● デザインや実装を行う前に、全てのデバイスでの表示を考慮する

各種デバイスでのブラウザチェック、各デバイス固有のバグ対応や適したレイアウト調整が必要になるため、工数がかかる

おわりに

レスポンシブ対応には良い点はあります。

しかし、何が何でもレスポンシブ対応と決めつけるのではなく、サイト全体のデザインやどのデバイスを使うユーザーに向けてデザインすることが重要になります。

次回は後編、レスポンシブ対応に適したレイアウトについて説明します。

寒い日が続くようになり、鍋が美味しい季節になってきましたね。暖かいものを食べて体調を整えていきましょう。

今回も、引き続きレイアウトについてまとめていきます。

第4弾は「視線の導線」についてです。

→前回記事：【HP作成】Webデザインの基礎！【レイアウト編③】

視線の流れを意図したものにする

人は、何かの情報をみるときは左上から右下へ視線が流れていきます。

左上、左下、右上、右下の4つのエリアに分けて考えたとき、特に目に入りやすい左上と右下に重要な要素を配置すると、意図した通りに情報を伝えやすくなるでしょう。

視線誘導における2種類のレイアウト

視線誘導を意識したレイアウトには以下の2つがあります。

①Z型レイアウト

視線の流れが「左上→右上→左下→右下」とＺの形に似ているために、「Z型のレイアウト」と呼ばれています

左上から重要な要素を配置していくレイアウトで、この手法はコンテンツを大きく見せたいプロモーションサイトやスマートフォンアプリなどでよく用いられています。

②F型レイアウト

ヘッダー部にあるロゴやナビゲーションへ視線が移動し、その後見出しや記事へと下に視線が移動していく手法です。

主にECサイトやブログなど、最近のWebサイトでよく用いられています。

おわりに

視線の流れですら、意図されたものがあるということに初めは驚きました。

だからこそ、視線の流れを意識したレイアウトにすることで意図した通りの情報を与えられるのが気付きでした。

これまでの記事で書いたものも駆使して、より良いHP作成に貢献できれば幸いです。

はじめに

季節の変わり目ということもあり、寒暖差が激しくなってきましたね。体調管理をしっかりしていきましょう。

今回も前回に引き続きレイアウトについてまとめました。

第3弾は「よく用いられる2つのレイアウト」についてです。

前回記事：【HP作成】Webデザインの基礎！【レイアウト編②】

よく使われるレイアウトとは

Webデザインにおけるレイアウトを大きく分けると2つあります。

①グリッドレイアウト
②フリーレイアウト

今回はこの2つについて説明していきます。

①グリッドレイアウトについて

グリッドは「格子状」という意味で、グリッドレイアウトとは、Webデザインにおいては垂直方向と水平方向に画面を分割してレイアウトしていく手法を指します。

グリッドレイアウトの利点は以下の通り。

• 事前にグリッドを決めておくことで、レイアウト作業が簡単になる
• 多くの要素が入ったデザインであっても統一性を持たせることができ、整理されたレイアウトに仕上げられる
• スマートフォンやタブレットなど多くのデバイスに対応しやすい

スマートフォンやタブレットで閲覧するユーザーも増えてきていることから、最近では多くの企業サイトやECサイトで用いられている定番のレイアウトになっています。

②フリーレイアウトについて

フリーレイアウトとは、あらかじめ決められたページ幅でレイアウトしていく手法で、掲載する情報量が多いPC専用サイトなどによく用いられます。

フリーレイアウトにおける利点は以下になります。

• どのブラウザ幅でもこちらが意図した通りのレイアウトを見せられる
• 一定の幅で決められているため、閲覧するユーザーの環境をPCに限定できること

固定幅の要素(画像やフォーム、動画など)との兼ね合いに悩むことなく、自由な表現が可能なレイアウトになります。

おわりに

2つのレイアウトを紹介しましたが、コンテンツの内容や対象となるユーザーのデバイスによってどのレイアウトが適切かは変わってきます。

更にスマートフォンの普及によって、Webデザインも多様化してきました。

ターゲットやコンセプトに合わせて使い分けていきましょう

はじめに

こんにちは。Itoop（アイティープ）の佐藤です。

最近は、気温もずいぶん下がって涼しい日が多くなり、過ごしやすくなってきましたね。

さて、今回もWebデザインの基礎「レイアウト」について書いていきます！

前回は、「レイアウトとは何か？」を書きましたが、今回はレイアウトの原則について書いていきます。

※前回記事：【HP作成】Webデザインの基礎！【レイアウト編】

レイアウトの原則とは

レイアウトには、4つの原則があります。

前回、レイアウトは「感覚で文字や画像を配置するのではない」ということをお伝えしました。

これから紹介する原則は、規則性のある美しいレイアウトにするための具体的な施策になります。

4つの原則について

1.近接の原則

関連する項目をまとめてグループ化させることです。

以下2つの例をご覧ください。

例①：見出しと本文を均等な感覚で配置した場合

例②：見出し①と見出し②それぞれまとめた場合

例①では、見出し、本文、補足すべてが均等な感覚で配置されています。

一見きれいなレイアウトに見えるものの、見出しと内容の対応がわかりにくくなっています。

一方、例②は、見出し、本文、補足をまとめました。

このように、位置関係を明確にするだけで、視覚的に知覚的にも認識しやすいレイアウトを作ることができるようになります。

2.整列の原則

ページ上のものを意図的に配置し、要素を統一化すること

例③：規則性を持たせずバラバラに配置した場合

例④：名前とアドレスを分けて全て左に配置した場合

例③のように文字が揃っていないだけでも、名前やアドレスなどが見づらい配置となっています。

そのため、全体としても統一感のないレイアウトとなっております。

例④では、要素をまとめてすべて左側に整列させることで統一感を出しました

このように、ルールを適用して統一化することで美しく見やすいレイアウトになります。

3.反復の原則

全体を通して、デザイン上の何らかの特徴を繰り返すことです。

例えば、全てのページに同じヘッダーやナビゲーションが使われているページは、反復の原則に沿って作られたデザインと言えます。

反復の原則を取り入れることによって、ユーザーがサイトの使い方を覚える時間を短縮させ、より早くサイトに慣れ親しんでもらうことに繋がります。

4.対比の原則

全体の一部を揃えずに対比させることで要素に意味を持たせ、ユーザーの目に止まりやすくする原則です。

対比のことをデザイナーの間では「コントラスト」と呼びますが、要素の違いがはっきりしている/いないによって「コントラストが強い/弱い」と表現し、対比の原則はコントラストをはっきりさせる原則になります。

例⑤：本文に対して見出しを大きくした場合

上記例は、例②の見出しのフォントサイズをより大きくしたものになります。

見出しを大きくすることで、まずは見出しに目を止まらせることで本文へと誘導し、文章を読ませることができます。

大事なのは思い切って要素の違いを出すことです。

さらに重要なのは、サイトの中で特に目立たせたい要素を明確にして、その要素にのみ対比の原則を用いることです。

特に、色の明暗によるコントラストの付け方はよく用いられており、文字色と背景色を変更するだけでも大きな違いが生まれます。

おわりに

僕は、この原則を用いて規則性を持たせることで、以前より整理された美しいデザインにすることができるようになりました。

この原則は、Webデザインに限らず、名刺やグラフィックデザイン、ビジネスの資料にも用いることができます。

当記事が、Webデザインに触れ始めた方々の参考になれば幸いです。

こんにちは。Itoop（アイティープ）の佐藤です。

9月に入りましたがまだまだ暑い日が続きますね！僕はWebデザインの基礎を学ぶために「いちばんよくわかるWebデザインの基本きちんと入門」という本を読みました。

URL：https://www.sbcr.jp/product/4797389654/

現在WordPressについての記事を書いていますが、Webデザインの基礎についても勉強することが大事だなと感じることがたくさんありました。

今回はWebデザインの基礎である「レイアウト」について書いていきます！

※WordPressの記事についてはこちら：「【 WordPressとは？ 超超超入門編 ＜第1弾＞】IT業界3ヶ月目のエンジニアがWordPressについて調べてみた！」

レイアウトとは

「レイアウト」とは、デザイン・編集・設計などにおいて「何を、どこに、どのように配置するか」ということを意味します。

大事なのは、いずれも感覚で文字や画像を配置するのではないということです。

関連するものを近くに配置したり、同じフォントや色を使用したり、特に重要な項目を差別化したり、ポイントをしっかり意識することで、見やすく美しいレイアウトを作ることに繋がります！

なぜ見やすいレイアウトを作る必要があるのか

見やすいレイアウトを作る理由は、ユーザーが欲しい情報を的確に伝えること。

サイトに訪れたユーザーに必要な情報を正しく伝えるためにも、的確なレイアウトを作ることはとても重要です。

上手にレイアウトすることで、サイトの信頼度が上がったり、ユーザーの心を動かして成約にいたったり、それぞれの目的に繋げることができます。

レイアウトの具体例

・よく見かけるWebサイトのレイアウト

ページ上部にヘッダーがありその下にメインコンテンツとサイドコンテンツ、そして最後にフッターがくる構成になっているそうです。※以下画像参照

ヘッダーにはサイト自身を象徴するロゴやナビゲーション、検索フォームなど。

メイン部分には文字通りサイトのメインとなるコンテンツ。そしてサイドにはメインコンテンツの補足。

フッターにはお知らせやコピーライト、アクセスマップ。

というのがよく見かけるWebサイトのレイアウトになります。

これは視線の動き(動線)を考慮した作りになっているからです。

たとえば、動線を考慮せずにサイドコンテンツがヘッダーの場所に配置されているようなレイアウトだとしたら、いきなりお知らせや関連情報などの表示を見ることにとなります。

お知らせやメインコンテンツの関連情報を最初に見ても、「何のサイトだろう？」と見る側を混乱させてしまう可能性があります。

だからこそ、初めてサイトに訪れたユーザーにもわかりやすいように、どう行動してどういう体験をしてもらうかを意識してレイアウトを作る必要があるんですね。

おわりに

「デザイン」と聞くとセンスが必要に思えたり、難しく見えるかもしれません。

しかし、ポイントを押さえてレイアウトするだけで誰でも良いWebサイトを作ることができます。

引き続きレイアウトについての記事を書いていきますので、Webデザインについて触れ始めた方々の参考になれば幸いです。

それでは本日も良い一日をお過ごしください。