※このページでは広告のリンクを含みます
Webデザイナーでもエクセルは使用します。この記事ではWebデザイナーが業務で使う機能を実例を用いて解説しています。
実務で使えるエクセルを覚えてWeb制作の現場として即戦力として使ってください。
WebデザイナーでもExcelを使う理由
「Webデザイナーもエクセルを使いますか?」という質問を受けたり、ネット上で見たりします。
結論から言うと「Webデザイナーはエクセル使用は必須」です。
なぜならば、ビジネス全般のデータ管理や情報管理はエクセルでおこなうことが多いためです。Webデザイナーとして社会生活しているのであれば、エクセルの使用は必須です。
同じOffice系(マイクロソフト社製品)でパワーポイントがあると思いますが、パワーポイントより使用頻度が高いです。(実際、著者の勤務している会社でもエクセルの方が使用頻度高いです)
本記事では、実務でエクセルを使う下記のケースごとに解説します。
- ワイヤーフレームに使う事例
- ファイルを比較する事例
- 制作管理表として使う事例
1か月間無料
ワイヤーフレームに使う事例
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-01.png)
エクセルでワイヤーフレームを作成するケースがあります。
ワイヤーフレームの基本的な作成は、「図形」機能を組み合わせてレイアウトを組んでいきます。
使い方としては、メインメニュー[挿入]→[図形](下図1)アイコンをクリックすると色々な形の図形一覧が表示されるのでレイアウトに合う図形を選択して配置します。(下図2)
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-02.png)
ファイルを比較する事例
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-03.png)
実務で(新規リニューアルの際など)大量のページコーディングする場合が多々あります。
依頼書などに書かれた作業すべきページと作業したページの比較にエクセルを使います。
使い方は、依頼書などに書かれた実装すべきページのURLを左の列に記載します。(下図1)そして、右の列に作業したページのURLを記載します。(下図2)
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-04.png)
URLを記載した項目を選択(下図1)して、メインメニュー[ホーム]→[条件付き書式]→[新しいルール](下図2)をクリックします。
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-05.png)
「新しい書式ルール」のダイアログ(ボックス)が表示されますのでダイアログ内の[一意の値または重複する値だけを書式設定]を選択(下図1)し「ルールの内容を編集してください」の欄にある[書式]をクリックします。(下図2)
「セルの書式設定」ダイアログが出てきますので、ここで比較された時の表示方法を選択(下図3)していきます。シンプルに背景を黄色にしていけば良いでしょう。
設定後[OK]をクリックします。(下図4)
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-06.png)
ファイルの比較の結果が出てきます。
黄色背景部分は、左右に同じURLが存在しており、白背景部分は左右どちらか片方にしかURLが存在しないという結果になります。
ここで、作業すべきページのURLと作業したページのURLを比較することで作業漏れがなくなります。
大量のURLを確認する時に使うと作業効率化になります。
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-07.png)
制作管理表として使う事例
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-08.png)
実務では、大量の図版やバナーを制作する事があります。大量の図版やバナーをしたい時、エクセルで制作管理表として使うと業務が効率化されます。
使い方は、制作する図版(または、バナー)の項目を洗い出して下記のような管理表をつくります。(下図1)
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-09.png)
この管理表から「対応」と「担当者」、「担当者コメント」、「確認済」の列を選択してフィルタ機能を加えます。フィルタの設定には、メインメニュー[ホーム]→[並べ替えとフィルタ]→[フィルタ](下図1)をクリックするとフィルタアイコン(下図2)が付与されます。
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-10.png)
フィルタアイコン(下図1)をクリックした中にフィルタ選択するテキストが表示されます。
フィルタで「○」のチェック(下図2)を外して[OK]ボタン(下図3)をクリックすると「○」が入っていない行が表示されます。(下図4)ここでは「対応」していない項目のみの表示になっています。
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-11.png)
複数の人と作業する場合は、エクセルを共有作業する「ブックの共有」機能を使います。
「ブックの共有」機能を使わないと1人が作業していると他の人がエクセルをひらくと「編集のためにロックされています」とうメッセージが出てきてエクセルへの編集ができません。読み取り専用として閲覧ができる状態です。
「ブックの共有」機能の使い方は、メインメニュー[ファイル](下図1)→[オプション](下図2)をクリックすると「Excelのオプション」ダイアログが開きます。
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-12.png)
[クイックアクセスツールバー](下図1)→[すべてのコマンド](下図2)から「ブックの共有(レガシ)」(下図3)を選択して[追加](下図4)します。
右側に「ブックの共有(レガシ)」が入ったら[OK]ボタンをクリックします。(下図5)
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-13.png)
[OK]をクリックすると最上部のバーエリアにブックの共有(レガシ)アイコンが表示されますのでクリック(下図1)して「ブックの共有」ダイアログを表示させます。
「新しい共同編集機能ではなく、以前の共有ブック機能を使用します」(下図2)を選択して[OK](下図3)をクリックすると共有完了になります。
複数の人が同時に作業・編集が可能になります。
![](https://webdesignerstart.com/wp-content/uploads/2022/07/webdesigner-excel-14.png)
「ブックの共有(レガシ)」機能による下記の注意点がありますので、理解しておくとよいでしょう。
- セルの結合や解除ができない
- シートの追加や削除ができない
- 条件付き書式の追加や変更ができない
- ハイパーリンクの挿入や変更ができない
上記のように制限されてしまいますので、セルはシート追加や削除がしたい場合などは、一旦作業共有している人に対してエクセルを閉じてもらうように連絡していくとよいでしょう。
1か月間無料
この記事のまとめ
Webデザイナーが実務で使うExcel(エクセル)の使い方を解説しますのおさらい
- WebデザイナーでもExcelを使う理由
- ビジネス全般のデータ管理や情報管理はエクセルでおこなうことが多いためです。Webデザイナーとして社会生活しているのであれば、エクセルの使用は必須です。
- ワイヤーフレームに使う事例
- エクセルでワイヤーフレームを作成するケースがあります。
ワイヤーフレームの基本的な作成は、「図形」機能を組み合わせてレイアウトを組んでいきます。 - ファイルを比較する事例
- 依頼書などに書かれた実装すべきページと作業したページの比較にエクセルを使います。
- 制作管理表として使う事例
- 大量の図版やバナーをしたい時、エクセルで制作管理表として使うと業務が効率化されます。
ユウジの体感コラム
Webデザイナーになった当初はエクセルを全く使えていませんでしたね。
ただ、Web制作で使うエクセルは操作が簡単なものですのですぐ習得できると思います。しかし、エクセルを使って業務が効率的になるので、早く覚えておいた方が良かったなと公開しています。
今後もビジネスでWebデザイナーをやっていくには必須ソフトなので、早いうちに覚えてしまうと良いです。
即現場で使えるようにわかりやすく書いたつもりなので、ブックマークしてくれたら嬉しいです。
小コラム:Webデザイナーになるために、もし今から自分が選ぶとしたら?
もし自分が今からWebデザイナーを目指すとしたら、どのスクールを選ぶかの問いに、いろいろ調べた結果、自分が選ぶのは「デジタルハリウッド STUDIO by LIG」かなと思います。
まず、「LIG」っていうWeb業界の最前線に居るWeb制作会社が運営してるから、現場のリアルが学べるっていうのが大きいポイント。LIGの教室も自由に使えるから、自分のペースで学習が進められるのも魅力です。
あと、現役のプロ講師から直接指導を受けられるっていうのも、モチベーションが上がりそう。業界の裏話とかも聞けそうで、楽しそう。それに、教室で一緒に学んでる人たちと交流することで、自然と競争心が芽生えて「よし、負けてられないぞ!」ってなる気がします。
ただ、ぶっちゃけ費用は高い。でも、リスキリング支援で最大70%キャッシュバックされるんだったら、かなり助かると考えています。これを使って、コストの心配も少し軽減できるんじゃないかなって思います。
受講費最大70%キャッシュバック中