ホームページのトップデザインは、非常に重要でユーザーが離脱するか留まるかを決め、売上にも影響するとも言われています。

本記事では、ホームページのトップデザインのポイントや依頼先、トップデザインの費用相場などについて解説します。

トップページの役割

トップページの役割は次の3つです。

• ホームページ全体の内容を伝える
• 必要とする情報へスムーズに誘導する
• 重要な情報を伝える

ホームページ全体の内容を伝える

まず、トップページはホームページ全体の内容を伝えることが重要です。ユーザーにそのサイトが自分にとって必要かどうかを判断する材料を与えてあげる必要があります。

ユーザーはトップページで「ターゲットは誰なのか」「自分が読みたい内容があるか」「自分にとってベネフィットがあるのか」を一瞬で判断すると言われています。訪問したユーザーの5割がファーストビューで離脱するとも言われ、直感的に理解できるようなデザインが求められます。

必要とする情報へスムーズに誘導する

また、ユーザーが必要とする情報へスムーズに誘導してあげることも重要です。ユーザーの興味に合わせて、キャンペーン情報や検索メニュー、商品ページへとわかりやすく導線を作ってあげる必要があります。

「ユーザーが見たい情報」がわかりやすく配置され、直感的に操作できることが重要で、「企業側が見せたい情報」ばかりを入れていると離脱が起きてしまいます。

重要な情報を簡潔に伝える

トップページでは、お知らせやキャンペーンなどユーザーにベネフィットがある重要な情報を伝えるようにしましょう。情報の詳細は遷移先に記載し、トップページでは概略のみを載せて、それぞれの情報を求めている人を誘導するように配置します。

参考にしたいトップページのデザイン事例5選

参考にしたいトップページのデザイン事例をご紹介します。

ユニクロ｜LifeWear magazine

▲出典：ユニクロ｜LifeWear magazineユニクロのメディアサイト「LifeWear magazine」では、ユニクロのファッションを着用する人たちのライフスタイルを紹介し、そのスタイルやテイストを中心に伝えています。ECサイトと異なり、スクロールしながら感覚的に読めるページになっているのが特徴です。

ユニクロの服を着ながら仕事をする人たちの日常を伝えることで、同時にファッションの雰囲気を伝えつつ、その人に合わせた着こなし方をさりげなく提案しています。

任天堂ホームページ

▲出典：任天堂ホームページ全世界にゲームを提供する任天堂のホームページでは、子どもたちや若い人に受け入れやすい明るいカラーを使用し、元気な印象を与えています。上部のメニューバーでは製品やトピックス、キャラクターのほか、見やすく、タップしやすい位置に「サポート」と「さがす」を配置しています。

HARIO

▲出典：HARIO耐熱ガラスメーカーHARIOの公式サイトでは、お茶を淹れる動画などをメインビジュアル全体に配置し、同社のガラス商品を使うライフスタイルの一コマを中心に伝えています。こちらでは、任天堂のホームページとは対照的に多くの情報を入れず、1スクロールでメニューバーが出てくる仕掛けです。

環境への意識やこだわりを持った同社の理念や想いを効果的に伝える配置になっており、興味がある人がその先にクリックして見てもらうという構成です。

SUUMO ジャーナル

▲出典：SUUMO ジャーナルSUUMOジャーナルは、株式会社リクルートが運営する住宅・不動産購入・売買の情報サイト「SUUMO」のメディアサイトです。上部のメニューバーには、「買う」「借りる」「リフォーム・内装」などが並び、それぞれに興味を持っている人が見たい情報に誘導させる構成となっています。

その下の記事のサムネイルからも気になる情報を直感的に判断することができ、上から下へスクロールしているだけで、見たい情報にユーザーを誘導する仕組みになっています。

Workship MAGAZINE

