コーポレートサイトをシンプルに!1カラムデザインのサイト12選

1カラムデザインのコーポレートサイトを作成する

更新日:2017年10月16日 | 公開日:2017年10月16日

「この企業のコーポレートサイト、シンプルで分かりやすい!」と感じたことはありませんか?
そんなサイトだとつい引き込まれて読み入ってしまいますよね。

コーポレートサイトには、会社概要や事業内容、製品やサービスの紹介はもちろん、経営トップからのメッセージや採用関連情報など、掲載すべき情報がたくさんあります。

しかし、多くの情報を見せようとすると統一性に欠け全体のバランスが悪いデザインになってしまいがちです。
それぞれのコンテンツがどこにあるかもわかりにくく、結果としてサイト内で”迷子”になったユーザーは離脱してしまいます。
多くの情報を掲載する必要のあるコーポレートサイトだからこそ、シンプルで分かりやすい導線のデザインが効果的とも言えるのです。

シンプルなwebサイトのデザインにもさまざまタイプがありますが、ここ数年の1つのトレンドとなっているのが、サイドバーのないレイアウトの1カラムデザインです。

この記事では、1カラムデザインのコーポレートサイトを紹介するとともに、シンプルなデザインのコーポレートサイトを作るためのポイントを解説します。

1. 効果的に1カラムデザインを使ったコーポレートサイト12選

効果的に1カラムデザインを用いたサイトを参考にする

1カラムデザインについての詳しい説明は「2. シンプルなコーポレートサイトを作るポイント」でします。
まずは1カラムデザインを使ったシンプルなコーポレートサイトを、3つのタイプに分けて見ていきます。

1-1. 大きな写真が効果的なサイト

株式会社前田組

前田組は1930年創業の福岡県飯塚市にある建設会社です。
作業現場で働く社員をクローズアップした大きな写真が切り換わっていくファーストビューが印象的です。
「前田組について」「前田組ができること」「土木工事」などのコンテンツにも大きな写真を使っており、デザインやメッセージ性の統一も取れています。
縦スクロールでそれぞれのコンテンツを閲覧でき、ページの遷移を極力少なくした構成で、スマホなどモバイルデバイスでも分かりやすいデザインのサイトです。

ChatWork株式会社

ChatWork株式会社はビジネス向けチャットツール「ChatWork」を提供している会社です。
社員がさまざまな形でコミュニケーションを取っている写真を多く使っており、ChatWorkが掲げる「コミュニケーションの変革を通じて、新しい働き方を提案する」ということを目で見て感じとれるサイトになっています。
また、説明文などの文字の大きさを変えることで、特に読んでほしい部分を強調しているのも参考にしたいポイントです。

株式会社プラルト

株式会社プラルトは、長野県松本市にある、webサイト構築からパンフレットや折込みチラシの制作などを手がける広告制作会社です。
シンプルでスタイリッシュなデザインのサイトで、テキスト量は抑えめですが、写真や画像で意味や内容をしっかりと伝えられています。
「サービス案内」では、サイドバーのない1カラムの特徴を活かし左右の幅いっぱいに使ったグリッドレイアウトで幅広く展開する事業をコンパクトに紹介しています。

株式会社坂乃ダイニング

株式会社坂乃ダイニングは、東京都中野区に3店舗を構える飲食店の運営や飲食店コンサルティングなどを手がける企業です。
モノトーンの大きな写真が切り換わるメインビジュアルは、落ち着いてゆっくりと食事を楽しめる店舗の雰囲気を伝えています。
縦書きのメッセージはメインである「和食」のイメージに沿ったもので、縦スクロールのサイト構成ともマッチしています。
「中野坂上 三店舗のご案内」は、左右に文字部分と写真に2分割して店舗を紹介するデザインで、文字部分の余白がカラー写真を引き立てる1カラムの特徴を活かしたものになっています。

1-2. 余白の使い方が上手なサイト

今治タオル

国内最大規模のタオル産地「今治」の今治タオル工業組合が展開する、「今治タオル」のブランドサイトです。
たっぷりとった余白そのものが、タオルの持つ清潔感を感じさせる存在になっており、メインビジュアルの動画を引き立てています。
メインビジュアルの動画には、瀬戸内海や蒼社川のきれいな景色とタオルを作っている映像が流れ、職人の手で丹精込めて1枚のタオルを作り上げている様子が分かります。
各コンテンツも余白を十分にとってきれいに整列配置されており、シンプルなテキストと併せて一気に読み進むことができます。

