マーベリックスエンジニア兼デザイナーの中谷です。

普段はコーディングやプログラミングを行っていますが、必要に応じてサイトのデザイン制作も担当しています。

初めてのブログでドキドキですがお手柔らかにご覧ください・・・！

ホームページリニューアル！

2022年6月マーベリックスのホームページをリニューアルしました！

当初想定していた規模はすぐ終わるものでしたが、想像以上に大きくなり、大人数を巻き込んでインパクトの大きな企画になりました。

今回はその制作秘話を全３回に分けてご紹介したいと思います！

具体的にはこの３つになります！

• 第１回：企画編
• 第２回：デザイン編
• 第３回：プログラミング編

企画（デザインの下準備）

最初にデザインを行う前に企画をしていきます。

企画段階からしっかり詰めることによって、デザインの方向性が定まっていくためデザインを始める前の下準備としてとても大事です。

どんなサービスがあるのか、どんなビジョンや理念があるのか、何を達成したいのかなど様々な指標を明らかにしていかないとまとまりの無いサイトになってしまいます。

そのため、まずはどのようなサイトにしたいのかをじっくり代表の竹部と話し合いを詰めていきました。

（これが実はとても時間がかかり大変でしたが、いろいろな話を聞き出して要点をまとめるいい経験になりました！）

リニューアルの目的の整理

リニューアルをする目的が曖昧なままだと、企画・デザインをしていくことが難しいため、目的を明確にしていきます。

目的

現在のサイトの方向性は悪くはありませんが、現時点では以下のような要望がありました。

• 公開して３年が経っているのでリニューアルしたい
• 新しいロゴを活用したデザインにしたい（ロゴが変わりました）
• 採用を強化したい
• 採用希望者がWebサイトへ訪問した時に印象づけたい
• 新規のお客様に対して、当社のサービス（技術）を認識させたい

ターゲット選定

当社は現在新しいクルーを求めているため、ターゲットは以下のバランスに絞りました。

• 応募者：7
• クライアント：3

競合の確認

当社の競合他社は、札幌のシステム開発会社です。同じような典型的なWebサイトでは、他と同じ土俵で勝負することになります。

そのため、そもそもの土俵を変えて、競合がいない状態にすべく、オリジナリティのある印象が強く、胸打つようなWebサイトにしていくことにしました。

（かっこいいサイトが多くて、どんな感じのデザインにするか悩みました・・・！）

参考サイトを見まくる

いろんなWebサイトをチェックして目指したい方向性を探ることから始めました。

するとある程度、奇抜なWebサイトや、目を引くような色使いのWebサイトが集まってきました。

いくつかそのサイトをご紹介していきます。

WELCOME MARVEL｜フェリシモ

https://www.felissimo.co.jp/marvel/

• ピンクや黄色などの攻めたカラーリング
• ファッション雑誌のようなデザイン
• 画面をはみ出すような大きな文字

ランディックス コーポレートサイト | 唯一無二の豊かさを創造する。城南エリアの透明性の高い不動産情報を提供

https://landix.jp/

• 最初に赤い膜が上に上がるインパクトの強いイメージ
• 大きな文字と大きな写真のレイアウト
• シンプルだけど印象に残る洗練されたデザイン

ビービット(beBit) ｜ ユーザ視点からの価値創出を追求するエクスペリエンス・デザイン・パートナー

https://www.bebit.co.jp/

黄色いイメージが今っぽくて、イケてる感じがあります！
ここらへんでなんとなくのメインカラーや方向性が決まってきました。

• オープニングアニメーションがオシャレ
• イエローの四角や斜め線を活用したスマートなデザイン
• ブログを生かしたウェブメディア形式

この時はこのサイトが一番参考にしたいとなりました！

（シンプル・イズ・ザ・ベスト・・・？）

メインカラーの設定

デザインはメインカラーを２〜３色に絞ることでまとまり感が出ます。
色の方向性を以下のように決めました。

オレンジはマブスのステッカーやタペストリーの色なので候補に上がりました。

どれにしても少し攻めてる感じのカラーリングですね！

ページ設計

- Top
- News
- Blog
- Crew
- Service
  WebDesign
  WebSystem
  Shopify
- About
- Company
- Recruit
- Contact

下層ページの構成がトップページにも影響するので、サイトマップを作成して必要なページを選定しました。そして各ページでどんな内容を掲載するかを決めていきます。

例えば、Aboutページには会社ビジョンなどを掲載したり、Recruitページには応募者に対して会社のことをわかりやすく伝える必要があるため様々なコンテンツを盛り込みました。

そうして伝えたいことを洗い出し、ざっくりとページ分けをしてサイトマップを作っていきました。

会社のビジョンの策定

その頃ちょうど、会社のビジョンやパーパス（存在意義）を明確化するために、代表の竹部が経営者の思考整理が得意なはらくみさんにお手伝いを依頼していました。

Webサイトはそもそも会社の方向性などが具現化したものでもあるため、ここが明確でないとなかなかデザインとして表現するのが難しいです。

なので、企業の芯となる部分をわかりやすくイメージ化して頂き、こちらも考慮してデザインに入る前にしっかりと固めてもらいました。

（さすがプロ、要点を絞って良くまとめてくれています！）

最後に

いかがでしたでしょうか。

こうやって代表の竹部とのアイデア出しをかなり入念に行って行きました。

サイトの制作目的、デザインの方向性、各ページの内容などが決まって来たところで、ようやくデザインの制作に移ります！

（デザインを練りに練ってようやく出来たと思いきや、大転換が起こることに・・・！）

次回はデザイン編へ！