コーポレートサイトの事例紹介、上手な見せ方を学ぶ

デザイン会社や施工会社やイベント制作会社などのように形のないサービスを提供する企業にとって、事例紹介などの実績は他社との違いや自社の優位性を打ち出す絶好の機会です。

事例の見せ方に成功すれば「こんな〇〇を自分も作って欲しいからここに頼もう」と問い合わせが増えるなど、正に営業要らず。バリエーションの幅広さや得意なテイストをアピールすることもでき、自社の強みに合わせて作成が可能です。

今回、デザイン事務所のサイトを例にコーポレートサイトで事例を扱う時の押さえておくべきポイントをWebデザイナーが紐解きます。
さすがグラフィックデザイナーの方のサイトなので完成度の高いサイトでしたが、さらにブラッシュアップするための実践的なアドバイスもご紹介します。

目次

1.事例を紹介するときに守るべき写真の扱い
2.ナビゲーションはわかりやすさを優先に

自社の強みをわかりやすく伝える事例ページの好例

いい事例サイトは、見やすく、実績の多さや制作者のこだわりが瞬時にわかる工夫が施されています。

BiNDで作成したサイトを紹介しているナイスサイトより、まずはサイトをご覧ください。
今回のサイトの作者、RoughDesignさんは「KATO INTERIOR」のテンプレートをベースにサイトを制作。ショッピングサイトのテンプレートをアレンジし、豊富な事例紹介をメインとしたスタイリッシュなコーポレートサイトです。

▼デザイン事務所「江坂のデザイン事務所 ラフデザイン」さん。

たくさんの事例を、きちんと撮り下ろされたクオリティの高い画像で、テンポ良く見せることに成功しています。
イメージの写真も素材集などを使わず、リアリティを追求した画像を使うのもデザイナーとしてのスタンスが垣間見えます。
細部まで気を配ったこだわりとシンプルなレイアウトで写真の魅力がストレートに伝わり良いですね。
またブログ記事やInstagramの投稿で新着情報もサイトに集約されるようになっており、賑わいもプラスされています。

1.事例紹介を掲載するときに守るべき写真の扱い

このサイトの事例ページのポイントは、クオリティの高い複数の画像やアニメーションを用いた演出を巧みに取り入れながらも、ページの読み込みが早いところ。
表示にストレスを感じさせないのは大事なポイントです。
確証はありませんが、恐らく適切な圧縮処理を施しているからではないでしょうか？
事例ページではどうしても写真点数が多くなりがちなので、ぜひ真似したいテクニックです。

アニメーションの演出で使う写真は、圧縮ツールで容量を減らしておこう

具体的な圧縮率などは画像によって異なるので、読込みが遅いと感じたら専用の圧縮ツールなどを使い賢く画像を最適化しましょう。
画像を圧縮するメリットとツールは「高圧縮でWeb画像をキレイに軽くするための厳選ツール」で詳しく説明していますので、ぜひ参考にしてくださいね。

事例の伝わりやすさは統一性で決まる

細部までこだわるのがプロの仕事。イメージ画像から事例紹介の画像まで、紙の質感までも伝わる高品質なオリジナルの撮り下ろしで構成されています。同じトーン・同じアングルに揃えて撮影しているので、余計な要素が入らず、ひとつひとつの写真とその違いが目に付きやすいですよね。

BiNDで設定するときのポイント

とはいえ、事例などの写真は一気に撮影できないことも事実なので、微妙に写真の質が変わってくることもあるでしょう。
そこで、写真に同一のエフェクト（フィルター）をかけて全体のトーンを揃えるという加工ワザを使ってもOK。BiNDの画像編集ツール「SiGN」の画像エフェクト機能やフィルターを使えば簡単です。
使い方は「SiGNテンプレートをカスタマイズしよう～流行のデュオトーンを試す」で詳しく説明しているので参考にしてください。

2.ナビゲーションはわかりやすさを優先に

見た目の分かりやすさと同様に重要なのがナビゲーション。
いい事例紹介コンテンツができたらそこへのナビゲーションも利用者目線で問題ないか工夫します。
たとえばこのサイトで言えば、グローバルナビゲーションの「WORKS」と「GRAPHIC-DESIGN」が同じページに飛んでいますが、
少々戸惑いの元になるかもしれません。

ナビゲーションの工夫

「GRAPHIC-DESIGN」の事例紹介のみがグローバルメニューの外に出ているので、ジャンルをまたいで総合的に見れる「WORKS」ページを別途作成するか、
各ジャンルからプルダウンメニューなどで事例紹介ページに直接行ける導線を用意してもいいでしょう。

BiNDで設定するときのポイント

BiNDでプルダウンメニューを設定するには、「ドロップダウン・バルーン」を使います。

グローバルメニューの各ジャンルから事例ページへアクセスできるようになります。

いかがでしょうか？Webサイトで目的を果たすにはいかに利用者がストレスなく閲覧できるかがカギとなります。ぜひ、今回紹介したサイトを参考に、あなたの目的に合った事例ページを作り上げてくださいね。

Webデザイナー以外にも、たくさんの職種の方に使われているBiNDを使って、ぜひクオリティのよいサイト作りにチャレンジしてみてくださいね。

無料でBiNDupを試してみる