この記事では、55のデザインスタジオとWeb開発スタジオを選択し、ポートフォリオサイトを分析し、そのようなサイトのデザインの一般的なパターンを決定しました。 この調査の主な目的は、フリーランサーとデザインスタジオに、独自のポートフォリオを作成するための有用なガイドラインを提供することでした。



私たちは、デザインに関する最も重要な質問をブレインストーミングし、世界中のデザイナーに、ポートフォリオWebサイトをデザインする際に最も頻繁に下すべき決定を尋ねました。 また、デザイナーに、この記事で分析したいと考えている問題を正確に伝えるように依頼しました。 その結果、ポートフォリオWebサイトのデザインに関する40の質問のリストを取得しました。これらは重要度別にグループ化されています。 そして、最終的には、小規模および大規模な代理店向けに、開催中のデザインスタジオと美しいポートフォリオサイトの適切な組み合わせを探していました。



次に、これらの40の質問のリストを作成し、選択したデザインスタジオのサイトごとにそれらを調べ、それぞれのメモを作成しました。 全体として、この調査には75時間かかりました。



この記事では、ポートフォリオサイトの設計に関する調査の予備的な結果を示します。 以下では、ポートフォリオサイトの視覚的なデザイン、構造、レイアウト、ナビゲーションについて説明します。 また、「About Us」、「Clients」、「Services」、「Portfolio」、「Contacts」などのサイトの各セクションの詳細も確認しました。 もちろん、この記事のすべてのヒントに従う必要はありません。 代わりに、これらのヒントを使用して、デザインで使用できる独自の何かを特定してください。これは独特で覚えやすいものです。

1.ライトデザインとダーク。

ポートフォリオサイトを作成するときに答えなければならない主な質問は、視覚的に魅力的な暗いサイト（大きく太字のフォントと明るい色を使用することを意味します）またはソフトで明るいサイト（単純な構造と明るいタイポグラフィを持つサイト）を作成することです。



驚くべきことに、私たちの調査結果によると：

• ポートフォリオサイトの82％は、自然で落ち着いた色の明るいデザインです。 これらのサイトの背景は灰色と黄色の明るい色合いであり、純粋な白ではありません（たとえば、 Happycog 、 SimpleBits 、 80/20およびConcentric Studio ）。
• ポートフォリオサイトの29％は、非常に鮮やかで鮮やかな色を持っています（例： 45royale 、 Hicksdesign 、 Duoh 、 Frexy、およびOdopod ）。
• 暗いサイトは、大きなタイポグラフィを持っている可能性がはるかに高くなります（例： Adaptd 、 OrderedList 、 Carsonified 、 Blue_Flavor 、 SidebarCreative、およびpod1 ）。

2.列数は？

興味深いことに、多くのポートフォリオサイトでは、列の数はサイトのセクションごとに異なります。 「Customers」および「About Us」ページには通常2列がありますが、メインページには重要な情報をコンパクトな形式で表示する3〜4列があります。 実際、ページの列が増えていることに気付きました。見たポートフォリオサイトの6つごとに、4列のページが少なくとも1つありました。





私たちの調査によると、一部のウェブサイトは、JavaScriptやその他のオリジナルレイアウトの方法を使用して、カスタムデザインやナビゲーションを試すリスクがあります。 ほとんどのポートフォリオサイトには、2つまたは3つの明確に分離された列とシンプルで便利なナビゲーションメニューを備えた従来のブロックページレイアウトがあります。



ニンジンクリエイティブは、JavaScriptスクロールを使用したナビゲーションを使用して1ページからオリジナルのレイアウトを作成します。これは珍しく記憶に残るものですが、必ずしも直感的ではありません。





また、ほとんどのポートフォリオサイトは、比較的詳細なサブセクションを持つ多くの詳細なページで構成されています。 ミニマルな1ページのポートフォリオサイトもまれです。 調査したサイトのうち、シンプルで最小限のデザイン（およびより具体的にはNeutron Creations 、 Fish Marketing、および80/20 ）であったのは5.4％のみでした。

3.上部の導入ブロック？

ポートフォリオサイトには通常、ページヘッダーに大きな紹介ブロックがあります。このブロックには、提供されるサービスの簡潔でわかりやすい概要と、クライアントがサービスを使用した場合のメリットが含まれています。 通常、ブロックにはカラフルな画像と素晴らしい活版印刷が含まれています。 彼は会社全体のイメージとすべての従業員の両方のイメージを伝え、専門的かつ友好的にそれを行います。 このようなブロックは通常、ロゴのすぐ下の最初のページにあります。





