2012年、ブログデザインといえば、Photoshopでゼロから描き、PSDをテーマファイルに変換することを意味していました。2026年、ワークフローは完全に変わりました:ブロックエディタ、Figmaのキット、そしてAIテーマです。
オリジナル記事(2012年):
自分だけのブログデザインが欲しいですか?実は自分だけのデザインを手に入れるのはとても簡単 — 少しのPhotoshopと、少しの想像力があればいいのです。
下の動画では、以前見かけたブログのデザインを作ってみました。実は全く同じにはならず、少し自分でもいじりました — 結果的に、私としては良い出来になりました。WordPressのデザインを作るのに、プラグインやそれに類するものは一切不要です。Photoshopがすでにすべてを内包しています。時間があれば、SNSアイコンさえ自分で作れます。
作ったデザインは、ミニマルな個人ブログのデザインです。このデザインのPSDファイルとPNG形式も、記事の下でシェアしました。
2026年のワークフロー — PhotoshopからFigma+ブロックエディタへ
個人のWordPressブログをデザインする、2026年の典型的な流れ:
- ムードボード:Pinterest+Dribbbleから10〜15の参考例。
- ワイヤーフレーム:Figmaでざっくりレイアウト。モバイルファースト。
- 高精細デザイン:Figmaで色、タイポグラフィ、マイクロインタラクション。
- テーマ選び:Kadence、Astra、GeneratePress、Blocksy — これらはブロックエディタ(FSE)対応で、パフォーマンス優先。
- カスタマイズ:サイトエディタ(FSE)でブロックごとに編集。もうコードを書くことは必須ではありません。
- パフォーマンス最適化:WP Rocket、Cloudflare、次世代画像形式への変換。
2012年 vs 2026年 — 比較表
| ステップ | 2012年 | 2026年 |
|---|---|---|
| デザイン | PhotoshopのPSD | Figma |
| HTML/CSS | 手書きコーディング | ブロックエディタ(FSE)+カスタムCSS |
| テーマ | ゼロからPSD→テーマ | Astra/Kadence+子テーマ |
| アイコン | PSで手描き | Lucide / Heroicons / Phosphor |
| モバイル | 後から追加 | モバイルファーストが必須 |
| 速度 | 3〜5秒の読み込みが普通 | LCP 1秒未満、Core Web Vitals |
2026年の注記:AIテーマ生成は2024年に始まりました:Divi AI、Hostinger AI Website Builder、Wix ADI — 一文書くだけで、完全なブログテーマが出来上がります。でも本格的な個人サイトには、今もFigma+Astra/Kadence+手書きCSSが最も確実な道です。
おすすめのテーマ/プラグイン構成(2026年)
- テーマ:Kadence(無料版で十分)またはGeneratePress。
- ページビルダー:ブロックエディタ(Gutenberg)が組み込み。Elementor / Bricksはお好みで。
- SEO:Rank Math(無料)またはSEOPress。
- パフォーマンス:WP Rocket+Cloudflare。
- 画像:ShortPixelまたはImagifyでWebP/AVIF変換。
