技術情報

2024/08/02 2024/08/02

お名前.com Webデザインの裏側ー構想から軽量化まで

こんにちは！GMOインターネットグループ株式会社 Webデザイナー兼ディレクター兼カメラマンの近岡です。メインはドメイン登録サービス「お名前.com」、時折「GMO Developers Day 2023」や「GMO 5G」などのグループ内クリエイティブを作ったり、陸上部の選手写真や外部イベント撮影などもしています。
今回は、インハウスデザイナーとしてのマインド…ではなく、「どういうフローでWebページを制作しているのか」を紹介させていただきます。ぜひ「うちと同じ！」「ここが違う！」というリアクションをとりつつ何かの役に立てていただけますと！

目次

題材：ランディングページ「総額1億円以上かけたリニューアルをまさか隠蔽!?｜お名前.com レンタルサーバー」

_{▼実際のページはこちら（別窓）}

総額1億円以上かけたリニューアルをまさか隠蔽!?｜お名前.com レンタルサーバー

制作の流れ

案件によって変わりますが、Webデザイナーは主に以下の太字箇所を担当します。

構想・調査 › ワイヤー › デザイン › データメイク・挙動指定 › テスト確認 › 公開

① 構想

2019年、「お名前.com レンタルサーバー」が「お得×超高速×かんたん」をテーマにスペック・デザイン共にリニューアルしました！

無事公開され安心したのも束の間、数年経ってもSEO上位のアフィリエイトサイトに旧プランが掲載され、スペックの向上やデザインの刷新の認知度は思うように向上していない課題が…。

そこで「ストレートに”知られていないと嘆く😭”ことを入り口に、旧プランとの差をざっくり伝えられるページ」の作成を決めました。

② ワイヤーを事業部に提案

まず、ページの目的や事前情報を整理します。

続いて、シンプルな見た目で骨組みを作り提出します。（中途半端にテイストを加えると「イメージと違う」という印象を抱かせてしまうため、極力シンプルに）

その際、そのページのワイヤーだけではなく「構成の狙い」「想定している導線」「用意していただきたい情報」などもお渡しし、脳内同期と必要な情報の収集を併せて行います。

③ デザイン

ワイヤーのOKが出たらいきなり1ページ分のデザイン！ではなく、メインビジュアルを何種類か作成し提出します。手戻りリスクをできるだけ少なく！

確認を待っている間に下部コンテンツのコンテンツを着々と作っていきます。着々と…。

PC→SP→挙動の順に作成し事業部OKが取れたらデザインFixです。やった〜！

④ データメイク・挙動指定

デザインFix…それは始まり…。ここからモーション指定・挙動指定・素材の軽量化など、地味に時間のかかるデータメイクを行います。

クリエイティブ部はデザイナーとコーダー（フロントエンドエンジニア）が分業しているので、参考URLを貼ったり、自分で作った簡易的なコードを用意したり、わかりやすさに重きを置いて準備をします。

_{▼モーション系}

_{▼レスポンシブ指定やパーツごとの動作系}

お渡しするものはXdファイル・軽量化済みのイメージ・開発用URL・仕様などのメモ　です。事業部でmetaやシェアの指定がない時はデザイナー側で用意したりもします。

⑤ テスト確認・公開

コーダーさんからテストアップされたら、主要ブラウザのパソコン・スマホ・タブレット表示を確認し、動きやレイアウトのズレをリストアップ。その修正が上がったらまた確認…を繰り返し、問題無しと判断されればライブアップ！祝！お疲れ様でした！！

〜そして運用へ（むしろスタート）〜

こだわりポイント

フローの説明で終わっても味気ないので、こだわったポイントを紹介します。

1. 週刊誌デザイン雰囲気作り

「こんなに手間暇かけたのに知られていない😭」をダイレクトに書くより、お客様がついつい見てしまうような引きを作るため、タイトルとあしらいを工夫しました。

_{▼週刊誌のデザインを片っ端からイラレに並べ、どんなあしらいなら雰囲気が出るか練習}

_{▼週刊誌の質感を出すために写真をドット化（余談ですが使用している写真の半分は私が別案件で撮影したもの。SDGs！）}

_{▼前景にテクスチャやシャドウを配置してページ全体を仄暗く}

2. 同じ素材でレイアウトチェンジできる素材作り

_{▼（左）パソコンでの配置｜（右）スマホでの配置}

_{▼例えば写真横のタイトルはパソコンはで３行、スマホで１行にできるように}。

3. ページの読み込み速度を最適化するための容量管理

画質を維持しつつ、ページの読み込み速度を損なわないよう、画像サイズ・拡張子やアニメーションの入れ方を工夫し、13MBから2MBまで削減！

_{▼PhotoshopとIllustratorの素材一覧}

_{▼（左）全てを含んだアニメGIFだと容量が膨れ上がるため、静止画の上に部分的なアニメGIFを配置｜（右）スクロールで切り替わる画像を別で書き出し１枚１枚のサイズを小さく}

実際のページへのリンクをもう一度ペタリ（宣伝）。

総額1億円以上かけたリニューアルをまさか隠蔽!?｜お名前.com レンタルサーバー

インハウスデザイナー（実装分業）の働き方

同じインハウスでもGMOインターネットグループ内にはデザイン・実装をまとめて対応する会社も、分けている会社もあります。

それぞれ一長一短ありますが、分業のメリットは「育てるスキルが集中するのでスピード・質が上がる」ことかなと！

_{▼本件でコーダーさんに提案いただいたことは、星の数ほど…}

また、今回はまとめやすいペライチのLPを例に紹介しましたが、事業を運用するインハウスデザイナーの本拠地はサービス作り！その話も機会があれば👋 { 見ていただきありがとうございました！

ブログの著者欄

近岡麗華

GMOインターネットグループ株式会社

GMOインターネットグループ株式会社ドメイン・ホスティング事業本部クリエイティブ部お名前.comデザインチーム所属。 Webデザイナー兼ディレクター兼カメラマンとして、"ポジティブな気持ちになれるクリエイティブ"を軸に奮闘中！

ブログ記事一覧へ

採用情報

関連記事

KEYWORD

CATEGORY

TAG

もっとタグを見る

PICKUP

採用情報

SNS FOLLOW

GMOインターネットグループのSNSをフォローして最新情報をチェック

CATEGORY