スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2017年6月5日

Webデザイナー必見!制作を効率よくするためにできること

how-web-designers-can-work-efficientlyWebデザイナーとしてWebサイトを制作するお仕事をする中で、「もっと効率よく制作したい!」と思う方は多いかと思います。デザイン、コーディング、またはシステム開発などにおいても地道な作業であり効率をあげていかないと、限りなく時間がかかっていくものではあるので、工夫して時間を短縮できるものならしたいと思いますよね?今回はそんなWebデザイナーのために、Webデザイナーができる効率をあげる方法を紹介したいと思います。

なんのために効率をあげるのか?

どのように、の前にまずはなぜ、という部分について触れたいと思います。Webデザイナーという仕事は技術職であり、一見どちらかというと芸術家のようなイメージを持たれる方も多いのではないでしょうか?実際に制作会社によってはそのような傾向のところもあるのかもしれませんが、おそらく「制作会社」というものは同時に生産性も求められるものです。

満足いくまでとことん時間を使う、ということが許されることはなかなか少ないのではないでしょうか?限りある時間の中で、自分でもしっかり満足のいくものを作り上げるのはなかなか難しいことです。時間をかければかけるほど良いものができるのは当然ですが、そのかけていい時間に限りがあるのがお仕事というものですよね?

そこで、ではその限りある時間の中でどうやって満足のいくものを仕上げていくかということを考えると、まずは無駄な時間を省く、これに尽きるのです。デザインをしていても、Photoshop、Illustrator、満足に使いこなせていますか?この部分のこの時間すごくもったいない・・・と感じることないですか?コードを書いているときも、繰り返し繰り返し同じ記述をしたりしていませんか?もっと効率良くできないのかな・・・と思うことないですか?

できるだけ「制作」というところに時間を使えるよう、生産性を高めていくことはWebデザイナーとしても大事なことだと思います。効率よくお仕事をしていけば間違いなくその分クオリティが上がるので、どうすればいいのか、このあと紹介していきたいと思います。

新しい技術を習得しましょう!

日々進化していくWeb業界なので、ついていくのも大変・・・新しいものが出てもなかなか手が出せない・・・という方も多いと思います。新しい技術を習得するには、習得するまでに時間も要します。ただ、一度身につけてしまえば、そのあとの作業がぐんと効率よくなることも期待できます。

例えば弊社ですと、コーディングの際、Sassを使っています。入社時にはcssの知識しかなかった人でも、実務をこなしながらSassとCompassを覚えていってもらっています。使いこなせるようになるまでには少し時間がかかりますが、やはりSassにしたことによって効率はとてもよくなったと実感しています。

特に、複数人でコーディング作業をする際、同じスタイルを使うときに人によって書き方が違いますよね?それがSassを使うことによって、extendやmixinを使って一行で済むということに最初はみんなが驚きます。Sassを使い始めてからコードの書き方も随分変わってきて、案件をこなすごとに生産性があがっていることが実感できます。

環境を整えよう

これはWebデザイナーに限ったことではありませんが、お仕事をする環境って大事だと思いませんか?デスクが散らかっていたり、書類がまとめられていなかったりすると、それだけで効率が下がってしまいます。また、PCの設定も大事ですよね?細かいことではありますが、仕事上いろいろなことを検索することも多いかと思います。その検索したもの、また1ヵ月後同じことを検索することってないですか?

一度調べたのにまた同じことを調べるというだけでも時間が無駄になってしまいます。調べたものをきちっと習得するために、まとめることや、よく見るサイトであるならばいっそブックマークしておくこと、ブックマークも分野ごとにわけることなども時間短縮に繋がってきます。

また、ローカル環境でお仕事をする際、フォルダ分けはしっかりしていますか?ある程度自分のPCでも規則性を持ってデータやファイル、画像をまとめておくことで、仕事のしやすさも変わってきますよね。自分のPCだから・・・といって、デスクトップがぐちゃぐちゃになっているPCを見るとやはり効率がいいとは思えません。そういったところを見直すことも効率をあげる一歩だと思います。

