Goalist Design Blog

ゴーリストのウェブサイトをリニューアルしました#3  ーメインビジュアル編ー

こんにちは。レタスです。

先日の投稿からすっかり日があいてしまいました。ご無沙汰してます。

ゴーリストの会社ウェブサイトリニューアル、メインビジュアル作成編について書きたいと思います。お付き合いくださいませ。

 現在メインビジュアルに使っているのがこちらの写真なのですが、ここに至ったまでの経緯を書いていきます。

f:id:e-nagata:20180406105100j:plain

コンセプト 

「新しいフェーズのゴーリストを伝える、旗艦店※のようなサイト」

 

コンセプトに関わりそうな重要ワード

・ニーズが多様化している時代だからこそ、多様性をもった「チーム」で戦う

・ゴーリストはお客様をゴールへ導く、伴走する存在

・目的思考が中心にある 

 

テイスト、印象に関わりそうなもの

必要以上に飾らない、等身大、機能美のようなシンプルさ

若さと進み続けるエネルギー

人間らしい暖かさ( not 機械的なイメージ )

信頼感、 (固すぎない)ロジカルな雰囲気

を元にメインビジュアルを3案作成しました。

(3案をつくるまでにブレストやミーティングや試作やら諸々諸々、泥臭い作業がたくさんあったのですが...、いったん割愛します)

 

 

メインビジュアル案候補(だったもの)

今更お見せするのもめちゃめちゃ恥ずかしいのですが...ごそごそ引っ張り出してきました。

「旗艦店のようなサイトをつくる」を目的として、ゴーリストの会社像を一番表現できるモチーフってなに?と考えていた頃のものです。

 

案1:「チーム」をキーワードにした案

f:id:e-nagata:20180404144740p:plain

代表へのインタビューから、「ニーズが多様化している時代だからこそ、(ゴーリストは)多様性をもった「チーム」で戦う」という戦略を聞きました。

個人戦ではない、チーム戦だからこそ凡人でも勝つことができる。さらに必要に応じて柔軟に陣形を変えることもできる。それがゴーリストの強みや特徴の一つである、とピンを止めました。

こちらの案ではメンバーを一つ一つの円に見立て、それを集めて、ウェブサイト内で自由に形を展開させていく予定でした。メインビジュアル一枚だけで内容を伝えるというよりは、ページ全体を回遊して「チームで自由なフォーメーションを組む」特徴を示そうと考えていました。

 

 

案2:「ゴール」、「目的思考」をキーワードにした案

f:id:e-nagata:20180404144857p:plain

ゴーリストという名前の由来やミッションにもあるように、重きを置いている「ゴール」という言葉にフォーカスした案です。

「ゴール」の定義ってなに、意味してるものってなに、とロードマップ的に掘り下げ、図案化していくイメージでした。

「ゴール」は(個や組織にとっての)目標だよ、といってしまうのは簡単です。...なのですが、ゴールに至る段階には何があるの?そのステップをどう捉えているの?会社としてお客様とどう関係するの?ゴールの先は?など、曖昧な部分が多くありました。それらを言語化し、図そのものをビジュアルとして使用できないかと考えました。

 

 

案3:頭文字のGを押し出した案

f:id:e-nagata:20180404144941p:plain

 今回のリニューアルはそれまでのウェブサイトと比べ、変更がとても大きいものでした。そのため案の一つとして、いったんシンプルに、誰もが「Goalist」の頭文字のGなのね、と意味を理解でき、疑問が残らないようなものを作ってみても良いのではと思って制作したものです。懐かしや、、(深堀はあんまりしません...)

 

 

 

メインビジュアル案決定

だいぶ前に作ったものなのでこんなのもあったな〜...と回想に耽ってしまいました。全然案が定まらずにたくさん迷走しましたね...当時はにが...苦かったですね。

代表とデザイン部でMTGした結果、案2の「ゴール」へ向かう思考そのものを図案化する案に決定しました。

とりあえずメインビジュアルの方向が決定したのでほっと胸をなでおろします。

これをどうブラッシュアップしていくかがまた次の課題です。

幾何学で構成していたので、どうしても電車の路線図に見えるんですよね...。そのような雰囲気を出したいわけではなかったので、これはどうにかしたいなと。

加えて言うと、要素(単語)の数も数が多くて、図が複雑すぎるかもしれません。もっと大事な要素を見つけたり、不必要なものを削いでいくことができるはずです。「ゴール」のロードマップを描くための次なる探求が始まりました。

 

 

ロードマップを精査する

代表の加藤をはじめ、役員の林にもゴーリストの考える「ゴール」までの道のりについて質問し、ロードマップを描くための要素の洗い出しと、その意味について噛み砕いていきました。

