あなたのオンラインポートフォリオ作品を提示するためのアイデア

オンラインポートフォリオは主にコンテンツ指向であり、ユーザーはWebサイトを閲覧するために率先して行動する必要があります。 あなたの目標は、あなたの作品を明確に提示し、ユーザーにクリックを促すことです。

この投稿では、訪問者がポートフォリオの作業をより深く理解するのに役立ついくつかのテクニックを共有したいと思います。 これを行うにはさまざまな方法があります。静的ページを追加する人もいれば、スライドショーや完全なケーススタディを追加する人もいます。

あなたが行う仕事の種類があなたのサイトのデザインに影響を与えることは確かです。 しかし、これらのヒントは普遍的であり、ネット上のあらゆるポートフォリオサイトに適用できます。

動的カテゴリ

さまざまな種類の作業を行う場合は、ポートフォリオページに動的な並べ替えタグを追加してみてください。 これにより、訪問者は、あなたが行ったすべてのことをざっと見るのではなく、見たい作品を閲覧できます。

たとえば、デジタルデザイナーはさまざまな種類の作業を行い、ポートフォリオエントリごとに異なるスキルセットを紹介する場合があります。 これらのカテゴリは、次のように分類される可能性があります。

• アイデンティティデザイン
• アイコンデザイン
• ウェブサイト
• モバイルアプリ
• UI / UXワイヤーフレーミング

動的カテゴリを作成すると、訪問者は各カテゴリごとに個別に閲覧できます。 これにより、サイトの閲覧がはるかに速くなり、ポートフォリオの作業を提示するための最も強力な方法になります。

ヒーローテーマは、このカテゴリの並べ替えの良い例です。 メインのポートフォリオページでは、さまざまなプロジェクトスタイルを整理するために、上部にある小さなタグリンクを使用しています。

ユーザーがカテゴリリンクをクリックすると、ポートフォリオは、カテゴリに追加されたプロジェクト以外のすべてのプロジェクトを自動的に非表示にします。 これらはすべてバックエンドのWordPressによって制御されるため、プロジェクトをサイトに追加し、それに応じて整理する必要があります。

多くのWordPressポートフォリオテーマにはデフォルトでこれらの機能が付属しており、すばらしいものです。 単純なテキストリンクを使用するBeckettテーマの別の例を見ることができます。

ただし、どちらの例も基本的にフルスクリーンデザインであり、ポートフォリオがページ上のスペースの大部分を占めていることに注意してください。

動的カテゴリは、使いやすく、閲覧しやすい場合に最適に機能します。 これらの例は、開始するのに最適な場所を提供し、デザインスタイルに適合する場合は、これらのテーマを自分のサイトに使用することもできます。

プロジェクト写真のスライドショー

プロジェクトのスライドショーの大部分は、ポートフォリオプロジェクトページの追加要素として使用されます。 したがって、これらのスライドショーは、ボタンをクリックするだけで写真を閲覧できるページに一定レベルの詳細を追加します。

スライドショーが好きなのは、スペースをあまりとらずにワークフローを垣間見ることができるからです。 ただし、慎重に使用する必要があります。

訪問者は、サムネイルのギャラリーを一度にフリックすることを好む場合があります。 ただし、スライドショーは、大きすぎず、スライドが多すぎない場合（たとえば、15歳未満）に適しています。

Brambleは、ポートフォリオページの画像スライドショーをサポートしており、完全にレスポンシブです。 これにより、写真をすばやく閲覧でき、ナビゲーションには2つの異なる方法があります。

• 左/右矢印
• 各スライドのドットナビゲーション

スマートフォンユーザーは、このスライドショーを簡単に操作して、完全な効果を得ることができます。 ただし、ユーザーはタップして写真を拡大できるため、サムネイルについても議論があります。

理想的なポートフォリオのスライドショーは、行う作業の種類によって異なります。 ショットが水平方向にスライダーに収まる場合は、プロジェクトページにスライダーを追加することを検討してください。

または、Oshineテーマのようにホームページに追加することもできます。 具体的には、インテリアデザインと建築を紹介するこのデモ。

このユニークなスタイルは、写真家、デジタルデザイナー、デジタルアーティストに適しています。 これらのスタイルの作業はかなり大きく、フルスクリーンのスライドショーにうまく収まる傾向があります。

ホームページスライダーはすぐに注目を集めるので、一目であなたがしていることを正確に売り込むのにも役立ちます。

ナビゲーションと自動転送のベストプラクティスを学ぶために、カルーセルについて少し読んでください。