ツールを使いやすくカスタマイズしていこう

Webデザイナーとして使うことが多い、Photoshop、Illustrator、Dreamweaverなど、カスタマイズしていますか?こういったツールには拡張機能やプラグインがたくさん用意されています。なかなかそういったところに時間が割けないということもありますが、取り入れることによって感動するほど効率があがるものもたくさんあります。

また、使いやすいように設定を見直すだけでもだいぶ作業効率があがってくるので、ぜひいまいちど見直してみてください。弊社の記事でも便利な使い方をまとめた記事がいくつかあるので紹介しておきます。

初心者向け Photoshopの便利な小技集
イラストレーター入門 最初に知ってると便利なツールの特性と操作方法
Illustratorを効率よく使おう!

各記事であげられているように、Webデザインをしていく中でショートカットキーを覚えるだけでも格段と作業効率があがります。小さなことでも積み重ねることによって、合計の時間がだいぶ短縮できた!なんてこともあるので、細かいことでも少しずつ気を使えるようになるといいですね。

拡張機能や便利ツールを使いこなそう!

あげるとキリがないほど、この業界には効率化を図るツールが転がっています。こんなことできないのかな・・・ということ、調べれば大概のものはそういったツールや拡張機能があったりしますよね?その中でも弊社でも使っていておすすめできるものを過去にもいくつか記事としてあげているので、サイト制作やデザインに関連するものだけではなく、全般として紹介したいと思います。

作業効率化-Google Chromeの拡張機能10選-
デザイナーが使っているGoogleChrome拡張機能
Web制作者向け便利ツールをご紹介!

スケジュール管理・タスク管理をしっかりと

Web制作において重要性の高いスケジュール管理、タスク管理などしっかり行なっていますか?特にサイト制作においては、効率よく仕事をするために、前もってプランをたてることは大変重要なことです。作業をしながら迷うことが少なくなるよう、念入りにプランをたてて仕事に挑みましょう。スケジュール管理・タスク管理については以前も記事で紹介していますが、誰が、何を、いつまでに行うのかということを明確にしていくことで、効率もあがっていくので、しっかりとしていきましょう。

Web制作におけるスケジュール管理

まとめ

いかがでしたでしょうか?与えられたものをそのまま、その通りに使うのは誰でもできることではありますが、お仕事でしている以上、こういった効率面、時間短縮面においても工夫をしていくことが大事だと日々感じています。情報を整理していくことからツールのカスタマイズまで、多岐に渡ることではありますが、効率よくお仕事をすることで必ずクオリティアップに繋がってきますので、ぜひいろんなことにチャレンジしていきましょう!

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年6月3日

デザイナーへ仕事を依頼する時に発注側が意識すること

What the ordering side considers when asking work to the designer

「発注者とクライアントがイメージしているようなデザインに仕上がらない」「デザイナーやディレクター(発注者)とのコミュニケーションがうまくいかない」といった経験はありませんか?今回は、発注者が制作者へ業務を依頼する上での注意点をご紹介していきます。

発注者は制作者へイメージを共有するための画像やラフを用意する

A:「この画像を使って、こんなイメージで作って。」

B:「よくコンビニとかで見かけるようなポスターのイメージでお願い!」

極端な例ですが、発注者から口頭で制作物のイメージや要望を伝えられ、デザインを依頼された側として、Bのパターンは恐らく制作作業を思うように進めにくい状況になってしまいがちです。

発注者からの大まかな制作指示だけで、デザイン構成を考えることが出来るデザイナーも存在するかもしれませんが、発注側と制作者との間に、「この発注者は◎◎なデザインテイストが好きそうだ」「このデザイナーは■■のデザイン構成を得意としているから、この仕事を任せても大丈夫だろう」というような、ある程度の予想が立てられたり、過去に何度か業務のやり取りをした経験が有るのだと感じます。

Bさんの『よく見かけるポスター』を理解できるのはBさんだけです。このまま作業を進めた場合、

制作者「『よく見かけるようなポスター』と言われたから○○をイメージしました」

Bさん「○○のイメージでは無いな…。●●がよかったんだけど」