調査によると、ポートフォリオサイトの79％には、何らかの形でサイトの上部に導入ブロックがあります。 また、一部のサイトでは、最新の作品を表示するために導入ブロックを放棄していることに気付きました（たとえば、 concentric studio 、 HUGE inc。And Wishingline ）。 このようなサイトでは、ページの別の場所（通常はページの下部）に小さな「About Us」リンクが配置されます。





ウェブサイト45royale Inc. メインページにわかりやすい紹介テキストがあります。 彼は、このサイトはジョージア州（ジョージア州）にある会社が所有しており、軽量でユニークで便利なサイトとWebアプリケーションを作成していると報告しています。

4.レイアウトを揃えます。

90年代には、レイアウトは伝統的に左側に揃えられ、左側に垂直メニューが、ヘッダーに水平メニューが配置されていました。 これは、ワイド解像度モニターの使用の増加に伴い変化しました。 より多くのデザイナーがデザインを作成し、中央のレイアウトを調整して、端のスペースがバランスをとるようにします。 年の初めに、よりオリジナルの右揃えに向かう傾向に気付きましたが、この調査では、右揃えのポートフォリオサイトはもう見つかりませんでした。





調査によると、

• 右側に配置されたレイアウトはありません。
• サイトレイアウトの89％は中央に配置され、
• 残りは元のアダプティブレイアウト（ MethodおよびCarrot Creative ）、ページ上の空きスペースを埋める明るい背景画像（たとえばDuoh ）、または単に空きスペースはそのまま残されます（たとえばIdeo 、 maybe.for.youおよびArea17 ）-もちろんただし、より高い解像度のモニターを使用している場合は、この空き領域が表示されます。

5.ナビゲーションブロックの配置。

メインナビゲーションブロックをレイアウトのサイトのどこに配置しますか？ 質問は自明ではなく、多くの場合、デザイナー間の論争につながります。 驚くべきことに、私たちの調査では、ほとんどのポートフォリオサイト設計者がメインナビゲーションブロックをレイアウトの右上隅に配置することが示されました。 実際には：

• ポートフォリオサイトの80％には大きな水平ナビゲーションメニューがあり、
• 51％には、右揃えの要素を含む水平ナビゲーションメニューがあります（たとえば、 Concentric Studio 、 Mark Boulton Design ）。
• 16.4％には、左揃えの要素（例： Squared Eye 、 Adaptd 、 BarbarianGroup ）を含む水平ナビゲーションメニューがあります。
• 11％には、大きなインタラクティブ要素（ buffalo 、 SimpleBitsなど ）を含むページの幅全体の水平ナビゲーションメニューがあります。

垂直ナビゲーションはめったに使用されず、他のアプローチ（たとえば、ページの下部にある水平ナビゲーション）は、めったにありませんが、型破りなレイアウトで見ることができます。





Area17サイトには、 左揃えのレイアウトとナビゲーションがあります。 各ナビゲーション要素は、かなり大きなインタラクティブ要素です。

6.検索クエリ入力フィールドの設計。

多くのポートフォリオサイトは非常に小さく、提供されるサービスと会社に関する情報のみをユーザーに提供しますが、一部のポートフォリオサイトは非常に膨大であり、さまざまなテーマ研究を表し、ブログと各大規模プロジェクトに関する詳細情報を含んでいます。 一般に、サイトに多くの情報が含まれている場合、サイトの検索機能はサイトのユーザーにとって便利です。 結局のところ、検索機能をポートフォリオサイトに統合している企業はほとんどありません。

• 調査したポートフォリオサイトの89％には検索機能がありませんでしたが、
• サイトの11％のみが検索クエリ入力フィールド（通常はシンプルフィールド）を持っていました。 そのようなポートフォリオサイトのほとんどの所有者は独自のブログを所有しており、定期的に更新しています（例： pod1 、 OmniTI 、 fortysevenmedia 、 Ideo 、 Viget ）。

7.フラッシュ要素。

リッチなインタラクティブデザインの手法であるFlashは、少なくともポートフォリオサイトを作成するWebデザイナーの間で人気を失っているようです。 その理由はおそらく、一部のFlash効果を、一般的なJavaScriptライブラリで使いやすいモジュールとして利用できる高度なJavaScriptメソッドに置き換えることができるためです。

スライドショー、アニメーション効果、およびトランジション効果は、より軽く、より速く、より簡単なJavaScriptソリューションを使用して作成できるようになりました。 リッチFlashアニメーションとビデオエフェクトは、よりシンプルなJavaScriptテクニックに置き換えられています。 たとえば、テキストを動的に変更するためにFlashが使用されることもあります。





