コーポレートサイトのホームページ制作におけるデザインとは?

更新日:2017年06月02日 | 公開日:2016年06月27日

コーポレートサイトを設計するときには表面的な流行に惑わされることなく、デザイントレンドの底に流れるしっかりとしたデザインの大きな流れ、必然性を把握しておくことが必要です。
「フラットデザイン」「レスポンシブ・ウェブデザイン」「ヒーローヘッダー」「動画」「Big UI / Low Density / Long Page」「モバイルファースト」「コンテンツファースト」を取り上げます。

この記事では、なぜそのデザインが必要かという部分を掘り下げて解説してありますので、ホームページ制作会社との打ち合わせの時にぜひ活用してください。

コーポレートサイトホームページ制作のデザインの背景を知る

フラットデザイン+レスポンシブ・ウェブデザイン

フラットデザインが注目を浴びたのは、2013年にiPhoneやWindows8が、それまでのリッチなデザインではなく、わかりやすさを前面に出した「フラットデザイン」をプッシュしてからです。

当初は、「これまでのようなゴージャスな感じのほうがいい!」「なんだかチープじゃない…?」といった感想もありましたが、2016年現在コーポレートサイトでもフラットデザインはもはや主流になってきています。

その理由としては、装飾性の高い画像がなくなってファイルサイズが軽くなり画面の読み込みスピードが上がったことが挙げられます。
さらに見逃せない点として、元々シンプルなUIが求められていたパソコン用コーポレートサイトを構築する場合、スマホやタブレットのデザインもシンプルさが求められるようになったので、フラットデザインで統一したレスポンシブ・ウェブデザインですべてが完結できるようになった点です。

ただし、エントリーフォーム最適化(EFO)という点では、スマホでフラットデザインをやり過ぎると、申し込みボタンがわかりにくいなどのマイナス要因もあるので注意しましょう。

ヒーローヘッダーと動画の使用

ヒーローヘッダーとは、2014年ころから流行し始めた画面全体にインパクトある巨大ヘッダーを使ったデザインです。
必ずしもそのサイトの主催者にフォーカスしたものではなく、提供サービスや商品の顧客のペルソナを具現化した人物をデザインしたものが多く使われます。
背景には、自社の製品やサービスを遠景に置いたり、ヘッダー自体を数枚のスクロール画像としてストーリー性を持たせるなどで、サイト全体のコンセプトを集約しています。
このストーリー性をもたせるという点をさらに進めて、トップページに背景動画を仕込む手法も出て来ています。

このデザインが流行しだした背景には、フラットデザインによってワンカラムのシンプルなサイトが主流になってきたことが上げられるでしょう。
スマホでも大量の画像や動画を楽しむスタイルが受け入れられて来たこともあります。

スタンダードはBig UI / Low Density / Long Pageに移行

少し前までは、多段カラムのサイトデザインが流行していましたが、最近のキーワードはBig UI(大きなユーザーインターフェイス)、Low Density(コンテンツを詰め込まない)、Long Page(長いページ)です。

よく見てみると、その一つ一つがフラットデザインの流れに沿ったものになっていることが分かります。

かつて定番だったWebサイトデザインは、右もしくは左にメニューバーやバナーなどを配置して真ん中にメインコンテンツでした。
今でもWordPressの新規テーマインストールなどはこの切り口になっていることからも、右か左のサイドバー+本体というパターンが支配的でした。
それを崩す自由なレイアウトとして多段化ラムが流行しましたが、より大きな流れとしてフラットデザインによって、リッチさを表現するBig UI(大きなユーザーインターフェイス)、Low Density(コンテンツを詰め込まない)、Long Page(長いページ)に落ち着いたということでしょう。

まったなしのモバイルファースト

モバイルファーストとは、パソコン用のサイトをモバイル用に対応させる(最初にパソコンがあって2番目にモバイルがある)という発想の真逆をいくものです。

現時点でパソコンサイトがあって「モバイル用に最適化されたサイトを早く作らなきゃ」というWeb担当者の方は、この時点ですでにPCファーストの考え方になっているので注意が必要です。

グーグルではすでに2010年の段階で、CEOが「Googleのプロダクトはモバイルから設計されている」と講演していましたが、基本的にはモバイルの画面はPCに比べて小さいです。
この小さい画面でも必要な情報を表現できるようにコンテンツを適確に絞り込み、そこから余裕を持たせるという順番でより柔軟に大きな画面でのコンテンツ設計をしていくという発想がモバイルファーストです。

その意味で、次に取り上げる、最も伝えたいコンテンツを優先させる「コンテンツファースト」の発想につながっていきます。

コーポレートサイトではコンテンツファーストのデザインから

コーポレートサイトの使命は、企業からのメッセージを顧客、見込み客に適確に伝えることです。
そこには社長からの会社のミッションといったメッセージもありますし、採用者向けのメッセージ、サービスや商品などのブランドイメージもあります。

「何を伝えなくてはならないのか」を追求していくことでスマートフォンでもタブレットでもパソコンでも外せないコンテンツが浮かび上がってきますので、そこから効果的なデザインを考えます。まずデザインありきで人目をひくというスタイルではなく、企業のメッセージを効果的に伝えるためにどんなデザインを採用すべきか、という視点でコンテンツが形になっていくやり方が、ますます大切になってきます。

その際に、注意すべきなのがコンテンツの表示の優先順位を、デバイスごとにどう考えていくかと浮いてんです。

考え方は2つあります。

1. モバイルから順に優先順の高いものから処理していく

モバイルには絶対外せないコンテンツを盛り込み、PCではそれに加えて、より詳細な商品スペック等の付加的な情報もレスポンシブ・ウェブデザインで表示させるように対応するという考え方です。
デバイスごとに、優先順位をつけたコンテンツを適応(アダプト)させていくという考え方ですね。

2. モバイルでもPCでも提供するコンテンツに差はつけない

それぞれに見やすいデザインを追求することで、スマホでしか見れないコンテンツ、PCでしか見れないコンテンツといったものをなくし、すべてのデバイスで同じ情報を見れるようにすることにこだわる考え方です。

紛らわしいことに、両方とも「アダプティブデザイン」と呼ばれる場合があるので注意が必要です。
制作会社やデザイナーによっては、1の考え方を「アダプティブデザイン」2の考え方を「アダプティブコンテンツ」と呼ぶ人もいますが、必ずしもこの区別も浸透しているわけではないので、見積もりを取るときには注意しましょう。

【まとめ】コーポレートサイト制作はデザイントレンドを意識

ここ数年だけで考えても、ホームページ制作のトレンドは大きく変わったことがご理解いただけたかと思います。
コーポレートサイトに掲載する内容自体はそれほど頻繁に変わらない、という声が聞こえてきそうですが、顧客の視点で「なんだか古いサイトだなぁ」と感じることはそのまま企業へのイメージに繋がっていきます。
コーポレートサイトであったとしても、時代ごとのトレンドをしっかり取り入れつつ、適時リニューアルしていきたいものです。

ビジネスマッチングサイト『アイミツ』ではホームページ制作業者に関する専門知識を持ったコンシェルジュが、信頼のおける業者を完全無料で紹介することができます。

まずはお気軽にお問い合わせください。
すぐれたコンシェルジュが、あなたの会社に合った企業選びを全力でお手伝いさせていただきます。

見積もり、取ってますか?

発注をする際に最も大切なことは適正価格を知ることです。
3~4社から見積もりを取ることで、
発注への納得度を高めることができます。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください