![見出し画像](https://assets.st-note.com/production/uploads/images/163569876/rectangle_large_type_2_dd01e5937064bc9503012e5087bc67be.jpeg?width=1200)
STUDIOテンプレート|イラストレーター向け作品集の使い方
テンプレートの基本情報
テンプレート名:イラストレーター向け作品集
カテゴリ・用途:ポートフォリオ
こんな方におすすめ:
ポートフォリオサイト経由でお問い合わせやご依頼を増やしたい
ユーザーにとって作品を探しやすいサイトにしたい
どんなポートフォリオサイトを作れば良いかわからない
テンプレートのプレビュー:https://preview.studio.site/templates/G4Ra4pVaDM
テンプレートを制作した背景:
「WEBが苦手だから、ポートフォリオ作りはちょっと不安…」そんな思い、ありませんか?
このポートフォリオは、WEBの知識がなくても、作品をしっかりと見せるために作りました。大切なイラストが埋もれてしまうことなく、多くの方に見てもらえることを目指しています。
3つの特徴
1.ファーストビューでは推しの作品をカスタマイズして掲載可能
![](https://assets.st-note.com/img/1732780011-TxvH1KdYcIsMCVo7X0hizfLJ.png?width=1200)
2.キーワード・タグ検索を設置して、ユーザー視点で作品を探しやすい設計
![](https://assets.st-note.com/img/1732780061-jko1zhWqvCGlbKgrBHVpJMLN.png?width=1200)
3.よくある質問やお問い合わせ項目を充実させてムダなメールのやり取りを削減する設計
![](https://assets.st-note.com/img/1732780155-Z5VdoGiU7HWjKAYJ4gnXPbk1.png?width=1200)
テンプレートの構成
トップページ
実績一覧・詳細ページ(CMS)
お知らせ一覧・詳細ページ(CMS)
タグ一覧ページ
検索結果ページ
サンクスページ
404ページ
プライバシーポリシー
モーダルメニュー
イラストレーター向け作品集の使い方
サイト情報を入力
タイトル
説明文
ファビコン
カバー画像(OGP画像)
言語
![](https://assets.st-note.com/img/1732781282-JIh5vAgEGiqj0VubrQYHwTzy.png?width=1200)
![](https://assets.st-note.com/img/1732781282-WwMtSxjZksaE5r6dHG4U7VY1.png?width=1200)
次に各ページごとに個別に設定がある場合は、ページ情報設定で以下の項目を確認ください。
タイトル
説明文
ファビコン
カバー画像(OGP)
公開範囲
Noindex
言語
構造化データ
![](https://assets.st-note.com/img/1732782185-m0baUT46z5NR2pPAeMHijxQZ.png?width=1200)
ファーストビュー作品掲載の仕方
デザインエディタに入り、左パネルのレイヤータブを開き、「カルーセル 実績」を選択します。
![](https://assets.st-note.com/img/1732844342-rxwjbtoANzkJCGTyW0YZEBIK.png?width=1200)
するとリスト項目が表示されるので、載せたい作品の「タイトル」「作品画像」「実績リンク(CMSに実績を追加済みの場合にリンク可能)」を設定します。
![](https://assets.st-note.com/img/1732844864-7gG3YdqeHUM1rt2NQ4bLwWj0.png?width=1200)
作品を削除する場合は、リスト項目の一番右側のゴミ箱アイコンをクリックする。
作品を追加したい場合は、リストの一番下にある+Newをクリックする。
![](https://assets.st-note.com/img/1732845690-eCqty1a9ZUFpo6cTxrkSg3mJ.png?width=1200)
CMS(実績作品)の編集
管理画面からCMSタブへ切り替えて、それぞれのモデル(実績、実績タグ、お知らせ)から選択して、各項目を編集してください。
![](https://assets.st-note.com/img/1732846514-OWqtj7uXGgsIPi5VoH3A8dxQ.png?width=1200)
実績モデルの項目
・タイトル
・Slug
・カバー画像
・関連タグ
・公開年
・会社名など
・URLリンク
・URLリンクあり ON(共有リンクがない場合はOFF)
・公開日時
実績タグモデルの項目
・タイトル
・Slug
・公開日時
お知らせモデルの項目
・タイトル
・Slug
・カバー画像
・公開日時
実績・お知らせ詳細ページの編集
編集したいタイトルにマウスホバーすると画面拡大アイコンが表示されるのでそちらをクリックすると編集画面に入りますので編集を行なってください。
![](https://assets.st-note.com/img/1732847493-qWigxXkapYDj5zmGAdUMyJCo.png?width=1200)
![](https://assets.st-note.com/img/1732847493-HamR3vsqir61lfKLDZeM4jtg.png?width=1200)
CMS公開の仕方
公開したい記事にチェックを入れて、画面右上のステータス更新をクリックする。そして公開するを選択します。
これで本番環境に反映されます。
実績タグ、お知らせについても同様に公開してください。
![](https://assets.st-note.com/img/1732852765-WD2PQVzwmgIqtnMU8lRT53eA.png?width=1200)
各画像の変更方法(ロゴ画像の変更例)
ヘッダー内に入りロゴ画像を直接クリックして選択。
またはレイヤーパネルを開き画像を選択。
![](https://assets.st-note.com/img/1732853596-mrbKOn7iATqc8U65sfRCHPDN.png?width=1200)
右パネル内の画像をクリックして、画像を選ぶ。
またはオリジナル画像をアップロードする。
![](https://assets.st-note.com/img/1732853688-sFd5JyTPMD6Bpjt4wrn0VH7N.png?width=1200)
ロゴ画像はヘッダー内とフッター内に配置してますので、その2箇所をご変更ください。
SNSやショップへのリンク設定方法
リンク設定をしたいボックスを直接選択。
またはレイヤーパネルからボックスを選択。
選択したら、右のタブを開きURLリンクを入力する。
![](https://assets.st-note.com/img/1732854352-I9VjvoRlZp3LdOQr0bKn5Exs.png?width=1200)
※必要に応じて必要のないリンクは削除いただくか、下記画像のように各レスポンシブ画面で非表示(チェックを外す)にしてください。
![](https://assets.st-note.com/img/1732854866-3owYNEpF0Vck2GMAmjrxW8yI.png?width=1200)
SNSリンクはヘッダー内、フッター内、プロフィール内にあります。
ヘッダー内とフッター内はコンポーネントされてますのでどちらかを編集すればリンクするので大丈夫です。
よくある質問の編集方法
編集をしたいリストボックスを直接選択。
またはレイヤーパネルからリストボックスを選択。
左側のパネルにリスト画面が表示されるので必要に応じて編集します。
![](https://assets.st-note.com/img/1732855410-vf2RaieUsItNEr3yh86P7bzJ.png?width=1200)
フォームの項目の追加・削除
フォームの各項目は必要に応じて追加・削除を行なってください。
フォローアップ
ここまでご説明してきましたが、STUDIOに不慣れな方、作業がめんどうな方、テンプレートをベースとしたオリジナルデザインの依頼などありましたら、お気軽にお問い合わせください。
STUDIOテンプレートの購入を検討されている方へクーポンをご用意しました
私の作ったSTUDIOテンプレートに使える10%offクーポンです↓↓↓
クーポンコード:HKNWVXG
※お一人様一回限りご利用可能です