ウェブデザインB 第11回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第11回

webdesignb11

サイト・ページタイプ別ウェブデザイン 後編

今回は前回に続き、ウェブサイトのタイプの違いをレクチャーしていきたいと思います。
参考ページのデザインテイストを元に自分の中でページデザインの方向を決め、
ワイヤーフレームからのデザイン制作に活かしてください。

ランディングページ(LP)

ランディングページの目的

まずはランディングページ(以下:LP)の紹介です。
その名の通り、飛行機の着地が語源であり、本来の意味では「最初にアクセスし到達したページ」のことです。
しかし一般的に広く認識されているLPは「訪問ユーザーをコンバージョンに至らせる」ためのページです。

LPの商材 目的
商品 商品注文やお問い合わせによる売り上げの向上。
イベント 参加申込みやお問い合わせによる参加見込み客の確保。
サンプルなどの体験 商品サンプルの申込みによる購入見込み客の確保。

「コンバージョン」は「成約」という意味ですが、購入やお問い合わせなど最終的な成果のことを指します。
つまりLPには、上記のように閲覧者の注文やお問い合わせなどのリアクションをよりダイレクトに受け取るための役割があります。検索エンジンの広告枠などのバナーのリンク先がほとんどLPなのはこのためです。

さらに上記のような目的を達成するため、1ページに情報を詰め込む必要があり1ページが非常に縦に長くなります。
ページが長くなるということはデザイン要素が非常に多く制作時間も長くなるので、費用的には通常のページ制作よりも高くなる傾向があります。クライアントに高い!と言われても、それにはれっきとした理由が存在するわけです。

ランディングページの参考サイト集

Web Design Clip [L] | LP・ランディングページのクリップ集
LPの最新デザインまとめ参考サイト|LP アーカイブ
LP(ランディングページ) | SANKOU! | Webデザインギャラリー・参考サイト集
ランディングページ集めました。

ECサイト(ネット通販サイト)

ECサイトの目的

ECサイトはもちろん、商品やサービスを提供するWebサイトのことを指します。

●ECサイトの定義
ECサイトとは、Eコマース(EC,E-Commerce)のサービスを提供するWebサイトの通称です。Eコマースとはネットを通じて行われるモノやサービスの売買の総称です。端的に言うと、ECサイトとはネットを使ったモノやサービスの販売サイトのことです。

●ECサイトの種類
ECサイトはモール型と自社サイト型に二分されます。モール型とは楽天市場、Amazon、Yahoo!ショッピング、ebayなどのモールに出店するタイプです。モール型のECサイトはモールが提供するシステムを利用し、決済もモールが代行します。ショップのひな型や店舗管理システムが用意されているので、出展者はECサイトを自分で構築する必要がありません。

一方、自社サイト型は自分でECサイトを構築するタイプです。全く何もないところから立ち上げるケースや、「ECサイト構築ツール・サービス」「ショッピングカート・サービス」を使ってつくり上げるケースなど、さまざまです。自社サイト型は自由度が高い半面、決済システムやセキュリティシステムなどを自前でつくる必要が生じます。

今さら聞けないEC通販サイトの基本とは?サイト運営に欠かせない常識集|ECのミカタ

上記の引用元ページにもありますが、重要なのはモール型サービスと自社サイト型サービスのどちらで運用するかの選択です。
最近は上記以外にも初心者でも簡単・即座にECサイトを作ることができるBASESTORESといったECサイトも存在します。

ECサイトに必要なもの

ECサイトはオンラインでの買い物ができなければ成り立ちません。
そのため決済システムやセキュリティシステムなど用意しなければいけないものがわんさかあります。
以下のページでは決済方法を紹介されています。

【徹底解説】自社ECサイトで使うべき9つの決済手段 | ebisumart Media

ECサイトの参考サイト集

ECサイト・オンラインショップ | Web Design Clip | Webデザインギャラリー・クリップ集
ECサイト・オンラインショップ | SANKOU! | Webデザインギャラリー・参考サイト集
» ECサイト| 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

ポータルサイト

ポータルサイトとは

ポータルサイトの利用者のメリットは、インターネット上に散らばっている多くの情報から必要としている情報を検索で探し出せるという点です。また、検索機能の他にも、天気やテレビ番組表、占い、株価など生活に役立つ情報を閲覧できるという点も大きな魅力です。
企業視点からのメリットを考えると、ポータルサイトを運用することによって、コーポレートサイトでは接触が難しいユーザーに接触する機会が得られて、集客効果が見込めます。
利用者・企業ともにメリットがあるので、数多くのポータルサイトが作成されているのです。

ポータルサイトとは?例を用いてわかりやすく解説します【2020年最新版】 | 発注業者比較なら【アイミツ】

ポータルサイトは普段からよく目にしていると思いますが、代表的なものとしてYahoo!やGoogleがありますね。
ブラウザを使ってインターネットにアクセスして最初にアクセスするページが「ポータルサイト」と言うことになります。

検索ウィンドウだけではなく、ニュースやカテゴリなど様々な情報を豊富に表示しているのがYahoo!の特徴、
一方その他の情報は極力表示せず、検索ウィンドウのみを表示している検索特化型ポータルサイトがGoogleの特徴です。

他にも、外食系では食べログ、美容系ではビューティーパーク、旅行系ではじゃらん、その他、医療系や就職系などなど・・・カテゴリごとに様々な情報をまとめているものもポータルサイトで、実は数え切れないほどに存在しています。

ポータルサイトの参考サイト集

