今回は事業売却を検討されている経営者の方に、売却先のひとつとしてファンドの存在があること知っていただき、初めての方でも気軽に相談していただけるような窓口でありたいという想いから、事業売却に特化した内容のLP制作をご依頼いただきました。

今回のターゲットは、事業売却を検討している経営者の方々です。
LPに訪れた方のファンドへの理解度はさまざまなことが想定されました。
そのため、どういった情報にスピーディにアクセスができると「事業売却をお任せしたい」や「一緒に伴走してくれる安心感」を感じていただけるかに念頭をおきながら、構成や掲載する内容の検討をしました。

全体の構成案はクライアント様が作成いただいておりましたので、その想いを具体化できるように作成しました。
ファンドに対して思い浮かべるイメージは良いものばかりではないため、LPを訪れた方が感じているお悩みや疑問をピックアップし、クライアント様のサービスを活用した場合のメリット・デメリットやクライアント様の強みがお伝えできる構成としました。

また、実際に対応されるクライアント様のアドバイザーの方々のお顔と略歴が分かることでより親近感をもっていただける構成にし、動画ではアドバイザーの方々のお顔写真では、伝わりづらい話し方や熱量や人となりを知っていただけるようにしました。
訴求すべき内容が多岐にわたるため、伝えたい内容を並べるだけですと全体が長くなりLPからの離脱率が多くなる懸念があったため、デザイナーとともに、UI/UXから検討を行い作成しました。

詳しくはこちら   https://crage.co.jp/works/web-newold/

秋田県・岩手県・宮城県を拠点に、総合物流サービスを始めとして、倉庫業務、引越サービス、産業廃棄物処理など、多岐にわたる物流サービスを提供されているヨコウン株式会社様より、コーポレートサイトリニューアルをご依頼いただきました。

まずは旧サイトの全体のページ数や構成を確認しましたが、ページ数は大きく変更せず、社内で今後も更新・運用していけるようWordPressを取り入れる前提で構成を再設計しました。

＜ワイヤーフレームの構成＞
特に「サービス」「活動内容」の構成をメインに検討しました。
「サービス」では多岐に渡る複数のサービスを大きく4つの事業に分け、その事業の中で各サービスページへの導線を置く構成にしました。
「活動内容」では大きく品質管理、社会貢献、環境の3つに活動内容を分け、各ページで取り組みを紹介することとしました。
どちらも1つの情報を求めてアクセスしたユーザーにヨコウン株式会社様であらゆるサービスの対応が可能なこと、あらゆる活動をされていることを認知していただくことを狙いました。
また、今回大きく内容を拡張した「採用情報」ページでは実際の会社の様子や社員の方のリアルな声を求職者の方へアピールできるよう、写真を多く、社員インタビューのコンテンツを厚めに検討しました。

＜コミュニケーション＞
弊社社内での導線検討や、クライアント様とのご相談時にMiroというホワイトボードツールを活用し、よりタイムリーにやり取りを行いました。

詳しくはこちら　https://crage.co.jp/works/web-yokoun/

大阪府に本社を置くクライアント様は、これまでも関東エリアでの採用活動は実施しておりましたが、主に九州・関西・関東で採用活動を実施されておりました。
今回は、公開求人を出すうえで、求人訪問できない高校の方にも広くクライアント様の仕事内容を知っていただき、かつ、現在はパンフレットよりもネットで検索することが多いことから、よりタイムリーに情報を伝えられるサイト制作をご依頼いただきました。

ターゲット分析〜方針検討
今回のターゲットは高校生とその保護者や学校の教職員です。
就職を考えている高校生はアルバイト以外の就労経験はあまりない世代であることから、他サイトよりも親しみやすさを全面に出したデザインにする必要があると考えました。
また、よりタイムパフォーマンスを重視する傾向がある世代なことから、掲載するテキストを短く分かりやすくし、かつ、図や写真と交えて分かりやすく掲載する必要がありました。
加えて動画を活用することで、実際に就労する際のイメージがより具体的に想像できるようにする必要があると考えました。
また、教員・保護者の閲覧も想定されるため、読む方のニーズに合わせて具体的な会社の説明を掲載するページも用意いたしました。

ひと目である程度の内容を理解していただけるように、見出しのライティングや文字量に注意しながらページ構成を検討いたしました。
特に、生産職とエンジニア職について紹介しているページと先輩社員のインタビューページを回遊できるように導線設計を行い、実際の職場の雰囲気や働き方が伝わるような設計にいたしました。
また、顔写真と就業風景の写真に加え、対話形式のインタビューやメッセージを掲載することで自分ごととして捉えていただけるように工夫いたしました。
保護者・教職員の方にお伝えしたい情報ページでは、大事なお子様が今後勤める先がどのような会社なのかご理解いただけるように、住宅補助制度など内容をきちんとお伝えしクライアント様の信頼感や安定性を伝えられるように考慮いたしました。

詳しくはこちら　https://crage.co.jp/works/web-ykbaking/

株式会社ビジョン・コンサルティング・デジタル様は、デジタル技術を活用したコンサルティングファームとして、新たに設立されました。コーポレートサイトの制作の目的として、以下のご要望をいただきました。
・コンサルタント採用の強化
・企業認知向上
・企業イメージの確立
・信用、信頼、信憑性の向上

特に、スタートアップの機動力を強調した企業ブランドの訴求と、親会社であるビジョン・コンサルティングの安定性を反映するようなサイトデザインが求められました。また、デザインについては以下の具体的な要望がありました。
・インパクト　ー　扱う商材は、最先端デジタルを用いたコンサルティングであり、その先進的イメージを強烈に植え付けたい。
・期待感　ー　デジタル分野が秘めるポテンシャルを表現し、この分野に挑戦する企業や個人の共感を得たい。
・シンプル、知的、クール　ー　シンプルイズベストという引き算の美学を取り入れ、知的でクールな印象を演出したい。

＜ワイヤーフレームの構成＞
「コンサルタントの採用強化」は主に求職者に向けた情報、「企業認知の向上」は主に対外的な企業に向けた情報、この2つをバランスよく訴求できるように、サイト全体のワイヤーフレームを構成しました。
CMSで更新可能な箇所は、クライアント様が容易にコンテンツを編集できるように設計し、更新時の具体的なイメージも伝わるようにクライアント様へ共有しました。例えば、SERVICEページ内のEXPERTSセクションなどは、登録情報が増えた際にどのように表示が追加されていくかなども具体的に示しています。

＜コミュニケーション＞
サイト構成やCMSの更新箇所などを詰めるため、Miroというホワイトボードツールを活用し、クライアント様と密にやり取りを行いました。このツールを通じて、リアルタイムでフィードバックを受け取りながら、サイト全体のワイヤーフレームを作成しました。

詳しくはこちら   https://crage.co.jp/works/web-vcd/

従来のサイトは専門用語が多く、難しい印象があることが課題でした。まずは事前のヒアリングにおいて、大きく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にも配慮しました。
また、全ページが英語対応ではないため、異なる言語ページ間での遷移も工夫しました。英語ページから英語対応ページに遷移した場合は英語のまま表示される一方、非対応ページにもメニューなどから通常通り遷移できるように。その場合は日本語版のページが表示されるようになっております。