レスポンシブWebデザイン転職｜狭い画面で何を残すか

レスポンシブWebデザインを担当してきたエンジニアが転職で聞かれるのは、CSSの書き方ではなく、画面が狭くなったときに何を残し何を後ろに回したかという判断の中身です。全部を載せたい依頼元と、限られた画面幅との間で、その線引きを誰とどう決めてきたかが、職務経歴書や面接で語れる具体的な経験になります。

厚生労働省の雇用動向調査では、転職入職率は9.7%でした＊1。レスポンシブWebデザインの経験を持つ人が転職市場で埋もれないためには、担当した仕事の中身を、判断の経緯として具体的に伝える必要があります。

Relasic（株式会社LASSIC運営）｜リモートワーク対応の転職支援

監修・編集責任者：牛尾 昭昌（株式会社LASSIC 執行役員）

1. レスポンシブWebデザインの転職は判断の経緯で伝わります

レスポンシブWebデザインを担当してきた経験は、画面が狭くなるときに何を残し、何を後ろに回すかを、依頼元とどう決めてきたかを語ることで転職に伝わります。厚生労働省の雇用動向調査では、転職入職率は9.7%でした＊1。同じ技術を経験した人のなかで差がつくのは、コーディングの速さではなく、情報を絞り込む場面でどんな判断をしてきたかです。

この実務では、パソコンの画面で組んだ内容を、そのままスマートフォンの画面に収めることはできません。文章、画像、ボタン、注釈など、依頼元が並べたい情報の量と、画面の狭さとの間には必ず差が生まれます。そこで働くのが、何を残し何を後ろに回すかという判断です。

転職で採用担当者が知りたいのは、その判断を誰の意見を聞きながら、どんな順番で決めてきたかです。デザイナーがひとりで決めた案をそのまま実装した経験と、依頼元と何度もやり取りをして優先順位を固めた経験とでは、語れる中身の厚みが変わります。

ここから、レスポンシブWebデザインの経験を転職で語るときに中心となる、情報を絞り込む判断の進め方を具体的に見ていきます。焦点は依頼元との調整と、削った情報の置き場所です。

実際の判断の例を挙げると、パソコンの画面では横に並んでいた会社概要と実績紹介を、スマートフォンでは縦に積み替え、実績紹介をタップして開く形に変えるといった対応があります。何を先に見せ、何を後で見せるかという判断が、レスポンシブWebデザインの実務そのものです。

あわせて読みたい ｜ Webディレクターへの転職｜決めることを決める役割

2. 情報を絞り込む手順は依頼主との対話から始まります

依頼元は画面の広さを問わず情報を並べたいと考えているため、そのままでは狭い画面に収まりません。制作は、この前提を共有するところから始まります。

そこで、5段階の手順で情報を絞り込みます。要望を洗い出し、優先順位を付け、残す情報と後ろに回す情報を分けたうえで、後ろに回した情報の置き場所を用意します。最後に決めた内容を記録に残すところまでが、レスポンシブWebデザインの担当者が実際に行う仕事です。

この手順を転職で語るときは、どの段階を自分が担当したかを具体的に示すことがポイントになります。要望を聞く場に同席したのか、優先順位を決める会議で意見を出したのか、決定事項を記録する役目を担ったのかによって、語れる経験の厚みが変わります。

面接で判断の経緯を聞かれたときは、当時のやり取りを思い出しながら、なぜその順番で情報を並べたのかを説明できるようにしておくと、実務の理解度が伝わりやすくなります。

3. 全部を載せたい要望とはこう折り合いをつけます

依頼元は、パソコンの画面で確認した内容をそのままスマートフォンでも見せたいと考えていることがあります。画面が狭くなれば、すべてを一度に表示できないという制約を、最初に共有しておく必要があります。

そのうえで、依頼元が本当に伝えたい情報は何かを聞き取ります。並べたい項目をすべて同列に扱うのではなく、利用者が最初に目にする場所に置く情報と、選んだ人だけが後で確認する情報とに分けます。この聞き取りの精度が、仕上がりを左右します。

厚生労働省の賃金構造基本統計調査では、40〜44歳の一般労働者の賃金は月364.3千円でした＊2。実務を重ねた年代の賃金として、この水準に届く経験を示せるかどうかは、担当した仕事の説明の具体性にかかっています。依頼元との折り合いをどう付けたかを言葉にできれば、レスポンシブWebデザインの経験を年数だけで語らずに済みます。

折り合いをつけるとは、依頼元の要望を断ることではありません。残したい理由を聞いたうえで、狭い画面でも同じ理由が伝わる別の見せ方を提案することです。この提案ができるかどうかが、実装だけを担当してきた経験と、判断にも関わってきた経験との違いになります。

依頼元によっては、画面が狭くなるという説明だけでは納得しないこともあります。そうした場合は、実際にスマートフォンの画面で表示を確認してもらいながら、残す情報の理由を一緒に見ていくと、話が進みやすくなります。

4. 残すか後ろに回すかは情報の種類で整理します

