Blog
Under The Tree

Webサイトの編集方針を考えてみる

前提条件が大体出揃ったところだが、コンテンツの作成を闇雲に始めるのは、やはり無謀。購入して良書だと思いつつあまり出番のなかった「コンテンツ・デザインパーン」に沿って編集方針を考えてみた。

コンテンツ・ブリーフ

コンテンツブリーフとは、これから作っていくコンテンツについてあらかじめ色々と明確にしたり、決めたりしたリストのこと。
コンテンツの全体像をみることができる便利なリストなので、途中で迷ったりブレたりすることなく実制作作業をすることができるスグレモノだ。
リストの項目は次の通り

  • 伝え方の工夫
    • 顧客と商品の関連性
    • 目的(わかってもらうこと・させたいこと)
  • 切り口
    • 伝える内容の工夫
    • 商品特徴
    • ターゲット顧客
    • 利用シーン
    • 顧客便益
  • 伝える体裁の工夫
    • 表現
    • メディア活動

はじめから順に全ての項目を埋める必要はなく、埋められるところを埋めながら全体を考えていくやり方が良いらしい。

コンテンツ・ブリーフを書いてみる

実際に書き出しものが次の通り。

伝え方の工夫

  • 顧客と商品の関連性
    • どんな会社なのか、何をかっているかいしゃなのか知りたい人(探索者;前期)
    • 近い将来、サービスを利用しようとしている人(探索者:後期)
  • 目的
    • わかってもらうこと
      • デザイナー向けのエンジニアリングサービスを提供していること
    • させたいこと
      • 何かのきっかけで相談してもらう
  • 切り口
    • 自分がどんな問題で困っているのか?を気がついてもらう

伝える内容の工夫

  • 商品特徴
    • デザインを熟知したエンジニアリングサービスが複数ある
  • ターゲット顧客
    • デザイナー、デザイン事務所
  • 利用シーン
    • デザイン作業を効率化したいと思う
    • Web構築やWebマーケティングに自信がない
    • 自社のデザイン領域を拡げたい
  • 顧客便益
    • 快適なデザイン作業環境を構築できる
    • よりよりデザイン提案ができる

伝える体裁の工夫

  • 表現
    • コピー
      • 「Engineering でDesingを強くする。私たちは、あなたの会社のR&D部門です」
    • メインビジュアル
      • シンプルなロゴアニメーション
  • メディア活動
    • レスポンシブWebデザインにして、あらゆる端末で見てもらえるようにする
    • SNSも徐々に連携&活用していく

最初に書き出したのは、既に決まっていた「伝える内容の工夫/ターゲット顧客」の部分。それから「伝える内容の工夫」の他の項目を埋めていった。
順に「伝え方の工夫」「伝える体裁の工夫」と埋めていった。
書いてみて、これは便利だと特に思った部分は、「伝え方の工夫/顧客と商品・サービスの関連性」のところ。
この本では、顧客の状態を

  • 探索者前期:あなたの商品に気がついていない
  • 探索者後期:あなたの商品が含まれる、ある一つのカテゴリーに興味がある
  • 購入者期:あなたの商品に興味・感心がある
  • 支払い期:あなたの商品を気に入り購入しようとしている
  • 利用者期:あなたの商品を利用しているだけでなく、同じものを購入したり、オプションを購入したりしている
  • 友好的利用者期:あなたの商品を購入した上で、好意的にほかの人に紹介している
  • 否定的利用者期:あなたの商品の使い方が良くわかっていない

の7段階で分類してある。

どの状態にあるかによって、アプローチの仕方が全く変わることがハッキリと意識できる。今までターゲットは意識して定めていたけど、ターゲットの状態については漫然と行っていたので、この手法は目からウロコだった。

この本は、コンテンツ・マーケティングを本格的にやっていきたい方には、とてもオススメの本だと思う。この本にかかれている手法は、Webだけにとどまらず、チラシやパッケージ、ポスター、プレゼン資料ととにかく「顧客に何かを伝えたい」という場面でのベースとなる手法の様に思う。
コンテンツ・ブリーフができたので、これを元に、コンテンツ内容の方を進めていくことに。

Webサイトの制作を始める前にいろいろと整理してみる

