Webデザインの添削では何を見てもらう？未経験者向けの質問例と修正の進め方

10/06/202610/07/2026

Webデザインの練習作品を作ったものの、「これでよいのか判断できない」「添削をお願いしたいけれど、何を聞けばよいか分からない」と迷うことはありませんか。

作品だけを見せて「どうですか？」と聞くと、感想はもらえても、どこから直すか決められない場合があります。

添削を学習に役立てるには、制作の目的や条件を伝え、確認してほしいことを具体的にすることが大切です。指摘を受けたあとは、理由を整理して修正し、もう一度見直すところまで取り組みましょう。

この記事では、副業を目指す未経験者に向けて、添削前に準備する情報、制作物別の質問例、修正の進め方、働きながら利用しやすい添削支援の確認項目を解説します。

まだ練習作品がない方は、「Webデザインの練習は何を作る？副業向けの制作課題3つ」で、告知バナー・LPの最初の画面・店舗サイトの制作条件を確認してください。

Webデザインの添削は「何を直すか」と「理由」を確認する機会

添削では、作品のよい点と改善できる点を確認し、次の制作や修正に生かします。

副業に向けた練習なら、見た目の印象に加えて、想定する依頼の目的や制作条件に合っているかも見てもらいましょう。

Adobeのデザイン批評に関する記事でも、フィードバックを制作の目的や利用者のニーズに結び付けることが紹介されています。

参考：Adobe「デザインチームを成長させる、効果的なデザイン批評の行い方」

1．「よい・悪い」の評価から、改善する行動へつなげる

「文字が読みにくい」という指摘だけでは、文字を大きくすればよいのか、背景色を変えればよいのか判断しにくいことがあります。

その場合は、場所と理由を具体的に確認します。

例えば、次のように聞いてみましょう。

どの文字が読みにくいですか？
大きさ、色、行間のうち、特に気になるのはどこですか？
小さな画面で見るときに問題がありますか？
最初に直すなら、どの部分を優先するとよいですか？

よいと言われた部分も、理由を聞くと次の制作で生かせます。

「タイトルが目に入りやすい」「関連する情報がまとまっている」など、残したい工夫も記録しておきましょう。

2．制作途中に見てもらう場合は、確認する範囲を決める

添削は、完成作品だけでなく、制作途中の方向性を確認するためにも利用できます。ただし、途中の作品を提出できるかは、利用する支援の条件を確認してください。

情報の配置を考えている段階なら、「必要な情報がそろっているか」「読む順番に無理がないか」を中心に聞きます。

色や写真まで入れた段階なら、「文字の読みやすさ」「写真と文章の関係」など、確認する内容を広げられます。

まだ手を付けていない部分は、先に伝えておきましょう。

例えば、「今回は配置の確認をお願いしたいです。写真は仮のものを使っています」と説明すると、相手も確認する範囲を把握しやすくなります。

添削前に整理したい制作の目的・条件・質問

作品の画像と一緒に、制作の前提を短くまとめます。

最初から長い説明文を作る必要はありません。相手が作品を判断するために必要な情報をそろえましょう。

Figmaの公式記事では、デザインレビューの際に、制作の背景や目標を共有することの重要性が説明されています。

参考：Figma「From Figma’s design team: How to run a design critique」（英語）

1．目的・対象者・必須情報を伝える

自主制作でも、次の情報を決めてから添削を依頼します。

制作物：告知バナー、LPの最初の画面、店舗サイトなど
目的：詳細ページを見てもらう、開催日程を確認してもらうなど
対象者：どのような人に見てもらう想定か
必須情報：タイトル、日時、料金、店名など
掲載条件：画像サイズ、想定する画面、指定された内容など

例えば、架空のコーヒー講座のバナーなら、「自宅でコーヒーを楽しむ初心者に、講座の詳細ページを見てもらうことが目的」と伝えられます。

「おしゃれなバナーを作りました」だけよりも、何を基準に確認すればよいかが明確になります。