BKWLDサイトは、サイト全体で重いFlashファイルを使用している調査のポートフォリオサイトの1つです。

私たちの調査では、すべてのポートフォリオサイトの3.7％のみが多数のFlashアニメーションとコンポーネント（特にLift Interactive 、 Bkwldなど、ただし主にスライドショーとプレゼンテーション用）を使用していました。 これは、インタラクティブなサイトを作成するWebスタジオ、Flashデザインスタジオ、またはビデオ制作スタジオを調査リストに含めなかったためと思われます。

8.連絡先情報はどこに入力しますか？

この調査の重要な目標の1つは、デザイナーが一般に連絡先情報を伝達する方法を理解することでした。 クライアントは、デザインスタジオに連絡するために[お問い合わせ]ボタンをクリックする必要がありますか？ または、連絡先の詳細はページの一番上にある最も目立つ場所ですか？ あるいは、設計者は、ほとんどのユーザーが見たい場所に、以下の連絡先情報を配置することを好みますか？

分析したサイトでは、ページのほぼすべての領域（ヘッダー、左側、右側、ページの下部、中央など）に連絡先情報を配置しました。 しかし、興味深いパターンもいくつかありました。 次のことに興味を持っていたことに注意してください。

1. 「お問い合わせ」ページへのリンクはどこですか、
2. 連絡先情報が実際にある場所。

それが判明します：

• ページヘッダーに電話番号があるポートフォリオサイトの12.7％（例： Things That Are Brown 、 Headscape 、 ClearleftおよびConcentric Studio ）、
• サイトのヘッダーにメールアドレスがあるサイトは9.1％のみです（たとえば、 buffalo 、 Kyan media ）、
• 通常、郵送先住所はどこにも指定されず（54.5％）、サイトの下部に示される（40％）、またはヘッダーに示される（5.4％）
• 「連絡先」リンクは通常、右上隅（71％）および/またはサイトの下部（45.4％）にあります。
• 「連絡先」（59.7％）および「お問い合わせ」（21％）という文言は、連絡先情報のあるページへのリンクで最も人気があります。

9.「About us」ページ。

ポートフォリオサイトの「About Us」ページは、チームメンバーの紹介、スタジオの哲学の説明、会社の経験とプロ意識の証明に使用されます。 このページはスタジオに個人的なアプローチを提供し、適切に作成された場合、潜在的な顧客の信頼を呼び起こします。





Weightshift.comのAbout Usページには、グループのメンバーが表示され、それらについて話します。

会社概要ページは、ほとんどのポートフォリオサイトで必須です。分析されたポートフォリオサイトの89％が、メインナビゲーションメニューの会社概要ページへのリンクを持っていました（ 31three 、 Huge Incなどを除く）。

スタジオを表現するために使用する詳細レベルは、あなた次第です。 調査したポートフォリオサイトの59.1％には追加ページがなく、訪問者に簡潔で簡潔な概要を提供しました。 チームメンバーの写真、個人データ、開発プロセスに関する情報は、このようなページで頻繁に見られます。 テキストの一般的なトーンは、通常、非公式で友好的で、時には面白いこともあります。 About Usページへのリンクの最も一般的な文言は、「About」（43.6％）、「About us」（27.3％）、および「Who we are」（7.2％）です。

10.顧客のリスト。

プロフェッショナリズムと業界での評判の明確な兆候の1つは、あなたの会社が一緒に働いたクライアントの堅実なリストです。 もちろん、リストのクライアントの影響力が大きいほど、潜在的な顧客があなたのスタジオに注意を払う可能性が高くなります。 私たちの経験は、潜在的な顧客がデザインスタジオを探しているとき、クライアント、研究、レビューのリストを常に見ることを示しています。 そのため、クライアントのリストを含む個別のページを持つスタジオが数件しか見つからなかったことに驚きました。





Squared EyeのWebサイトの顧客情報リストには 、会社で働いたすべての顧客に関する情報が含まれています。 ゲイツ財団、米国平和研究所、フォックス放送会社、米国郵政公社のような名前のリストに載っている同社は、信頼できるようです。

分析したすべてのポートフォリオサイトのうち、顧客のリストを持っているのは47.2％だけです（別のページとして、またはメインページにあります）。 ほとんどの場合、顧客はロゴの形で提示されます。これにより、クライアントごとに個別のページが表示され、完了した作業の詳細な説明とクライアントからのフィードバックが含まれます。 このようなページの最も一般的なリンクの形式は、「当社のクライアント」（46.1％）、「クライアント」（39.6％）、または「クライアントリスト」（15.4％）です。

