WordPressポートフォリオサイトのグリッドレイアウト：デザインのヒントと例
公開: 2018-03-19WordPressポートフォリオサイトの最も一般的な構造はグリッドです。 一度にいくつかの作業が表示されるため、視聴者はすばやくスキャンして、目を引くものをすべて選択できます。
しかし、ポートフォリオの強力なグリッドレイアウトを作るものは何ですか？ そして、あなた自身のポートフォリオサイトを立ち上げるとき、あなたは何を考慮すべきですか？
この投稿では、WordPressポートフォリオに最適なグリッドレイアウトデザインに関するヒントとアドバイスをいくつか紹介します。
タイトグリッドデザイン
グリッドを使用する場合は、デザインをタイトに保つのが賢明です。 このように、アイテムは近くに接近してすばやく閲覧し、ユーザーがコンテンツを操作するように促します。
グリッド構造は通常、ポートフォリオコンテンツのタイプによって異なります。 写真やレイアウトによっては、パディングを増減する必要がある場合があります。 たとえば、アートワークを近づけるとぼやけた感じになる可能性があるため、デジタルアートポートフォリオは余分なスペースの恩恵を受けます。
ただし、スクリーンショットは離れた場所からでも簡単に作成できるため、設計者は作業を緊密に保つことができます。 WordPressのインクテーマで良い例を見ることができます。
これは、グリッド要素の間にパディングをまったく使用しません。 これらの正方形のブロックは互いにぴったりと整列しているため、ユーザーはすべてを一度に見ることができます。
また、小さいサムネイルを使用するため、すぐに注目を集める傾向があります。 私はこのスタイルが本当に好きで、とても強い印象を残すので個人的なお気に入りです。 各写真が他のすべての写真と対照的にはっきりと見えることに注目してください。
このスタイルの恩恵を受けることができる仕事がある場合は、インクのテーマを調べてください。 これは、最初からコーディングせずに、これらのタイプのポートフォリオグリッドを作成する簡単な方法です。
しかし、1つの優れた代替手段は、各ピースの間にもう少しスペースがあるブランブルです。
このWordPressテーマには複数のポートフォリオレイアウトが付属しているため、実際に最も好きなスタイルを選択できます。 一部のポートフォリオレイアウトではサムネイルが近くにあり、その他のレイアウトではグリッド内の要素間に多くのパディングがあります。
しかし、考慮すべき一番のことは分析の麻痺です。 これは、選択肢が多すぎて、誰かがそれらのいずれかを選択できないと感じる可能性がある場合に発生します。
あなたのポートフォリオエントリがユニークであり、自立するのに十分なスペース（またはスペースの不足）がある限り、あなたはたくさんのクリックスルーを得るでしょう。 そして、それはポートフォリオの要点ではありませんか？
組積造グリッド
組積造グリッドについて知っている人はあまりいませんが、彼らは長い間存在しています。
これらは通常、JavaScriptを使用して、さまざまな垂直方向の高さに基づいてアイテムをグリッドに配置します。 したがって、すべて同じサイズでピクセルパーフェクトなサムネイルを追加するのではなく、さまざまなサイズでさまざまなポートフォリオ要素を追加し、それらを適合させることができます。
Weston WordPressテーマには、ミニマリストの写真ポートフォリオページにこの機能があります。 これは当然、オンラインで作品を撮りたい写真家を対象としています。石積みグリッドは、可変高さの写真撮影に適したオプションです。
各写真は、適切なスペースを占めるグリッドに自然に流れ込みます。 通常、正確な列数と列の高さをカスタマイズできますが、デバイスのサイズによって異なることに注意してください。
フルスクリーンレイアウトが好きな場合は、Notioテーマを覗いてみてください。 タイトなサムネイルとカスタムアニメーション効果を備えた石積みグリッドデザインを使用しています。
これらの2つのテーマのグリッドもタイトさが異なることに注意してください。 1つは画像間に余分な空白があり、もう1つはサムネイルが互いにぴったりと並んでいます。
グリッドレイアウトはいくつかの傾向に従います。最も好きなものに従うのはあなたの選択です。
ホバーの詳細：イェーイまたはイェーイ？
多くのポートフォリオには、ホバー中にサムネイルの上に表示されるホバーの詳細が含まれています。 この効果は通常モバイルには引き継がれませんが、サムネイルが大きいデスクトップポートフォリオサイトでは間違いなく一般的な傾向です。
各サムネイルは、内部ポートフォリオアイテムページにリンクするか、少なくともその作品に関連する画像のギャラリーを開く必要があります。 サムネイルがポートフォリオ全体を構成するべきではありません。
ただし、詳細を追加すると、クリック数が増え、サイトをさらに掘り下げることができます。 Create WordPressテーマは、ホバー中にカスタムアニメーション効果を使用して、ホバーの詳細に注意を引きます。
カーソルをポートフォリオアイテムに合わせると、次の2つの重要な情報が表示されます。
- ポートフォリオアイテムの名前/タイトル
- アイテムのカテゴリ
これらの小さな詳細により、ユーザーエクスペリエンスが大幅に向上する場合があります。 誰かが特定のグラフィックデザイン作品を閲覧している場合は、クリックする前にカテゴリ別に閲覧してタイトルを確認できます。
ただし、これらの詳細が不必要に冗長になり、スペースを取りすぎる場合もあります。 そのため、WordPress Gatherテーマにあるような、これらの詳細をスキップするデザイナーもいます。
シンプルなホバー効果を備えた単なるサムネイル。 見やすく、すべての詳細がサムネイルの下にあるため、画像の邪魔になりません。
この傾向には、明確な「正しい」答えがありません。 ホバーの詳細は、一部の人にとってはうまく機能しますが、他の人にとっては、この機能が小さな煩わしさの原因になる可能性があります。
あなたのサイトで最もよく見えるものを見つけて、あなた自身の好みに基づいて判断してください。 ただし、詳細がサムネイルのホバーに表示される場合でも、サムネイルの下に表示される場合でも、ページのどこかに詳細を追加してみてください。
説得力のある写真で目をつかむ
すべてのグリッドレイアウトは、サムネイルを使用して注意を引き付けます。 これらのサムネイルは通常、クリックして詳細を読むように人々に促すことで、作品の一部を販売します。
あなたの作品は、デジタルアート、ウェブデザイン、アイコンデザイン、UXアーキテクチャ、または視覚的に魅力的なその他のものである可能性があります。 しかし、重要なのは、販売するには視覚的な魅力が絶対に必要だということです。 そして、それは説得力のある写真から来ています。
ミニマリストのMellowWordPressテーマは、それぞれ異なるスタイルのさまざまな写真を使用しています。 これらはほとんどがプレースホルダーであるため、「真の」プロジェクト写真ではありません。 しかし、それらは最初のページロードから訪問者を販売する明確な例を提供します。
他のポートフォリオサイトを閲覧して、他のデザイナーがギャラリーの写真に何を使用しているかを確認することをお勧めします。
自分のサイトに何を使用できるか、どのような作業が注目を集める可能性があるかを確認してください。 あなたのスキルセットを最もよく表すものは何ですか？ 各プロジェクトのどの部分が最も視覚的に魅力的であるか、またはあなたの作品を他の人に売るのに役立ちますか？
繰り返しますが、これは非常に自由形式の質問ですが、さまざまな戦略を試してみることをお勧めします。 私は通常、クローズアップ写真が特にサムネイル形式で多くの注目を集めていることに気付きます。 ポートフォリオページで、これらの例とBeckettテーマの組み合わせを確認できます。
グリッドレイアウトでは、プロジェクトごとに非常に多くのスペースしかありません。 そのスペースを数えましょう！
サムネイルの大きさを正確に知っている場合は、すでに大きな利点があります。 これにより、Photoshopでさまざまなサムネイルを切り抜いて、ポートフォリオアイテムに最適なコンポジションを確認できます。
前進する
グリッドデザインは非常にシンプルで、多くのWordPressポートフォリオテーマがデフォルトで付属しています。 しかし、グリッドレイアウトは、見事なデザイン作業がなければ多くを提供しません。
この投稿が、デザイナーやクリエイティブが独自のポートフォリオを立ち上げるための貴重なヒントを提供することを願っています。 グリッドデザインはポートフォリオで最も一般的であるため、訪問者はそれらを期待します。 これらのトレンドを適用する（またはこれらのテーマを使用する）ことで、より多くの注目を集め、理想的には時間の経過とともにより多くのクライアントの作業をもたらすことができます。