CTOがトップページを3カラム→1カラムにデザインリニューアルした話
CTOの名人です。
本日は、先日リニューアルしたトップページの話をしようと思います。
ちょうど現時点ではデザイナーさんが弊社には不在でして、私が気合でデザインし、実装まで行いました(ちなみにデザイナーさんは3月から1名参画予定なので楽しみです)。
変更内容
今回リニューアルしたページはこちらです。
旧トップページ
※ローカル環境で再現したのでちょっと変なところはあります
新トップページ
変更差分について
ご覧の通り、変更した内容は大まかに言うと以下の通りになります。
- 3カラムが1カラムになった
- 旧デザインは左に検索リンク、右に記事コンテンツ等への導線が置いてありました
- 新デザインは全てが上から順に並ぶようになりました
- 内容が変わった
- 旧デザインはサービスの説明はほぼなく、先生や指導コースへの導線だけだった
- 新デザインはサービスのコンセプトや特徴も多く掲載している
変更の意図
マナリンクとは何者なのか、どういった特徴があるのかの詳細を掲載
旧デザインでは導線ばかりでトップページが形成されていました。速やかにコンテンツにたどり着きたいユーザーにとっては親切な一方、オンライン家庭教師ってどんな指導をするの?といった疑問点がまだ残っているユーザーにとっては不親切な情報設計になっていました。
これは意図的なもので、マナリンクにやってくるユーザーさんはすでに塾や家庭教師に何らかの問題意識があり、オンライン家庭教師についても調べがついているユーザーさんが多いという見立てだったので、速やかに導線を提供するほうが良いと思っていたのです。
とはいえ、リリース後数ヶ月が経つと、やはり導線も重要だけどマナリンク自体の特徴や、オンライン指導のイメージがつくような情報を載せたほうが良いのではないか、という考えも出てきました。
そこで、マナリンクの特徴や、オンライン指導ならではのメリットを掲載していく運びになりました。
しっかり先生や指導コースへの導線は残す
一方で、マナリンクの強みとして大きいのは、個々の先生の存在感を際立たせていること、価格を先生が自由に決定できることによる透明性があります。そこで、指導コースや先生のプロフィールへの導線はトップページに残すとともに、なるべくファーストビューから近いところに導線を残す方針でデザインをしました。
トップページをデザインすると、自社の相対的な強みや、こだわりポイントについて再考するきっかけになるので楽しいですね。
デザインの進め方
Figmaを利用
デザインから実装まで私がやるにしても、デザインが終わった段階でCEOに確認するなどは必要ですから、脳内でデザインをして早速実装するよりはデザインツールでしっかり作り込もうと考えました。
Figmaが好きでここ1年ほど愛用しています。
カラム数の変更
旧デザインは3カラムですが、情報量の増加に伴い、中央のカラムばかり長くなってしまい不自然になるという理由から、1カラムに並べる方針に変更しました。エンジニア的にも、レスポンシブ実装の難易度が格段に下がるので歓迎です。
ファーストビューの検討
トップページの顔となるファーストビューは、3パターン考案しました。自分の中に引き出しが多いわけではないので、Pinterestでデザインをざっと眺めつつ、良さそうなものを選択しました。
Pattern1
Pattern2
Pattern3
Pattern1はベターだけど画像と文字を重ねる塩梅が難しそう、幅広いディスプレイで表示の際の両端のごまかし方が難しそう、余白が上手く使えていない感じがするといった理由で断念。
Pattern3はSaaSでよく見るデザインですが、サイト全体の明るめの雰囲気と合わないので断念。
こうしてPattern2に決定しました。レスポンシブ時の余白の扱いが難しいですが、画像の上に薄い青の四角を重ねることによって、タイトルと下のコンテンツへと視線誘導していけている、気がします。
余談ですが、画像内にもある通り今回はPixtaさんから多くの画像を買わせていただきました。いつもお世話になっております。検索機能がとても優秀ですよね。
Pattern2の画像どれにするか問題
さて、デザインが決まっても画像の選択が重要な問題として残っています。
色々考案して散らかっているFigmaのスクショを貼っておきます。結果として余白を重視して、視線の流れを作ってくれそうな画像を選択しました。細かいですが人物の左右の向きも考慮しています。
マナリンクの5つの特徴と画像素材の自作
続いて、マナリンクの特徴を説明するリストのデザインを行いました。完成形は以下のとおりです。
このデザインにはいくつかポイントがあります。
- 連番が振られている
- PCでは左右交互に寄せられて並んでいる(スマートフォンでは一律全幅です)
- それぞれタイトル、本文、イメージ画像で構成されている
ここのデザインは特に他の候補を出すことなく、初回のデザインで決定できました。昔から交互に左右に振るデザインが好きで、不要なボーダーや色使いに頼ることなく、項目が変わっていることを表現できるし、1カラムにありがちなワンパターンになってしまう問題の解決策でもあると思っています。読みにくいという意見もありそうですが、しっかり目線を滑らずに止めてもらいたいところに使うのは個人的に有力かなと思っています。
イメージ画像はフリー素材でも良かったのですが、マナリンクの売りポイントを他社と比べてありがちだとは絶対に思ってほしくないところだったので、なんとかして自分で画像を作りました。
ちょっとパワーポイント感が強いので、ここは本職のデザイナーさんにやっていただいたほうが圧倒的に出来の良いものが完成しそうなところではありますが、善処はできたかな、と思っています。
白黒グレーで表現できた2枚めの画像は割とよくできたかな・・・
実際に弊社に登録頂いている先生の顔写真を使わせていただいているのもポイントです。ここはリアルな情報を届けたいところでしたので。
レスポンシブ対応
さて、最近のデザインのレスポンシブ対応は往々にして大変ですよね。今回もスマートフォン、タブレット、PCそれぞれの対応にはそれなりに苦心しました。特に最近のiPadは画面サイズがやたら大きくなっており、CSS側でPC判定が下ってしまって中途半端なデザインになってしまうなど気を使うことが多いです。12カラムデザインをスムーズにできるようになれば解消するのでしょうか。
実装
デザインが終わったら実装です。今回は、デザインに2営業日、実装に3営業日くらい掛けて実装しました。
前述の通りレスポンシブ対応は実装時に結構苦労しました。
以下のライブラリを使うことで、サーバー側で予めデバイス判定をした上で適切な画像を表示することを選べるといった工夫が必要になりました。
https://github.com/nuxt-community/device-module
ただ、CloudFrontの問題で、iPad AirがPC判定されてしまうバグがあるようで、ハマりました。結局CSSをチューニングすることで無理やり解決しています。
画像周りはWebP対応や、Retinaディスプレイ対応も含め割と頑張っているので、有識者の方がいらっしゃればぜひ見てみてください笑
まとめ
トップページのリニューアル話をご紹介しました。
SEO対策やCEOの考え方といった要件も取り込みながら、全体のバランスを考えてデザインしていく作業は、期間としては短かったもののこうして振り返ると結構個人的に思い入れのある施策の1つだなと思いました。
オンライン家庭教師マナリンクでは、Webエンジニア、React Nativeエンジニアを募集しております。
TypeScriptやPHP、AWSにFirebaseといったスタックでの開発に興味がある方、上記のトップページを見て事業に興味を持っていただいた方はぜひご連絡ください。お待ちしております。