Osis

ブランドおよびウェブサイトのデザイン

Osis はオープンソース技術を専門とするフランスのITサービス会社です。私は同社のブランドとウェブサイトをデザインしました。目指したのは同社の仕事の宣伝、そして市場におけるより大きな露出でした。

in_browser
01
コンセプト

「ブリーフ」の定義付け

このプロジェクトで私が最初に行ったことは、プロジェクトの正確な目標を決めることでした。

このプロジェクトの目的は何か?自分はどんな問題を解決しようとしているのか?これを「ブリーフ」と題した文書に書き出しました。このプロジェクトの目標は、同社のオンラインプロフィールを作り、その仕事の宣伝とより大きな露出の獲得に役立てるようにすることでした。同社がどのような種類のサービスを提供しているかを示し、過去の業績と現在進行中の仕事を表示し、同社に連絡を取りたい人がそうしやすいような仕組みを作る必要がありました。この段階ではともかく、プロジェクトの最終的な目標を考え出しました。これらを記録に残し、プロジェクトがもっと進んだ段階でそれらを見直し、ちゃんと軌道に乗っているかどうかを確かめました。

リサーチしアイデアを生み出す

プロジェクトの目標がいったん決まった後、デザインを開始するまでの間をリサーチに費やしました。

この場合私は通常、依頼企業の競合企業を上位5社特定することから始めます。これらの企業はどうやってそのバリュープロポジションを強調しているのか?それらの企業の価格の違いは?こういった質問に答えていくことが、より成功の確立の高いブランドを作るのに役立つのです。ブランドが向かうべき方向をいったん大まかに決めた後、さらにリサーチを行いましたが、今度はアイデアを生み出すことを目的としたリサーチです。インスピレーションを得るのに他のサイトを見ることもありますが、他のデザイナーの仕事を見ないのがベスト、という場合もあります。

その場合は、問題に対するソリューションを自らブレインストーミングして考えだす方がいいと思っています。この段階では、必要なのはペンとスケッチブック、そして自らの思考のみです。

img-project-center
img-project-center
02
デザイン

ブランドをデザインする

企業のブランドというのは基本的に、その企業を表現し他人がその企業をどう見るかを決定づける、視覚言語なのです。

「ブリーフ」によれば、ブランドイメージの見た目と感じは、頭に残るような強いものでなければなりません。クライアントは、強く野性的なイメージがある白熊をブランドマスコットに使いたいと考えていました。オープンソースのある種の考え方ともマッチします。このアイデアを念頭に、様々な種類の白熊の画像を検索しインスピレーションを得ることから始めました。そして自分のガイドとなるような2、3の画像を選びました。それから幾つかのアイデアをスケッチし、タイポグラフィと文字の配列を使って実験を行ってから、最終的なロゴを決定しました(ロゴ描きにはAdobe Illustratorを使用)。

img-project-center
img-project-center
img-project-center

img-project-center

ウェブサイトのコンテンツ階層のスケッチ。

コンテンツについて考える

ウェブサイトをデザインする際にまず最初に決めなければいけないことの1つが、コンテンツです。ほとんどのプロジェクトの場合、これがデザインを決定づけるからです。

訪問者にはどんな情報を伝えなければならないのか?ある特定のポイントを使えるのに、簡潔な文章に書いた方がいいのか、それとも画像やダイアグラムで伝える方が理にかなっているのか?同プロジェクトのこの段階では、メッセージとその伝え方について考える必要がありました。それでクライアントに初期の段階からコンテンツをもらえるようお願いし、ドラフトを作り、それをホームページの紹介、サービスの説明、プロジェクト、パートナーリスト、会社の連絡先、という6つの主要部分に分けました。

ワイヤーフレーム

先だって集めておいたコンテンツから、クライアントの意向が、自社サービスの概要を伝え、見込み顧客が自社に連絡しやすいようにしたい、ということがはっきり分かっていました。

私は結局上のサイトマップでご覧いただけるような、簡潔なシングルページが5つのセクションに分かれているようなウェブサイトにしよう、と決めました。トップのナビゲーションバーにあるリンクをクリックすると、ユーザーをそのページの適切なセクションにスライドダウンしてくれます。基本要素をブロックにまとめるためと、何らかの青写真を得てそこから作業を始められるようにするため、サイトのセクションごとにワイヤーフレームをスケッチで描き出しました。

私のワイヤーフレームに対するアプローチは簡潔ながらも効果的で、この段階で私に必要なのはペンとスケッチブックのみです。まず、ウェブページに載せることになる要素をすべてリストに挙げます。それから関連しあう要素をグループ分けし、これらのグループに重要性に従って優先順位を付けます。ページ要素がグループに分かれそれに優先順位がついてしまえば、ページにそれらを配置する作業はずっと楽になります。より重要な要素はページトップ側に置き、白のスペースを使ってグルーピングを作ります。

img-project-center

ウェブサイトのコンテンツ階層のスケッチ。

img-project-center

サイトの基本要素のうちブロック

フォトショップで高品質の試作を作成

デスクトップワイヤーフレームのスケッチができたら、Photoshopに移行し、より細かいサイトの試作品にとりかかりました。

このプロジェクトはシングルページのサイトでしたので、5つの異なるセクションのデザインにはすべてPhotoshopを使いましたが、普段はこのプログラムにあまり時間をかけないようにしています。進行プロセスを遅くしてしまうからです。その代わりに普通は、その他のデザイン要素や必要になると思われる大事なものと共に、メインページのテンプレートの試作を作るだけにしています。同様に、Photoshopでモバイルやタブレットのデザインの試作を作成したこともありません。ワイヤーフレームに基づいてこれらを単にコード化する方が早い、と気づいたからです。

img-project-center