TCDテーマはおかげさまで多くの方から「国内で最もデザインクオリティーが高いWordPressテーマだ！」といった評価を頂いています。そして、今回TCDテーマの中でもこれまでに無いほどの強烈なインパクトで訴求することができるWordPressテーマMAXXをリリースしました。
MAXXのトップページはグリッドな画像をレイアウトするだけではなく、スライダー表示、YoutubeやMP4動画を設定することができる汎用性の高いテーマになっているため、特別ライセンスにて、企業や個人ホームページを制作代行しているWEBデザイナーさんにも購入頂いています。
しかしその一方で、デザイン部署のない中小企業のWEB担当者の方や、個人でブログを運営している方からは、「TCDテーマのデザイン性を活用しきれない・・」「デモサイトのようにカッコ良いホームページにしたいけど自信がない・・」といった声も聞くことがありますので・・
ここでは、WEBデザイナーではない方でも、訴求力のあるトップページを作るためのWordPressテーマ【MAXX】専用のPhotoshopテンプレートをご用意しました。どなたでも無料でダウンロードできます。
（※Photoshopのバージョンにより使えない場合があります。無料配布のため動作の保証はできませんので予めご了承ください。）
WEBサイトのトップページの最も重要な役割とは？
WEBサイトのトップページは言葉で説明をしなくても、サイトに訪れた人が一瞬で「何のホームページなのか？」「自分の興味のあることが載っているサイトなのか？」を伝える最も重要な役割があります。この訴求ができるか？できないか？で離脱率や滞在時間にも影響し、ホームページのブランディングにも大きく関わってきます。
そして、MAXXの最大の特徴はテキストのデザイン（文字装飾）をしなくても、画像を効果的に配置（レイアウト）するだけで”WEBサイトのコンセプトを伝えることができる”ため、特別なデザイン技術が無い人でも訴求力のあるトップページを完成させることができます。
ただ、「1枚の絵は1000の言葉に匹敵する」という言葉があるように、1つの画像で与えることができる情報量は図りしれず、なんとなく手元にある画像を適当に配置しただけでは、チグハグな印象になってしまうことがあります。
統一感があり、なおかつ訴求力のあるトップページを作るためには、ホームページ全体の視覚的動線を留意しながらレイアウトを組むことが大切になりますので・・
WordPressテーマ【MAXX】専用のPhotoshopテンプレートの使い、仮想的な場所で1枚1枚の画像を厳選（色調の微調整）し、楽しみながらレイアウトを組んでみてください。
完成したトップページのデザインは、MAXX-TP.zipに同梱されているPhotoshopのアクション（MAXX-TP.atn）を実行することで、MAXXのデモサイト同様の正方形(1×1)・縦長(2×1)・横長(1×2)に分割された5枚の画像を自動的に作成することができます。
TCDテーマ【MAXX】専用のPhotoshopテンプレートの使い方
ダウンロードした【MAXX-TP.zip】を解凍します。
解凍すると【MAXX-TP.atn】と【MAXX-TP.psd】が入っています。
まずは【MAXX-TP.psd】をPhotoshopで開きましょう。
トップページコンテンツに表示したい画像をPhotoshopで開き、テンプレート側にドラッグ＆ドロップします。
一旦画像レイヤーの不透明度を下げて、サイズを調整（※サイズ調整を繰り返す場合には画像レイヤーをスマートオブジェクトに変換しておくことで劣化を防げます）し、最適な場所へ配置しましょう。
サイズと配置（色調補正など）が決定したら、【MAXX-TP.atn】をPhotoshopで開きます。
続いてメニューバーからアクションのウィンドウを開きます。
MAXX-TPというアクションが追加されているので再生します。
すると、5枚に分割された画像が完成します。
WordPressの管理画面に入り、MAXXのテーマオプションから1枚1枚画像を設定していきましょう。
すると、このようなトップページが完成しました。
一連の工程は動画でも解説しています↓
MAXX専用Photoshopテンプレートの使い方動画解説
Photoshopテンプレートの使い方【複数の画像でレイアウト】
1枚目のトップページコンテンツに表示したい画像をPhotoshopで開き、テンプレート側にドラッグ＆ドロップします。
画像レイヤーを【1シェイプ】の前面に移動し、右クリックしてクリッピングマスクを作成（※これにより1シェイプの枠内に画像を収めることができます）します。
サイズや配置を微調整します。
続いて2枚目の画像をPhotoshopで開き、画像レイヤーを【2シェイプ】の前面に移動し、右クリックしてクリッピングマスクを作成してからサイズや配置を微調整します。
同様の工程で5枚の画像を配置します。
ここからホームページ全体の視覚的動線を留意しながらレイアウトを組みたいので、メニューバーもコンセプトに合致したカラーに変更してから、1つ1つの画像のコントラストや色調などを微調整していきましょう。
サイズと配置（色調補正など）が決定したら、MAXX-TPアクションを再生します。
5枚に分割された画像が完成したら、MAXXのテーマオプションから1枚1枚画像を設定しましょう。
一連の工程は動画でも解説しています↓
複数の画像でレイアウトを組む場合の動画解説
関連記事 ： 強烈なインパクトでユーザーの視線を鷲掴みにするためのレイアウトについて解説していますので参考にしてください。
