3.ワイヤーフレームを作る

こんにちは!karen.k デザイナーのカレンです。
初めてのWordpressシリーズ、第4弾の今日は、3.ワイヤーフレームを作るです。

ワイヤーフレームは、サイトの設計図です。ワイヤーフレームを作ることにより、サイト制作を最短距離で無駄なく進めることができるようになるので、少し面倒でも、必ずワイヤーフレームを作りましょう。

ワイヤーフレームとは?

ワイヤーフレームは、サイトの設計図です。と言われてもピンと来ないと思いますので、このサイトのTOPページのワイヤーフレームを実際に見ていきましょう。

ワイヤーフレーム

一目見ただけで、とこにどの要素が掲載されるのかがわかりますよね。こういった設計図を作ることで、これから制作するサイトを”見える化”し、掲載内容の選定や、作業の進め方の段取りなどを整え、サイト制作を最短距離で進めることができます。ご自身でサイトを作る時はもちろん、外注でサイトを作る際にも、ワイヤーフレームをしっかり作り込んでから制作に入ることがとても大切です。

ワイヤーフレームの作成手順

では、実際にワイヤーフレームを作っていきましょう。ワイヤーフレームを作る手順は以下の2STEPです。

情報を整理する
情報をレイアウトする

 情報を整理する

まずは、WEBサイトに載せたい情報を整理しましょう。ピックアップ→グルーピング→ランキングの順で行いますが、書き込んだ内容を消したり、移動させたりしますので、紙ではなく、パソコンのメモ帳などで行ってください。

ピックアップ

サイトに載せたい情報を乱雑で結構ですので書き出してください。何を書けばいいのか全く見当がつかない場合は、同じような業種のサイトを探して、そのサイトに書いてあることを参考にするといいです。その時注意して頂きたいのが、ただ同じ業種のサイトを探すのではなく、ご自身が好きだなと思うサイトを探して下さい。サイト=情報=ブランドです。どんな情報を載せるかがとても大切になってきますので、参考にするサイトはいつも丁寧に選びましょう。

グルーピング

グルーピングとは、性質の似ている情報をグループ分けしていくことです。例えば、自己紹介や商品紹介に関することは「ABOUT」その事業に対する思いやこだわりなどは「MESSAGE」営業時間などの店舗情報は「CONTACT」といったように分けてください。このようにグループ分けをすることで、サイト上で情報が分散してわかりにくくなるのを防ぎます。

ランキング

サイトの目的を考え、サイトに載せる情報の優先順位を決めます。私のサイトの場合は、デザイナーを探している人に向けているので ①デザイナー紹介(ABOUT) ②実績紹介(PORTFOLIO) ③お問い合わせ ④アート作品(ART WORK) ⑤SNSリンク(INSTAGRAM) といった順になっています。お問い合わせフォームは、情報を見たい人にとっては邪魔になりますので、別ページに設置し、PORTFOLIOのセクションの下に「CONTACTボタン」を設置しています。別ページに移動するのが面倒だ、という方は同じページにお問い合わせフォームを設置することをオススメします。

 情報をレイアウトする

情報の整理ができたら、レイアウトを考えていきましょう。
部屋の間取り(キッチン、リビング、ダイニング、洗面所、トイレ etc…)のように、サイトの設計図にもある程度の間取りがあります。代表的なものは、HEADER / NAVI / BODY / FOOTERです。

レイアウト

キッチンは料理をする場所、リビングはくつろぐ場所と、間取りに役割があるのと同じように、HEADER / NAVI / BODY / FOOTERにも役割があります。

HEADER

HEADER(ヘッダー)は、サイトの看板の役割があり、タイトルやロゴが置かれます。また、メインビジュアルを置くことで、サイト全体の印象を作る役割もあります。雑誌や本の「表紙」、百貨店の「外観」のようなイメージです。この部分でサイトの第一印象が決まるので、とても重要な部分です。

NAVI

NAVI(ナビ)は、HEADERの要素の一部と考えられることが多いですが、とても大切なパーツなので今回は、HEADERと分けて考えます。NAVIは名前の通り、ナビゲーション、案内の役割があります。雑誌や本で言うところの「目次」、百貨店のフロアガイドのようなイメージです。ほとんどのサイトが複数のページで成り立っています。ユーザーを目的のページに誘導するための重要な役割があります。ここは、常にユーザーの目に触れておきたい場所なので、固定デザイン(常に画面に表示されていること)にするのがオススメです。