制作者「(●●がいいなら初めから言ってくれよ…)」

残念ながら制作者が行った作業はムダとなってしまいました。

もちろん、発注者が具体的なデザインイメージや正確な制作指示(説明)ができる訳でもないと思います。制作依頼を側にも、ある程度のヒアリングは必要ですが、いい加減な説明ばかりでは、制作者が一つの案件にかける作業時間も増えてしまいます。

上記のような状況を避けるために、発注者が提出して欲しいイメージに近いデザインをWebや雑誌媒体から探してみたり、簡単な手書きでもいいので自分で書き出してみてはいかがでしょうか?

私たちがおすすめ記事を書き上げる際、掲載するイラスト制作は、個人個人が自社デザイナーに依頼していますが、サンプル画像やラフを用意しています。

Bさんが『よく見かけるポスター』も、イメージするポスターや近しいチラシデザインを見かけた段階で写真に撮っておいてくれれば良かったですね。

もしくは「ここは○系の色で、この位置にはこの文章…。新商品だから写真が目立つように…。」

発注者がヒアリングしたクライアントの要望や、目を惹くと感じるイメージやデザイン案を具体的に書き出してみるのもいいでしょう。そして、実際に依頼も行い作業を行っていく中で、入れ込みたくない、いわゆる「NG要素」があれば、先に制作者へ伝えましょう。

デザイナーが作業をスムーズに行えるよう配慮を行う事で、結果的に制作もスムーズに進むと思います。Webサイト制作であれば、参考となりそうなサイトを見せてあげることもできると思います。

情報を詰め込みすぎないようポイントを絞ることが重要

クラインとが最初にイメージした時の要望から、後々入れ込みたい情報が増えることで、元の構成が薄れていくパターンがあります。

チラシを例に挙げると、最初に用意された素材で、紙面上での素材の配置やレイアウトを設計していた時に、後から情報が増えるとそれまで考えていたバランスが崩れ、調整するのに再度多くの時間を費やしてしまいます。

デザインに入れ込んで欲しいテキスト情報や素材に関しては、可能な限り初期段階で全て用意しておきましょう。

勿論、後からデザインの変更や追加をしたくなってしまうのも、仕方のないことです。当初、出来上がる制作物のイメージが定まっていない場合も多いため、ある程度制作が進んでいくことで見えてくるカタチが有り、続く指示や要望が出てきやすくなります。デザイナーに発注し、作業に入ってしまう前に、クライアントの要望やディレクターが伝えようとしている情報は本当に必要なのかと今一度考えてみましょう。

制作業務にかける時間や工数が多くなることで追加費用がかかってしまうことも場合によっては発生します。どうせなら一つのメディア・宣伝媒体でできる限り多くの情報を発信していきたいと考え、訴求内容や情報を詰め込んでしまいがちですが、結果的に制作作業が遅れてしまったり、結果的に納期が遅れてしまうかも知れません。

発注者は制作の手間を減らすための意識を持つ

今回、デザインを依頼する際の注意点を紹介しました。制作者に業務を依頼する際は「作業者がイメージできるように・趣旨を理解できるように伝えられるか」が、非常に大切なこととなります。制作物がなかなか一回では思ったように完成しないからこそ、できる限り少ない回数でイメージしていた通りのものが作成してもらえるような工夫を行う事。また制作を依頼する側は「相手にしっかり伝えられているのか」を意識してみてください。

 

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年5月31日

ホームページ制作入門 HTMLタグの基本

htmltag-basic

はじめに

はじめてホームページを制作しようとHTMLに触れたとき、どう記述していいのかわからない、タグはどう入れたらいいんだろうかと、最初に思う人が多いと思います。今回はホームページを制作するにあたって必要なHTMLの基礎について書いていこうと思います。

HTMLとは?

そもそも「HTML」とはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略でWebページを制作する為の「基礎言語(マークアップ言語※)」です。基礎言語はプログラミングの言語などを含めるとたくさんの種類がありますがWebでは一般的に「HTML(現在はHTML5)」が使われています。

