> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://con-one.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ポートフォリオ機能で商品一覧・顧客の声を作成！

${youtube}[ポートフォリオ機能で商品一覧・顧客の声を作成！](AlT8BcQn7o0)


作品集、お客様の声、事例集などをカテゴリーで分けて、一覧で表示できる機能です。
一覧から1つをクリックすると、ポップアップで詳しい内容を表示したり、専用の詳細ページを開いたりできます。
**こんな使い方ができます**
* お客様の声を、業界別・ジャンル別に分けて紹介する
* 制作実績や作品集を載せる
* 商品を紹介する（物販の方におすすめ）
* 動画講座を、カテゴリー別の一覧ページにする（動画配信サービスのような見せ方）

### 全体の流れ
```
① ポートフォリオを開く
② 全体のデザインを決める（ページテーマ・ヘッダー）
③ アイテムを追加する
④ カテゴリーで分ける
⑤ メニューやページに表示する
```
### ① ポートフォリオを開く
メニューの「ポートフォリオ」を開きます。
テンプレートによっては、最初から表示されていない場合があります。その場合は「新しく追加」から「ポートフォリオ」を追加してください。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_1vpt3gg.png)

### ② 全体のデザインを決める
先に全体のデザインを決めておくと、あとの作業が楽になります。
**ページテーマ**
個別ページの雛形（フォーマット）です。**最初に作っておくと、新しいアイテムを追加したときに同じ形で作られる**ので、編集がしやすくなります。
**ヘッダー**
ポートフォリオ一覧ページの、上部のデザインです。プレビューで見た目を確認しながら選べます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_17ce8ur.png)

### ③ アイテムを追加する
「アイテムを追加」をクリックして、1つずつ登録していきます。
* **題名**：アイテムの名前
* **説明**：ポップアップなどで表示される説明文
* **画像**：1枚だけ、またはギャラリー（複数枚）で表示できます
* **動画のURL**：埋め込みコードを入れると、動画も表示できます
**表示のしかたを選ぶ**
* **一覧に題名を表示**
* **ライトボックスで画像を表示**：クリックすると画像が大きく表示されます
* **ポップアップで説明表示**：クリックすると説明がポップアップで表示されます
* **専用のページ**：クリックすると詳細ページが開きます
**専用のページを作る場合**
「専用のページを追加」をクリックすると、「ページを編集」の項目が追加されます。ここから、詳しい内容の個別ページを作成できます。
「ページの設定」では、次の設定ができます。
* **URL**：個別ページのURL
* **メタディスクリプション**：検索結果に表示される説明文（SEOを気にする場合は設定しましょう）
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_5zdrtn.png)

**ポップアップと個別ページ、どちらを選ぶ？**
| 表示方法 | 向いているケース |
| ---- | ---- |
| ポップアップ・ライトボックス | 物販など、写真と短い説明で伝わるもの |
| 専用の個別ページ | お客様の声や事例など、じっくり読んでもらいたいもの |
### ④ カテゴリーで分ける
アイテムをカテゴリーで分類すると、一覧ページにカテゴリーが表示され、クリックで絞り込めるようになります。
1. カテゴリーの項目で、新しいカテゴリー名を入力します。
2. 「＋」をクリックします。
3. 「確認」をクリックすると、カテゴリーが追加されます。
追加したカテゴリーを、各アイテムに設定していきます。
（例：お客様の声を「美容」「飲食」「教育」などの業界別に分ける）
### ⑤ ポートフォリオ全体の設定
「ポートフォリオ」の全体設定では、次のことができます。
* **名前の変更**：メニューに表示される名前を変えられます（例：「お客様の声」「実績紹介」）
* **URLの変更**：一覧ページのURL
* **SEO情報**：一覧ページがシェアされたときに表示される内容
* **会員サイトにする**：ポートフォリオ全体を、会員だけが見られるページにできます
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_7vvbrk.png)

### ⑥ ページやメニューに表示する
**メニューに追加する**
ホームページのメニュー設定で、「ページグループ」の中の「ポートフォリオ」を選び、「全て」を追加します。個別のページだけを表示させることもできます。
**好きな場所に表示する**
ウィジェットを使うと、ページの好きな場所にポートフォリオを表示できます。
1. ウィジェットから「**ポートフォリオ**」をドラッグして入れます。
2. 「アイテムを追加」をクリックすると、登録済みのアイテムが表示されます。
3. クリックすると、表示のしかたを設定できます。
   * 何列で並べるか（3列・4列など）
   * グリッド表示（一覧で並べる）
   * タイトルを表示する
   * カテゴリーを表示する
   * スライドで表示する
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/image_9r1aig.png)

