入社半年の新米デザイナーが既存の製品サイトを勝手にリニューアルしてみた
今回は自主練習を兼ねて、backlogのwebサイトを勝手にリニューアルしてみました。
元サイトは特に問題点があるわけでないですが、仕事で触れる機会があるツールだと作りやすくて制作課題としてピッタリだなと思い、backlogを選びました。
今回の制作フローは以下記事を参考に進めました。
実際の制作のフローと異なる部分がありますが、記事の内容に従い、５つのステップで解説していきます。
①ターゲット像を描く
②ターゲットに与えるイメージを決める
③イメージボード作成＆競合サイトから共通パターンを抽出
④ワイヤーフレーム作成
⑤実際のデザインに落とし込む
「デザイン提案に説得力を持たせる6つのステップ（スライド付き）」
そもそもbacklogとは？
backlogとはプロジェクト管理ツールであり、NULAB.incさんが出している製品です。国内最大級の導入実績があり、有名な企業も多数利用しているサービスです。
製品の特長としては以下が挙げられます。
・導入が比較的簡単である。
・シンプルかつ操作性が高いデザインで、どの職種でも扱いやすい。（デザイナー、開発者、ディレクター、等々）
・プロジェクト管理に必要な機能がほとんど揃っており、遅延タスクの削減が見込める。
backlogの製品サイト
backlogのLP
①ターゲット像を描く
デザインを制作するにあたり、誰に向けて作るか？というのは非常に重要な事だと思います。ただ、「この層の、こんな人が利用している」とターゲットを明確にすることが出来なかったため、レビューサイトのレビューアーを元にペルソナを決定しました。
▼ターゲットのプロフィール
年齢：40代後半。男性。
部署役職：マネージャー職。社内の組織づくりに関心を持ち、決定権がある。
職種と規模：IT系。20~50人。
勤務地：コロナの関係上、オフィスor在宅。
職歴：都内大学卒業後、大手IT企業へ入社。２度の転職を経て、今の会社へ入社。
スタイル：朝早くから仕事をし、プライベートとの境目が無い。
ファッション：対面の商談以外では、ラフな格好でいる。
▼人物像
・年齢は若くないが、変化することへの抵抗感はない。
・未来や組織にとっての良い選択をする必要がある。
・デザインに関心はあるが、中身を重視。
・奇を狙ったデザイン、ビジュアルを重視して使いにくいものを嫌う。
▼ターゲットがサイトを閲覧時、考えている事
・人数が増えていくことを見越した組織づくりのために、プロジェクト管理ツール、ナレッジを蓄積できるツールを導入したい。
・他の社員でも扱いやすく、導入が簡単なものが良い。
・どの職種でも扱いやすいものが良い。（開発者、デザイナー、ディレクターなど）
・その他アプリと連携できるものが良い。
・会社に合うものかどうか判断したい。
②ターゲットに与えるイメージを決める
ターゲットの情報を元に、webサイトを通して与えたい印象を決めていきました。
▼思ってもらいたいこと
・ユーザーに自分に向いているプロジェクト管理ツールだと感じてもらう。
・扱いやすく導入が簡単そう。
・ 機能が豊富で、デザイナー・開発者・ディレクターなど、いろんな職種の人でも対応できる。
主に「カジュアル」「軽快な」という印象を与えたいと考え、言語イメージスケールに落とし込んでみました。
与えたい印象を言語化して整理していく中で、以下の２色をメインカラーとアクセントカラーに設定しました。
ただ、この２色は元の製品サイトとほぼ一緒になってしまいました。
③イメージボード作成＆競合サイトから共通パターンを抽出
デザイン作成前の情報収集が大事であると、先輩デザイナーに日頃指摘いただくので、今回は気持ち多めに集めてみました。
ピンタレストで収集する際は、ピンを100個以上集める事を心がけています。
集める競合サイトは、デザインの良し悪しに関係なく、出来る限り多く収集しています。
その製品や業界に共通するベターなルールを見つける事ができ、ビジュアルの方向性でブレることを回避するために行っています。
しかし、競合サイトのデザインに囚われすぎるのは良くないので、気をつけてデザインを考えなければいけません。
backlogの競合比較サイト
④ワイヤーフレーム作成
僕自身、ワイヤーフレームはあまり作った事が無く、ベストな見せ方を考える事が出来ないと困ったので、株式会社ベイジのナレッジブログで配布されているワイヤーフレームを頂戴し、流用しました。
Knowledge / baigie「成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します」
⑤実際のデザインに落とし込む
実際に作成したデザインがこちらです。
また、デザイン作成で気を付けた６点について記述してみました。
（導入実績の部分など、一部の素材は仮の状態にしています。）
参考書籍：ウェブデザインの思考法
▼配色
メインカラーはロゴに使用されている黄緑を使用しています。
黄緑には「ポジティブ」「ポップ」「明るい」といった印象を与える心理的な効果があります。
カジュアルさを演出することで、導入に対しての心理的なハードルを下げる事に貢献できればと思い、全体的な配色を選定しています。
ただ、黄緑を全体的に使いすぎると幼稚な印象になってしまうため、ファーストビューの背景色・ボタン・CTAの背景色などの使用にとどめています。
▼フォント：noto sans JP
デバイスフォントを共通で使用しています。
丸みを帯びたフォルムをしているフォントなので、カジュアルな印象を与えたい場合に使用しています。
また、本文のフォントサイズは基本16pxで設計し、可読性を保ちつつコンテンツの内容理解が充分に行えるよう考慮しています。
▼イメージ素材（写真・イラスト）
メインで扱うイラストはオフィスや人をモチーフとしたものを選定し、「チームで働く全ての人に」という製品のコンセプトを視覚的に表現して、利用シーンを想像してもらいやすくしました。
SaaSなど無形物の商材では、写真をメインで扱うと視覚的に差別化できず、没個性的で印象レベルで記憶に残りずらくなる恐れがあるため、写真素材の利用はbacklogのUIのみにしています。
使用した素材サイト：iStock
▼レイアウト
奇をてらったレイアウトは避けつつ、コンテンツ要素を座布団（背景にある薄緑の色面）からハミ出した配置にする事で、単調さを回避して堅い印象を無くしたいと考えました。
▼アイコン
絵的な塗りのアイコンなアイコンを選定し、イラストを扱ったメインビジュアルに合ったトンマナで統一させました。
線のアイコンと比べ、優しい印象に仕上がったのではと考えています。
▼デコレーション
タイトル周りの破線及び背景の水玉を用いて、カジュアルでポップなトーンを促進させています。
ボタンなどの要素には影などの立体的な装飾を施し、クリック可能である事を視覚的に表しています。
また、影などの有機的な意匠は、開放的で温かみのある印象を演出できるので、冷たく堅い印象を無くす為にも使用しています。
まとめ
入社半年で先輩デザイナー達から教わった事の総復習として、今回の課題に取り組んでみました。まだまだ改善点も多く、先輩方の足元にも及ばないなと実感する毎日ですが、明日は今よりもっと良いものを作れるように励んでいきます。
来年は、先輩・上司の方々を完コピする勢いで吸収したおす事を目標にしていきたいです。