※視覚表現や文章の構造などを記述する形式言語

HTMLのバージョン

1991年世界で最初のWebサイトが公開されました。ここで使われたのが「Hyper Text(ハイパーテキスト)」と言われる文書と文書を繋げるシステムです。考案した目的は研究員のデータや文献を繋げる(リンクさせる)ことで、そういったWebサイトを作る為の決まりごととして「HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)が作られました。
その後HTML 0から1.0・2.0とバージョンアップしていき2008年にHTML5が発表され、現在は多様なメディアに対応するため、HTML5を使用するように勧告されています。

Webページの構成

基本的なHTMLのページの構成は以下のようになっています。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>タイトル</title>
</head>
<body>
</body>
</html>

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言は「このファイルはHTML文章を記述していきます」という宣言文です。この部分を変えることによりHTMLのバージョンを変更することも可能となっています。記述しているテキストファイルは拡張子をHTMLにして「HTMLファイル」にすることも忘れてはいけません。

 

言語の指定

<html lang=”ja”>

この部分で言語を指定します。“ja”で日本語のWebページになり、“en”で英語のWebページになります。

 

<head>と<body>

<head>にはtitleなどの文章情報要素は入り、<body>には文章を構成する要素が入ります。

 

文字コードの設定

<head>内ににある<meta charset=”UTF-8″>は文字コードの種類を示すもので”UTF-8”以外には”Shift_JIS” ”EUC-JP”などがあります。一般的に使われるのは”UTF-8”が多いです。

 

ページのタイトル

<title>タイトル</title>

ページには必ずタイトルがあります。ページを開いた時にタブに表示される部分です。タイトルは検索する際の要素にもなりますので必ず付けましょう。

 

HTMLタグの基礎

タグには決まりごとがあります。タグとは<>でページの要素名(タグ名)を囲っているもので、基本的なタグの書き方は以下のようになります。
<タグ名>記述内容</タグ名>
<タグ名>は開始タグで</タグ名>は終了タグになります。
開始タグと終了タグで記述を挟みます。終了タグは先頭に「/(スラッシュ)」を記述しますが無い場合もあります。開始タグには必要に応じて「属性」や「属性値」を書き込みます。

<タグ名 属性名=”属性値”>記述内容</タグ名>

例えば
<h1 align=”center”>見出し</h1>
と記述すると

h1=見出し
align=配置指定
center=中央

といった内容になり、見出しをページの中央で配置するという記述になります。

 

HTMLの基礎タグ

まずWebページの構築によく使われているタグをいくつか紹介していきます。

 

テキスト関連タグ

<p>〜</p>

ひとつの文書のかたまり、段落で使用されます

 

<b>〜</b>

文章内で強調したい部分などにに使用されます。このタグで挟まれた文字は太字になります。

 

<strong>〜</strong>

文章内でさらに強調したい部分、重要な部分に使われます。<strong>〜</strong>で挟まれた文章内でさらに<strong>〜</strong>で囲むことで強調の段階をつけることができます。

 

リスト関連タグ

<ul>〜</ul>

配置する文章のリストに番号などの情報を持たせない場合に使用します。

 

<ol>〜</ol>

配置する文章のリストに番号の情報を持たせる場合に使用します。

 

<li>〜</li>

1つのリストを意味するタグで必ず<ul>〜</ul>か<ol>〜</ol>のリストタグに囲まれます。

記述例
<ul>
 <li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

<ol>
 <li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

 

表関連タグ

<table>〜</table>

ひとつの表を作成するタグです。基本的にこの<table>〜</table>タグ内に表の内容の記述をしていきます。

 

<tr>〜</tr>

表の横一列(行)の定義をするタグです。<tr>〜</tr>内に<th>や<td>タグでセルの記述を行います。

 

<th>

表の中の見出しが入ったセルを定義するタグです。

 

<td>

表の中のデータ(通常の文章)が入ったセルを定義するタグです。

記述例
<table>
 <tr>