11.サービスのページリスト。

通常、訪問者がサービスを検索するためにそのようなサイトに来るという事実を考えると、「Services」という名前のメインページに別のページまたはセクションを作成することをお勧めします。 潜在的な顧客は、通常、探しているもの（ダイナミックデザイン、印刷デザイン、Webデザイン、CD / DVDカバーデザインなど）についてかなりよく理解しています。 これに基づいて、サイト上のサービスのリストを表示することをお勧めします。





Singalfeuerサービスページには、提供されるサービスの非常に簡単な概要が記載されています。 効果を高めるために、アイコンと小さなイラストが使用されています。

調査したポートフォリオサイトの67.2％には、サービスのリストを含む別のページがあります。 残りは、この情報を「About us」ページまたはメインページに掲載しました。 「サービス」ページには追加のページ（31.5％）が含まれることがありますが、ほとんどの場合、1つのページは非常に大きく詳細です。

ポートフォリオページをサービスページにリンクすることは確かに良い考えです。なぜなら、理論と実践を組み合わせて、クライアントがあなたのスタジオが本当に何ができるかをクライアントに示すからです。 「サービス」ページへのリンクの最も一般的な文言は「サービス」または「当社のサービス」（75.7％）で、その後に「何をすべきか」（10.8％）が続きます。

12.ポートフォリオページ。

明らかに、潜在的な顧客はデザインスタジオが何ができるかを見たいと思っています。 彼らのスタイルに合っていますか？ 視覚的なデザイン、タイポグラフィ、使いやすさに関してどのような美学が続きますか？ 彼らのデザインは直感的で素敵に見えますか？ これらは、潜在的な顧客がデザインスタジオに興味があるときに答えを聞きたい質問です。 これに基づいて、以前の仕事の堅実なプレゼンテーションは、クライアントにデザインスタジオに連絡するよう説得することができます。





ケーススタディHuge Inc ：1ダースのかなり詳細なケーススタディの例。

一般に、ポートフォリオに表示する作品を選択するときは選択的にし、訪問者がスタイル、業界、リードタイムでプロジェクトを選択してフィルタリングする機会を与えます。 また、プロジェクトに関する情報を提供したり、詳細なケーススタディや顧客レビューを提供したり、ワークフローを提示したりすることもできます。 残念ながら、これを行ったスタジオはほとんどありません。



私たちの研究の結果から判断すると：

• 7.2％のサイトにはポートフォリオがまったくありませんが、
• サイトの12.7％が、情報なしでスクリーンショットとロゴのみを表示し、
• サイトの16.4％が、ロゴやスクリーンショットの隣にプロジェクトを簡単に紹介しています。
• 63.6％が、完成したプロジェクトごとに、ケーススタディ、レビュー、プロジェクトのスクリーンショット付きスライドショー、図面、スケッチなど、非常に詳細な個別ページを持っています（例： Bright Creative 、 Weightshift 、 Huge Inc. 、 Happy Cog 、 45royale ）。
• 驚くべきことに、ポートフォリオリンクの最も一般的な文言は「仕事」または「私たちの仕事」（47.2％）、次に「ポートフォリオ」（27.2％）です。

13.ワークフローページ。

実際、ワークフローページは、About Usページの追加ページとして作成するのが最適です。 ただし、一部の設計者は、ワークフローをより詳細に表示したいと考えています。 ポートフォリオサイトの74.5％にはワークフローページがまったくありませんが、この目的の他のサイトには十分なページがあり、開発プロセス全体を表しているため、潜在的な顧客は両方の当事者が何を期待できるかを知ることができます。





45royale Webサイトワークフローページ ：会社は、ワークフローの構成と、顧客が設計プロセスに参加する方法を説明します。

もちろん、潜在的な顧客に彼らがどのように設計プロセスに参加するかを説明することは良い考えです。 このページへのリンクの最も一般的な文言は、「How we work」または「Work with us」（42.8％）、「Process」または「Our process」（35.7％）および「Approach」（7.1％）です。

14.連絡先情報のあるページ。

すべてがうまくいき、ポートフォリオが訪問者の関心を集めている場合、連絡先ページが最終的な目的地になります。 あなたとのコミュニケーションのプロセスを可能な限り簡単にするために、可能な限りのことをしてください。 クライアントがWebフォームを通じて必要なすべての情報を提供できることを確認してください。 また、顧客に電話番号、メールアドレス、住所を提供することができます。 あなたに到達する方法に関する情報、ソーシャルネットワーク上のプロファイルのボタン、仮想名刺を提供することも良いアイデアです。





