読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

配色・レイアウトを確定する為のコンセプトメイキングのコツ

color-patterns

Webデザイナーとして依頼を受けると、「コンセプトは…」という話が出ることがたまにあります。ただ、Webデザイナーの中にはコンセプトについて細かく教えられてない人もいます。

そこで、今回はコンセプトの説明から、コンセプトシートの作り方やメイキング方法・運用法などをお伝えしていこうと思います。

コンセプトとは

まず、コンセプトとは何かについておさらいをしておきましょう。コンセプトとは「全体を貫く基本的な概念」です。

「清潔感」とか「明るさ」「暖かさ」「優しさ」みたいに表現をする人もいれば、もっと具体的にする人もいます。

ただ、僕が個人的に感じているのは、マーケティング用語として「コンセプト」と言っている時と、Webデザイナーに向けて「コンセプト」という時は、意味合いがちょっと違うかな?ということです。

Webデザインにおけるコンセプト

基本的に、マーケティングだろうとWebデザインだろうと、クライアントが依頼してくる「コンセプト」は一緒です。

(提出してくるコンセプトの文言が変わるわけではないということです。)

ただ、Webデザイン的な意味で使われるコンセプトとしては「お客さんにどんな印象を持ってもらいたいか」という意味合いが強いのです。

一方で、マーケティング用語としては「お客さんに最終的にどうなって欲しいか」の方が強い気がします。

コンセプトの例

とはいえ、コンセプトがどのようなものか、まだイメージがつきにくいと思うので一つ紹介します。

「価値の交換をよりシンプルにし、世界中の人々が最適な経済活動を行えるようにする」

base - 配色・レイアウトを確定する為のコンセプトメイキングのコツ

これは、BASEさんのミッションです。(コンセプトではなくてすみません。)

ここから先は僕の妄想なのですが、このミッションからサイトのコンセプトを作るとしたら「シンプルさ」「先進」などが必要になるかなと思っています。

メイキングの手順

それでは、実際にコンセプトからwebデザインに落とし込んでいく過程を話していきます。

1.コンセプトを書き出す

まずは、紙かなにかに書き出しましょう。口で言っただけだったりすると、お客様から見た印象が分かりにくい上に、時間が経つと細部の表現が変わる時があります。

特に、表現が変わってしまう時が怖いので、形に残しておくことをオススメします。

2.カラーシートを作成する

次は、カラーシートを作りましょう。調べてみた所、カラーシートと呼んでいるのは僕だけかもしれないのですが、サイトに使う色をまとめておいたものです。

カラーコードまで含めて全て保存しておきます。エクセルやスプレッドシートにまとめておくといいでしょう。

3.デザイン規定(のようなもの)を作る

次は、サイト全体のデザイン規定を作っておきましょう。

デザイン規定とは言っても、そんなに固くならなくて大丈夫です。

「グラデーションは使うかどうか」「アニメーションはいれるかどうか」などは最低限決めておくと良いですね。

これがないと、特定のページだけ雰囲気が異なったり、印象の違うボタンができたりしてしまいます。

参考程度にGoogleのマテリアルデザインのガイドラインを見てみるといいと思います。

こういうものがあると、一気にデザイン案が決めやすくなります。

4.画像を選抜する

最後に画像を選抜しましょう。画像を最後に選ぶようにしたのには理由があります。

画像を決めてからカラーシートを作ったり、デザイン規定を考えたりすると、その画像にあわせたものを作りかねないからです。

コンセプトシートを用意しておこう

僕が個人的に行っていることを紹介します。

今回のようにコンセプトから色を決めたり、デザインを決めたりしていると、毎回同じような手順で具体化していってることに気づくはずです。

そこで、Webデザイナーとしての準備物として「ヒアリングシート」に加えて「コンセプトシート」を揃えておきましょう。

コンセプトシートの構成は、オリジナルで作ってかまわないと思うのですが、僕が入れているのは

  • コンセプト(無ければミッション)
  • サイトを通してユーザーに与えたい印象
  • メインカラー・サブカラーの指定(無ければ無し)
  • 動きを入れたいか入れたくないか

みたいなものです。

メイキングから運用まで

実際の所、コンセプトをもとにサイトを作った後、その後の運用はクライアント様が全て行うのが普通です。

ただ、Webデザイナーが稀に運用部分も一緒にやることがあるので、説明を加えておきましょう。

運用中に気をつけておかないといけないポイントは、”後から追加する要素”です。

Webサイトを立ち上げる頃は、コンセプトを意識して画像を選んだり、文章を選んだりするので、まとまりがいいのですが、運用している間にごちゃごちゃになってくることがあります。

僕らとしてできることは、Web担当者にアドバイスしておくことくらいですが、言うのと言わないのでは全然違うでしょう。

まとめ

いかがでしたか?今回は、サイトのコンセプトの話しから、コンセプトシートや運用についても少しだけ説明しました。

徐々にWebデザイナーはデザインの知識だけでなく、こういったマーケティング的な話しもできるようになってくるといいですね。

最後までお読み頂き、ありがとうございました。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら