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週間後に手元に届く。インクの発色も良くいい出来で気に入っている。

ロゴを作った

社名も決まり、今後名刺や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色使う形に

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