ひとりでWeb制作をするときの、デザインと画像の道具の分け方

ひとりでWeb制作をしていると、道具は増える一方です。整理するときは、機能の多さではなく「誰が、いつ使うか」で分けると決めやすくなります。作る道具、渡す道具、確かめる道具。何に費用をかけ、何を顧客に引き継ぐかを、この3つで整理しました。

私は北海道東川町でWeb制作をしていて、IT/Webの仕事に関わって17年、これまでに50件を超える案件に携わってきました。Adobe Creative Cloudを契約しています。この記事では、特定の道具を勧めることよりも、道具を選ぶときの分け方を書きます。プランなどの仕様は公式の案内をもとに説明します。

この記事で整理すること
  1. 道具は「作る・渡す・確かめる」で分ける
  2. 作る道具は、制作者の側で持つ
  3. 渡す道具は、顧客が続けられるかで選ぶ
  4. 確かめる道具は、無料のものから揃う
  5. 道具は、見積の前に決めておく

1. 道具は「作る・渡す・確かめる」で分ける

ひとりで制作を受けると、デザインも、画像の加工も、公開前の確認も、全部ひとりの手元を通ります。そのため道具を「画像系」「確認系」のように機能で分けがちですが、それだと選び方を誤りやすくなります。同じ画像を扱う道具でも、使う人と使う時期が違うからです。

  • 作る:デザインを組む、写真を補正する、図やバナーを仕上げる。使うのは制作者で、使う期間は納品まで。
  • 渡す:公開後に、顧客が自分でお知らせの画像を差し替えたり、写真を切り抜いたりするときの道具。使うのは顧客で、使う期間は納品後ずっと。
  • 確かめる:スマートフォンでの見え方、表示の速さ、画像の重さを見る道具。使うのは両方。

3つに分けると、求める条件が逆になることが見えてきます。作る道具に求めるのは、精度と作業の速さです。渡す道具に求めるのは、制作者がいなくても続けられることです。制作者にとって便利な道具をそのまま顧客に引き継ぐと、契約も、操作を覚える手間も、費用も、顧客の側に残ります。道具を選ぶ前に、それがどの箱に入る道具なのかを先に決めます。

2. 作る道具は、制作者の側で持つ

作る道具は、制作者が自分の側で契約し、費用も自分で持つ形がいちばん分かりやすくなります。顧客の負担を混ぜないほうが、納品後の話が単純になるからです。

私が契約しているAdobe Creative Cloudは、この「作る」側の道具です。日常的に使うのは、PhotoshopとIllustratorです。公式のプランページで確認できる構成は、大きく2通りあります。Photoshop、Illustrator、Adobe Premiere、Acrobat Proなど20以上のアプリをまとめた「Creative Cloud Pro」と、アプリを1つずつ契約するプラン(法人向けの案内では「単体プラン」と表記)です。対象も、個人向け、法人向け(グループ版)、学生・教職員向け、教育機関向けに分かれています。使うアプリが1つに決まっているなら単体のプラン、複数のアプリをまたいで作業するならまとめたプラン、という順で考えると選びやすくなります。

作る道具で気をつけたいのは、納品物がその道具に依存しないようにすることです。サイトに載せる画像は、ブラウザで表示できる形式に書き出して渡します。一方、レイヤーの残った編集用の元データは、同じ種類のアプリがないと手を入れにくいことが多いものです。元データを渡すかどうか、渡すなら何の形式で渡すかは、制作を始める前に決めておきます。あとから「元データをください」と言われ、受け取った側で開けなかった、という行き違いを防げます。

3. 渡す道具は、顧客が続けられるかで選ぶ

公開後に、お知らせの写真を差し替える。季節のバナーを1枚作る。こうした作業を顧客が自分でやるなら、そのとき使う道具は、制作者の道具とは別の基準で選びます。基準は「制作者がいなくても続けられるか」です。