BODY

BODY(ボディ)は、サイトのコンテンツ部分です。これ以上説明はないです!笑 ほとんどの情報をこのBODYに配置することになります。BODYのレイアウトは、重要度が高い順に上から配置していきましょう。

FOOTER

FOOTER(フッター)は、サイトの一番下に表示される”補足”のような箇所です。FOOTERはサイトによって役割がかなり違ってきますので、いくつか例をあげながら説明をしていきます。

 ナビゲーションとして

阪急阪神フッター

阪急阪神ホールディングス

サイトのページが多いサイトの場合、ナビゲーションとして使われることが多いです。カテゴリーごとに整理されておおり、ユーザーが求めている情報にたどり着きやすくなります。

 重要ページへのリンクとして

LUCUAフッター

LUKUA大阪

会社概要や、プライバシーポリシーなど、サイトのコンテンツとしての重要度は低いが、一部のユーザーにとって重要なページのリンク集として使われることもあります。LUCUA大阪は、ショッピングセンターなので主なコンテンツは店舗情報やイベント情報です。プライバシーポリシーやサイトポリシーなど、ほとんどのユーザーにとって興味がない情報をフッターに設置することで、必要のない人にとっては煩わしくない方法で、必要な人が迷わずたどり着くための導線が作られます。また、サイト運営者側がユーザーに訪問してほしいページのリンクを載せておくこともあります。

 お問い合わせ情報など

歯医者フッター

新大阪ミナミ歯科クリニック

個人ビジネスの方のサイトで一番多いのが、お問い合わせや店舗情報への導線として使われることです。サロンなど、店舗を持っている方はBODY部分だけでなく、FOOTERにも店舗情報をまとめておき、ユーザーがどのページにいても店舗情報にたどり着ける導線を作っておくといいですね。

以上のことを踏まえて、どの情報をどこに配置するのかを考えてみましょう。ある程度決まったら、紙とペンでワイヤーフレームを書いていきます。書き方は、自己流でOKです。ご自身でどこに何があるのかわかるように書ければ大丈夫です!

2.トンマナ(Tone & Manner)を決める

こんにちは!karen.k デザイナーのカレンです。

早くも3記事目になる「初めてのワードプレス」今日は2. トンマナを決めるです!トンマナを語るには、沢山の予備知識が必要、かつ、考えるべきことも膨大にあるのですが、ボリューミーになりすぎないよう、初心者のサイト制作に必須のpointを厳選して書いていきます。

今日の内容はいつもに増してサイト制作初心者の方に向けて書いています。仕事としてデザイナーをしたい方/している方は、デザインを勉強するためだけにこの記事を参考にし、実際の案件ではこの方法を使用しないでください。腕が鈍り成長も止まります。「初めてのワードプレス」シリーズがひと段落したら、デザインコラムを書いていきますので、そちらをご参照ください。

トンマナ(Tone & Manner)とは?

トンマナは「Tone & Manner(トーン&マナー)」の略で、デザインの一貫性を保つための“ルール”のことです。ブランディングの為にとても重要で、ルールをあらかじめ決めておくことで、一つの印象(ブラントイメージ)を作ることができます。例えば、karen.k が目指すブランドイメージと、それを達成するためのトンマナは以下のようになります。また、ブランドイメージがそのままターゲット層になります。

ブラントイメージ
 ・シンプルモダン/おしゃれ
 ・女性らしい柔らかさ
 ・丁寧/こだわり/ゆとり

トンマナ
 ・基本の色は白とグレーで全体的に淡いトーン
 ・差し色は①ピンク②水色③オレンジ④グリーン
 ・フォントは全てゴシック体
 ・文字の行間は2.4px開ける
 ・大見出し(h1)32px/中見出し(h2)24px/小見出し(h1)20px/本文(p)16px
 ・ですます調で丁寧な日本語

