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です。ご自身でどこに何があるのかわかるように書ければ大丈夫です!

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つの目標を達成するための具体的な方法を紹介していきます!
お楽しみに!