ゴールとは

・その時点時点でのゴール、に概念が変わってきている。マイルストーンに近い。ステップ。

・ゴールに達成したら、その次がある。

 

ゴールまでの道のりとは

・直線や短期という概念ではない。

・スプリントやPDCAをなんども、二転三転しながらぐるぐる回すイメージ。

・いろんな線や分岐しながら進行方向がある。

 

お客様との関係とは

・お客様が困りごとの解決に向かうためにリードする存在。

・とはいえ、上からゴールを示す立場ではない。

・一緒に進む。併走するイメージ。

・お客様と協力して解決策を考えることで、新たなアイディアが生まれる。

 

ゴーリストの特色は

・目的思考であること。

・チームで柔軟にフォーメーションが組めること。

 

ゴールに導くための(ゴーリストの)メソッド

・B(business)、T(technology)、C(creative)の3つの軸を掛け合わせて解決策を考える。

・デザインスプリントの手法(ある課題の中長期的なゴールを決め、短期で試作を繰り返す)で取り組む

 

これらの言葉もスラスラと出てきてまとめられたわけではなく、図を描きつつ、わからない要素が出る度に質問を重ね...と、かなりざっくりのラフから10回以上更新して出てきたものです(図が多すぎてえらいこっちゃなのでここでは割愛しますが)。

そしてそれらの言葉や関係性を組み合わせて落とし込んだのが、こちらの図になったというわけです。

f:id:e-nagata:20180406105100j:plain

 ちなみに描く素材も紙に鉛筆、サインペン、NUボード、ポストイット、ホワイトボード、むしろillustratorのベクターの質感はどう?と様々なものを実験しました。結果、「思考している段階」と、「人間らしさ( not 機械的なイメージ)」が一番よく表れているということで、ホワイトボード&マーカーで描いたものを採用しました。

だいぶ試行錯誤しましたが、どうにか構成し終わり、写真に収めました。パシャり。

単焦点レンズがあるとほんとに良いですね〜。 

 

インタビューや案のブレストなど、周りのたくさんの人の協力のおかげで制作することができました。原案と比べるとだいぶ変わりましたね。

 

 

全体のモックアップ作成

さあメインビジュアル作成という大仕事が終われば、あとはindexページ全体や下層ページのデザインをゴリゴリ進めるのみです。肩の荷が降ります。ここからは「テイストや印象に関わりそうなもの」にあげたキーワードを意識して、そこから外れないようにデザインを考えていきます。

 

基本のベースカラーは白(部分的な背景色として薄い灰色)、メインカラーは赤です。会社とメンバーの若さや前進するエネルギー、どちらもイメージできる色ということで赤に決定しました。また、ゴーリストのロゴ(旗部分)の色を踏襲するという意味もあります。

f:id:e-nagata:20180406141811p:plain

 

 

アクセントカラーは紺にしています。ウェブサイト内で出てくる割合は低いですが、白・赤を基調とした配色に信頼感や落ち着いた雰囲気をプラスしたいと考えて使用しています。

f:id:e-nagata:20180406143544p:plain

全体的に装飾はあまり加えていません。大きな変化は、ページ内のセクション別の色面でつけています。「必要以上に飾らない」「機能美のような美しさ」という点から、なるべくスッキリと構成しました。また、柔らかな印象を保つために、文中になるべく固い言葉は使わない、行間はゆったりと幅をもたせる、アイコンは丸めのものを使う、などしています。

 

Sketchで10ページほどのモックアップを作り、モバイル版も作成して画面デザインの作業は完了です。

f:id:e-nagata:20180406145200p:plain

 インタビューから拾った内容に即したものが作れたのかな、どうでしょう...(ひやひや)

 

 

 

振り返って

モックアップ作成後、html,CSSのコーディングも担当したので、今まで使っていなかったフレームワーク(Material Components for the Web)にもだいぶ泣かされたり、クロスブラウザやデバイス対応にも苦戦しましたが、いったんリニューアル記をDONEとしたいと思います。どうにかリリースも期日に滑り込ませることができました...!

すでに過去のこととなりつつありますが、レタスがジョインする前の先輩たちの作業スタート段階から含め、思い返せば長かったです。

大きめの仕事はなるべくそれだけに注力できれば良いですが、それが可能かどうかは他のタスクや状況次第でもありますよね。レタスがジョインしてからは他の差し込みの仕事は少なめに、こちらの作業の優先度を高めてもらっていたのでとても助かりました。

 

リニューアル記が続いたので、今度のブログはtips系のものを書きたいなと思います。

それでは!