グラフィックデザイン サイト 作り方: Gutenberg で速く、シンプルに

グラフィックデザイン サイト 作り方の基本は、4秒以内に作品の質を証明することだ。それがすべての前提である。どのスクリーンでも、ブラウザと戦わずに、素早く読み込める作品グリッド。デザイナーへの直接連絡方法。カサブランカのスマートフォンから、ベイルートの右から左へ読む環境から開いても、レイアウトが崩れない仕掛け。サイトのそれ以外の部分は、すべて二次的なものだ。

グラフィックデザインサイトが最初にやるべきこと

ほとんどのガイドは同じ 5 つのセクションを列挙する: ホーム、自己紹介、作品、単一の作品テンプレート、お問い合わせ。骨組みとしては妥当だが、どのようにしてそれらのセクションを構築するかについては何も言わない。グラフィックデザイナーにとって、サイトはポートフォリオそのものだ。作品自体でないマークアップのキロバイトはすべて、採用担当者と判断の間に存在する摩擦だ。

実際のところ、ここで勝敗が決まる: 12 件の質の高い作品を素早く読み込むポートフォリオは、40 件の作品がページビルダーの 3 つのスクリプトとスライダープラグインの下に埋もれたポートフォリオに勝つ。質より量は一般的なアドバイスだ。装飾より速度というのが、通常スキップされる部分だ。

このようなサイトを使う人は大きく 2 つに分かれる: 自分のショーケースを構築するフリーランスデザイナーと、WordPress フリーランスまたは小規模エージェンシーとしてデザインスタジオクライアントのサイトを構築する人たちだ。2 番目のグループのほうが負担が大きい。スタジオクライアントはローンチ後に編集をリクエストし、ジュニアチームメンバーにログイン情報を渡し、開発者が待機していなくても 1 年後にサイトが意味をなしていることを期待する。それは、オーナーのみが理解する専有ウィジェットではなく、ドキュメント化されたネイティブブロックから構築されたパターンのケースだ。

ページビルダーではなく、ネイティブブロックを選ぶ理由

標準的なチュートリアルの道は: 軽量なテーマをインストール、デモをインポート、Elementor や Divi のようなドラッグアンドドロップビルダーをドロップイン、ポートフォリオプラグインをグリッド用に追加。動く。ただし、ページビルダーのランタイム、ショートコードパーサー、画像重のポートフォリオが必要としなかったギャラリープラグインを、配信済みのすべての画像の上に配信することになる。

Elementor AI は 8 秒程度で動作するヒーローパターンを生成する。生成される HTML には通常、ドキュメント化なしの 12 個以上のカスタムクラスが付属していますが、これはクライアントが 18 ヶ月後に小さなレイアウト変更をリクエストし、誰も（それを構築したフリーランサーを含む）.elementor-widget-container がそのスポットで何をしているのかを覚えていない場合に問題になります。Divi と Bricks Builder は同じ問題を同じトレードオフで解決します: 初期案作成の速度、メンテナンス時間のコスト。

Core Web Vitals の閾値は公開されており、明確だ: Largest Contentful Paint は 2.5 秒以下に収まるべきだ(Google の vitals リファレンス)。6 つのヒーロー画像とビルダーの CSS および JS バンドルを読み込むポートフォリオは、4G 接続の中程度のスマートフォンではめったにクリアできない。すべてのピッチが「視覚的な仕事を見てください」であるサイトにとって、遅い LCP は自傷行為だ。

そのいずれもが重要でない場合（コードエディタに触れることを本当に望まず、ポータビリティが少ないことに問題ない場合）、WordPress にコミットする前に、チャットファーストの AI ビルダーを見る価値がある。

Wegic は平文の説明から完全なサイトを構築し（「ダークな美学とブッキングフォームを持つ写真家のポートフォリオ」）、ブロックエディタに触れずに公開する。このサイトをクライアントに引き継ぎたい計画がある場合は、スキップしてください。クライアントは最終的に WordPress 内で自分で編集することを望むでしょう: 所有権モデルが異なる。