社名・ロゴ・理念・サービスと色々と決まってきたので本格的にWebサイトの制作に入る。
Webサイトは、自分の能力や提供するサービスの質を示すモノなので慎重に作らなければならないと、まずは思った。なので、すぐに手を動かさず前提条件などを色々と書き出してみた。

ターゲットは誰?

サービス設計の時点でターゲットは、「デザイナー向け」「デザイン事務所向け」としたので、これについてはそのまま。
なぜ「デザイナー向け」「デザイン事務所向け」にしているかというと、割けるリソースが平日18:30〜の対応、週に20時間ほどの作業時間と限られていることもあり、コネクションもあり身近な存在で私の都合も理解してくれるであろう所から始めることにしたから。
最初から拡げすぎると色々と大変なので、スモールスタートで始めた。

Webサイトの役割は?

Webを中心としたサービスを展開していくので、おそらく「何ができるか?」を理解してもらうのに最適なメディアだと思う。
会社案内的な要素とポートフォリオ的な要素を兼ね備えたものが理想だが、今後展開してくサービスについて端的に示せる実績が皆無なので、そこら辺を考慮・工夫した打ち出しにする必要がある。
当面は名刺からの流入が一番多いと思われるので、名刺をみて疑問に思ったことの「答え」を確実に用意しておく必要がある。
Webを見てくれた人が「Studio Under The Treeは自分の何を解決してくれるのか?」を自主的に理解してくれ相談や発注に繋げられるような形にする。

Webサイトに盛り込みたいこと

企画、構成、コンテンツ作成、デザイン、サーバー構築からコーディング、運用、SEOまでワンストップでできることをうまく表現できているWebサイトにしたい。
最新の技術をふんだんに使い、技術力のアピールができれば良い。
WordPressの高速化を極めたWebサイトに。
ちょっと盛り込みたいことと外れるが、デザインやコーディング、運用方法などの作業環境を極力効率化する。
コンテンツマーケティング&何ができるかのアピールのためにBlogもやりたい。

と、こんな感じでつらつらと思い当たることをメモし整理しながらなんとなく自由にイメージを膨らませていく。出尽くした所で、次は編集方針やコンテンツを作るための指針をまとめていく作業に入る。

名刺をデザインして作る

色々と決まったので、肩慣らし的に名刺をデザインしてみた。
昔から名刺のデザインは好きで個人用の名刺はちょこちょこ変えて使っていた。
個人でデザインした名刺の面白いところは、相手に渡した瞬間に色々な反応を見たり感想を聞けること。
普段は手にさわれないものばかり作っているので、実際に触れる物をつくるのは楽しい。

名刺の大切さ

名刺は名前や連絡先をただ単に覚えてもらうだけのツールではない。
手に取った瞬間に色々な「印象」を与えられるメディアだし、会話のきっかけをつくるコミュニケーションツール。
色々とやり方はあるけど、名刺を通して何らかの「行動へのきっかけ」を与えられることが大切だ。
デザインも大切だけど印刷や紙質にもこだわって、持った感じを好印象にするのが良いと思っている。感触の威力を馬鹿にしてはいけない。
もった感じがペラペラの紙で家庭のプリンターで印刷したような名刺だと、これから仕事を一緒にしようというのに「貧乏くさい」「頼りない」印象を与えかえない。
コストダウンのために社内印刷とか、ペラペラの紙で印刷とかやっている企業があるけど、ブランディング的に良くないと思う。

名刺のデザイン作業

ちょうど同時期にWebサイトのデザインにも着手していたので、Webサイトのファーストビューとあまりイメージがずれないようにデザインを始める。
まずは名刺の向き、縦向きか横向きかを決める。最近はURLを載せたりするので横向きが主流の様な気もするけど、ロゴマークを大きく載せたいという思いもあり縦型を選択。縦型の方がなんとなく両手を添えてかしこまって渡せるような気もしている。
使用するフォントは、最近お気に入りの「游ゴシック体」とロゴに使用している「Futura」。
今回はプリントパックを使うので色は贅沢に表面4色、裏面1色の贅沢仕様。
これらの条件を元にパッパッとレイアウトしできたのはこれ。

Studio Under The Tree の名刺

表面はロゴを大きくレイアウト、名前とメールアドレスとWebサイトのURLを入れてシンプルに訴求。
裏面はサービス名とサービスごとについけたコピーを掲載。このコピーとサービス名は「気になる」ように工夫して書いてみた。ちょっとでも「気になって」もらえれば、質問がきたりWebサイトを見てくれたりすると考えてのこと。