ポータルサイト « Webデザイン一覧 « 【S5-Style】Webデザインギャラリー / Web Design Inspiration
ポータルサイト・メディア・マガジン・情報サイト | SANKOU! | Webデザインギャラリー・参考サイト集
» ポータルサイト| 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

ウェブデザインB 第11回

Photoshopの基本設定

今回もまず基本設定から行いましょう。
Adobe Photoshop CCを起動してください。

Webデザインの構築① 配色のコツ

配色の基本は3つの色

今回は、ページデザインを始める時に誰しもが頭を悩ませる配色についてお話しします。

配色の何が難しいかというと、選択した色によってサイトの雰囲気やイメージが大きく変わってしまうため、選択を誤ってしまうと使いやすさ・機能性が損なわれてしまうからです。

特にECサイト(オンラインショッピングサイト)の場合はサイトの雰囲気やイメージも売上に直結する場合が多く見られます。

Webサイトを構成する色(配色)は基本的に3つです。
それぞれ、ベースカラー、メインカラー、アクセントカラーと呼ばれており、この3色を基本に構成を行っていきます。

3つのカラーには、最も美しいとされる面積比率があります。
それが以下の比率です。

ベースカラー メインカラー アクセントカラー
70% 25 5%

ベースカラー:70%、メインカラー:25%、アクセントカラー:5%、
となっていますが、具体的にこの3つはどういうものなのか?を、
リニューアル前の中国学園のウェブサイト(以下旧サイト)を参考にしながら解説していきます。

メインカラー

メインカラーとは?

メインカラーは、サイトのデザインを組む際に一番最初に決める色で、
サイトのイメージを決定づける最も重要な色になります。

旧サイトの場合はロゴやナビゲーションに使われている紫色ですね。

webdesignb11_03

この紫がもし青だったらどうでしょう??

webdesignb11_04

たいぶ印象が変わりました・・・。

メインカラーの選び方

メインカラーの選び方ですが、
企業がブランドイメージカラーを持っていれば、たいていはその色を使えばいいでしょう。
ロゴで使われている色がメインカラーになることが多いのですが、複数色のロゴなら最も面積の多い色を使うことが一般的です。

しかし、ブランドイメージカラーなどがまだ確立されていない場合は新しく考えていかなければいけません。

まずヒアリングした内容から、ターゲットユーザーに「どんなことを伝えたいか?」や「どんな印象を与えたいか?」などを抽出し、オンラインのカラーチャートツールなどを使用して希望に沿った色を選定していきます。

ベースカラー

ベースカラーとは?

ベースカラーはサイトの背景色です。
面積比率が最も高く、ページ全体の雰囲気を作り出す役割を持っている色です。

ベースカラーの選び方

ベースカラーを選ぶとき、白や薄い色などを選択することが多いですが、
一番簡単な方法は、文字がどれだけ見やすいか?を考えることです。

Webサイトには当然ながら文字情報(コンテンツ)が載りますよね。
ということは、背景色の上に文字色が載ることになります。

例えば、旧サイトの学長メッセージのページを見てみましょう。

webdesignb11_01

文字色が黒(#333333)、背景色(ベースカラー)が白(#ffffff)になり、
色と色がの対比をなして文字がとても見やすいです。

例えば、この背景色を赤(#ff0000)に変更してみると・・・

webdesignb11_02

文字色が黒(#333333)、背景色(ベースカラー)が赤(#ff0000)になり、
文字がとても見えにくく読んでいたら疲れてしまいますよね。

このようにベースカラーは、
使う文字色によってその対比をなす色を選択するといいでしょう。

また、メインカラーの明度を思い切り上げたものも使いやすいです。
ロゴの紫をメインカラーにするなら、そこに白を乗せ限りなく白に近づけてしまえば、
簡単にベースカラーを選定することができます。

アクセントカラー

アクセントカラーとは?

アクセントカラーはページ内でのアクセントとして使われる色です。
しっかりと目立たせて、最も目を引くものでなければいけません。

アクセントカラーを使用するシーンとしては、
お問い合わせボタンなど特に目立たせたいものに使うことが多いです。

アクセントカラーの選び方

アクセントカラーは、面積比率5%しかありません。
それだけに最も目立つ色が必要になります。

ベースカラーとなる色の対比をなす色が、
メリハリを生んで目立ちやすいため好ましいとされています。

ただアクセントカラーは全体の色味のバランスを見ながら決めてしまえばいいと思います。

色の持つ意味

ベースカラー・メインカラー・アクセントカラーがどういったものかを知ると、
自分が制作するWebサイトのデザインがどんな配色になるのかが見えてきます。

色は、色自体の意味や色が与える印象がそれぞれ違います。
下の画像をみてください。

webdesignb11_05

参考:色相環とトーンの表を使って色の意味をデザインに生かそう – Webデザイン – acky info

左の円は、円の外側から内側に向かって順に、ベースカラー(70%)、メインカラー(25%)、アクセントカラー(5%)を示し、また右の表は色がそれぞれ持つ意味をキーワードで並べているものです。

こうしてみると同じキーワードが複数の色にまたがっているものもありますね。
この表を参考にいろいろ試してみて、個性的な配色にチャレンジしてみましょう。

本日のまとめ

デザイン制作の現場に限らず、「色」を決めるのは本当に難しいですよね。

デザインよりももっと身近なものであれば、毎朝着る服を選ぶ時も・・・雑貨屋さんでマグカップを買う時も・・・何をどの色にするかは本当に悩みの種です。

ただし、理論的に考えることでより簡単に配色の答えを出すことができるようになります。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE