SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

MarkeZine Day(マーケジンデイ)は、マーケティング専門メディア「MarkeZine」が主催するイベントです。 「マーケティングの今を網羅する」をコンセプトに、拡張・複雑化している広告・マーケティング領域の最新情報を効率的にキャッチできる場所として企画・運営しています。

直近開催のイベントはこちら!

MarkeZine Day 2025 Retail

Webデザイン技術キホンのキ

仕事の流れがスムースに! ノンデザイナーがおさえておきたいWeb制作の流れ

サイト設計時には、ワイヤーフレームを作ってもらおう

 ミーティングでの結果をもとに、サイト設計に入ります。その際、ワイヤーフレームを作成してもらい、ページのどこにどういう情報を載せるのか、見える形で共有できるようにしましょう。

ホテルサイトのワイヤーフレーム例

 ここで大切なのは、ワイヤーフレームの目的はデザインすることではなく、あくまでも各情報がどの程度の大きさで示されるのかをイメージするためのものだということです。ワイヤーフレームをチェックする際には、見た目のデザインについては考えないで下さい。

 ワイヤーフレームでOKが出たら、デザイナーはPhotoshopやFireworksなどの画像作成ソフトを用いて完成イメージを作っていきます。ロゴや各種画像など、掲載すべき画像があればこのタイミングで支給してください。テキストコンテンツについては、このタイミングではダミーでもいいでしょう。

デキるデザイナーは管理上手

 直接デザインとは関係ない部分ですが、デキるデザイナー(制作会社)はファイル管理、レイヤー管理が上手い人が多いです。逆に言うと、非常にタイトなスケジュールで進んだりすると、この管理が疎かになり、トラブルに発展しがちです。

 『Photoshop』や『Illustrator』といった画像作成ソフトには、透明な紙をいくつも重ねることで効率よく作業を進めることができる機能があり、この透明な紙のことをレイヤーといいます。たとえば小さなボタン1つ修正する場合でも、ボタンのベースとなるレイヤー、立体感を表すためのレイヤー、ボタン内に配置する文字のレイヤーなど、複数のレイヤーに分かれています。ページ全体のデザインとなると、そのレイヤー数は膨大になります。

Photoshopのレイヤー管理の例 左:未整理 右:整理済み

 ファイル名も同様に、デザインの変更や修正が重なるたび、「名称未設定」「◯◯のコピー~2」「◯◯のコピーのコピー」といった状態になると、どれが最新なのかがわからなくなってきます。

 細かいところですが、デキるデザイナーはネーミングルールをきちんと定め、複数人で作業する場合は共有し、効率的に仕事が進むようにしています。

次のページ
コーディングに入ってからデザインを修正するのは大変です

この記事は参考になりましたか?

  • Facebook
  • X
  • Pocket
  • note
Webデザイン技術キホンのキ連載記事一覧

もっと読む

この記事の著者

山本 浩司(ヤマモト コウジ)

未来画素代表。

関西を中心に、Web制作、Webディレクション、コンサルティング、執筆活動まで、幅広く活動中。専門学校や大学での講師経験も多数あり。趣味は写真撮影と親バカブログと子どもの幼稚園の父の会活動。

著書に『これからはじめるGIMPの本』(技術評論社)、『趣味や仕事で使える! かんたんホーム...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2013/01/15 08:00 https://markezine.jp/article/detail/16973

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング