チュートリアル

ぴったりのデザインを探す：絞り込み、検索、プレビュー

ShipPress のデザインは、どれも完成した WordPress ブロックテーマです。必要なページ構成やセクションに一番近いものから始めれば、あとで AI に直してもらう部分がずっと少なくなります。このチュートリアルでは、デザイン一覧の絞り込み、検索ボックス、プレビューを順に見ていきます。

著者：Oberon Lai。私は ShipPress（Codotx, LLC）の開発者で、これは自社の製品です。

動画を再生

1. デザイン一覧を開く

   ホームの右側がデザインから始めるで、横にデザインの数が出ています（今は 191）。カードにはスクリーンショット、デザイン名、どんなお店や事業向けか（例：Boutique city hotel · Business）、色とスタイルのタグが表示されます。

   どのデザインも、トップページだけでなく、専用のページ、フォント、色まで揃った WordPress ブロックテーマです。

2. 業種で絞り込む

   業種を開くと、グループごとのデザイン数が見られます：

   • ビジネスと専門サービス：42
   • 講座と教室：23
   • 健康とウェルネス：23
   • 工芸と生活雑貨：18
   • 飲食店：17
   • 専門店：16
   • ファッションと美容：14
   • アートとメディア：10
   • 旅行と宿泊：10
   • イベントとコミュニティ：9

   飲食店を選ぶと 17 件になり、Enishi Catering、Shokutaku Dining、Teuchi Udon などが並びます。絞り込みを解除で全件に戻ります。デザインは増え続けているので、数字は少し多くなっているかもしれません。

3. 種類、色、スタイルでさらに絞る

   種類はサイトのタイプです：ビジネス、教室・スクール、イベント、飲食店、ヘルス、宿泊・おもてなし、ランディングページ、メディア、非営利、ポートフォリオ、ショップ、ネットショップ。

   色にはグリーン（40 件）、ブルー、ティール、茶色などのほか、大胆、鮮やか、落ち着きといった雰囲気のタグもあります。スタイルには非対称、大胆、ボタニカル、落ち着き、映画のような、クリーン、エディトリアル（76 件）、エレガントなどがあります。

   色とスタイルは複数選べます。業種と種類は一つずつです。絞り込みは組み合わせて使えるので、足すほど候補が減っていきます。

4. ショップ向けのデザインだけを表示する

   EC・ネットショップのチップを押すと、ショップ機能（WooCommerce）付きのデザインだけが残ります。49 件で、たとえば Hayate Cycles、Kaname Watches、Kogu Hardware、Mochi Pet Supply です。

5. 検索する

   デザインを検索…の欄に入力します。hostel なら Fumoto Hostel、clinic なら Aoba Veterinary、Hada Dermatology、Nemuri Clinic など 19 件が見つかります。× を押すか Esc キーで検索を消せます。

6. プレビューで全体を見る

   カードをクリックすると詳しく見られます。上に並ぶタブがそのデザインのページです。たとえば Nemuri Clinic には Home、About us、Symptoms、Treatment、Doctors and nurses、Fees、Your first visit、Map & getting there、News、Contact などがあります。パソコンとスマホで表示を切り替えられます。

   選んだらどうなる？には作られるサンプルページの一覧があり、サイトの名前は？でサイト名を先に決められます（あとで変更可）。デザイン一覧に戻るで一覧に戻り、このデザインを使うでサイト作りが始まります。公開するを押すまで、サイトはこのパソコンの中にあります。

7. 色ではなく構成で選ぶ

   まずページとセクションの構成を見てください。色や文章は AI が簡単に変えられます。ページを増やしたり、レイアウトを組み直したりするほうがやり取りが多くなるので、構成が一番近いデザインを選ぶのがおすすめです。

8. 次のステップ

   デザインを選んだら、最初のサイトを作る、続いてサイトを編集するをご覧ください。

   まだ ShipPress をお持ちでない方は、ShipPress をダウンロード（無料、Mac）。