在宅Webデザイナーとして仕事を始める前は、「どのくらいのスキルがあれば働けるのだろう」と不安に感じることも多いと思います。
私もブランクを経てWebデザイナーの仕事に復帰したため、最初は自分の知識が実際の仕事で通用するのか心配でした。
しかし、実際に在宅Webデザイナーとして働いてみると、すべての技術を完璧に覚えておく必要はありませんでした。
一方で、「これは知っていて本当によかった」と感じた知識や習慣もあります。
特に役立ったのは、次の7つです。
- リンク切れやエラーを確認する方法
- WordPressの基本操作
- HTML・CSS・JavaScriptの基礎
- ダブルチェックの習慣
- Webページを軽量化する方法
- Illustrator・Photoshopなどの基本操作
- 相手のデザイン意図を読み取り、再現する力
この記事では、私が実際に在宅Webデザイナーとして働くなかで、覚えておいてよかったと思ったことを紹介します。
これから在宅Webデザイナーを目指す人や、ブランクがあって仕事復帰に不安を感じている人の参考になればうれしいです。
1．リンク切れやエラーを確認する方法
覚えておいてよかったことの1つ目は、リンク切れやエラーを確認する方法です。
Webサイトの修正では、見た目が整っているだけでは十分ではありません。
ページ内のリンクが正しく設定されているか、画像が表示されているか、JavaScriptのエラーが発生していないかなども確認する必要があります。
たとえば、次のようなミスが起こることがあります。
- リンク先のURLが間違っている
- 削除されたページへのリンクが残っている
- 画像のパスが間違っている
- ファイルをアップロードし忘れている
- JavaScriptのエラーで一部の機能が動かない
- 別のページへ移動するとレイアウトが崩れる
リンクの数が少なければ一つずつクリックして確認できますが、ページ数やリンク数が多い場合は、それだけでは確認に時間がかかります。
そのようなときに役立ったのが、ブラウザのデベロッパーツールやリンクチェック用の拡張機能です。
ブラウザのデベロッパーツールでは、「Console」からJavaScriptなどのエラーを確認できます。また、「Network」を見ると、正しく読み込めていない画像やファイルを見つけやすくなります。
リンク切れをまとめて確認できるブラウザの拡張機能も便利でした。
最初からすべての機能を使いこなす必要はありませんが、「エラーが起きたときに、どこを確認すればよいか」を知っているだけでも、原因を探しやすくなります。
2．WordPressの基本操作
在宅Webデザイナーの仕事では、WordPressを使ってWebサイトを更新する機会が多くありました。
私が実際に担当していたのは、次のような作業です。
- お知らせ記事の追加
- 文章や見出しの変更
- 画像の差し替え
- リンクの設定
- 固定ページの修正
- カテゴリーの設定
- 公開日時の変更
- 更新後の表示確認
一からWordPressサイトを制作する仕事だけでなく、すでにあるサイトの一部を修正する仕事も多くあります。
そのため、WordPressの基本的な仕組みを知っていると、仕事を進めやすくなりました。
特に覚えておいてよかったのは、投稿と固定ページの違い、テーマファイルの構成、プラグインの役割などです。
また、WordPressでは管理画面から修正できる部分と、HTMLやCSSなどのファイルを直接修正しなければならない部分があります。
どこを変更すると、Webサイトのどの部分に影響するのかを少しずつ理解しておくと、修正にも落ち着いて対応できます。
ただし、WordPressはサイトによって使われているテーマやプラグインが異なります。
すべての操作方法を暗記するよりも、基本的な仕組みを理解し、分からないところは調べながら対応する力のほうが大切だと感じました。
3．HTML・CSS・JavaScriptの基礎
在宅Webデザイナーとして働くうえで、HTML・CSS・JavaScriptの基礎知識も役立ちました。
実際の仕事では、次のような修正を行うことがあります。
- 見出しや文章を変更する
- 画像を差し替える
- リンク先を変更する
- ボタンを追加する
- 文字の色やサイズを調整する
- 余白や横幅を変更する
- スマートフォンの表示崩れを直す
- パーツの表示・非表示を切り替える
こうした修正の多くは、HTMLとCSSの基礎が分かれば対応できます。
JavaScriptについては、複雑なプログラムを一から作る機会は多くありませんでした。
それでも、クリックしたときにメニューを開く、画像を切り替える、コンテンツを表示・非表示にするといった動きにJavaScriptが使われていることを知っていると、トラブルが起きたときに原因を考えやすくなります。
重要なのは、すべてのコードを暗記することではありません。
コードを見たときに、おおよそ何をしているのかが分かり、必要な部分を調べながら修正できる程度の基礎があれば、実務で少しずつ対応できる範囲を広げられます。
分からないコードを無理に触らず、「ここから先はエンジニアに確認したほうがよい」と判断することも大切なスキルです。
4．ダブルチェックの習慣
技術と同じくらい覚えておいてよかったのが、ダブルチェックの習慣です。
Webサイトの修正では、作業そのものよりも、修正後の確認に時間がかかることがあります。
文章を変更しただけでも、次のような確認が必要です。
- 誤字脱字がないか
- 指示どおりの文章になっているか
- 改行位置が不自然ではないか
- リンク先が正しいか
- 画像が正しく表示されているか
- パソコンとスマートフォンの両方で崩れていないか
- 関係のない部分まで変わっていないか
修正した直後は、自分では正しくできていると思い込みやすいものです。
そのため、少し時間を空けてもう一度見る、依頼内容と修正後のページを並べて確認するなど、意識的にダブルチェックを行っていました。
修正箇所が多い場合は、依頼内容を一覧にして、対応した項目にチェックを入れる方法も役立ちます。
長い文章の変更や細かなレイアウト修正では、画面だけでなく紙に印刷して確認したこともありました。画面上では気づかなかった誤字や修正漏れが、紙で見ると見つかることがあるからです。
在宅勤務では周囲の人にすぐ確認してもらえないこともあるため、自分で確認する習慣は特に大切だと感じました。
5．Webページを軽量化する方法
Webページを軽くするための基本的な方法も、覚えておいてよかったことの1つです。
デザインをきれいに仕上げても、ページの表示に時間がかかると、見ている人が離れてしまう可能性があります。
特に画像を多く使用するページでは、画像の容量が大きくなりやすいため注意が必要です。
私が意識していたのは、次のような点です。
- 画像を必要なサイズに縮小する
- 画像を圧縮して容量を減らす
- 写真とイラストで保存形式を使い分ける
- 不要な画像やファイルを読み込ませない
- CSSやJavaScriptの記述を整理する
- 必要に応じてCSSやJavaScriptファイルをまとめる
- 使用していないコードやプラグインを減らす
たとえば、Webページでは横幅800px程度で表示する画像なのに、数千pxある大きな画像をそのまま使用すると、必要以上にデータ容量が大きくなります。
見た目ではほとんど違いが分からなくても、画像を適切なサイズに変更し、圧縮することで容量を大きく減らせることがあります。
ただし、軽量化を意識しすぎて画質を落としたり、必要なファイルまで削除したりすると、かえってWebサイトの品質を下げてしまいます。
表示速度と見た目のバランスを考えながら調整することが大切です。
6．Illustrator・Photoshopなどの基本操作
IllustratorやPhotoshopなど、基本的なデザインソフトの操作も仕事で役立ちました。
在宅Webデザイナーの仕事では、毎回新しいデザインを一から作るとは限りません。
次のような細かな画像修正も多くあります。
- 写真の明るさや色味を調整する
- 画像を指定されたサイズに切り抜く
- バナー内の文章を変更する
- 既存データの色を変更する
- ロゴやアイコンの位置を調整する
- Web用の画像として書き出す
こうした作業では、高度な機能よりも、基本操作を迷わず使えることのほうが重要でした。
レイヤー、文字、図形、マスク、トリミング、画像サイズの変更、Web用の書き出しなどを覚えておくと、さまざまな修正に対応できます。
また、会社や案件によって使用するデザインソフトが異なることもあります。
すべてのソフトを完璧に使える必要はありませんが、IllustratorやPhotoshopの基本が分かっていると、ほかのデザインツールを使うときにも考え方を応用しやすくなりました。
ツールの機能をたくさん知っていることよりも、必要な作業を正確に行えることが実務では大切です。
7．相手のデザイン意図を読み取り、再現する力
最後は、相手のデザイン意図を読み取り、できるだけ正確に再現する力です。
これは、ソフトの操作方法を覚えるだけでは身につきにくい部分だと感じました。
仕事では、自分の好きなデザインを自由に作れるとは限りません。
クライアントや社内の担当者、外部デザイナーが作成したデザインをもとに、Webページを制作することもあります。
そのときに大切なのは、「自分ならこうする」ではなく、相手がどのような意図でこのデザインにしたのかを考えることです。
たとえば、次のような部分を細かく確認します。
- 文字の大きさや太さ
- 行間や文字間
- 要素同士の余白
- 色の使い方
- 写真の見せ方
- 見出しの強弱
- パソコンとスマートフォンでの見え方
- ボタンやリンクの分かりやすさ
デザインカンプに近づけるためには、全体の雰囲気だけでなく、細かな部分まで見る必要があります。
また、パソコンではきれいに見えても、スマートフォンでは文章の改行位置が変わったり、画像と文字のバランスが崩れたりすることもあります。
最初から完璧に再現するのは難しく、私も修正を受けながら少しずつ覚えていきました。
この力を身につけるためには、実際にデザインを見て、作って、修正する経験を重ねることが一番だと思います。
数をこなすうちに、余白の違いや文字サイズのバランスなど、以前は気づかなかった細かな部分にも目が向くようになりました。
すべてを完璧に覚えてから仕事を始める必要はない
在宅Webデザイナーとして働くために、Web制作に関する知識をすべて完璧に覚える必要はありません。
私自身も、仕事を始めてから初めて知ったことや、調べながら対応したことがたくさんありました。
大切なのは、基本的な知識を身につけたうえで、分からないことを調べたり、必要な人に確認したりできることです。
今回紹介した7つは、次のとおりです。
- リンク切れやエラーを確認する方法
- WordPressの基本操作
- HTML・CSS・JavaScriptの基礎
- ダブルチェックの習慣
- Webページを軽量化する方法
- Illustrator・Photoshopなどの基本操作
- 相手のデザイン意図を読み取り、再現する力
なかでも、ダブルチェックの習慣と、相手の意図を読み取る力は、ツールが変わっても役立ちます。
技術は仕事をしながら少しずつ覚えていけます。
これから在宅Webデザイナーを目指す人は、最初から何でもできるようになろうとせず、基本的なことから一つずつ身につけてみてください。
ブランクがあっても、これまでに身につけた知識を思い出しながら、実際の仕事を通してできることを増やしていけると思います。
コメント