01 — 制作の概要
LINOA合同会社のコーポレートサイト
自社のコーポレートサイトのリニューアル。4つに分かれていたサービスを3つに整理し、トップページだけで「何ができて、いくらで、どう進むか」が分かる構成に作り替えました。情報の整理からデザイン、HTML・CSSでの実装、表示速度と公開範囲の設計まで担当しています。
できることと料金を、同じ形で並べる
相談したあと何が起きるかを先に見せる
- 担当したこと
- 情報・導線設計 / Webデザイン / PC・タブレット・スマートフォン対応 / HTML・CSSでの実装 / 表示速度と公開範囲の設計
- 使用したツール
- Figma / HTML / CSS / Tailwind CSS / Netlify
- 制作したもの
- PC・タブレット・スマートフォンに対応したコーポレートサイト
- 制作の目的
- サービスの整理と、資料請求までの導線をひとつにまとめること。
02 — 制作前の課題
何ができる会社か、
ひと目で。
4つのサービスを3つに整理して、
迷いどころを減らす。
設計のポイント
以前はサービスごとにページが分かれていて、どれを見ればいいか分かりにくい状態でした。Webサイト制作・業務効率化・オンライン秘書の3つに絞り、それぞれに「できること」と「料金の目安」を1行ずつ添えて、トップページだけで見比べられるようにしています。
何を頼める？
3つのサービスを見比べる
いくらかかる？
料金の目安をその場で確認
どう進む？
相談から納品までの流れ
03 — 情報・導線の設計
知る、選ぶ、相談する。
はじめて訪れた人が迷わない順に並べる。
資料請求までの情報の流れ
01
会社を知る
何をする会社か
02
できることを知る
3つのサービス
03
費用感をつかむ
料金の目安
04
実例を見る
制作実績
05
相談へ進む
資料請求はひとつ
04 — デザインの工夫
一つひとつの設計に、
理由を。
伝える順番と、聞きにくいことの扱い方。
01 / ファーストビュー
最初の画面で、
言いたいことを言い切る。デザインの比率をそのまま再現したところ、よくあるノートパソコンの画面では見出しの2行目が隠れてしまいました。実際の表示領域を測り直して位置を調整し、スクロールしなくても見出しとイラストが収まるようにしています。
02 / 料金の見せ方
聞きにくいことほど、
先に書く。料金は「10万円〜」「3万円〜」「時給4,000円」と目安を明記しました。問い合わせないと分からない状態をなくし、相談する前に見比べられるようにしています。
03 / 行き先の統一
押す場所を、
ひとつに。ページ内に散らばっていた問い合わせの導線を「資料請求・お問い合わせはこちら」の1本にまとめ、どこから押しても同じ場所に着くようにしました。
05 — 完成したデザイン
完成画面と、動きの設計。
落ちてきて弾むロボットで、
最初のひと目を引きつける。
ロボットとロゴマークが上から落ちてきて、ぽんと弾んでから、ゆっくり浮かびます。マウスを近づけると逃げますが、枠の外には出ません。動くのは初めて訪れたときだけで、アニメーションを減らす設定にしている方には動かしません。
06 — 実装
軽くして、待たせない。
最初の1画面が出るまでを短くする。
実装で意識したこと
表示速度は、ブラウザ上でCSSを組み立てる方式から、あらかじめビルドしたCSSを読み込む方式に変えました。読み込むファイルは397KBのJavaScriptから27KBのCSSになっています。画像はWebPを基本にしつつ対応していない環境向けの画像も残し、幅と高さを指定して読み込み中のガタつきを防いでいます。