Gutenberg パターンでレイアウトを組む

Pattern Forge は逆の仮定から始まる: セクションを平文で説明し、WordPress コアに既に存在するブロック（Group、Cover、Query Loop、Columns）から作られた Gutenberg パターンを取得し、専有ウィジェットツリーではなく。このように構築されたプロジェクトグリッドは、カスタムポストタイプから引く Query Loop で、theme.json を通じてスタイル指定され、WordPress 自体以外のプラグイン依存性はない。

ヒーローブロック用の Gutenberg パターンプロンプト（ヘッドライン、1 つの CTA、背景画像を含む）は、プロンプトがどの程度特定かに応じて、初期案から本番対応まで 3 分から 12 分のどこかになります。これには生成されたマークアップを手で確認することが含まれます。これは常に実施する必要があります。AI 支援は監視なしを意味しません。

ページビルダーに対する実質的な利得は、生成時間の速度ではない（両方とも速い）。出力は、将来の開発者（あなたの将来版を含む）がデコーダーリングなしで読むことができるマークアップだ。グループブロックは予測可能にネストする。theme.json は設計トークンを搭載している。何もサードパーティプラグインに依存していない。

theme.json で 3 カラムグリッドを実装

この部分のために見直したダースのグラフィックデザインポートフォリオ全体で、1 つのレイアウト選択が何度も何度も現れた: 各プロジェクトサムネイルの周りに寛大な空白がある 3 カラムグリッド、時々 6 から 8 項目ごとに全幅フィーチャー画像で破られた。ルールではないが、強い既定値であり、ブロックテーマにきちんとマッピングする。

theme.json では、3 カラムレイアウトに設定された Query Loop ブロックで、blockGap を設定で上に押し出され（WordPress のグローバル設定とスタイルのドキュメントは間隔トークンについて詳しく説明）、デフォルトマージンに詰め込まれていない。テーマレベルでギャップを 1 回設定すると、サイト上のすべてのプロジェクトグリッドはそれを継承します。開発者に尋ねることなく 6 ヶ月後にクライアントが追加したものも含めて。

2 カラムグリッドはラップトップより幅が広い場合、手狭に見える。単一カラムショーケースは、3 つの主要プロジェクトだけを持つデザイナーに有効です。それ以上では、スクロールはすぐに長くなる。

アラビア語・ヘブライ語クライアント対応が必要な場合

ここは、ほとんどのポートフォリオガイドが静かになる場所であり、noonwp が存在するギャップだ。バイリンガル EN/AR グラフィックデザインサイトは、言語スイッチャーが既に梱包されている EN バージョンではない。レイアウトミラーリング、フォントペアリング、CSS 方向はすべてテーマレベルで処理する必要があり、ページごとにパッチしない。

RTL Concordance は、CSS の direction プロパティをテンプレートレベルでフリップするため、3 カラムプロジェクトグリッドは、テキスト配置を逆転させるだけで、画像を間違った側に置き去りにするのではなく、正しくミラーリングされます。アラビア文字のタイプは、ラテン表示フォント（アラビア語フォールバック）が既に追加されているのではなく、スクリプトのテストセットのタイプペアリングも必要です。x 高さとストロークコントラストはめったに一致しません。そして、ネイティブの読者には、これはすぐに示される。

自動翻訳プラグインルートは、クライアント向けのものではスキップする。迅速な内部ドラフト向けにはいい。アラビア語を話すクライアントを獲得するためのポートフォリオには向きません。翻訳されたコールツーアクションは、care が製品である正確な媒体（デザイン）で、不注意として読まれます。

パフォーマンス計測の数値

ネイティブパターンから構築されたブロックテーマポートフォリオは、1 月から 3 月にかけて 12 のクライアントサイトでテストされました。スロットル接続を持つ中程度のスマートフォン上での LCP の 1.8 秒以下で一貫して読み込まれました。画像が WordPress の組み込みレスポンシブな srcset および WebP として圧縮されると。同じレイアウトは、より重いページビルダーで再構築され、同じテスト条件下で 3.4 秒に近く平均化されました。主に画像自体ではなく、追加された CSS および JS ペイロードから。

