従来のサイトは専門用語が多く、難しい印象があることが課題でした。まずは事前のヒアリングにおいて、大きく2点のご要望をいただきました。
・専門的な製品のため『そもそも何の製品か』『どんなことができるのか』をわかりやすくしたい
・今っぽさを感じるデザインに変えたいが、海外企業っぽさは避けたい

上記のご要望をもとに解像度を上げたご提案書を作成。具体的な改善内容やトンマナなどの方向性をすり合わせました。

①CV導線を全ページに設置
資料ダウンロードページとお問い合わせページへのボタンをフッターに設置いたしました。
どのページからでも資料ダウンロードやお問い合わせに遷移しやすくなったことで、CVRの向上が期待できます。

②製品ページは追従タブUIで比較しやすく
従来は親となる製品TOPページがありましたが、削除する方針となりました。そのため、子ページに外部流入した場合にも、もう片方の製品があることを認識しやすいようにデザインする必要がありました。
各製品へのリンクをタブ＆スクロール追従で、いつでももう片方の製品ページへ遷移できるように。また、タブのデザインも吹き出しのような形にすることで、今どちらのページを閲覧しているのかがわかりやすくなっています。

③資料請求フォームをまとめて1つに
従来の構成では各資料ごとにフォームが存在し、複数の資料が欲しいときには何度も入力しなければならない煩雑な仕様となっていました。これを1つにまとめたいというご要望をいただき、まとめて請求できる仕様に変更いたしました。
また、入力フォームを同じページ内の下部に設置することでページ遷移を減らし、資料請求までの導線を簡潔にいたしました。

CMSで動的に組んでいるページは簡単に編集ができますが、それ以外の静的なページにおいても、後から細かい部分のコピーや画像などを差し替えたいことがあるかもしれません。その場合、都度別で発注しているとコストも手間もかかってしまいます。
そこで今回は、リリース後のアフターサービスとして、お客様の方でhtml/CSSファイルを編集する方法をご教示しました※。

※コーディングの知識が一定必要になります。
※お客様の方で変更を加えた場合は保証対象外となります。

広告用のランディングページはCVが最大の目標となるため、申し込みフォームへユーザーが辿り着きやすいように設計する必要があります。

その観点から、予約の導線までは他ページへのリンクを入れず、ページコンテンツは内容をシンプルかつコンパクトにまとめました。
更にページを下まで見ないユーザーでも予約フォームに到達しやすいよう、スクロール追従するボタンなど各所に予約フォームへのアンカーリンクボタンを置くことで、フォーム入力を促す工夫を施しました。

注文住宅という高価なものを購入していただくためには、信頼性を表現することが大事だと考えました。

まずはコーポレートカラーのオレンジをベースに、「住宅＝家族」を連想させるような温かみのあるトンマナを設定。加えて視認性の良いフォントを使用することで、より親切で親しみのある、相談に乗ってくれそうな安心感を演出しました。

次に写真です。住宅会社のwebページにおいては施行事例など実際の写真が多い方が好ましいです。しかし今回のページは出来る限り情報量（ページの長さ）を短くまとめなくてはならなかったため、写真を多く見せたい領域はスライド式にし、写真の枚数を担保しながらも縦の長さを減らしたUIに仕上げました。

ページリリースから1ヶ月の期間、Google Adsを使用したリスティング広告の運用をさせていただきました。
予算と期間をご指定頂き、その範囲内で最も効果が出せるように、競合調査なども重ねながら計画・設計を行いました。

今回は近辺の展示場へ足を運んで頂くのが目的となるため、対象地域を名古屋周辺の市町村に絞って広告を設定しました。また掲出後も毎日モニタリングを行い、毎日の結果を考察しながら内容の微修正を都度行いました。

日次で行った最適化作業の一部をご紹介します。
・広告入札額の調整
・広告文のテスト＆ブラッシュアップ
・検索キーワードの最適化
・除外キーワードの設定