<th>見出しセルA</th>
<th>見出しセルB</th>
<th>見出しセルC</th>
</tr>
<tr>
<td>セルA1</td>
<td>セルB1</td>
<td>セルC1</td>
</tr>
<tr>
<td>セルA2</td>
<td>セルB2</td>
<td>セルC2</td>
</tr>
<tr>
<td>セルA3</td>
<td>セルB3</td>
<td>セルC3</td>
</tr>
</table>

 

リンクタグ

<a>〜</a>

Webページ内で別のページにリンクさせる時などに使用します。<a>タグにhref属性でURLを指定します。またtarget属性でリンク先の開き方を指定することができます。target属性は “_self” (現在のウィンドウに表示)“_new” (新規ウィンドウ(1つ)に表示)“_blank”(新規ウィンドウ(複数)に表示)などがありますが、 “_blank”が多く使われます。

記述例
<a href=”http://big-mac.jp/” target=”_blank”>リンクテキスト</a>

 

画像タグ

<img>

画像を配置するタグで終了タグを必要としないタグです。src属性で画像のあるURLを記述します。他にwidthやheightで画像サイズの記述を行います。

記述例
<img src=”画像URLなど” alt=”画像の説明テキスト” width=”横幅数値” height=”高さ数値”/>

 

 

最後に

どうでしょうか?私も初めてHTMLを触ってみようとして、最初は理解できるのだろうかと不安でしたが、こうして見るとWebページは細かい部品の集まりで、部品ひとつひとつはタグで簡素に記述され、さらにそのタグに属性を追加することでWebページになっているんだなと思いました。ただ、現在のWebページはHTMLだけでなく、CSSという装飾を主に担当している言語も使って作られているので両方の勉強が必要になります。

 

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年5月30日

CSSとは?〜CSSで図形を描いてみよう〜

lets-draw-a-figure-with-css

コーディングを勉強し始めて、HTMLやCSSについて触れることが多くなりました。触っていくうちに、CSSでこんなことができるのかと驚いたことがあります。例えば、ずっと画像だと思っていたものが、実はCSSで書かれていました。ちょっとした画像なら、CSSで図形を描くことが可能です。今回は、CSSとCSSで図形を描くことについて記事を書いていきたいと思います。

 CSSとは

まず、CSSについてです。
コーディングをしたことがある人や、Webの知識がある人は知っていると思いますが、全く知らない人、初心者にとってはなんだろうと思うはずです。CSSとはCSS(Cascading Style Sheets、カスケーディング・スタイル・シート)と呼ばれる、webページのスタイルを指定するための言語です。HTMLやXHTMLなどで作成されるwebページには、スタイルシートの言語の1つであるCSSが一般的に利用されています。

そして、CSSはHTMLと組み合わせて使用します。HTMLに、各要素を指定し、CSSではそれに対しての装飾を指定します。簡単に説明すると、HTMLで装飾したい場所を指定して、CSSはそれに対して、どのような装飾をするかCSSプロパティで指定するということです。例えば、ウェブページに表示されるフォントの色、画像のサイズや位置、サイトのレイアウト、見出しの部分を作りたいとなれば、h2などで見出し部分を囲み、CSSではフォントサイズや位置などを指定するなど、様々なことができます。

CSSのメリット

CSSを使用することで作業の効率からページの読み込みの速度まで…様々なメリットがあります。

 作業の効率化

CSS1つ作ることができれば、作業の効率化に繋がります。HTMLの場合、そのページにしか対応していません。そのうえ、1つ、1つタグが違うので、修正が来た場合はいちいち1つずつ修正しなければなりません。

しかし、CSSがあれば、ページの縛りがなく、CSSを読み込めば、全て適応されます。修正がきても、CSSさえ修正すれば修正箇所が全てに適応されます。例えば、HTMLの場合、10ページ、h2の文字色を変えたいとなると、10ページ全てのタグを書き換えなければならないところを、CSSならば一発で変更することが可能です。

 ページの軽量化

