ごあいさつ
初めまして、株式会社HIKKYにてUI/UXチームとして勤めている、ぼーしと申します。
Qiitaでは初めて記事を書きます。
第三者に自分の仕事について語る機会など皆無だったので、拙い内容になるかとおもいます。
先んじてご容赦を頂きたければ幸いです。
そしてこの内容は私的なものであり、感想なども含まれます。
公式、公認の内容ではないことも、あらかじめお伝えしておきます。
導入
私自身はIT企業にてデザイナー、コーダーとしてそれなりの年数務めてきました。デザイナー（職種問わず）としてよくあることですが、
先人が残した素晴らしいクリエイティブを手土産にオーダーを頂くことがあります。 目指すところがあるコンテンツやサービスであれば、他に倣うことや指針とするものがあったりします。「こうゆうデザインにして」「これみたいなものが欲しい」
しかし、マネするわけにはいかない…オリジナリティと、要望に応えるバランス感覚、コンセプトに基づいた再設計、デザイナーの腕の見せ所ですね。
とはいうものの、弊社は新しいサービスを日々生み出そうと切磋琢磨しており、基本的には自社サービスの開発をおこなっています。いわゆる自社案件というものですね。
これまでクライアント案件はそれなりに参画しておりましたが、自社案件はまた別ベクトルの難しさがあります。
その難しさとリリースまでに考え行ってきたことを、会社本体のコーポレートサイトのリニューアルを題材に、10月末頃に作業した記録を残して置こうかと思います。
経緯
プロジェクトの背景と概要
メタバース関連の会社であり、革新的なものだったり、未来的なもので合ったりが、会社としてイメージしやすいかと思いますが、生み出すのはロボットでもなんでもなく未来人でもなく、人間であり、打ち合わせやコンセプトボード（ムードボード）などの地道な積み重ねの上でクリエイティブを生み出しています。弊社Visionもまた、その積み重ねから新しいものに変わりました。
Creative Revolution
未来も、世界も、その手でつくれ！
という内容のものに合わせ、WEBサイトのリニューアルも決まりました。
ここで、成果物たるサイトのリンクを貼ります。
（この記事はこのURLを踏んでもらえれば目標達成かもしれない。）
弊社ディレクターからの要望を見事に叶えてくれたサイトとなりました。
「人の第一印象は3秒で決まる」ことと同じようにサイトも第一印象が非常に重要で、そこでミスマッチを起こすと離脱率に繋がります。
私個人としては弊社を表すとても良いものを作ってくださったなとおもっています。
トップページデザインを深く理解するプロセス
今回はメインデザイナーがトップページをデザイン。
私自身が下層ページデザインを担当することなりました。
1.WEBサイトで意識すべきこと
- 第一印象
- なんのサイトか、何を魅せたいか サイトのメインメッセージやビジュアルで、提供する価値や魅力を伝える。 「このサイトは何のためのものか」を伝える。
- 一貫性
- 配色、トーン、ブランド、企業イメージを維持。 デザインのバランス。
- 読みやすさ
- 適切な文字サイズ、行間、コントラストを確保し、視認性を担保する。 情報が整理され、見やすい構成。
- その他にもいろいろあるので端折ります。
- パフォーマンス、直感的な操作性.etc
- etc...
上記のような要素を、頂いたデザイン案から紐解いて、それらを下層ページに落としこんでいきます。
このTOPページのデザインと、別ページをチームで分担してデザインする、ということはよくあることかと思います。
まずは基礎的な部分を設計します。
2.引き継ぎ時の「統一性」と「個性の発揮」のバランスの難しさ
個性は下記理由から、今回の作業では全く必要ないなと思いました。
- しっかりとしたプロセスと、いいデザインを共有いただいたので、この内容に沿ったものを用意できれば、要件を満たせると考えました。
- 遊びが多いサイトなので、自由度が高かった。
個性の発揮がより良いものを生み出すこともありますが、没個性でもいいものは生まれますよね。
トップページデザインを深く理解する
にぎやかで、混沌としており、静と動！！
まるで世界中を回る旅人の、旅先の空港のステッカーがちりばめられたお気に入りのスーツケースようだ。
これは困った。バランスが絶妙に成り立っていて、ここから下層を組み立てるのは難しいぞ、と、思いましたが、まずは要点を整理しようとおもいました。
参考ポイント:
デザインの注釈やプロトタイプ、ムードボードを確認する。
メインデザイナーとの打ち合わせでのデザインプロセス、考え方を共有いただく。
メインデザイナーの方は丁寧に参考資料やコメントなどを残してくださっていたので、ここはスムーズでした。
3.統一性を保ちながら下層ページをデザインするノウハウ
一貫性を保つためのヒント:
トップページのデザインパターンを抽出して再利用。 配色やコンポーネントを「使い回す」ことで、デザインガイドラインを用意しました。
- 配色、フォント、細かなコンポーネントを再利用、設計
- 通常のWEBサイトとして必要な要素の設計、（フォームや記事など）
すべてを網羅するのは難しいため、足りない部分はエンジニアの方がさらにこの内容をくみ取って用意して下さっているという、チーム制作のありがたみを感じますね。
（一人でデザインとコーディングする際は、フィーリングで作ってしまいがちですが、チームではこういったガイドラインが設計図のようなものになりますね）
さて、ここで一つ困ったことが。
英語と日本語の併記によるデザインであることでした。
（英語のフォントの方がカッコいいしデザイン性がありますよね。）
英語圏のユーザーも一定数いる弊社では、英語も対応するように通常設計していますが、
左右やキャッチコピーなどは英語版のページではほぼ同義語が並びうる状態になってしまいます。
メインデザイナーのレイアウトを重視し、翻訳の方のチカラで対応しました。（チーム！）
配色
カラフルで元気な印象を与える配色を採用しつつ、ブランドのカラーコードや使用頻度を決めておくことで、画面全体の統一感をキープ。タイポグラフィ
遊び心のあるフォントを使う場合でも、大きさや行間、太さなど、基準化しておくと、読みやすさを保ちつつデザインにまとまりが出る。今回は通常より多くの種類のフォントを使うことで、にぎやかな印象を出してくださいましたが、情報が優先の下層ページでは上記は大事な点かとおもいます。
レイアウト
賑やかなレイアウトでもスペースの使い方に一貫性を持たせ、カード型やセクションごとのモジュール設計で情報を整理。
上記は提供デザインを、ガイドライン化したもの
アクセント要素
アイコン、イラスト、アニメーションを全体のトーンに合わせて統一し、「楽しい！」を演出しながらもサイト全体の雰囲気をブレさせない変化を加えるポイント:
- 下層ページでは、情報量や用途が異なるため、ユーザー体験を最適化する調整を加える（例：ボタンの強調やレイアウトの調整）。
- コンテンツごとの目的に応じて、柔軟に対応する。
また、ターゲットが少々異なるページにおいてはレイアウト自体を変更しデザインしました。
ターゲット毎に情報の伝わり方や表現が一定である必要はない（柔軟性も大事ですね）
4. デザイン引き継ぎの課題とその解決策
ここまでのような作業を経て、引継ぎ時に思った課題点は下記がありました。
課題
- トップページがにぎやかなデザインなので、意匠などのデザインレイアウトが手探りになる。
- 下層１ページ分のサンプル案を頂いたのでそれを元に組み立て直す
- 情報やロジックなどについてのデザイン案はユーザーアクセシビリティを担保する
解決策:
- デザインルールをFigma内で再整理。
- 一貫性を優先する。
- チーム内レビューを活用し、改善を重ねる。
チームでの制作で重要なことは意識共有だとあらためておもいました。
5.まとめ
統一性を意識することの価値:
- デザイン全体での一貫性は、ユーザーに信頼感と使いやすさを提供する。（今回は賑やかであることが統一感）
- ブランディングにおける方向性を示すことができる
6. 締めくくり
Figmaのデザインは画像のような感じになりました。
（リソースが足りず散らかっていたことは反省点）
検討すべき点は２案用意してレビューで精査するなど、なるべく社内の意見を優先して制作できたことは、満足度が高かったです。
引き継ぎは単なる模倣ではなく、チームとしてより良いものを作る一歩、という言葉で締めにさせていただきます。
大した内容もないものをご拝読いただき、ありがとうございました。
また機会がありましたら、備忘録として書いてみようかと思います。