自分で決めた練習条件と、実際の依頼で指定された条件は、分けて説明してください。

2．制作した範囲と、迷っている点を添える

完成画像に加えて、自分がどこまで制作したかを伝えます。

例えば、LPの最初の画面だけを作った場合は、「ページ全体は制作していません」と説明します。デザインのみであれば、コーディングやフォームの動作確認は含んでいないことも伝えましょう。

確認してほしい質問は、最初は二つから三つ程度に絞る方法があります。これは依頼文を整理するための目安であり、質問数の決まりではありません。

次のような依頼文を、自分の作品に合わせて調整できます。

添削依頼の例：

「架空のカフェで開催する初心者向けコーヒー講座の告知バナーを制作しました。目的は、講座の詳細ページへ進んでもらうことです。画像サイズは1200×628pxで、講座名・開催日時・参加費・店名を必須情報にしています。

特に、①講座名と日時の読む順番が分かりやすいか、②小さく表示しても参加費が読めるか、の2点を見ていただきたいです。改善する場合に、先に直す部分も教えていただけると助かります。」

相手に指定された提出方法や質問書式がある場合は、そちらに合わせてください。

共有する前に、画像やファイルが開くか、閲覧権限が適切かも確認します。仕事で作った作品やスクール課題を提出する場合は、共有してよい範囲を確かめておきましょう。

Webデザインの添削で見てもらいたいポイントと質問例

添削で確認する項目は、制作物や目的によって変わります。

ここでは、未経験者の練習作品で使える質問例を整理します。すべてを一度に聞く必要はありません。自分が迷っている項目から選んでください。

確認する項目	質問例
目的が伝わるか	何の案内・サービスなのか、最初の画面で分かりますか？
情報の優先順位	最初に目に入る情報は何ですか？目的に合う順番になっていますか？
文字の読みやすさ	読みにくい文字はありますか？どの表示サイズで気になりますか？
情報のまとまり	関連する情報がまとまっていますか？別の内容が混ざって見える場所はありますか？
写真・色の役割	写真や色が内容を伝える助けになっていますか？文字を読みにくくしていませんか？
次の行動	詳細の確認や予約へ進む場所が分かりますか？ボタンの文言から行き先を想像できますか？

Webページの読みやすさや操作の分かりやすさを考える際は、アクセシビリティの視点も役立ちます。

W3Cの資料では、文字と背景のコントラスト、色だけに頼らない情報伝達、リンクやボタンの識別しやすさなどが紹介されています。

参考：W3C WAI「ウェブ・アクセシビリティのためのデザイン」

なお、見た目の添削だけで、Webサイト全体のアクセシビリティや操作上の問題をすべて確認できるわけではありません。実装したページでは、別途、実際の操作や表示も確認する必要があります。

1．バナーは、必要な情報が小さな表示でも伝わるかを見る

バナーの練習では、タイトルだけを大きくして、日時や料金が読みにくくなっていないか確認します。

制作画面で拡大して見るだけでなく、想定する掲載サイズでも見てもらいましょう。

例えば、架空の講座の告知バナーなら、次のように質問できます。

何の講座か、画像から分かりますか？
講座名、日時、料金のうち、どの情報が見つけにくいですか？
写真に文字が重なって読みにくい場所はありますか？
詳細ページへ進む案内は分かりますか？

バナー画像の中に描いたボタンは、画像内のデザイン要素です。それ自体が別のリンクとして動くとは限らないため、想定する掲載方法も伝えてください。

バナー制作の仕事内容や応募前の準備は、「バナー制作の副業は未経験でもできる？仕事内容と応募前の準備」で整理しています。

2．LPの最初の画面は、サービスの内容と次の行動が分かるかを見る

LPの最初の画面では、サービス名が大きく表示されていても、「誰に向けた、何をするサービスなのか」が伝わらないことがあります。

架空のスマートフォン写真講座なら、次のように質問できます。

初心者向けの写真講座だと分かりますか？
講座で学べる内容を、文章と画像から想像できますか？
「開催日程を確認する」ボタンの行き先は分かりますか？
スマートフォン向けの案で、タイトルやボタンが窮屈に見える場所はありますか？