Workship MAGAZINEは、日本最大級のフリーランス・副業をテーマにしたメディアサイトです。フリーランス・副業人材専門の案件検索プラットフォーム『Workship』と提携しており、メディアサイトではWorkshipでは伝えきれないフリーランスの仕事事情やライフハック、仕事のやり方などを実例を交えて伝えています。

フリーランスの人、フリーランスを目指す人の悩みや疑問などのテーマをピックアップし、そうした人たちに興味深い内容となっています。

参考にしたい！ECサイトのトップページデザイン

ECサイトでは、メディアサイトやコーポレートサイトなどと違って商品検索が便利で、機能的であることが非常に重要な要素となっています。こうしたUI/UX設計ができていないと、ユーザーが離脱する可能性が高いです。

わかりやすく、機能的で直感的な操作ができるECサイトのトップページデザインには、次の3つがあります。

北欧、暮らしの道具店

▲出典：北欧、暮らしの道具店女性を中心にファッションやインテリア、雑貨などを販売するECサイト「北欧、暮らしの道具店」では、指をタップしやすい右側の位置に検索やカートを配置し、左側に商品ページのサムネイル画像を配置することで、機能性と直感的な操作とを可能にしています。

無印良品

▲出典：無印良品無印良品のオンラインサイトでは、検索ができるメニューバーを上部固定で配置し、右側に検索メニューやサポートを配置。ユーザーが商品を検索しやすく、困ったときにお問い合わせがすぐにできるようになっています。

UNIQLO

▲出典：ユニクロ公式オンラインストアユニクロ公式オンラインストアでは、シームレスなデザインで画像と検索機能をスムーズに表示させており、タップがしやすい広い中央部に検索ボタンを配置しています。

関連記事：売れるECのサイトデザインとは？デザインのポイントを解説

トップページデザインの依頼先

トップページデザインの依頼先は次の3つがあります。

• 社内のデザイナー
• 制作会社
• フリーランス

社内のデザイナー

社内のデザイナーがいる場合は、内製します。外注するよりも背景や意図を伝えるコストを省くことができ、よりスムーズでスピーディーです。

ただし、繁忙期やリソース不足などで対応できないときは外注するほうが効率的です。

制作会社

社内にリソースを確保できない場合には、制作会社に依頼する方法もあります。ただし、制作会社はトップページのみなど小規模な依頼には対応していない場合も多いです。制作会社に依頼する場合は、一定の規模が必要となります。

フリーランス

フリーランスのデザイナーに依頼することもできます。フリーランスの場合、1ページのみの依頼も引き受けてくれることが多く、さらに制作会社に依頼するよりも大幅に費用を抑えられます。

デザインの外注とデザイナー採用について、以下の資料ではコスト比較をして解説しています。無料でダウンロード頂けますので、ぜひご覧ください。

【お役立ち資料】
デザイン外注とデザイナー採用 コスト比較表

xdesigner.jp

ホームページのトップデザイン依頼先の選定ポイント

ホームページのトップデザインを依頼する場合の選定ポイントは次の3つです。

• Webデザインの実績
• 対応力・提案力
• デザインにかかる費用

Webデザインの実績

まず、依頼するにあたって最も重要なのは、その実績です。実績が豊富なほど、ノウハウが蓄積されており、さまざまなことに対応してもらいやすくなります。

また、自社の業界に近いことや依頼内容に近いことが実績としてあれば、依頼先の候補としてピックアップしておきましょう。

対応力・提案力

フリーランスに依頼する場合、費用は安く済みます。しかしその分、クオリティやスキル面に不安を感じやすいのも事実です。まずは候補先に打診し、依頼を相談したときの提案内容やコミュニケーションの対応をみて判断しましょう。

提案内容にはその人が持つノウハウやスキルが出るため、どんな提案をしてくれるのかが一つの判断材料になります。また、柔軟に対応してくれることもフリーランスに依頼するならではのメリットなので、レスポンスの速さやコミュニケーションのしやすさなども考慮に含めると良いでしょう。

デザインにかかる費用