リストにしてあげると、たくさんのルールがありますが、初心者のみなさんがまず一番に考えるべきことはブランドイメージとそれを表現するための色合い/色のトーンです。それ以外の項目は頭の隅に置いて、まずは色合い/色のトーンを決め、サイト全体を通して統一させることを意識しましょう。

色合い/色のトーン(Tone)を決める

では、実際に色を決めていきましょう!好きな色は青と黄色なので、青をベースに黄色をちょろっと……

ちょっと待ってください!!

色合いを決める際に初心者が最もやってはいけないことは、お手本を見ずに自分の感覚だけで決めてしまうことです。色は色鉛筆のように12種類だけではありません。微妙な違いを含めると数えきれない数の色が存在します。青と黄色の二色を取っても、どのトーンの青や黄色を使うかで印象はかなり変わってきます。色合いについてもっと詳しく書きたいのですが、日が暮れてしまうので、簡単に綺麗な色合いを決める方法をご紹介します。

簡単に綺麗な色合いを決める方法、それは、参考サイトを探すことです。そして、その参考サイトの色を真似ましょう。そんなのパクリじゃないかって?デザインは、パクってパクってパクリまくっていいとこ取りをしてより良くなっていくものです。デザインだけではなく、人間の所業は全てそうではないでしょうか?またこんなことを書いていると、進まないので話を戻しますが、参考サイトを探すのにはピンタレストがオススメです。

探し方は、まず、あなたが作りたいブランドイメージを言語化しましょう。私の場合は「シンプルモダン/おしゃれ」「女性らしさ」「丁寧/こだわり/ゆったり」です。言語化できたら「サイト おしゃれ デザイン」「サイト レディース デザイン」「サイト シンプル デザイン」といった具合に、キーワード検索をしてください。検索結果の中からあなたの好きなサイトデザインを1つピックアップして、そのサイトの色使いを参考に色を決めていきましょう。

これだけでOKです。難しいことは考えずに、最短距離で進みましょう。カラーコーディネートの勉強をする必要はありません。色は#f4f4f4という具合に6桁のアルファベットと数字で表されます。目視で似た色を選択するのではなく、1色1色コードを確認して完コピしてください。サイト内の全ての色を調べる必要はありません。まずは、多く使われている順に2~3色ピックアップしましょう。

色のコードを確認する方法は以下を参考にしてください。Google Cromeでの確認がオススメです。

カラーコードの確認方法


数字 ピンタレストに表示されているURLからそのサイトに移動する

カラーコードの確認方法

検証ツールを使ってカラーコードを調べる

検証ツールはGoogle Cromeが使いやすくてオススメです。
「option+command+I」で検証ツールを画面下に表示したら、左上の矢印ボタンをクリックし、カラーコードを調べたい箇所にカーソルを合わせてください。そうすると#〇〇〇〇〇〇で表記されているカラーコードを見ることができます。

カラーコードの確認方法

色にルール(Manner)を与える

使用する色が決まったら、色にルールを与えます。ルールも完璧を目指すと永遠にサイトが完成しなくなってしまいますので、最低限必要な4つのルールのみ決めていきます。

見出しの色(メインカラー)
・本文の色 ※時にこだわりがない場合 #333333 のグレーがオススメ
・背景の色(ベースカラー)
・差し色/アクセントカラー

ルールを決める時も、色を決める時と同じように、参考サイトを真似ましょう。

このサイトのルールは以下のようになっています。