「申込みが増えそうですか？」という質問だけでは、デザインを見た印象の話になりやすくなります。

練習段階では、内容が伝わるか、必要な情報を見つけられるかなど、作品から確認できることを聞きましょう。実際の申込み数や広告の成果は、添削の感想だけでは判断できません。

LP制作で担当する範囲の違いは、「LP制作の副業は未経験でもできる？デザインだけの案件とコーディング込みの案件の違い」で解説しています。

3．店舗サイトは、来店前に知りたい情報を探せるかを見る

架空のカフェのトップページなら、店舗の雰囲気に加えて、メニュー、営業時間、アクセスなどを確認してもらいます。

見る人に、具体的な場面を想定してもらうと質問しやすくなります。

初めて来店するつもりで、営業時間と場所を探してもらえますか？
メニューや料金を確認する場所は分かりますか？
予約が必要かどうか、どこで確認できると思いますか？
店舗紹介と営業情報の区切りは分かりやすいですか？

説明する前に作品を見てもらい、どこを探したか聞く方法もあります。ただし、少人数の感想がすべての利用者の行動を表すわけではありません。改善点を考える材料として扱いましょう。

トップページのデザインだけを制作している場合は、リンク先のページや予約機能が未制作であることも伝えます。

添削後は、理由の整理・修正・再確認・記録の順で進める

フィードバックを受け取ったら、すぐにすべてを変更する前に、指摘内容を整理します。

「何が問題か」「なぜ直すか」「どう直すか」を分けると、修正の目的を見失いにくくなります。

1．指摘の理由を確認し、直す順番を決める

例えば「日時をもっと目立たせる」という指摘なら、理由を確認します。

日時が小さくて読めないのか、ほかの情報と離れていて見つけにくいのかで、修正方法は変わります。

分からないときは、次のように聞き返せます。

「日時が目立たないのは、文字サイズと配置のどちらが主な理由でしょうか。まず配置を変えて確認したいのですが、方向性は合っていますか？」

練習作品では、次の順で見直す方法があります。

必須情報の不足や誤り
内容が伝わらない、文字が読めないなどの問題
情報の配置や次の行動の分かりにくさ
装飾や細部の調整

これは修正を整理する一例です。実案件では、依頼者の条件や確認結果に合わせて優先順位を決めてください。

複数の人から異なる意見をもらった場合は、制作の目的と条件に戻って考えます。判断が難しい部分は、案を分けて比較する方法もあります。

2．変更前後を比較し、改善した理由を記録する

修正前の画像と編集データを残してから作業します。

比較したい変更に絞って修正すると、何が変わったかを確認しやすくなります。練習では、配置を直したあとに文字サイズを確認するなど、作業を分けてみましょう。

次の表は、架空の告知バナーを修正する場合の記録例です。実際に受けた指摘や成果を示すものではありません。

確認した問題	修正例	修正後に確認すること
開催日時が講座名から離れている	講座名の下に日時をまとめる	講座名と日時を続けて見つけられるか
写真の上の料金が読みにくい	料金を単色の背景部分へ移す	小さく表示しても料金を読めるか
案内文の意味が曖昧	「詳しくはこちら」を「講座の詳細を見る」に変える	移動先で何を確認できるか伝わるか

修正後は、指摘された箇所に加えて、その周囲も見直します。

文字を大きくした結果、別の情報が押し出されたり、スマートフォン向けの配置が崩れたりしていないか確認してください。

再添削をお願いできる場合は、「どの指摘を受けて、何を変更したか」を短く添えます。

ポートフォリオに載せる際は、制作の目的や担当範囲と一緒に、工夫した点や修正理由を説明できます。ただし、架空作品で実際の売上や申込み数が改善したようには書かないでください。

掲載する内容の整理は、「Webデザイン副業のポートフォリオは何を載せる？未経験者向けの作り方と注意点」を参考にしてください。