モーダルボックス

これは、ポートフォリオ作品を提示するための私の好みのテクニックです。 モーダルウィンドウボックスは、ページの「上部」に表示され、その下のコンテンツがグレー表示されます。

これは通常、ユーザーが一度に多数のプロジェクト画像をクリック（またはスワイプ）できる画像ギャラリーの形式で提供されます。 モーダルウィンドウはページの上部に表示されるため、新しいタブでユーザーを煩わせることなく、ページ全体を占めることができます。

この素晴らしい例は、ThemeForestのVitaeテーマです。 各ポートフォリオアイテムページにライトボックスモーダルが付属しており、クリックすると画像の拡大図が表示されます。

個人的には暗い背景が好きです。これにより、モーダルウィンドウとコンテンツの間にコントラストが実際に追加されるからです。 Vitaeのようないくつかのテーマは明るい背景を使用しており、これも問題なく機能します。

目標は、このモーダルをページ全体に強制することで、ユーザーエンゲージメントを高めることです。 モーダルポップアップウィンドウでこれを行うと、非常に煩わしい場合があります。 しかし、ユーザーが期待しているポートフォリオコンテンツには、驚くほどうまく機能します。

これは主に、1つのシリーズで提示したい写真がたくさんあるギャラリーアイテムにおすすめします。 暗いモーダルウィンドウは、Honshiテーマのように完全なポートフォリオアイテムを表示することもできます。

セットにまとめられた一連の写真がある場合は、モーダルスライドショーでそれらを実行することを検討してください。 または、デザイナーの場合は、最初から最後までの進行のように、作業のさまざまな段階をスライドショーに追加することができます。

あらゆるタイプのビジュアルポートフォリオサイトは、モーダルウィンドウの恩恵を受けることができます。 この機能を備えたポートフォリオテーマを見つけて、プロジェクトページに自然に含めたいだけです。

フルページのケーススタディ

あなたのポートフォリオの仕事と一緒にいくつかの書かれたコンテンツを追加することは常に良いことです。 このようにして、訪問者は、プロジェクトがどのようなものであるか、あなたが行った作業、および最初の計画段階から完了までどのように移行したかを知ることができます。

ケーススタディは、プロジェクトの全体像を提示するのに最適です。 当然、ページにはたくさんの写真が必要ですが、個人的な逸話や、創造的なプロセス全体を分類したリストも含める必要があります。

訪問者はあなたがしていることについてもっと知りたいと思っています。 これらのケーススタディは信頼を築き、あなたをその主題に関する権威として提示します。

マンダラは、簡単なケーススタディがどのように見えるかを示す優れたテーマです。

上部のセクションには、プロジェクトのサンプル写真と、プロジェクトの日付、カテゴリ、クライアントの名前、プロジェクトの概要などの詳細が含まれています。

読者に舞台裏をのぞき、あなたがしていることについてもっと学ぶ機会を与えてください。 ビジュアルは役に立ちますが、ストーリーの一部しか表示しません。

ケーススタディを作成することで、一般的な問題とその解決方法を説明し、クールなアイデアを思いつくためのブレインストーミングプロセスを説明できます。

あなたが写真を撮るなら、あなたはおそらく書くことはそれほど多くないでしょう。 ただし、Dazzleテーマは、ほんの少しのコンテンツが大いに役立つことを示しています。

彼らのポートフォリオのテーマには、数十のスタイルがあります。 プロジェクトに関する情報がほとんどないものもあれば、プロジェクトページに詳細が記載されているものもあります。 しかし、どちらの方法でも、このテーマが提供する多くのスタイルを調べることで、多くのことを学ぶことができます。

ケーススタディを取り、実際にそれらをあなた自身のものにしてください。 完全な論文を書かなくても、訪問者にとって価値のあるものにするのに十分な情報を追加します。

まとめ

ポートフォリオ作品の提示は必ずしも簡単ではありません。 仕事の種類やプロジェクトの数によって異なります。

しかし、私が上にリストしたトレンドは、グラフィックデザインから写真、アニメーション、UI作業、またはその他のほとんどすべてにうまく機能します。 カスタムスライドショー、カテゴリの並べ替え、モーダルウィンドウ、ケーススタディはすべて、ポートフォリオWebサイトでのエンゲージメントを大幅に高めることができます。

独自のポートフォリオサイトをまだ開始していない場合は、WordPressポートフォリオサイトの構築方法に関する記事を確認してください。ここでは、オンラインポートフォリオのホスティングとテーマを設定する方法について説明しています。