株式会社マネジメントサービスセンター

株式会社マネジメントサービスセンターは、「ヒューマンアセスメント」と呼ばれるアメリカで生まれた人材評価手法を日本で初めて導入した人材開発コンサルティング会社です。
テキスト中心のコンテンツを、余白を十分にとってきれいに整ったレイアウトのデザインにすることで、圧迫感のない読みやすいものにしています。
写真のインパクトに頼るのではなく、テキストをしっかりと読ませたい場合にはお手本にしたいサイトです。

株式会社ブラザーズワン

株式会社ブラザーズワンは、ドッグ美容・犬のしつけ・ドッグホテルの運営など、犬に関するさまざまな事業を展開している企業です。
たっぷりとった余白とカラー写真によって、モノクロのイラストが絶妙なアイキャッチになっています。
また、コンテンツを詰め込みすぎず、飼い主と犬が触れ合っている写真を多く使うことで、ペット関連らしいやさしさを醸し出しています。

株式会社細尾

京都にある株式会社細尾は、1688年創業の西陣織などの製造・販売・企画を行う歴史ある企業です。
文字を縦書きにすることで和を表現しており、白地部分は余白というよりも和紙をイメージさせます。
丸い枠で囲んだ写真も書院造の丸窓を連想させ、京都の企業らしさを感じさせます。
「伝統」「革新」「挑戦」といったメニューをクリックすると、1つのページ内で伝えたいことがまとめられており、ページ移動がないためストレスを感じることなくそれぞれのコンテンツを読むことができます。

1-3. 企業カラーを活かしたサイト

亀田産業株式会社

亀田産業は栃木県宇都宮市に本社を構える1968年創業の企業です。
航空機部品の加工・製作をはじめ、家具の販売や修理、酒類の販売まで幅広い事業を展開しています。
企業カラーである青を、すべてのテキストや写真の枠に使っています。
青は、リラックスさせ集中力を高める色なので、1カラムデザインと相まって、それぞれのコンテンツを集中して読むことができます。
どのページに移動してもまず目に飛び込んでくるのは、メインビジュアルの写真で、大きな写真も魅力的なサイトです。

東京スター銀行

東京スター銀行は、東京都港区赤坂にある本店をはじめ、全国32店舗を持つ第二地方銀行です。
ロゴに使用しているオレンジと青を効果的に使ったサイトになっています。
特に企業カラーであるオレンジを、「口座開設」ボタンやアイコンなどのユーザーにクリックしてほしい箇所で使用しているのが特徴的です。
1カラムのため左右に目線を散らすことなく、目的のコンテンツを探しやすい設計です。

二本松物流株式会社

二本松物流株式会社は、石川県にある物流会社です。
企業カラーである緑をヘッダー・フッター、それぞれのコンテンツのポイントとなる部分に使っています。
トップページもテキスト量を抑え、コンテンツの入り口である「もっと詳しく」という緑のボタンが目立つデザインになっています。
また「サービス内容」のメニューにカーソルを合わせると表示される、チャーター便・個別配送などには、文字だけでなくそれぞれの意味を示すアイコンもあり、細かい部分の工夫を感じます。

レッドフォックス株式会社

レッドフォックス株式会社は、スマートフォン向け営業支援アプリ「cyzen」の開発などを行っているITサービス企業です。
会社名に入っている赤(レッド)を多用したサイトで、ページを遷移するときに1カラムのページ全面が赤になるのは圧巻です。
ちなみに、正確なコーポレートカラーは「猩々緋」という赤系の日本の伝統色で、武士の陣羽織などに使われていました。
「日本の良い伝統をサービスに活かしたい!」という会社の想いがコーポレートカラーの選択に込められています。

2. シンプルなコーポレートサイトを作るポイント

シンプルなコーポレートサイトを参考にする