レスポンシブWebデザインで扱う情報を種類ごとに分け、画面が狭くなったときの残し方を確認します。

【表1】情報の種類と、画面が狭いときの扱い方

情報の種類	優先度の目安	後ろに回すときの置き場所
ナビゲーション	高い	開閉式のメニューにまとめる
注釈・補足説明	中程度	本文の末尾やタップで開く欄に移す
画像・図表	内容による	文章で伝えられる部分は文章に置き換える
入力フォームの項目	高い	任意項目を後段に回し、必須項目だけを先に見せる
長い一覧表	低い〜中程度	別ページに分けるか、件数を絞って表示する

表のとおり、情報の種類によって優先度の目安と置き場所の考え方が変わります。ナビゲーションは利用者がどこにいても使うため優先度が高く、開閉式のメニューにまとめても役割を保てます。

注釈や補足説明は、本文の理解を助ける役割を持ちながらも、常に表示しておく必要はありません。タップして開く欄に移すことで、画面を狭くしても主な情報を先に届けられます。

この整理を依頼元と共有しておくと、後から追加の情報が発生したときにも、どこに置くべきかを毎回話し合わずに判断できます。この仕事を続けて担当してきた経験は、こうした整理の型を積み重ねてきたことでもあります。

5. 合意までの流れはプロジェクトの進み方で決まります

合意までの流れは、プロジェクトの規模によって長さが変わりますが、聞き取りから最終確認までの順番は大きく変わりません。途中の段階を飛ばすと、後の段階で意見が食い違い、やり直しが増えます。

この仕事は、画面を作る時間よりも、この合意を取り付ける時間のほうが長くなることも珍しくありません。転職で語るときは、どの段階でどんな意見の食い違いが起き、どう収めたかを具体的に伝えると、判断の経緯が伝わります。

総務省の通信利用動向調査では、テレワークを導入している企業の割合は47.3%でした＊3。リモートワークで仕事を進める場合、ラフの共有や修正のやり取りも画面越しに行うことになります。対面より意図が伝わりにくい分、決めた理由を言葉にして残す習慣が、レスポンシブWebデザインの担当者にはいっそう求められます。

6. 職務経歴書に書く項目をまとめます

この経験を職務経歴書に書くときに、押さえておきたい項目を整理します。

職務経歴書は、担当した画面の枚数や使った技術名を並べるだけでは、判断の経緯まで伝わりません。依頼元とのやり取りから合意の記録まで、4つの項目に沿って書くと、レスポンシブWebデザインの実務でどこまで関わったかが具体的に伝わります。

面接では、書いた項目のうち1つを選んで、当時のやり取りを詳しく話せるように準備しておくと、その場での質問にも答えやすくなります。

あわせて読みたい ｜ Reactエンジニアの職務経歴書｜転職で落ちる書き方と対策

7. よくある質問（Q&A）

Q1. レスポンシブWebデザインの経験は実装だけを担当していても転職で評価されるか

A. 実装だけの経験でも評価の対象にはなります。ただし、情報を絞り込む判断にどこまで関わったかを合わせて伝えると、担当した仕事の中身がより具体的に伝わります。

Q2. 依頼元との調整が苦手な場合この分野の求人で不利になるか

A. 調整の経験が少ない場合は、実装で工夫した点や、後ろに回した情報の置き場所を決めた理由など、自分がどこまで関わったかを具体的に話すことで補えます。

Q3. レスポンシブWebデザインの経験はリモートワークの求人でどう評価されるか

A. 対面で説明しなくても意図が伝わるように、決めた理由を言葉や資料に残す習慣は、リモートワークで仕事を進めるうえでも評価されやすい経験です。

Q4. 経験年数が浅い場合判断の経緯を語れる材料が少ないと感じるがどうすればよいか

A. 経験年数の長さよりも、担当した仕事のなかで実際に決めた場面を思い出すことが先です。小さな判断であっても、理由まで話せれば、担当した仕事の中身として十分に伝わります。

Q5. この経験はどの職種の求人で評価されるか

A. フロントエンドエンジニアだけでなく、Webディレクターやコーダーの求人でも、情報を絞り込んだ判断の経験は評価の対象になります。

8. まとめ：レスポンシブWebデザインの経験は判断の経緯で示せます

あわせて読みたい ｜ オファー面談で年収交渉はできる？確認すべき条件と進め方

職務経歴書や面接では、担当した画面の枚数ではなく、情報を絞り込んだときの判断の経緯を具体的に話しましょう。次の一歩は、その経験がリモートワーク対応の求人でどう評価されるかを確かめることです。

※公開中の求人数は時期によって変わります。記事中の求人の傾向は執筆時点のものです。

出典・参考情報

＊1 厚生労働省「令和6年雇用動向調査結果の概況」（2025年公表）
＊2 厚生労働省「令和7（2025）年賃金構造基本統計調査の概況」（2026年3月公表）
＊3 総務省「令和6年通信利用動向調査」（2025年公表）