CSSを使えば、ページの読み込みが早くなり、軽量化されます。HTMLだけだと、コードの記述が複雑になり長くなってしまうため、どうしても読み込みが遅くなってしまいます。ごちゃごちゃした記述だと人から見ても、読むのに時間がかかりますよね。同じように、コンピュータも時間がかかってしまいます。しかし、CSSを使えば、HTMLの記述はすっきりとシンプルにまとめられ、読み込む速度も早くなります。

 色々なデザインができる

HTMLだと装飾は、フォントサイズ、色の変更、フォント、を変えるくらいでした。しかしCSSだと少し凝ったデザインをすることができます。

例えば、CSSで簡単な装飾を作れたり、リンクに装飾をつけたりなど・・・HTMLでは表現しきれなかったことができます。より凝ったデザインのwebサイトを作ることが可能です。

SEOに強い

CSSとHTMLを分離させたことにより、SEOに好まれる記述になり、検索エンジンにヒットしやすくなります。ブログが検索にヒットしやすいのもシンプルな記述をSEOが好むためです。HTMLとCSSを分離させるだけなので、初心者でも簡単にできますが、カスタマイズには専門の知識が必要となるので、ただ分離しただけではSEOに強くなるとはいえません。

メディアごとに表示スタイルの変更が可能

CSSはコンピュータのディスプレイだけでなく、印刷用や、携帯機器、テレビ、音声、点字などのメディアスタイルにも出力して利用できることを想定されています。メディアに左右されず、対応することができます。
次にデメリットです。メリットの多いCSSですが、少し欠点があります。HTMLより登場の遅かったCSSは、対応していないブラウザがあるということです。現在あるブラウザの中で完全に対応しているというものはありません。

しかし、HTMLとCSSは分離されているため、完全に表示されないということはありません。CSSはメリットがほとんどですが、少し欠点もあることが分かりました。次はCSSで図形を描く方法です。

CSSで図形を描く

CSSでは簡単な図形ならば作成することが可能です。

CSSで描くメリット

CSSで図形を描くメリットはいくつかあります。まず、色やサイズの指定が簡単になります。画像と違い、CSSに直接、数値を指定しているためいちいち画像を書きださなくても簡単に設定することができます。修正が来た際に、いちいち画像を書き換えるのは時間がかかりますよね。CSSなら値を変えるだけなので一発で変更が可能です。

次にスライスやアセットの手間が省けます。ここの形やっぱり丸じゃなく三角にしてほしい色も変えてほしいと修正が来た際には、一度編集ソフトに戻って作り直してから、更に書き出さなければなりません。とても手間がかかります。

しかし、CSSなら先ほどと同じように値を変えるだけなのでそこまで手間がかかりません。そして、画像の容量を減らすことができます。画像で書き込んでいるわけではないので、サイトが軽量化されます。
デメリットとしては、先ほどCSSのデメリットであったように、一部の古いブラウザだと表示されないことです。

簡単な図形を描いてみよう

簡単な図形を描いてみます。まず基本の図形からサンプルコードと一緒に紹介します。

四角
CSS
.square {
width: 100px;
height: 100px;
background: black;
}

HTML
<div class=”square”></div>

これは、HTMLで四角の要素を指定し、CSSで装飾を指定したものです。
widthは幅の指定、heightが高さの指定です。この場合、widthとheightも100pxの指定なので100×100の正方形が作図されます。そして、backgroundは背景の色を指定します。この場合は、blackなので、真っ黒の正方形が出来たはずです。

三角形
CSS
.triangle {
width: 0;
height: 0;
border-top: 30px solid black;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid tranparent;
}

HTML
<div class=”triangle”></div>

少し複雑な記述となりました。下向きの三角を表示したい場合のコードとなります。
widthとheigthを0にすることにより、ボックスの要素を無くします。ボーダーのみとなったところを、上のみ表示させることにより、下向き三角形を作図することが出来ます。topは上、rightは右、leftは左 bottomは下の部分をしています。transparentはその要素を投下することが出来ます。この場合は、左右下を透過させることにより、上部分のみ三角を表示させたということで、下向き三角形を作図できたということになります。もう少し応用すれば、矢印を作図出来たり、簡単なシェイプでイラストを描くことも可能です。

