ひょんな巡りあわせから、ある知人のイベント用ウェブサイトを作成することになりました。
「企業サイトの様にすっきり、簡潔にまとめたサイトデザインがいい。」と注文を受け、色々な企業用サイトを検索していました。
お話をいただいたのは大変うれしいのですが、さて作成を始めようとするとウェブサイトレイアウトがなかな決まりません。
そんなときに60個のクリエイティブな企業サイトをまとめた記事があったので、参考としてご紹介します。
「Corporative Website Design: 60 Inspirational Examples」では、さまざまな企業用ウェブサイトを紹介しており、参考になるものがたくさんあります。
日本を含め、ウェブサイトデザインの基本となりつつある、「グリッド」を使って、シンプルにまとめたものや、面白い動きをする仕掛けなどを含めサンプルとしてはとてもよいまとめになっています。
今回はその中でも特に気になるウェブレイアウトデザインのものをいくつかピックアップしてみました。
詳細は以下から。
Adobe
左詰のレイアウトになっており、ヘッダー部分に商品紹介用フラッシュがあります。
また、ダウンロードアイテムなどのアイコンもシンプルにまとめられており、とても見やすくて使いやすい印象です。
HooteSuite
ヘッダー部分に商品紹介用動画ページを設けており、クリックするとポップアップ風にYouTube動画がリンクされています。
また、余白スペースを有効的に使った枠組みで、伝えたいことをシンプルにデザインしています。
Feedafever
グリッドを使うことによって、枠組みを使わずにレイアウトの体裁をそろえています。
背景画像も白地にグラデーションを書けることで立体的な雰囲気になっています。
Volkswagen
このサイトの仕掛けとしては、メニューバーにカーソルを合わせると、車体本体のサムネイルと一緒にコンテンツが見えて、初めての人にもわかりやすい設計になっています。
また、トップページのみスクロールせずに閲覧できるポートフォリオタイプになっています。
Expandtheroom
グリッドを使い、枠組みを組み、ヘッダー部分のみ枠から商品をはみ出させることで、インパクトがあります。
全体的にモノトーンのデザインがシンプルでスタイリッシュな印象です。
Energycell
ヘッダー部分の背景画像にグランジテクスチャを使うことで親しみやすいデザインになっています。
また、大きな文字でタイトルを記入し、メッセージが伝わりやすいです。
でも日本語でこれするとかっこ悪かったりしません？
Starbucks Coffee
ヘッダー部分に、横幅全開の大きな写真をスライドバーで設置しています。
また、コンテンツ枠はカーソルを合わせると、ポップアップで詳細が表示されます。
Premium WordPress Themes
こちらもヘッダー部分に伝えたい事柄を大きなサムネイルを使って紹介しています。
最近の企業サイトの特長として、twitterをプロモーションアイテムとして使っていることがあります。
Rapidxtml
マスコットキャラクターを使うのも有効な方法かもしれません。
タブつきスライドショーで、作業内容を確認できるのも分かりやすいです。
Sony
全フラッシュで作成されているのですが、シンプルでとても分かりやすいです。
大きなバナー枠に商品の全体図を配置することで、一発で目的の商品を閲覧することができます。
Coca Cola
トップ部分にこれまたスライドショーを配置しており、その横にApple風商品紹介ページがとても見やすいです。
一日に飲まれているコカコーラ製品の本数をカウントしているんですが、ものすごい勢いで数字が増えています。
一日に世界中で16億本もコカコーラ製品が飲まれているそうです。
Sitepark
トップ部分にMac風パソコンを3台配置して、スクリーン部分をスライドショーとして使っています。
iPhoneやプラズマテレビなんかにスライドショーを配置してもよさそうですね。
こちらも枠組みを使わずに立体的なデザインが施されています。
Ribbit
ヘッダー部分に、どこまでも伸びる道路を撮影した写真が企業ブランドイメージとぴったりです。
その下には、大きめの枠組みでクリックしやすくなっています。
HDbundle
黒いダークなイメージでデザインすると、エレガントな印象を与えることができます。
背景画像の黒系グラデーションが効果的かもしれません。
色々な企業ホームページを見た感想としては、
．グリッドを使ったシンプルなレイアウト作成
・余計なものを配置せずに必要最低限のものをすっきり配置
・うまく余白スペースを使った枠組みを作成
・Twitterの企業用アカウントを作成し、お得情報、耳寄り情報を配信
・トップ部分に写真スライダーを使い、商品や企業の説明をシンプルに
これらのことが共通点としてあげられます。
ここからインスピレーションを得て、よいものを完成させたいと思います。
参照元サイトにはこれら以外にもスタイリッシュな企業ホームページがたくさん掲載されています。
よろしかったら、あわせてどうぞ。
[参照元 : Corporative Website Design: 60 Inspirational Samples – InstantShift]