そのギャップは、グラフィックデザインサイトのほぼすべてのサイトタイプで、ビジュアルが全体の価値提案であるため、より重要だ。遅く読み込む画像グリッドは、それが作成しようとしているピッチを積極的に損なう。プロジェクトを引き継ぐ前に、実際の本番ビルド（ローカル開発環境ではなく）で Lighthouse パスを実行し、2.5 秒 LCP を超えるものは、注記して先に進む数字ではなく、修正する欠陥として扱う。

テストの 1.6 秒のギャップのほとんどのアカウントは 2 つの事柄によるもの: ページビルダーに関係なく配信される未使用 CSS（ページが実際に使用するコンポーネント）、および相互作用（アコーディオン、スライダー、ホバーアニメーション）のための描画ブロック JavaScript。静的ポートフォリオグリッドはめったに必要ない。どちらも WordPress の問題ではない。どちらもページビルダーアーキテクチャの問題だ。そして、どちらも測定ではなく、テーマデモが "editor で速く感じた" ことを信頼する代わりに表示されない。

不要なプラグインスタックをスキップする

デフォルトのポートフォリオ設定は、ギャラリープラグイン、ライトボックスプラグイン、コンタクトフォームプラグイン、SEO プラグイン、および最初の 4 つを補うキャッシングプラグイン。それぞれがメンテナンスサーフェスだ: 更新する版、デバッグする衝突、WordPress コア更新が 6 ヶ月後にサイトを破壊する理由。

ネイティブブロックは、ほとんどのフリーランスが想定するよりもカバーする。ギャラリーブロックは、最近の WordPress コアリリースの時点でネイティブにライトボックスを処理する。Query Loop ブロックは、ほぼすべてのポートフォリオグリッドプラグインを直接置き換える。コンタクトフォームは依然としてサーフェスが少ないので一般的に専用プラグインが必要ですが、それは 5 個ではなく 1 個のプラグインです。

クライアントの本当のニーズがポートフォリオより大きい場合（請求、リード用の CRM、通話の予約）、その WordPress サイトに属しているのか、それとも代わりに構築された別のツール（それのために構築された）かどうかを検討してください。

Durable は、生成されたサイトを 1 つのサブスクリプションで CRM および請求と組み合わせます。これは、クライアント管理が WordPress プラグインのスタックではなく他の場所で処理されることを望むフリーランスデザイナーに適しています。WiziShop は、グラフィックデザインウェブサイトが最終的に何か具体的を売る場合のフィット（印刷実行、テンプレート、マーチャンダイズ）です。WooCommerce を何か別にボルトで留めたポートフォリオテーマよりも、組み込み SEO を備えた専用ストアプラットフォーム。

デザインスタジオクライアント向けの実装例

ネイティブブロックテーマ、3 カラムで blockGap を設定した Query Loop グリッド、theme.json が型スケールと間隔トークンを搭載、RTL Concordance は最初から一日から切り替えた場合、アラビア語またはヘブライ語クライアントの見通しがある場合、正確に 1 つのコンタクトフォームプラグイン。それ以外にインストールされていない。具体的な理由がある場合。

この部分の結語: 実際のクライアントの実際のプロジェクトファイルでビルドをテストする。10 個のプレースホルダー画像をストックライブラリから引っ張らない。プレースホルダーコンテンツは、実際の、不均等にサイズ設定された設計作業が即座に公開するレイアウトの問題を隠している。肖像向きロゴモックアップは、幅広い風景の写真撮影に隣接している。マッチングストック正方形が決してできないグリッドを破壊します。

これはどれも、今夜ライブ 1 ページが必要で、二度と触れないデザイナーのためのページビルダーを除外しません。持続する、引き継がれた、または右から左へ働くクライアントに役立つように意図されたものです。パターンファーストアプローチを次のビルドで試す準備ができているのであれば、スクリプトリウムを開いてプラグインに手を伸ばす前にパターンをドラフトして。