また、少し難しくなりますが、疑似要素を使えば、更に複雑な図形を作図できる幅が広がります。よく聞くものは、before、after擬似要素などです。先ほど説明した矢印の作図にも使われます。

まとめ

いかがでしたでしょうか。CSSとCSSで作成される図形のメリットとデメリット。うまく使い分けていくことができれば、デザインの幅が広がるはずです。様々なサイトで勉強して、複雑な図形を作れるように勉強していきたいと思います。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年5月27日

デザイン修正を減らすためにデザイナーができること

デザイン修正を減らすためにデザイナーができること

修正の多いデザイナーと少ないデザイナーの違いってなんだと思いますか?
もちろん、センスや技術面のレベルの問題もありますが、実は、それよりも重要なことがあるのです。
この記事を読み終える頃には、それがなんなのか、きっと分かるはずです。

今回の記事では、

・なぜ修正が生まれるのか

・修正を減らすためにデザイナーができること

この2点に焦点を当てて、お伝えしていこうと思います。

なぜ修正が生まれるのか

デザインイメージの相違・伝達ミス

二人の人間が直接会って話をしても、言葉の意味の履き違え捉え方の違い、単純な聞き間違い・言い間違いによる勘違いは起こってしまうもので、イメージの相違をゼロにするのは至難の業です。発注者(クライアント様)と制作側(デザイナー)の間に人が入れば入るほど、イメージの相違は大きくなり、まるで伝言ゲームのようになってしまい、当然、デザイナーが作るものが、クライアント様が求めているものからかけ離れてしまう場合が多々あります。

クライアント様都合の修正

要望のぶれ

クライアント様は、大きく3パターンに分けることが出来ると考えています。
(1)デザインに対するこだわりがあまりなく、ある程度デザインを任せてくれるクライアント様。
(2)デザインに対するこだわりが強く、完成イメージがある程度固まっているクライアント様。
(3)デザインに対するこだわりが強く、完成イメージが固まっていないクライアント様。

(1)(2)(3)の順で、修正の数が多くなります。 (2)に関しては、イメージが固まっている分、修正指示が明確でぶれません。 (3)は、イメージが固まっておらずふわふわとしているので、 「Aがいいと思ったけど、やっぱりBにしてみてほしい!」「Bにしてもらったけど、やっぱ変だからAに戻して。それかCでやってみて!」という感じの修正依頼が来ます。そして、言われるがままに対応した結果が、「なんか違う…」 「なんか」って何でしょうね…

コンテンツの追加・削除

ある程度、形になってきて納品までもう少しというときに「この文言追加してください、わりと目立たせてほしいです。」 しかも結構な量。 Webサイトの場合は、セクションを増やすなりして入れ込むことが出来ることが思いますが、 チラシやバナーなど、サイズが決まっていてその中に収めなくてはいけない場合の、コンテンツ追加は大変です。 逆に、ぴったり綺麗に収まっていたのに「ここの写真、要らない」という場合も、ぽっかり隙間ができてしまいます。

デザイナー都合の修正

デザイナーの技量不足

クライアント様の要望は理解できているけど、それを具現化する技術やセンスがない。 これは、言うまでもなくデザイナー都合の修正です。

単純ミス

誤字脱字・サイズ間違いなど、単純な確認不足のために起こる修正です。 校正確認を、見慣れてしまっている自分以外の人にしてもらうことで、ある程度防ぐことは出来ますが、自分でも確認出しの前に今一度確認するようにしましょう。

デザイン修正を減らすために出来ること

本当に必要な修正かどうかを見極める

「ここの色、青にしてください。」という修正指示をいただいたとき、あなたはどうしますか?
何も考えず指示通りに対応してしまうのが一番楽ですが、私の場合は、まず第一に「青にする理由はなんだろう?」と考えます。 そして、しばらくして青にした方が良い理由が見つかるときと、どうしても見つからないときがあります。 見つかったときは、すぐに対応しますが、見つからなかったときは理由を聞くようにします。 理由を聞いて、納得できれば対応しますが、どうしても納得のいかないときは、「◯◯だから青にしないほうが良い」という、理由付きの提案をします。