紙はヴァンヌーボVホワイトで厚さは215kg。プリントパックから紙見本を取り寄せ50種類ぐらいの中から選んだ。光沢を抑えたマット紙系でロゴが映える白さとしっとりした手触り感が気に入った。
とりあえず100枚で注文。値段は5,200円(税込み)。
1週間後に手元に届く。インクの発色も良くいい出来で気に入っている。

事業内容につていて考えてみる

会社理念、会社名、ロゴと順調に決まってきたので、事業内容について考えてみた。
闇雲に考えるのも何なので、自分の棚卸し時に使用したビジネスモデル・キャンバスを会社向けに書くことにした。
ビジネスモデル・ジェネレーションに書かれている順番にそって9項目を埋めてみた。

1.顧客セグメント(誰に売るか)

最初が肝心だと思うので、スモールスタートを考えて狭めに設定。いきなり、一般人や一般の会社を相手に仕事を始められると良いのだが、平日18時〜と土日祝日しか時間を割けないので、まずは知人や知人に紹介してもらいやすい人や会社をターゲットにしてみた。
ターゲットはズバリ、「デザイナーやデザイン会社」

2.提供価値(何を売るか)

これは、自分の棚卸しや理念を作った時に考えられたのですんなりと埋められた。
「デザインを熟知するエンジニアが提供するエンジニアリングサービス」や「ITCでデザイン現場の効率化」「ITCで仕事に付加価値をつける」となんとなく定義。具体的な詳細についてビジネスモデル・キャンバスを書き終えてからにしようと思う。

3.チャンネル

ここには、顧客セグメントにどうやってコンタクトをとりどうやって提供価値を届けるか記入する。
コンタクト手段としては、知人への営業、知人からの紹介、IDPCなどの団体に加入して一気に営業するなどを今のところ考えている。
価値提供に関しては、基本的にリモートで完結するように進め、必要な場合は直接会うって感じ。

4.顧客との関係

これは「事業パートナー」として考えていきたい。「下請け仕事」や「丸投げ仕事」は受けない事にする。

5.収益の流れ

これは、顧客からの売上。
他の収益のアイデアはあるけど、完全に異なるビジネスモデルになるので今回はここに記入しない。

6.キーリソース

ここは経営における資源は4つ、ヒト、モノ、カネ、情報について記入する。
モノもカネも特に持っていないので、完全に自分自身の「週20時間の労働時間」と「日々の情報収集能力」「問題解決能力」の3つになる。

7.キーアクティビティー

  • デザインに役に立つ技術の収集・調査・習得する。
  • 数得した技術をタイムリーに提供する。
  • 様々なITCに関する相談を無料で受ける。
  • 常にITCによる面白い収益方法がないかアイデを出す。
  • ITCで何ができるかを常に発信し続ける。

8.キーパートナー

ICT関連の友人(プログラマ、SE、エンジニア)
顧客でもあり協力者にもなるデザイナー

9.コスト構造

  • PCやプリンターやスマホなどのハードウエア
  • クラウドサービス利用費
  • 通信費(インタネット回線、スマホ回線)
  • 書籍代

これらを1枚にまとめると次のようになる。

Studio Under The Treeのビジネスモデル・キャンバス

これらを元に具体的なサービスを色々と書き出しブラッシュアップして、とりあえずスタートが切れる状態に近づけた。具体的な内容は次の通り。

Desital Design WorkSpace
デジタル作業環境の設計・構築
Web & IT Review
WebとITに関する最新レポート
WordPress BackOffice
WordPressの構築・デザイン
MA & CRM BackOffice
MAやCRMの導入コンサル・環境構築・運用サポート
FileMaker BackOffice
FileMakerを使ったオリジナルアプリの開発

詳しい内容については、このサイトのトップページを御覧ください。

ロゴを作った