本案件で特に意識した点は、どのサイズでも崩れないレイアウト（＝レスポンシブ対応）です。
BtoB営業の方がターゲットのページなので、様々な場所や端末で閲覧される可能性を考慮し、タブレットなどの変則的なサイズでも美しく見えるように制作しました。

例えば、ワイヤーフレームは通常のPC・SPのほかにタブレット版もご用意。ブレークポイントごとにどのようなUIになるのかを丁寧に確認しながら進行いたしました。

いただいた原稿をそのまま流し込んでみると、全体的にページ内のテキスト量が多いように感じました。ビジネスパーソン向けのページなので説明が厚いこと自体は問題ないのですが、見てほしい情報へのフォーカスがぶれてしまい、「色々書いてあるけどよくわからないサイト」になってしまうのがよくあるケースです。

そこで私たちは、ページ内の情報に優先度をつけることにしました。

例えば「機能一覧」のセクションにおいて、全てのユーザーに見てほしいのは「メイン機能＞サブ機能」だと考えました。
そこでまずはメイン機能のアプリ画面が大きく見せられるようなUIを設計。サブ機能に関しては思い切って文章を削らせていただき、興味を持ったユーザーだけが目を留められるようなレベルに落とし込みました。

営業に使用する資料にもデザインを入れたいというご要望をいただき、弊社にて制作いたしました。

トンマナは先に作ったランディングページのものを転用し、ブランドとしての統一感を演出しています。
営業先の企業様に信頼感を持ってもらえるよう、整然として読みやすく、スタイリッシュな資料にすることを目指しました。

なお、制作ツールにはPowerPointを使用。デザインの再現性はデザインソフトよりも劣りますが、現場の営業様でもフレキシブルに修正・取り扱いがしやすいことを重視しました。

ゲーム本体の開発と並行していたため、プロジェクトスタート時点ではまだ明確なコンセプトアートなどがない状態でした。
そこでまずは「どのような世界観を描きたいのか」をヒアリングし、キーワードを抽出。他IPなども参考に「夢游仙境ロマネスク: Chronicles of Refugia」独自の世界観を一緒に模索させていただきました。

グラフィック重視のサイトになるため、完成デザインが想像しやすいよう、通常よりも細かい部分まで作り込んだワイヤーフレームを作成いたしました。また、ワイヤーフレームおよびデザインはXDのプロトタイプ機能で実際の挙動をご確認いただきながら進行しました。それにより、デザインフェーズに入った後もUIについては特に大きな齟齬もなく進行することができました。

美しいイラストを映えさせるため、ページデザイン自体は黒ベースのシンプルなものをご提案いたしました。その代わり、ボタンや背景などの随所に、控えめながらも世界観を感じさせる細かなあしらいを加えております。

TOPページのメインビジュアルにはアニメーションをつけたいというご要望をいただいていました。ただ、しっかりとした動画を作ると費用がかさんでしまうため、低工数で制作できながらも見た目では動画のようにリッチに見えるような方法をご提案しました。
メインビジュアルに使用するイラストを入稿いただく前に、まずはラフ画の状態をご支給いただき、動きのイメージを作成。そのご確認後、完成データをいただき、After Effectsでモーションをつけ、json形式で出力・実装しました。

そのほか、TOPページの読み込み前にローディングのアニメーションも実装いたしました。

本作は海外でも販売する商品なので、一部ページは英語対応をしております。

多言語対応の実装方法としては「①別言語用ページを作る（/enなど）」「②別言語用にドメインを分ける」「③多言語化ツールを使って自動変換」などがありますが、今回は一部ページのみのご依頼だったこと、見た目を担保したいことなどから、「①」で進めることになりました。

日本語⇔英語の切り替えボタンは画面右上にわかりやすく表示。切り替えに対応していないページでは非活性にすることで、「押したのに切り替わらない」ということが発生しないよう、UXにも配慮しました。
また、全ページが英語対応ではないため、異なる言語ページ間での遷移も工夫しました。英語ページから英語対応ページに遷移した場合は英語のまま表示される一方、非対応ページにもメニューなどから通常通り遷移できるように。その場合は日本語版のページが表示されるようになっております。