一般的に、クライアント様はデザインに関しては素人の場合がほとんど。 ときにはデザイン的によろしくない修正指示を出してしまうのは当たり前のことです。 そこで、言われた通りに作業するのか、クライアント様のためにも提案としてこの修正は行わない方がいいと伝えるかで、「前の方が良かった」と言われてしまい、修正が発生することを防ぐことが出来ます。

制作に取り掛かる前に、最低限確認しておきたいこと4つ

要素の優先順位

構成案の要素それぞれ(どんな小さな要素にも全て)に、優先順位をつけます。
(例 チラシの場合)
タイトル部分は1番目立たせたいので60%
キャッチは2番目に目立たせたいので20%
写真は3番目に目立たせたいので、10%
2枚ある写真を7:3の割合で 本文は5%、クーポンも5% というような感じです。
ここをしっかりさせることで、その制作物の目的(何のために、誰のために作られるものなのか)を正確に把握できますし、レイアウトの手助けになります。

色を決めるときのポイントは2つ。 「ユーザーに与えたい印象・コンセプトを定めてから決めること」と「色は具体的に」です。
チラシを10秒ほど流し読みした人に、どういう印象を抱いてほしいか、文章で表してみます。
(例:カフェの場合)
・ナチュラルな感じで子供連れでも安心、という印象→ベージュ、アースカラー
・都会っぽい雰囲気で、少々敷居が高そう、という印象→黒
印象を表す文章から連想されるカラーを使うことで、与えたい印象をそのままユーザーに与えることが出来ます。
青と一言で言っても、様々な青があります。 「深海のような濃い青」「夏の晴れた空のような爽やかなで青」「緑がかった、ミントのような青」など具体的にすることが大事です。 また、色はデザイナーにおまかせでという場合でも、せめてNGカラーだけは確認しておきましょう。

フォント

高級食材のサイトなのに、フォントがポップな丸ゴシックだったり、若い女性向けの可愛い雑貨のサイトが行書体だったら…想像しただけで違和感丸出しですよね。 フォントは、伝えたいイメージやターゲットとなるユーザーに合わせて決めましょう。

フォント選びについて、過去に書かせていただいた記事があるのでご参考までに
今日から使えるフォント選びのルール

参考デザイン

ボタンのデザイン、メインビューの文字のデザイン、アイコンのデザインなど、部分ごとに参考サイトのURLと参考箇所のキャプチャ画像を用意してもらうと、イメージに近いデザインに仕上げることができます。 先述した色やフォントに加え、ジャンプ率(要素同士の大きさの比率)なども、参考サイトを立てることで、クライアント様とデザイナーのイメージのずれを最小限に抑えることが出来ます。

参考デザインを探す際には、クオリティの高いデザインを集めている下記のようなサイトから探すのがおすすめです。
▼印刷物全般(ポスター・ロゴ・名刺etc)
ピンタレスト
▼Webサイト
Web Design Clip
▼バナー
レトロバナー

上記の4つの最低限確認しておきたいことは、「制作案件に取り掛かる前」に把握しておくことで、デザイナーはデザインのイメージが格段にしやすくなり、修正回数も減る上、制作時間も短縮できます。

まとめ

制作会社の体制によっては、デザイナーとクライアント様とが直接やり取りする機会が少なく、大量の修正が来ても仕方ない…と諦めているデザイナーも多いのではないかなと思います。ですが、 制作に取り掛かる前の準備をしっかりすること、何かひっかかることは早めにディレクション担当者に確認すること、などデザイナーにも修正を減らすために出来ることはたくさんあります。

また、今回ご紹介したような知識を持っておくだけで、WebデザイナーからWebディレクターに転職した際に、戸惑うことも少しは減るかと思います。
意味のあるデザイン修正は、デザイナーを技術面では勿論のこと、人としても成長させてくれます。
意味のあるデザイン修正を行い、よりよいモノをより多く残せるデザイナーになりたいですね。

このエントリーをはてなブックマークに追加
メルマガ登録