制作・活動実績

Webディレクターズマニュアル

Webディレクターが書く媒体として恥ずかしくないデザイン

現役のWebディレクターが叫ぶ、Webディレクターのためのオンラインマニュアル。

Webディレクターのサイトと恥ずかしくないように基本的な配色・レイアウトはそのままに、ロゴやサイトのデザインを一新。「Webディレクターは神輿の上に立つ人間。偉そうな感じで!」という要望を反映し、クライアントやクライアント先の担当者の上司の矢面に立つという意味でシールド、みんなが同じゴールを目指すための旗をモチーフにしたロゴを制作しました。サイト全体では使用している色数を抑え、使用している色のトーンも抑え気味にし、より洗練されたイメージを追求しました。

公開
2013/06/01
制作範囲
  • デザイン
  • コーディング
  • MovableTypeカスタマイズ
サイト特徴
・スマートフォン最適化・レスポンシブWebデザイン
Director
@cafekenta

ロゴタイプに合わせて書体は適度な軽さを重視し選定

リニューアル前までのサイトでは、同じ文字、たとえば「Webディレクター」がヘッダーやサイドバー・フッターなどで何度も使われていたのにもかかわらず、それぞれで使われている書体が違ってチグハグな印象となっていました。そこで使用する書体は原則Avand Garde、和文は新ゴに統一しました。

従来のロゴタイプの明朝体で統一するにあたっては、ディレクターを目指す人、他の職種だけどディレクションスキルを身につけたい人にとってはハードルが高いものに見えやすくなることを懸念し、とっつきやすく見えるイメージにするために書体は変更しました。

Avand Gardeは幾何学的な字面の書体の代表格で現代的なスタイリッシュなイメージを持たせることができます。さらにAvand Garde固有の特徴で同じようなタイプのFuturaに比べ「a」「e」「g」などの文字に丸が入ってる箇所はほぼ正円に近いように見えるため、機械的なイメージに加えて、柔らかさの表現も同時に加えられる書体です。和文フォントもこれに合せる形で採用しました。

このようにするで、かっこよすぎるところに少しポップさを入れることで、しっかりディレクションスキルを身につけたい人がサイトを読むための心理的なハードルを取り除き、目的を達成できるよう配慮しました。

スマートフォンやタブレット端末の特徴を捉えて最適化

Webディレクター含め、Web制作に携わる人はスマートフォンやタブレットを日常的に使う方が多いように見受けられます。そのため、モバイル端末でも読みやすさを追求しモバイル端末用の最適化をしました。

PCとスマートフォン・タブレットなどのモバイル端末では同じカラーコードでも見た目に大きな色の違いが出ます。PCでは極端に色を抑えた淡いパステルトーンの色は最悪真っ白になってしまうこともあります。WebディレクターズマニュアルのサイトでもPC用のカラーコードをそのままモバイル端末用にすると同じように白くなってしまう現象があったために、一部のカラーコードはモバイル端末専用のものを定義しました。

ロゴに関してもPC表示とモバイル表示をそれぞれ専用の画像を使い分けました。モバイル端末でPC用ロゴを表示すると、「Webディレクターズ マニュアル」とふりがなの部分が見えなくなってしまうことが想定できました。簡単な英単語なので読めなくてもいいと考えてしまいがちですが、ふりがながあることでサイトの名前を覚えてもらいやすくなるメリットの方が大きいと考えました。

とりあえず繋がっておく

柴田 大樹

Facebook

都内で働くフリーランスWebデザイナー。
4年間Web担当者として、対法人向けECサイトやアフィリエイトサービスのデザインと運用を兼任。2009年からキュープラス株式会社でWebデザイナーとして働き、2013年に独立。

内容をもう少し聞いてみる