こんにちは、コウです。

今回はWeb制作のデザイン作業の時短に役立つデザインパーツテンプレートを作成しました。

【一般公開前に販売部数200部突破！】

軽い気持ちで先行販売をした結果、一般公開前に200部を突破してしまいました…

【シリーズ累計で販売部数480部突破！】

※2022/05時点

本商品は、240名以上の方が購入したコーディングパーツテンプレートの派生商品です。

（購入者の方から要望をいただき、派生商品を販売する運びとなりました。）

まずは以前販売したコーディングパーツテンプレートを購入いただいた方々の感想を一部ご紹介いたします。

品質の参考程度にご覧ください。

【LINEでいただいた感想】

このボリュームではかなり安いと思いますし、今後ももっとこういうのを出してほしいです。（Mさん）

『コーディングパーツテンプレート』を使い、コーディングの練習をさせていただいております。

検索の時間が短くなり、効率的に勉強が出来ております。

購入して本当に良かったです。（Tさん）

内容はとても素晴らしいものでした！

ありがとうございます😀（Oさん）

【Brainでいただいた感想】

多くの購入者の方から、

・このボリュームでこの価格は安い！

・実際に時短できて感動した！

といった感想をいただきました。

それではアピールも済んだところで、早速本題に入ります。

　
【デザインパーツテンプレート】とは…

【超時短】【簡単カスタマイズ】【汎用性】

これらの特徴を持つ、Web制作でよく使うデザインパーツ集です。

※購入後にデザインパーツを収録したXDファイルをお渡しします。パーツを複製してご自由に活用してください。

同じく派生商品である【HPデザインパーツテンプレ】（HP制作でよく使う“会社概要”や“お問い合わせ”などのコンテンツを集めたデザインパーツ集）とも、

【LPデザインパーツテンプレ】（LP制作でよく使う“お客様の声”や“実績”などのコンテンツを集めたデザインパーツ集）とも異なり、

HP制作でもLP制作でも使える“見出し”や“ボタン”などのデザインパーツを収録しています。

　
なぜなら…

超時短…0からレイヤーを作成せずにページデザインを作成可能。

簡単カスタマイズ…加えて、コンポーネントをいじるだけで簡単にカスタマイズ可能。

汎用性…Web制作でよく使われるパーツを100個収録。

　
さらに…

✅ 品質が安定する

・作業毎のクオリティのバラつきを抑えられる

・クライアントも安心して作業を任せられて継続案件にも繋がりやすい

✅ 作業時間を削減できる

【0→1未達成の方】

・「納期に間に合わなかったらどうしよう…」といった初案件における不安を減らせる

初案件の不安が軽減できれば、それだけ0→1突破の可能性が高まります。

逆に0→1を突破できないと、Web制作で実現したい理想の未来が潰えてしまうので、少しでも可能性を上げていただけると嬉しいです。

【0→1達成済みの方】

・作業を時短して時給単価を上げられる

仮に1ページ3万円のデザイン制作案件を受けた場合…0からやって8時間かかったら時給換算で3,750円ですが、パーツテンプレを活用して1時間時短できれば時給単価は4,285円…500円以上増える計算です。

これだけでも余裕で元は取れますね。

・作業を時短して報酬の高い上流の仕事にコミットできる

シンプルに時短して時給単価を上げるのもアリですが、さらに空いた時間でスキルアップして、商流を上げ、単価自体を上げるのもいいですね。

・作業を時短して自由な時間が増える

時短して浮いた時間は、プライベートを充実させ、より自分らしく生きるために使ってもいいかもしれません。

といったメリットもあります！

　
100個に及ぶ【収録パーツ】

収録パーツ

・アコーディオン ✕2種類

・アラート ✕2種類

・カード-ノーマル ✕3種類

・カード-記事 ✕2種類

・スイッチ ✕1種類

・スクロールダウン ✕1種類

・スライダー ✕3種類

・タブ切り替え ✕2種類

・ツールチップ ✕1種類

・テーブル-縦 ✕3種類

・テーブル-横 ✕2種類

・テキスト ✕1種類

・テキストリンク ✕1種類

・ドロップダウン ✕1種類

・ニュースティッカー ✕2種類

・バッジ ✕1種類

・パンくずリスト ✕3種類

・フィルタリング ✕1種類

・フォーム-セレクトボックス ✕2種類

・フォーム-チェックボックス ✕2種類

・フォーム-テキスト ✕2種類

・フォーム-テキストエリア ✕2種類

・フォーム-ラジオボタン ✕2種類

・フォーム-検索 ✕2種類

・フォーム-日付ピッカー ✕2種類

・ページTOPボタン ✕2種類

・ページタイトル ✕2種類

・ページネーション ✕2種類

・ボタン ✕6種類

・ポップアップ ✕2種類

・メダル ✕1種類

・モーダル ✕2種類

・ライトボックス ✕1種類

・ラベル ✕1種類

・リスト-順番あり ✕4種類

・リスト-順番なし ✕4種類

・リンク ✕3種類

・ローディング ✕2種類

・引用 ✕2種類

・画像 ✕1種類

・画像+見出し+テキスト ✕3種類

・固定ボタン-PC ✕2種類

・固定ボタン-SP ✕2種類

・地図 ✕1種類

・動画 ✕1種類

・見出し ✕10種類

　
デザインパーツテンプレートの使い方【簡単3ステップ】

※使用している画像は派生商品【HPデザインテンプレート】の試作段階のものなので活用の流れとしてご覧ください。本商品の収録パーツは一つ前の章に記載しています。

1.AdobeXD（購入者に配布）のファイルを開く

2.使用するパーツを作業用アートボードに複製

3.必要に応じてパーツをカスタマイズ

　
注意事項

対象者

当サービスは以下に当てはまる方の使用を想定しています。

【0→1未達成の方】

✅ 案件対応できる時間が限られているから納期に間に合わなかったらどうしよう…と不安を感じている方

【0→1達成済みの方】

✅ 作業を時短して自由な時間を増やしたい / 時給単価を上げたい / より上流の仕事にコミットしたい…と思っている方

【対象ツールを扱える方】

✅ AdobeXDの基本操作ができる方

AdobeXDをお持ちでない場合でも購入いただけますが、デザインパーツテンプレートを使用するためにはAdobeXDのダウンロードが必要です。

対応ツール

■AdobeXD

以下の方法でFigmaにも一部対応可能なようです。https://note.com/penomo/n/nbfa010cc9b76

その他

デザインパーツはPC表示とスマホ表示のものをそれぞれ用意していますが、PC表示と見た目が変わらないパーツに関してはスマホ表示を用意していません。ご了承ください。

　
さいごに…

本商品は単体で活用いただいても問題ありませんが…

HPを制作する際はHPデザインパーツテンプレを、LPを制作する際はLPデザインパーツテンプレを使用し、デザインパーツテンプレを補助として使用して時短を加速させる。

という風に併用して活用していただくと、より効果を発揮します。

これらを併用するハードルを低くするために、それぞれ超低単価に抑えています。

ぜひセットでお手にとっていただけると嬉しいです。