ここまで、1カラムデザインのシンプルなコーポレートサイトをタイプ別に紹介してきました。
改めて、1カラムデザインについてきちんと説明しておきましょう。
カラムには列という意味があり、ホームページにおいては縦列のことを指します。
最初にも述べたとおり、1カラムはサイドバーがなく1列で情報をまとめたデザインです。
ちなみに、2カラムはメインコンテンツの横にサイドバーが1つ、3カラムは左右両方にサイドバーがあるデザインのレイアウトのことを言います。
制作するwebサイトによっても、どのカラム数が適しているかは変わってきますが、シンプルさを求めるのであれば、やはり1カラムデザインが最適と言えるでしょう。

次ではシンプルなコーポレートサイトを作るポイントとして、1カラムデザインを使うメリットとシンプルなデザインにするための注意点を説明していきます。

2-1. 1カラムデザインを使うメリット

1カラムデザインを使うメリットには次の3つが考えられます。

1カラムデザインを使うメリット
  • サイドバーがないためメインコンテンツに集中してもらいやすい
  • 全画面サイズの動画や画像を使えるのでインパクトを与えることができる
  • パソコンとスマートフォンで同じレイアウトを使える

1カラムデザインのメリットは、まずサイトバーがないため、メインコンテンツに集中してもらいやすいという点があります。
2カラムや3カラムのサイトでは、サイドバーにあるメニューや広告にも目が行ってしまうため、じっくりとコンテンツを読んでもらいたい場合には、1カラムのデザインが最適です。

また、トップページに動画や画像を配置しているコーポレートサイトを持っている企業がたくさんありますが、1カラムデザインにすれば全画面サイズで使えるため、ビジュアルでより大きなインパクトを与えることが可能です。

またスマートフォンやタブレッドの急速な普及により、今やパソコン以外からwebサイトを閲覧する人のほうが多くなっています。
レスポンシブwebデザインという1つのソースでパソコン向けとスマホ向けに表示を切り替える技術がありますが、2カラムや3カラムではどうしてもレイアウトは違ってしまいます。
1カラムであれば、どのデバイスでサイトを見ても同じレイアウトにすることができ、ユーザーは違和感なくサイトを閲覧できます。

2-2. シンプルなデザインにするための注意点

1カラムデザインを使うだけでシンプルになるというわけではありません。
シンプルなデザインにするための注意点としては、次の3つが考えられます。
今回サイトを紹介する際の見出しにした部分とも重なりますが、よりシンプルなコーポレートサイトを作るための注意点となってくるので、改めて確認しておきましょう。

シンプルなデザインにするための注意点
  • テキストと写真どちらでメッセージを伝えるか明確にする
  • コンテンツを詰め込みすぎず、余白をたっぷり取る
  • 余計な色を使わず、少ない配色で分かりやすくする

ユーザーの多くは、「見やすい、使いやすい、分かりやすい」ということをwebサイトに求めるものです。
シンプルなコーポレートサイトは、一目見ただけで、何のサイトで、どんなサービスを提供しているのかが伝わりやすくなり、ユーザーはストレスを感じることなく閲覧できます。
シンプルなデザインのコーポレートサイトを作るためには、ユーザーの指向や目線を意識しながら、必要な情報やコンテンツをバランスよく配置したデザインを念頭に置いて制作を進めることがポイントです。

【まとめ】1カラムデザインを使いシンプルで魅力的なコーポレートサイトを作りましょう

1カラムデザインを使ってシンプルなコーポレートサイトを実現

いかがでしたか?
1カラムはシンプルなサイトを作るのに適したデザインですが、コーポレートサイトは単にそれだけでなく、今回紹介したサイトのようにテキストや画像・動画を効果的に使い、企業の魅力をしっかりとユーザーに届ける必要があります。

企業の公式ホームページであるコーポレートサイトは、いろいろな人が訪れるサイトです。
コーポレートサイトの新規作成やリニューアルを検討している方は、誰が見ても「この企業はしっかり仕事をしていて、信頼できる!」と思ってもらえるような、シンプルで魅力的なサイトの制作に取り組んでいきましょう。

「シンプルなコーポレートサイトを作ってみたいけど、いざ自分で考えてみるとどうしてもイメージどおりにならない」という方もいらっしゃると思います。
そういった方は、ぜひ「アイミツ」までお問い合わせください。
弊社「アイミツ」では、経験豊富なコンシェルジュがお客様のご要望に合わせて、最適な制作会社をご紹介いたします。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