社名も決まり、今後名刺やWebサイトを作る上で必要になってくるロゴを作ってみた。
ロゴを作る理由は色々あるけど、会社のイメージや雰囲気を瞬間的にビジュアルで伝えたり、会社の固有性を演出して覚えてもらいやすくするという言う点が大切だと思っている。
いい加減なロゴを作るといい加減な会社に見られてしまう、そんな会社の顔的な部分を担うので、いざ作るとなると結構大変。しかも長年使うことも想定しなければならない。
実際に仕事でロゴを作成するときは大体次のような手順を踏んでいる。

  1. まずはロゴタイプの方を先に検討する(マークよりも文字の方が読まれるのでこちらを先にして雰囲気とか方向性を決める)
  2. 莫大な数のあるフォントの中から候補を選ぶので、持たせたい雰囲気やイメージを言葉にしておく
  3. 最終的に5案ぐらいに絞る
  4. 会社のコンセプトやイメージ、ロゴタイプに合うようなロゴマークを考え図案化する
  5. ロゴマークとロゴタイプの組み合わせを考える最終ロゴ案を5案ぐらい作る
  6. クライアントが判断しやすいように、出来上がったロゴ案をイメージマップにマッピングする
  7. それぞれのロゴ案のコンセプトを言葉にしてメモを作る

結構ヘビーで時間のかかる作業を行うのだけど、今回はクライアントが自分なので色々な作業を省いて進めてみた。

ロゴタイプを検討する

社名が英文なので、欧文書体から探し始める。
欧文には大きく分けてセリフ(ローマン体とも呼ばれる)とサンセリフ(日本ではゴシック体と呼ばれている)があるけど、今回は「カジュアル」で「親しみやすく」そして「元気」なイメージをもたせたいので、サンセリフの中から検討することにした。
所有する欧文サンセリフは数百にのぼる。流石に検討の幅が広すぎるのでロゴとしてよく使用される書体を選んで検討に入る。

Helvetica

  • 世界中で最も使用されている書体と言われている
  • 普段目にすることが多いと思う
  • TOYOTAやPanasonicのロゴに使用されている書体

Futura

  • 直線と円を基本に構成されたシンプルなデザイン
  • 近代的で幾何学的な雰囲気を持つ書体
  • ルイビトンやフォルクスワーゲンのロゴに使用されている書体

Gotham

  • 検討してみたかったけど所有していなくて断念
  • 余裕が出たら購入してみたい書体
  • オバマ大統領のキャンペーンに使用された書体

DIN

  • ドイツ工業規格のための書体
  • 近年世界的に流行している書体
  • 東京オリンピック2020のロゴに使用されている書体

Myriad

  • AppleやAdobeのコーポレートフォント
  • iPodやiPhoneなどの製品名に使用されている

Univers

  • 著名な書体デザイナー アドリアン・フルティガーによって制作された書体
  • Helveticaによく似ているが柔らかい感じに仕上げてある
  • スイスエアラインズや無くなった三洋のロゴに使用されている。

Avenir

  • 著名な書体デザイナー アドリアン・フルティガーによって制作された書体
  • Futuraによく似ているが、これも柔らかい感じに

Frutiger

  • 著名な書体デザイナー アドリアン・フルティガーによって制作された書体
  • 空港のサイン用文字として開発されているので、視認性が高く遠くからでも読める

Optima

  • 高い視認性とエレガントさを持つ
  • グッチやアストンマーチンのロゴに使用されている

Gill Sans

  • 古代のセリフを元にして作られた書体
  • フィリップスやプジョーのロゴに使用されている

候補を色々と見比べてみて最終的にFuturaに決める。
選んだ理由は単純にFuturaが好きだからというものもあるが、先進的でいて信頼感もありながら元気のある感じがとてもマッチしていると思う。

ロゴマークを検討する

新たに作ることも考えたが、ずっと個人の名刺に使用していたマークを使用することにした。
作った記憶を辿ると次のような事を考えて作成していた。

  • 木と落ちているリンゴでなんとなく「木下」を想起させるシンプルなイメージに
  • 丸を基本として、木の幹にあたる部分は甲骨文字をラフにトレースして使用
  • それぞれの要素を1:1.618の長方形の中に収まるように配置した
  • 色は元気のある色に
  • マークに使用する色は、色々な使用場面を想定して通常2色程度にするのだが、Webと名刺程度にしか使わないと思われるので、豪華に5色使う形に

最後はロゴマークとロゴタイプをあわせて微調整。
今回は作業はかなり決め打ちで、行ったので結構サクサクと作業が進んだ。
屋号とロゴができたのちょっと会社っぽくなってきてワクワクしてきた。次はぼんやりとしかイメージしていない事業内容について考える。