最初に候補にしたいのは、すでに使っている仕組みの中にある機能です。WordPressなら、メディアの編集画面で画像の切り抜き、回転、反転、縮小ができます。公式の説明では、この編集は元の画像を壊さない形で行われ、いつでもアップロードしたときの状態に戻せるとされています。写真の向きを直す、余白を切るといった作業なら、新しい道具を増やさずに済みます。

バナーのように一から画像を作る場合は、Canvaのように、ブラウザやアプリで使えてテンプレートから作り始められるサービスも候補に入ります。どれを選ぶにしても、次の点は見ておきます。

  • アカウントが誰の名義か:担当者個人のアカウントで作ると、担当が替わったときにデータを追えなくなります
  • 担当が替わっても引き継げるか:共有ができるか、作ったデザインを会社の側に残せるか
  • 費用が誰に残るか:有料の機能を使うなら、その支払いを顧客が続けるのか
  • 覚える量:月に一度しか触らない人が、手順を思い出せるか

顧客の社内でAdobeの製品を使う場合も、名義の考え方は同じです。法人向けプランには、Webで管理する「Admin Console」や、退職するメンバーからアセットを回収する機能があると公式に案内されています。ドメインの契約者を誰にするかと同じ種類の問題で、考え方は事業用ドメインの取り方と、契約者を誰にするかにまとめています。

4. 確かめる道具は、無料のものから揃う

表示を確かめる道具は、無料で使えるものから揃えられます。費用をかけるのは、手元のものを使い切ってからで遅くありません。

ひとつはブラウザの開発者ツールです。Google Chromeのデバイスモードを使うと、パソコンの画面上でスマートフォンの幅に切り替えて表示を確認できます。ただし公式の説明でも、デバイスモードはモバイル端末での見え方の「一次近似」で、モバイル端末で実際にコードを動かしているわけではないとされています。判断に迷うときは実機で開くのが最善、というのが公式の案内です。最後の確認は実機で、と決めておくと迷いません。

もうひとつは、表示の速さを見るPageSpeed Insightsです。モバイルとパソコンそれぞれについてページの体験をレポートし、改善の方法を提案するツールだと公式に説明されています。画像を差し替えたあとに一度測り、改善案に画像の項目が出ていないかを見るだけでも、重すぎる画像に気づけます。

確かめる道具は、制作者だけでなく顧客も使える状態にしておきます。顧客が自分で画像を差し替えたあと、スマートフォンで開いて見る。この一手間を手順書に入れておくだけで、崩れたまま気づかない期間を短くできます。

5. 道具は、見積の前に決めておく

道具の分け方は、見積の話とつながっています。原稿と写真を誰が用意するか、画像を誰が作るか、公開後に誰が差し替えるか。この3つで、作る道具と渡す道具の量が変わり、制作側の作業量も変わるからです。制作費が何で決まるかはホームページの制作費は、何で決まるのかで整理しました。

AIで画像や文章のたたき台を作る場合も、分け方は同じです。たたき台を出すのは「作る」、内容が正しいかを見るのは「確かめる」に入ります。AIで短くなる工程と短くならない工程は、AIでホームページはどこまで作れるか(作れない部分の話)に書きました。

公開後の更新を社内で持つか外に出すかは、WordPressサイトの保守を自分たちでやるか、外に出すかが判断の材料になります。渡す道具を決めることは、保守の範囲を決めることでもあります。

写真の用途も、道具を選ぶ前に分けておく

記事の説明用イメージと、実際の店内・商品・制作実績の写真は分けて扱います。生成した画像で商品の実物や納品実績を示したように見せないためです。顧客に渡すときは、どの画像を差し替えてよいか、元の素材がどこにあるかも一緒に伝えます。

公開後に誰が何を更新するのかを、道具の面から整理したい方は、いまの更新担当と使っている道具を教えてください。引き継ぎやすい形を一緒に考えます。ホームページ制作のお問い合わせ

確認日:2026年10月2日。仕様は変更される場合があります。契約や作業の前に公式サイトの最新情報をご確認ください。