OmniTIスタジオの連絡先ページには、 アクセス方法、オフィスの住所、個人の連絡先情報、仮想名刺、電話番号、営業時間に関する情報があります。 また、オフィスが現在閉鎖されているかどうかに関する情報も提供します。 これは、良い連絡先ページの例です。



私たちの調査によると：

• 9％のサイトには、連絡先情報のある個別のページがありません（代わりに、各ページの下部に連絡先情報が表示されます）。
• （多くの場合、インタラクティブなGoogleマップを使用して）それらにアクセスする方法に関する情報は、サイトの45.4％（！）にあります。
• 83.6％は、連絡先情報ページに電話番号とメールアドレスを表示し、
• 76.7％は、連絡先情報ページに住所を表示しています。
• スタジオサイトの69％に連絡するためのウェブフォームがあり、
• 14.5％がダウンロード用の仮想名刺を提供しています。これらは通常、メールアドレスの隣にあり、
• Facebook、Twitter、LinkedInなどのソーシャルネットワーク上のプロファイルへのリンクも一般的です（14.5％）。

15.特別な機能と追加。

また、デザインスタジオが潜在的な顧客に提供するいくつかの特徴的なデザイン要素にも気付きました。

人気のあるアプローチの1つは、潜在的な顧客がプロジェクトの主な詳細を記入する必要があるプロジェクトまたは提案の何らかの形式の要求を提供することです（例： Mark Boulton Design 、 stuff and nonsense 、 45royale 、 Duoh 、 Clearleft ）。

また、一部のデザインスタジオは、プロジェクトを計画するためのツール（たとえば、 buffalo 、 Happy Cog 、 45royale ）を提供したり、クライアントがプロジェクトの価格を決定するのを支援したりします（OnWired（http://onwired.com/contact/）など）またはより詳細な価格ガイド（ BlueFlavorでそれを行う方法）。





Buffalo Studioのオンラインプロジェクトプランナー（http://planner.builtbybuffalo.com/）は、技術仕様を作成するための便利なフォームをユーザーに案内し、フィールドへの入力プロセスを簡単にし、エラーを防止したり、不十分な情報を提供したりします。



連絡先情報ページのチャットウィンドウ（ Agami Creativeなど ）、スタジオに無料のリソースがあるかどうか（ Bright Creativeなど ）を示す「ストレスメーター」、プロジェクト価格計算機、プレゼンテーション「機会とスキル」（通常はPDF形式）。

16.その他の調査結果。

また、次のこともわかりました。

• どのポートフォリオサイトにもFAQセクションはありません。
• ポートフォリオサイトの76.3％に少なくとも1つのブログがあります。 また、多くのポートフォリオサイトには2つ以上のブログがあり、
• 14.55％には分布関数があります（例： bkwld 、 area17 、 buffalo 、 Vigetおよび45royale ）、
• 9％が詳細なサイトマップを提供します（例： Ideo 、 OmniTI 、 pod1 、 Erskine DesignおよびWishing Line ）。

結果。

• 分析したサイトの82％は、自然で落ち着いた色調の明るいデザインで、
• 79％が従来のブロックレイアウトを使用しており、2つまたは3つの明確に分離された列とシンプルで便利なナビゲーションメニューがあり、
• 79％はサイトの上部にある種の導入ブロックを持っています。
• 89％のサイトでは、レイアウトが中央に配置されており、
• 80％は、要素が右に揃えられた水平ナビゲーションメニューを持っています。
• 89％には検索機能がありません。
• サイト全体で重いFlashコンポーネントを使用しているのはわずか3.7％であり、
• 連絡先情報を含むページへのリンクは、ケースの71％で右上隅に、および/またはケースの45.4％でサイトの下部にあります。
• 89％のメインナビゲーションメニューに[会社概要]リンクがあり、
• 会社の顧客に関する情報を含むページを持っているのは47.2％のみです。
• 67.2％には、提供されるサービスのリストを含む別のページがあり、
• 63.6％には、実装されたプロジェクトごとに個別のページがあり、ケーススタディ、顧客レビュー、スクリーンショット付きスライドショー、図面、スケッチ、
• 74.5％のサイトにはワークフロービューページがありませんが、
• 連絡先情報ページには、スタジオオフィスへのアクセス方法、電話番号、メールアドレス、住所、仮想名刺、オンライン連絡先フォームに関する情報を含める必要があります。