ホーム
考え方、作品が横に流れるスライド、できること4つ、自己紹介、お知らせ、お問い合わせへの誘導。
<< デモ一覧に戻る
デザイナーのポートフォリオのデモサイト
- このページでは、Frames CMS の製品版で実際に作ったポートフォリオサイトをご紹介します。ひとりで仕事をしているデザイナーを想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- ひとりで仕事をしている方のための型です。会社案内は要らない、でも実績と料金と人柄は伝えたい——そういうサイトの組み立て方をまとめています。
まずは全体像から
このデモの構成
6つのページで構成しています。ひとりの仕事なら、これで足ります。
01
02
制作実績
6件をカードで。「何を作ったか」より「なぜその形にしたか」を1〜2行ずつ添えています。
03
できること
3つのプランを並べた料金表、進め方の5ステップ、よくあるご質問。金額を出しているページです。
04
プロフィール
顔写真つきの自己紹介、経歴と使用ソフトの表、仕事のときに決めていること。
05
お知らせ
受付状況や展示のご案内。記事を追加すると一覧と詳細が自動で作られ、トップにも最新3件が出ます。
06
お問い合わせ
入力項目を自由に作れるフォーム。ご予算や納期の欄を足しておくと、返信が楽になります。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「portfolio2（曲線シェイプ切り抜き・1枚ビジュアル）」 です。
portfolio2 は、メイン画像を曲線の形に切り抜いて、横に文字を並べるフレームです。背景にうっすらとしたライン装飾が入っていて、そのまま置いても余白がきれいに見えます。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。
メイン画像を選ぶときのコツ。写真は曲線で切り抜かれますので、端が切れても困らない写真を選んでください。人物が端に寄っていると、切れてしまうことがあります。
なお、背景のライン装飾も管理画面から差し替えられますし、「使わない」にすることもできます。
このデモでは、色を1つだけ変えています
portfolio2 の標準のメインカラーは淡いピンクです。かわいらしい配色ですが、料金表や実績を見せるページでは少し甘くなるので、メインカラーだけをチャコール（濃いグレー）に変えました。
アクセントカラーのピンクは、あえて残しています。見出しの上の小さな英字や、メイン画像の下の一行に効いています。全部を変えるより、1色だけ残したほうがまとまることがあります。
変えられるのは、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つ。変えた色だけが保存される仕組みなので、あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。
なお、その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 考え方 | 基本セット（見出し＋本文＋画像） | |
| 作品が横に流れるスライド | サムネイル横スライド（写真の流れ） | |
| できること4つ | かわいい形のカラム（自動幅・マスク選択） | |
| 区切り | 区切り線・余白 | |
| 自己紹介 | 横長レイアウト（テキスト＋写真） | |
| お知らせ | お知らせ一覧（自動） | |
| お問い合わせへの誘導 | CTA（誘導ボックス） |
制作実績・できること
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 実績6件のカード | カラムリスト（画像・見出し・本文） | |
| 3プランの料金表 | 料金表（プラン比較） | |
| 進め方（5ステップ） | ステップ（手順） | |
| 対応している範囲 | 表（項目と内容） | |
| よくあるご質問 | FAQ（クリックで開閉） |
プロフィール
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 顔写真つきの自己紹介 | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 経歴・使用ソフト | 表（項目と内容） | |
| 決めていること | 箇条書き（中黒・番号） |
全14種類のパーツのうち、9種類は製品版でのみ使えるものです。とくに料金表（プラン比較）は、3つのプランを並べて「何が含まれて、何が含まれないか」を見せられるので、金額の説明がぐっと楽になります。製品版では約50種類のパーツが使えます。
パーツの小ワザ
「できること」で使っている「かわいい形のカラム」は、写真をSVGの形で切り抜けるパーツです。座布団・なめらかな角丸・崩れた円・お花・角丸六角形・ギザギザの6種類から、カードごとに選べます。
このデモでは、4枚とも「なめらかな角丸」1種類で統一しました。落ち着いて、上品な見え方になります。
いっぽうカフェのデモでは、まったく同じパーツで形を1つずつ変えて並べています。
にぎやかで、親しみやすい見え方です。同じパーツでも、揃えるか混ぜるかで印象がここまで変わります。並べて見比べてみてください。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
ひとりで仕事をする方が迷いやすいところ
- 実績がまだ少ないのですが
- 数を並べるより、1件を深く見せるほうが効きます。「何を作ったか」だけでなく「なぜその形にしたか」を1〜2行添えてください。
このデモの実績も、写真と一緒に短い理由を書いています。依頼する側は、出来上がりより考え方を見ています。3件でも十分に伝わります。 - 料金を載せるべきでしょうか
- 迷うところですが、「〇〇円〜」だけでも載せたほうが、問い合わせは増えます。予算が合わない相談を先に減らせるので、結果的にお互いの時間が減ります。
このデモでは3プランを並べて、含まれるものと含まれないものを書き分けました。「ロゴだけ」と「一式」を分けておくと、「そんなに要らない」という方も相談しやすくなります。 - SNSと、どう使い分ければいいですか
- SNSは「見つけてもらう」ため、サイトは「決めてもらう」ためのもの、と分けて考えると整理しやすいです。
SNSで作品を見た人が、料金と進め方を確認しに来るのがサイトです。だからこのデモも、実績より「できること」ページに力を入れています。 - 実績の掲載許可は取ったほうがいいですか
- 取ってください。依頼主にとっては自社の商売の話なので、勝手に出すとトラブルになります。
このデモでは、実績ページの冒頭に「掲載の許可をいただけたものだけを載せています」と書き、FAQにも「紹介されたくない場合」の項目を置きました。先に書いておくと、依頼する側も安心できます。 - 受けられない仕事があります。書いていいですか
- むしろ書いたほうがいいです。このデモでは「お受けしていないもの」を表にはっきり書き、「近いご相談は、信頼できる方をご紹介します」と添えました。
断ることを先に書いておくと、合わない依頼が減ります。できることだけを並べたサイトより、かえって信用されます。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。3列のカードは1列に、料金表は縦に並び替わります。
この構成で作れるサイト
デザイナー以外にも
このデモはグラフィック・Webデザイナーを想定していますが、同じ構成のまま、内容を差し替えるだけで使える仕事がたくさんあります。
イラストレーター／カメラマン／ライター・編集者／建築設計／インテリアコーディネーター／音楽・映像／ハンドメイド作家／各種講師・コーチ など、「作ったもの」と「頼み方」と「自分」を見せたい仕事であれば、そのまま当てはまります。
業種によって変えたほうがよいのは、「制作実績」の見せ方くらいです。写真が主役ならカフェのデモで使っているギャラリーに、点数が多いなら一覧パーツに置き換えられます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る