・見出しの色(メインカラー) : グレー(#333333)
・本文の色
: グレー(#777777)
・背景の色(ベースカラー)
: 白(#ffffff)/グレー(#f9f9f9)
・差し色
: ピンク(#f98c8c)/水色(#9dd1cd)/オレンジ(#f9ad62)/グリーン(#7fd6ac)

ここまで決めて、ようやくサイト制作の下準備の半分が完了です!多少めんどくさいですが、この工程をやるとやらないとでは、サイトの完成度が全く違います。色が決まったら、フォント→レイアウトの順に決めていきます。フォントについては、4.テーマを決めるの記事で触れていますので、そちらをご参照ください。

まとめ

今日のまとめは、賛否両論あるかと思いますが参考サイトを決め、徹底的に真似る!です。相当センスに自身のある方でも、自己流でデザインをするというのはかなりリスキーです。サイト制作の際には必ずお手本にするサイトを見つけておきましょう。

次回は、ワイヤーフレームについて解説していきます!紙とペンを用意して待ていてくださいね!

1.サイト制作のpoint

こんにちは!karen.k デザイナーのカレンです。

WordPressはとっても便利で優秀なツールなのに
「ハードルが高そうで手が出せない。」
「昔やってみたけど、結局分からなくて諦めてしまった。」

そんなサイト制作初心者の方でも、Wordpressを使いこなせるように、昨日から、初めてのWordpress ー初心者のためのいろはー を投稿しています。

今日は、1.サイト制作のpointです!

最初に断っておきますが、この記事はサイト制作初心者向けですので、情報過多でパニックにならないよう、ひとつの目的地に誘導する為に書いており、ある意味洗脳記事です。

長い文章が苦手な方は、前半を全て飛ばしてブランディングとはのセクションから読むことをオススメします。

サイトの種類と役割

サイト制作のpointを考える前にまずは、サイトの種類と役割を考えてみましょう。

サイトには種類があり、それぞれ役割が違うということをご存知でしょうか?
例えば、「楽天市場」「アマゾン」「STORES」「BASE」など、商品を販売しているサイトのことをECサイト(electronic commerce site)と呼びます。

ECサイトの主な役割は、商品の販売ですよね。ですので、消費者がより買い物をしやすく、購買意欲が高まるようなデザインがされています。

ECサイトの他にも、サイトの種類はたくさんありますが、全てあげると目が回りますので、個人事業主さんにとって必要だと思われる以下のサイトの特徴と役割をサクッとみていきましょう。

チェック ECサイト:商品販売に特化している
チェック オウンドメディアサイト:ファンを増やし商品を販売する
チェック ブランドサイト:商品や会社(個人)のブランディング
チェック ランディングページ:簡易サイトが多く、主に広告用のサイト

オウンドメディアサイトの役割を簡単にいうと「ファン作り」です。このサイトもオウンドメディアサイトを目指しています。

皆さんが馴染みのあるオウンドメディアサイトといえば@cosme(アットコスメ)さんでしょうか。コスメ情報を提供してファンを増やし、サイト上でコスメを販売しているサイトです。

つまり、オウンドメディアサイトとは、無料のコンテンツ(ブログやお役立ち情報など)を提供してファンを増やし、商品の販売につなげる流れを作るサイトのことです。因みにオウンドメディアとは、ブログや、SNS、YOUTUBEなどメディア全般のことです。

では、ブランドサイトはどのようなサイトでしょうか?名前の通り、ブランドのコンセプトを紹介したり、サービス内容を紹介するサイトのことです。多くの人がホームページと聞いて連想するのがブランドサイトだと思います。どのサイトにも共通して言えるのですが、ブランドサイトでは特に、イメージデザイン(ブランディング)が重要です。ブランディングに関しては、後のセクションで解説します。

ランディングページは、特定の商品のPRのために一時的に開設されるサイトで、特設会場で行われる、特設イベントのようなものです。SNSに流れてくる広告をクリックすると表示されるサイトのほとんどがランディングページと呼ばれるものです。

ひとえに”サイト”と言ってもいろんな種類のサイトがあります。サイトを制作する上で、どういうサイトを目指すかを決めるのはとても大切ですので、「サイトには種類がある」ということを頭の片隅に置いて次に進みましょう!

サイト制作の目的を考える

前のセクションで、サイトの種類を紹介しましたが、あなたが作りたいサイトはどれでしょうか?

商品の販売に特化したECサイト?
ファンを作り、商品販売の流れを作るオウンドメディア?
自分の商品のブランディングのためのブランドサイト?
広告のためのランディングページ?


この記事は、サイト制作初心者の皆様に向けていますのでおそらく一時的に利用されることの多いランディングページの需要は少ないでしょう。多くの方が、他の3つのどれかではないでしょうか?

ここで、はっきり言ってしまいますが、サイト初心者が初めて作るなら、オウンドメディアとECサイトは諦めてください。オウンドメディアを作るには、かなりの時間と労力が必要ですし、ECサイトは決済機能が必要なので無料版のWordpressでは難しいです。STORESBASEを使いましょう。

ということで、必然的に皆さんが作るサイトはブランドサイトということです。

押し付けでしょうか。いいえ、どのサイトも最初はブランドサイトです。そこから決済機能をつけ、コンテンツを充実させ、オウンドメディアサイトに成長していきます。

Webサイトを作る上で最大のpointは、「一度に全部作ろうとしないこと」です。初めてのサイト制作で唯一考えるべき目的はブランディングです。

サイト制作の上で欠かせないブランディングとは?

ブランディング、よく聞くけど実際なんのことやらさっぱり!ですよね。ブランディングを深く理解するためには、いろんなケースを見て考察する必要があるので、サイト制作初心者の皆さんは、神経質にブランディングについて考えなくても大丈夫です。今からお話しするpointを抑えてサイトを制作・運用していけば、最低限のブランディング力は自然に身につきますので安心してください。

では、ブランディングを今すぐ実行できる3つのpointを紹介していきます!

数字 イメージカラーを決める
数字 キャッチコピーを決める
数字 妥協しない

数字 イメージカラーを決める

色情報は本当に本当に大切です。そんなことわかっているけどどうやって決めればいいのかわからない!!そんな方が多いのではないでしょうか?かく言う私も例外ではありません。悩みに悩んだ結果、私のブランドkaren.kのイメージカラーは白/グレーです。

なぜ白/グレーにしたかと言うと、デザイナーという性質上、いろんな色・いろんなテイストの作品を作るからです。最初のうちは、自分の好きな”青”や”黄色”を採用していましたが、それではどうも作品紹介が難しい!!そこで、私のイメージカラーは白/グレーに落ち着きました。

イメージカラーについては考え方が膨大にありすぎるのでまた別の記事にまとめようと思いますが、今日の結論は「好きな色を選ぶ」もしくは「作品が映える色を選ぶ」です。正直、好きに勝る正解なんてありません。

数字 キャッチコピーを決める

言葉の力も偉大です。「イメージカラーを決める」「キャッチコピーを決める」も目的は同じで、「自分の世界観を作る」ための準備です。

自分がサービスを通して何をしたいのか?どんな人でありたいのか?この機会にもう一度しっかり考えてご自身のキャッチコピーを考えてみてください。キャッチコピー、、、ちょっとダサいですね。もっとおしゃれな言い方ないかな。

ちなみに私のキャッチコピーは全てのビジネスにブランディングをです。「ブランドを作るお手伝いをする」これが私のビジネスにおいての一番の喜びであり、目的です。ぼんやりとしたイメージだけでなく、言葉で示すことで驚くほど自分の世界観が確立されます。

数字 妥協しない

自分の世界観を確立させたら、それを表現することに妥協してはいけません。「ブランディング=妥協しないこと」と言っても過言ではないくらい、大切なことです。

あなたがダサいのは、センスがないからではなく、自分の世界観を実現するための行動をしてないからです。ちょっと自己啓発的な話になってしまいますが、自分の好きを知り、自分の世界観を確立し、それを現実世界に表現していくことがブランディングで、そのためにはたくさんの労力と時間が必要です。覚悟を決めて、楽しんでいきましょう!!

まとめ

ここまで読んでみて、いかがでしょうか?もっと技術的、テクニック的な内容を期待したのに、ガッカリしましたか?なんども言いますが、この記事はサイト制作初心者に向けて書いています。

本格的なサイト制作には膨大な知識と膨大な技術が必要で、実際にサイトを作り始めると、そのことをヒシヒシと感じてしまい多くの人が諦めます。

では、初心者のみなさんがサイト制作を最後まで諦めずにやりきるために必要なことは何でしょうか?それは専門的で複雑な膨大な情報ではなく、「何のためにサイトを作りたいのか?」「最低限のゴールはどこか?」をしっかり理解することです。

小さい目標を少しづつ達成することがサイト制作では大切ですので、完成までの道のりをなるべくシンプルに誘導していきます。

と言うことで本日のまとめは、

・サイト初心者が作るべきサイトはブランドサイト。
・ブランディングを目的として、その目的をしっかりと達成する。


です!

次回から、この2つの目標を達成するための具体的な方法を紹介していきます!
お楽しみに!