デザインにかかる費用を大きく抑えることで、その分の費用をほかのことに回せます。重要なデザインにしっかりと費用を掛けたいところではありますが、優秀なデザイナーに依頼すれば制作会社より大幅に安い金額で高いクオリティを期待できます。

また、社内デザイナーに依頼すれば、教育や採用などにコストが掛かりますが、フリーランスに依頼すれば3か月だけ、週2日だけ、繁忙期だけという契約も可能で、その場合も費用を大きく抑えられます。

コストを抑えて依頼するならフリーランスがおすすめ

コストを抑えて依頼するならフリーランスがおすすめです。その理由は次の3つからです。

• 制作会社より費用を安く抑えることができる
• 内製よりコストを抑えられる
• 部分的な依頼や納期など柔軟に対応してもらえる

ただし、スキルにバラツキがあるため、クオリティの担保に注意が必要です。順に解説します。

制作会社より費用を安く抑えることができる

トップページのデザイン費用相場は、制作会社も含め5万円〜50万円となっていますが、フリーランスに依頼する場合は5万～20万円程度と大きく費用を抑えることができます。

関連記事：Webデザインの費用／料金相場は？ 制作会社とフリーランスどちらに依頼すべきかも解説

内製よりコストを抑えられる

デザインを社内のデザイナーに依頼する場合とフリーランスに外注する場合を比較すると、採用コスト・運用コスト・教育コストのそれぞれにおいて大きく抑えることができます。即戦力となるフリーランスは教育の必要がなく、繁忙期と閑散期で業務量の調整ができるため年間の運用コストも大きく抑えられます。

また採用の際も実績を確認するだけでスキルが判断できるため、社員採用よりシンプルでミスマッチの際のリスクも回避しやすいです。

部分的な依頼や納期など柔軟に対応してもらえる

フリーランスに依頼する場合、コーディングのみといった部分的な依頼も可能です。その場合は3万円〜5万円程度になり、さらに安くなります。トップページだけでなく、下層ページのみといった依頼も可能です。

納期の変更についても、フリーランスによっては柔軟に対応してもらうことが可能です。

クオリティの担保に注意が必要

ただ、一方でフリーランスはスキルやクオリティ面にバラツキがあるというデメリットもあります。デザイナーの実績が見えづらいときなどは依頼を踏みとどまるケースも少なくないのではないでしょうか。

しかし、一定のスキルを持つフリーランスが在籍しているエージェントを活用すれば、依頼内容に適した人材を紹介してもらい、何かあったときにはエージェントが間に入ってサポートを受けられます。

スキルやクオリティ面などに不安を感じる場合には、デザイナー専門のエージェントサービスを活用すると安心です。

ホームページのトップデザインを依頼するならクロスデザイナーがおすすめ

本記事では、ホームページのトップページの役割や参考にしたいトップページデザイン、デザインの依頼先などについて紹介してきました。

トップページのデザインは社内のデザイナーかフリーランスに依頼するというのが一般的で、トップページのみといった依頼は制作会社では対応していない場合も多くなっています。

トップページデザインの依頼先の選定ポイントとして、実績や提案力、費用の3つが重要です。フリーランスに依頼することで費用を大きく抑えられます。

ただ、フリーランスに依頼する場合はクオリティ面の確保ができないこともあるため、ハイレベルなデザイナーが在籍する専門のエージェントサービスを活用すると良いでしょう。

国内最大級のデザイナー専門のエージェントサービス、クロスデザイナーなら厳正な審査を通過した7,000人以上のデザイナーが登録しており、最短即日での即戦力デザイナーを提案することもできます。

エージェントに相談いただければ、最短3営業日でのアサインも可能です。また、週2〜3日の柔軟な依頼も可能なので、自社の作業量に応じて効率的に外注することができます。

以下よりサービス資料も無料でダウンロードできます。即戦力デザイナーをお探しの方は【お問い合わせ】ください。平均1営業日以内にご提案します。