### ポイント
* **先に「ページテーマ」を作りましょう。** あとからアイテムを追加するたびに、同じ形で作られるので編集が楽になります。
* **画像は必ず入れましょう。** 一覧で並んだときの見え方が大きく変わります。
* **会員サイトとしても使えます。** ポートフォリオ全体を会員限定にすれば、動画講座の一覧ページのような使い方もできます。カテゴリーで動画を分けておくと、見たいジャンルから選んでもらえます。





# ページビルダー一覧


[ページビルダー概要](/ja/article/44oa44o844k444ot44or44oa44o85qac6kab-uugfod/)

[ページの追加方法](/ja/article/44oa44o844k444gu6l95yqg5pa55rov-ngabyy/)

[ブロックの活用方法](/ja/article/44ow44ot44od44kv44gu5rs755so5pa55rov-wddhzi/)

[ウィジェット追加方法](/ja/article/44km44kj44k344kz44kn44od44oi6l95yqg5pa55rov-uypahx/)

[SEOの設定方法](/ja/article/seo-12zy0jh/)

[スマホサイズのデザイン設定方法](/ja/article/44k544oe44ob44k144kk44k644gu44oh44k244kk44oz6kit5a6a5pa55rov-79dyz5/)

[購入者限定ページの作成手順](/ja/article/6lo85ywl6icf6zmq5a6a44oa44o844k444gu5l2c5oiq5oml6acg-5ohl1f/)

[ポートフォリオ機能で商品一覧・顧客の声を作成！](/ja/article/44ob44ka44o844oi44ov44kp44oq44kq5qmf6io944gn5zwg5zob5lia6kan44o76agn5a6i44gu5aow44ks5l2c5oiq77yb-gdxfxi/)




[ヘッダーを活用してホームページのメニューを最適化しよう！](/ja/article/44oy44od44k44kz44o844ks5rs755so44gx44gm44ob44o844og44oa44o844k444gu44oh44ol44ol44o844ks5pya6ygp5yyw44gx44ki44gg77yb-1bx306j/)

[コピー（複製）の仕方（ウィジェットやブロック）](https://con-one.crisp.help/ja/article/44kz44ou44o877yi6ksh6ko977yj44gu5luv5pa577yi44km44kj44k444kn44od44oi44ke44ow44ot44od44kv77yj-khqvln/)

[フッターを活用してユーザーを誘導しよう！](https://con-one.crisp.help/ja/article/44ov44od44k44o844ks5rs755so44gx44gm44om44o844k244o844ks6kqy5bco44gx44ki44gg77yb-hy2apq/)

[ページへのアクセス設定](https://con-one.crisp.help/ja/article/44oa44o844k444g444gu44ki44kv44k744k56kit5a6a-1b5nciv/)

[AIで作ったLPやウェブサイトをコネワンに表示させる方法](https://con-one.crisp.help/ja/article/ailp-1silgif/)

[ファビコンとSNS共有画像](https://con-one.crisp.help/ja/article/sns-xf0jub/)

[ファイルマネージャー](https://con-one.crisp.help/ja/article/44ov44kh44kk44or44oe44on44o844k444oj44o8-14r6elu/)

[ブロックをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-jvpdc5/)

[ブロックの表示設定（見る人・日時・国などで表示を切り替える）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44gu6kgo56s66kit5a6a77yi6kal44kl5lq644o75pel5pmc44o75zu944gq44gp44gn6kgo56s644ks5yih44kk5pu44gi44kl77yj-1qrodnx/)

[カラムの基本設定](https://con-one.crisp.help/ja/article/44kr44op44og5z65pysjuocsoodreodvoodkoodqocqodqeodooiorewumg-bf216w/)

[グローバルカラムの設定](https://con-one.crisp.help/ja/article/44kw44ot44o844oq44or44kr44op44og44gu6kit5a6a-6l3pnn/)

[カラムをタブで切り替えて表示する方法（タブモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k44ow44gn5yih44kk5pu44gi44gm6kgo56s644gz44kl5pa55rov77yi44k44ow44oi44o844oj77yj-570b6r/)

[カラムをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)[](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)

[フリームーブモード解説：ウィジェットを自由に移動](https://con-one.crisp.help/ja/article/44ov44oq44o844og44o844ow44oi44o844oj6kej6kqs77ya44km44kj44k444kn44od44oi44ks6ieq55sx44gr56e75yuv-1x5cejf/)